From 24998285595e9f35b72dcf7a32880698d803dda4 Mon Sep 17 00:00:00 2001 From: Vladimir Sheremet Date: Fri, 18 Nov 2022 12:56:26 +0100 Subject: [PATCH] docs: clarify css processing --- docs/config/index.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/docs/config/index.md b/docs/config/index.md index f02cdc6d7475..877b2e36b113 100644 --- a/docs/config/index.md +++ b/docs/config/index.md @@ -763,7 +763,7 @@ Show heap usage after each test. Useful for debugging memory leaks. ### css -- **Type**: `boolean | { include?, exclude? }` +- **Type**: `boolean | { include?, exclude?, modules? }` Configure if CSS should be processed. When excluded, CSS files will be replaced with empty strings to bypass the subsequent processing. CSS Modules will return a proxy to not affect runtime. @@ -774,6 +774,10 @@ Configure if CSS should be processed. When excluded, CSS files will be replaced RegExp pattern for files that should return actual CSS and will be processed by Vite pipeline. +:::tip +To process all CSS files, use `/.+/`. +::: + #### css.exclude - **Type**: `RegExp | RegExp[]` @@ -791,11 +795,15 @@ RegExp pattern for files that will return an empty CSS file. - **Type**: `'stable' | 'scoped' | 'non-scoped'` - **Default**: `'stable'` -If you decide to process CSS files, you can configure if class names inside CSS modules should be scoped. By default, Vitest exports a proxy, bypassing CSS Modules processing. You can choose one of the options: +If you decide to process CSS files, you can configure if class names inside CSS modules should be scoped. You can choose one of the options: - `stable`: class names will be generated as `_${name}_${hashedFilename}`, which means that generated class will stay the same, if CSS content is changed, but will change, if the name of the file is modified, or file is moved to another folder. This setting is useful, if you use snapshot feature. -- `scoped`: class names will be generated as usual, respecting `css.modules.generateScopeName` method, if you have one. By default, filename will be generated as `_${name}_${hash}`, where hash includes filename and content of the file. -- `non-scoped`: class names will stay as they are defined in CSS. +- `scoped`: class names will be generated as usual, respecting `css.modules.generateScopeName` method, if you have one and CSS processing is enabled. By default, filename will be generated as `_${name}_${hash}`, where hash includes filename and content of the file. +- `non-scoped`: class names will not be hashed. + +::: warning +By default, Vitest exports a proxy, bypassing CSS Modules processing. If you rely on CSS properties on your classes, you have to enable CSS processing using `include` option. +::: ### maxConcurrency