Skip to content

Commit

Permalink
fix(css): don't mock css-module if inline is specified (#3952)
Browse files Browse the repository at this point in the history
Co-authored-by: Adam Hines <ahines@factset.com>
  • Loading branch information
thebanjomatic and Adam Hines authored Aug 15, 2023
1 parent 5a07cff commit 3891d05
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 3 deletions.
9 changes: 8 additions & 1 deletion packages/vitest/src/node/plugins/cssEnabler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -16,6 +17,12 @@ 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) {
return cssInlineRE.test(id)
}

function getCSSModuleProxyReturn(strategy: CSSModuleScopeStrategy, filename: string) {
if (strategy === 'non-scoped')
return 'style'
Expand Down Expand Up @@ -55,7 +62,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
Expand Down
20 changes: 20 additions & 0 deletions test/css/test/process-inline.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
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')
})
})
5 changes: 3 additions & 2 deletions test/css/testing.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +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-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,
Expand Down

0 comments on commit 3891d05

Please sign in to comment.