Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from Jun 14, 2022
22 changes: 22 additions & 0 deletions docs/config/index.md
Expand Up @@ -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`
Expand Down
3 changes: 3 additions & 0 deletions packages/vitest/src/defaults.ts
Expand Up @@ -70,6 +70,9 @@ const config = {
ui: false,
uiBase: '/__vitest__/',
open: true,
css: {
include: [/\.module\./],
},
coverage: coverageConfigDefaults,
fakeTimers: fakeTimersDefaults,
maxConcurrency: 5,
Expand Down
4 changes: 4 additions & 0 deletions packages/vitest/src/node/config.ts
Expand Up @@ -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
}
34 changes: 34 additions & 0 deletions 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 ''
},
}
}
2 changes: 2 additions & 0 deletions packages/vitest/src/node/plugins/index.ts
Expand Up @@ -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
Expand Down Expand Up @@ -144,6 +145,7 @@ export async function VitestPlugin(options: UserConfig = {}, ctx = new Vitest())
EnvReplacerPlugin(),
MocksPlugin(),
GlobalSetupPlugin(ctx),
CSSEnablerPlugin(ctx),
options.ui
? await UIPlugin()
: null,
Expand Down
11 changes: 11 additions & 0 deletions packages/vitest/src/types/config.ts
Expand Up @@ -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
Expand Down