From f61fd98c6efb67f46dd712ce8c7ac6d1bc5ca341 Mon Sep 17 00:00:00 2001 From: thebanjomatic Date: Mon, 14 Aug 2023 17:33:32 -0600 Subject: [PATCH 1/3] fix: don't mock css-module if inline is specified As per the vite docs here: https://vitejs.dev/guide/features.html#disabling-css-injection-into-the-page Using the 'inline' query parameter for CSS has different semantics than regular css imports and the expected return value should be a string as the default export. --- .../vitest/src/node/plugins/cssEnabler.ts | 13 +++++++++++- test/css/test/process-inline.spec.ts | 21 +++++++++++++++++++ test/css/testing.mjs | 1 + 3 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 test/css/test/process-inline.spec.ts diff --git a/packages/vitest/src/node/plugins/cssEnabler.ts b/packages/vitest/src/node/plugins/cssEnabler.ts index 8a85f1783acd..a45fea4b9bd9 100644 --- a/packages/vitest/src/node/plugins/cssEnabler.ts +++ b/packages/vitest/src/node/plugins/cssEnabler.ts @@ -16,6 +16,17 @@ function isCSSModule(id: string) { return cssModuleRE.test(id) } +// inline css requests are expected to just return the +// string content directly and not the proxy module +function isInline(id: string) { + const queryStart = id.indexOf('?'); + if (queryStart === -1) { + return false; + } + const queryParts = id.substring(queryStart + 1).split('&'); + return queryParts.some(part => part === 'inline'); +} + function getCSSModuleProxyReturn(strategy: CSSModuleScopeStrategy, filename: string) { if (strategy === 'non-scoped') return 'style' @@ -55,7 +66,7 @@ export function CSSEnablerPlugin(ctx: { config: ResolvedConfig }): VitePlugin[] if (!isCSS(id) || shouldProcessCSS(id)) return - if (isCSSModule(id)) { + if (isCSSModule(id) && !isInline(id)) { // return proxy for css modules, so that imported module has names: // styles.foo returns a "foo" instead of "undefined" // we don't use code content to generate hash for "scoped", because it's empty diff --git a/test/css/test/process-inline.spec.ts b/test/css/test/process-inline.spec.ts new file mode 100644 index 000000000000..9b1428586395 --- /dev/null +++ b/test/css/test/process-inline.spec.ts @@ -0,0 +1,21 @@ +import { describe, expect, test } from 'vitest' +import { useRemoveStyles } from './utils' + +describe('processing inline css', () => { + useRemoveStyles() + + test('doesn\'t apply css', async () => { + await import('../src/App.module.css?inline') + + const element = document.createElement('div') + element.className = 'main' + const computed = window.getComputedStyle(element) + expect(computed.display, 'css is not processed').toBe('block') + }) + + test('returns a string', async () => { + const { default: style } = await import('../src/App.module.css?inline') + expect(typeof style).toBe('string'); + console.log(style); + }) +}) diff --git a/test/css/testing.mjs b/test/css/testing.mjs index 3a4f58b0ee89..32512292036b 100644 --- a/test/css/testing.mjs +++ b/test/css/testing.mjs @@ -4,6 +4,7 @@ const configs = [ ['test/default-css', {}], ['test/process-css', { include: [/App\.css/] }], ['test/process-module', { include: [/App\.module\.css/] }], + ['test/process-inline', { include: [/App\.module\.css/] }], ['test/scope-module', { include: [/App\.module\.css/], modules: { classNameStrategy: 'scoped' } }], ['test/non-scope-module', { include: [/App\.module\.css/], modules: { classNameStrategy: 'non-scoped' } }], ] From b488dd3747629e34b6f535002b967c1e18f0d7fa Mon Sep 17 00:00:00 2001 From: Adam Hines Date: Tue, 15 Aug 2023 09:10:17 -0600 Subject: [PATCH 2/3] chore: applying review feedback --- packages/vitest/src/node/plugins/cssEnabler.ts | 8 ++------ test/css/testing.mjs | 6 +++--- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/vitest/src/node/plugins/cssEnabler.ts b/packages/vitest/src/node/plugins/cssEnabler.ts index a45fea4b9bd9..ad190f4af383 100644 --- a/packages/vitest/src/node/plugins/cssEnabler.ts +++ b/packages/vitest/src/node/plugins/cssEnabler.ts @@ -7,6 +7,7 @@ import { toArray } from '../../utils' const cssLangs = '\\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)' const cssLangRE = new RegExp(cssLangs) const cssModuleRE = new RegExp(`\\.module${cssLangs}`) +const cssInlineRE = /[?&]inline(&|$)/ function isCSS(id: string) { return cssLangRE.test(id) @@ -19,12 +20,7 @@ function isCSSModule(id: string) { // inline css requests are expected to just return the // string content directly and not the proxy module function isInline(id: string) { - const queryStart = id.indexOf('?'); - if (queryStart === -1) { - return false; - } - const queryParts = id.substring(queryStart + 1).split('&'); - return queryParts.some(part => part === 'inline'); + return cssInlineRE.test(id); } function getCSSModuleProxyReturn(strategy: CSSModuleScopeStrategy, filename: string) { diff --git a/test/css/testing.mjs b/test/css/testing.mjs index 32512292036b..0a1872737ce6 100644 --- a/test/css/testing.mjs +++ b/test/css/testing.mjs @@ -3,15 +3,15 @@ import { startVitest } from 'vitest/node' const configs = [ ['test/default-css', {}], ['test/process-css', { include: [/App\.css/] }], - ['test/process-module', { include: [/App\.module\.css/] }], - ['test/process-inline', { include: [/App\.module\.css/] }], + [['test/process-module', 'test/process-inline'], { include: [/App\.module\.css/] }], ['test/scope-module', { include: [/App\.module\.css/], modules: { classNameStrategy: 'scoped' } }], ['test/non-scope-module', { include: [/App\.module\.css/], modules: { classNameStrategy: 'non-scoped' } }], ] async function runTests() { for (const [name, config] of configs) { - await startVitest('test', [name], { + const names = Array.isArray(name) ? name : [name]; + await startVitest('test', names, { run: true, css: config, update: false, From 1352a7ff1eaae81fcc3a385cd716b54c9649ccb0 Mon Sep 17 00:00:00 2001 From: Adam Hines Date: Tue, 15 Aug 2023 09:28:02 -0600 Subject: [PATCH 3/3] chore: fixing lint issues --- packages/vitest/src/node/plugins/cssEnabler.ts | 2 +- test/css/test/process-inline.spec.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/vitest/src/node/plugins/cssEnabler.ts b/packages/vitest/src/node/plugins/cssEnabler.ts index ad190f4af383..4bf464fc298f 100644 --- a/packages/vitest/src/node/plugins/cssEnabler.ts +++ b/packages/vitest/src/node/plugins/cssEnabler.ts @@ -20,7 +20,7 @@ function isCSSModule(id: string) { // inline css requests are expected to just return the // string content directly and not the proxy module function isInline(id: string) { - return cssInlineRE.test(id); + return cssInlineRE.test(id) } function getCSSModuleProxyReturn(strategy: CSSModuleScopeStrategy, filename: string) { diff --git a/test/css/test/process-inline.spec.ts b/test/css/test/process-inline.spec.ts index 9b1428586395..35ff2e7474e4 100644 --- a/test/css/test/process-inline.spec.ts +++ b/test/css/test/process-inline.spec.ts @@ -15,7 +15,6 @@ describe('processing inline css', () => { test('returns a string', async () => { const { default: style } = await import('../src/App.module.css?inline') - expect(typeof style).toBe('string'); - console.log(style); + expect(typeof style).toBe('string') }) })