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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 8 commits into from Jun 14, 2022
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6beb3b5
feat: add processCss config option, don't process CSS by default
sheremet-va Jun 12, 2022
f4fdac0
refactor: css option is aligned with other simmilar options
sheremet-va Jun 13, 2022
775f72f
refactor: change is css regexp
sheremet-va Jun 13, 2022
a4b630a
refactor: cleanup
sheremet-va Jun 13, 2022
08584ce
Update docs/config/index.md
sheremet-va Jun 13, 2022
19436f8
Merge branch 'main' of https://github.com/vitest-dev/vitest into feat…
sheremet-va Jun 14, 2022
0227101
Merge branch 'feat/process-css' of github.com:sheremet-va/vitest into…
sheremet-va Jun 14, 2022
026cbf5
refactor: reverse filters in css
sheremet-va Jun 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 11 additions & 0 deletions docs/config/index.md
View file
Open in desktop
Expand Up @@ -533,3 +533,14 @@ Vitest will not fail, if no tests will be found.
- **Default**: `false`

Show heap usage after each test. Useful for debugging memory leaks.

### processCss

- **Type**: `boolen | RegExp[]`
- **Default**: `[/\.module\./]`

Configure if CSS should be processed.

If regexp is provided, it will transform matched files.

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.
2 changes: 2 additions & 0 deletions packages/vitest/src/node/config.ts
View file
Open in desktop
Expand Up @@ -158,5 +158,7 @@ export function resolveConfig(
if (resolved.changed)
resolved.passWithNoTests ??= true

resolved.processCss ??= [/\.module\./]

return resolved
}
26 changes: 26 additions & 0 deletions packages/vitest/src/node/plugins/cssEnabler.ts
View file
Open in desktop
@@ -0,0 +1,26 @@
import type { Plugin as VitePlugin } from 'vite'
import type { Vitest } from '../core'

const isCss = (id: string) => {
sheremet-va marked this conversation as resolved.
Show resolved Hide resolved
return /\.(css|styl|less|sass|scss)$/.test(id)
sheremet-va marked this conversation as resolved.
Show resolved Hide resolved
}

export function CSSEnablerPlugin(ctx: Vitest): VitePlugin {
const shouldProcess = (id: string) => {
if (!isCss(id))
return true
const { processCss } = ctx.config
if (typeof processCss === 'boolean')
return processCss
return processCss.some(re => re.test(id))
}

return {
name: 'vitest:css-enabler',
enforce: 'pre',
transform(code, id) {
if (!shouldProcess(id))
return ''
},
}
}
2 changes: 2 additions & 0 deletions packages/vitest/src/node/plugins/index.ts
View file
Open in desktop
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 @@ -138,6 +139,7 @@ export async function VitestPlugin(options: UserConfig = {}, ctx = new Vitest())
EnvReplacerPlugin(),
MocksPlugin(),
GlobalSetupPlugin(ctx),
CSSEnablerPlugin(ctx),
options.ui
? await UIPlugin()
: null,
Expand Down
9 changes: 9 additions & 0 deletions packages/vitest/src/types/config.ts
View file
Open in desktop
Expand Up @@ -344,6 +344,15 @@ export interface InlineConfig {
* Return `false` to ignore the log.
*/
onConsoleLog?: (log: string, type: 'stdout' | 'stderr') => false | void

/**
* Should css be processed.
*
* If regexp is provided, it will transform matched files.
sheremet-va marked this conversation as resolved.
Show resolved Hide resolved
*
* @default [/\.module\./]
*/
processCss?: boolean | RegExp[]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks like a great DX improvement. About naming, given that there is already a css option in Vite, maybe this new option could be aligned with it:

  css: {
    include: RegExp | RegExp[], // @default [/\.module\./]
    exclude: RegExp | RegExp[]
  }

Removing the process in the name could be helpful if there are other CSS options added later. Or maybe css: boolean | { include, exclude } if you still want users to use css: true

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think if we want to add more features to css, they should be added to Vite’s options :)

About the object - I think yes, we can align it with other similar options.

}

export interface UserConfig extends InlineConfig {
Expand Down