diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts index ad5d9f344813e4..5a670f0040c054 100644 --- a/packages/playground/css/__tests__/css.spec.ts +++ b/packages/playground/css/__tests__/css.spec.ts @@ -1,5 +1,3 @@ -import fs from 'fs' -import path from 'path' import { editFile, findAssetFile, @@ -7,7 +5,7 @@ import { getColor, isBuild, removeFile, - testDir, + readFile, untilUpdated } from '../../testUtils' @@ -334,7 +332,20 @@ test('Url separation', async () => { } }) -test('inlined', async () => { +test('special query', async () => { // should not insert css - expect(await getColor('.inlined')).toBe('black') + expect(await getColor('.url')).toBe('black') + expect(await getColor('.raw')).toBe('black') + expect(await getColor('.inline')).toBe('black') + + const source = readFile('special-query.scss') + + expect(await page.textContent('.url-code')).toMatch( + isBuild + ? `data:null;base64,${Buffer.from(source).toString( + 'base64' + )}` + : '/special-query.scss' + ) + expect(await page.textContent('.raw-code')).toMatch(source) }) diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html index 7a79bb1629f989..eb7190fa7cef37 100644 --- a/packages/playground/css/index.html +++ b/packages/playground/css/index.html @@ -102,8 +102,14 @@
Inlined import - this should NOT be red.
- +?url import - this should NOT be green
+ + +?raw import - this should NOT be green
+ + +?inline import - this should NOT be green
+ diff --git a/packages/playground/css/inlined.css b/packages/playground/css/inlined.css deleted file mode 100644 index 68217369431dbd..00000000000000 --- a/packages/playground/css/inlined.css +++ /dev/null @@ -1,3 +0,0 @@ -.inlined { - color: green; -} diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js index cd2d6fda9ac0d5..cfce69f832552e 100644 --- a/packages/playground/css/main.js +++ b/packages/playground/css/main.js @@ -63,6 +63,14 @@ if (import.meta.env.DEV) { import('./async-treeshaken') } -// inlined -import inlined from './inlined.css?inline' -text('.inlined-code', inlined) +// ?url import +import url from './special-query.scss?url' +text('.url-code', url) + +// ?raw import +import raw from './special-query.scss?raw' +text('.raw-code', raw) + +// ?inline import +import inline from './special-query.scss?inline' +text('.inline-code', inline) diff --git a/packages/playground/css/special-query.scss b/packages/playground/css/special-query.scss new file mode 100644 index 00000000000000..49611ccc920c7a --- /dev/null +++ b/packages/playground/css/special-query.scss @@ -0,0 +1,13 @@ +.inline { + color: green; +} + +.url { + color: green; +} + +.raw { + & { + color: green; + } +} diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index dd7366874d984b..4923298a17b4cf 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -24,7 +24,7 @@ import { } from 'rollup' import { dataToEsm } from '@rollup/pluginutils' import chalk from 'chalk' -import { CLIENT_PUBLIC_PATH } from '../constants' +import { CLIENT_PUBLIC_PATH, SPECIAL_QUERY_RE } from '../constants' import { ResolveFn, ViteDevServer } from '../' import { getAssetFilename, @@ -161,7 +161,11 @@ export function cssPlugin(config: ResolvedConfig): Plugin { }, async transform(raw, id) { - if (!isCSSRequest(id) || commonjsProxyRE.test(id)) { + if ( + !isCSSRequest(id) || + commonjsProxyRE.test(id) || + SPECIAL_QUERY_RE.test(id) + ) { return } @@ -272,7 +276,11 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { }, async transform(css, id, ssr) { - if (!isCSSRequest(id) || commonjsProxyRE.test(id)) { + if ( + !isCSSRequest(id) || + commonjsProxyRE.test(id) || + SPECIAL_QUERY_RE.test(id) + ) { return }