From 4743748ede30c2c16a2674d7a0d0f8c2bda4c29b Mon Sep 17 00:00:00 2001 From: Vladimir Sheremet Date: Fri, 5 Aug 2022 18:28:51 +0300 Subject: [PATCH] feat: add option to keep class names for css modules --- packages/vitest/src/node/config.ts | 5 +++- .../vitest/src/node/plugins/cssEnabler.ts | 26 ++++++++++++++++++- packages/vitest/src/types/config.ts | 5 +++- 3 files changed, 33 insertions(+), 3 deletions(-) diff --git a/packages/vitest/src/node/config.ts b/packages/vitest/src/node/config.ts index 866baf16b082..9898de672d35 100644 --- a/packages/vitest/src/node/config.ts +++ b/packages/vitest/src/node/config.ts @@ -185,8 +185,11 @@ export function resolveConfig( resolved.passWithNoTests ??= true resolved.css ??= {} - if (typeof resolved.css === 'object') + if (typeof resolved.css === 'object') { resolved.css.include ??= [/\.module\./] + resolved.css.modules ??= {} + resolved.css.modules.mangleClassName ??= false + } resolved.cache ??= { dir: '' } if (resolved.cache) diff --git a/packages/vitest/src/node/plugins/cssEnabler.ts b/packages/vitest/src/node/plugins/cssEnabler.ts index 6afa2548737b..b42b3f71417d 100644 --- a/packages/vitest/src/node/plugins/cssEnabler.ts +++ b/packages/vitest/src/node/plugins/cssEnabler.ts @@ -4,11 +4,16 @@ import type { Vitest } from '../core' const cssLangs = '\\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)' const cssLangRE = new RegExp(cssLangs) +const cssModuleRE = new RegExp(`\\.module${cssLangs}`) const isCSS = (id: string) => { return cssLangRE.test(id) } +const isCSSModule = (id: string) => { + return cssModuleRE.test(id) +} + export function CSSEnablerPlugin(ctx: Vitest): VitePlugin { const shouldProcessCSS = (id: string) => { const { css } = ctx.config @@ -21,14 +26,33 @@ export function CSSEnablerPlugin(ctx: Vitest): VitePlugin { return false } + const shouldReturnProxy = (id: string) => { + const { css } = ctx.config + if (typeof css === 'boolean') + return css + if (!isCSSModule(id)) + return false + return !css.modules?.mangleClassName + } + return { name: 'vitest:css-enabler', enforce: 'pre', transform(code, id) { if (!isCSS(id)) return - if (!shouldProcessCSS(id)) + if (!shouldProcessCSS(id)) { return { code: '' } + } + else if (shouldReturnProxy(id)) { + // TODO parse and check if object actually exists + const code = `export default new Proxy(Object.create(null), { + get(_, style) { + return style; + }, + })` + return { code } + } }, } } diff --git a/packages/vitest/src/types/config.ts b/packages/vitest/src/types/config.ts index a78cf232976d..0d5c3a6befce 100644 --- a/packages/vitest/src/types/config.ts +++ b/packages/vitest/src/types/config.ts @@ -370,11 +370,14 @@ export interface InlineConfig { * * When excluded, the CSS files will be replaced with empty strings to bypass the subsequent processing. * - * @default { include: [/\.module\./] } + * @default { include: [/\.module\./], modules: { mangleClassName: false } } */ css?: boolean | { include?: RegExp | RegExp[] exclude?: RegExp | RegExp[] + modules?: { + mangleClassName?: boolean + } } /** * A number of tests that are allowed to run at the same time marked with `test.concurrent`.