feat: add css config option, don't process CSS by default (#1467)

* feat: add processCss config option, don't process CSS by default

* refactor: css option is aligned with other simmilar options

* refactor: change is css regexp

* refactor: cleanup

* Update docs/config/index.md

Co-authored-by: Bartosz Gościński <bargosc@gmail.com>

* refactor: reverse filters in css

Co-authored-by: Bartosz Gościński <bargosc@gmail.com>

docs/config/index.md

@@ -534,6 +534,28 @@ Vitest will not fail, if no tests will be found.
 
 Show heap usage after each test. Useful for debugging memory leaks.
 
+### css
+
+- **Type**: `boolean | { include?, exclude? }`
+
+Configure if CSS should be processed. When excluded, CSS files will be replaced with empty strings to bypass the subsequent processing.
+
+By default, processes only CSS Modules, because it affects runtime. JSDOM and Happy DOM don't fully support injecting CSS, so disabling this setting might help with performance.
+
+#### css.include
+
+- **Type**: `RegExp | RegExp[]`
+- **Default**: `[/\.module\./]`
+
+RegExp pattern for files that should return actual CSS and will be processed by Vite pipeline.
+
+#### css.exclude
+
+- **Type**: `RegExp | RegExp[]`
+- **Default**: `[]`
+
+RegExp pattern for files that will return en empty CSS file.
+
 ### maxConcurrency
 
 - **Type**: `number`

packages/vitest/src/defaults.ts

@@ -70,6 +70,9 @@ const config = {
   ui: false,
   uiBase: '/__vitest__/',
   open: true,
+  css: {
+    include: [/\.module\./],
+  },
   coverage: coverageConfigDefaults,
   fakeTimers: fakeTimersDefaults,
   maxConcurrency: 5,

packages/vitest/src/node/config.ts

@@ -175,5 +175,9 @@ export function resolveConfig(
   if (resolved.changed)
     resolved.passWithNoTests ??= true
 
+  resolved.css ??= {}
+  if (typeof resolved.css === 'object')
+    resolved.css.include ??= [/\.module\./]
+
   return resolved
 }

packages/vitest/src/node/plugins/cssEnabler.ts

@@ -0,0 +1,34 @@
+import type { Plugin as VitePlugin } from 'vite'
+import { toArray } from '../../utils'
+import type { Vitest } from '../core'
+
+const cssLangs = '\\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)'
+const cssLangRE = new RegExp(cssLangs)
+
+const isCSS = (id: string) => {
+  return cssLangRE.test(id)
+}
+
+export function CSSEnablerPlugin(ctx: Vitest): VitePlugin {
+  const shouldProcessCSS = (id: string) => {
+    const { css } = ctx.config
+    if (typeof css === 'boolean')
+      return css
+    if (toArray(css.exclude).some(re => re.test(id)))
+      return false
+    if (toArray(css.include).some(re => re.test(id)))
+      return true
+    return false
+  }
+
+  return {
+    name: 'vitest:css-enabler',
+    enforce: 'pre',
+    transform(code, id) {
+      if (!isCSS(id))
+        return
+      if (!shouldProcessCSS(id))
+        return ''
+    },
+  }
+}

packages/vitest/src/node/plugins/index.ts

@@ -7,6 +7,7 @@ import { Vitest } from '../core'
 import { EnvReplacerPlugin } from './envRelacer'
 import { GlobalSetupPlugin } from './globalSetup'
 import { MocksPlugin } from './mock'
+import { CSSEnablerPlugin } from './cssEnabler'
 
 export async function VitestPlugin(options: UserConfig = {}, ctx = new Vitest()): Promise<VitePlugin[]> {
   let haveStarted = false
@@ -144,6 +145,7 @@ export async function VitestPlugin(options: UserConfig = {}, ctx = new Vitest())
     EnvReplacerPlugin(),
     MocksPlugin(),
     GlobalSetupPlugin(ctx),
+    CSSEnablerPlugin(ctx),
     options.ui
       ? await UIPlugin()
       : null,

packages/vitest/src/types/config.ts

@@ -345,6 +345,17 @@ export interface InlineConfig {
    */
   onConsoleLog?: (log: string, type: 'stdout' | 'stderr') => false | void
 
+  /**
+   * Indicates if CSS files should be processed.
+   *
+   * When excluded, the CSS files will be replaced with empty strings to bypass the subsequent processing.
+   *
+   * @default { include: [/\.module\./] }
+   */
+  css?: boolean | {
+    include?: RegExp | RegExp[]
+    exclude?: RegExp | RegExp[]
+  }
   /**
    * A number of tests that are allowed to run at the same time marked with `test.concurrent`.
    * @default 5