diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts index f1eb66e097ad86..b94f14d464dc28 100644 --- a/packages/playground/css/__tests__/css.spec.ts +++ b/packages/playground/css/__tests__/css.spec.ts @@ -356,3 +356,5 @@ test('minify css', async () => { expect(cssFile).toMatch('rgba(') expect(cssFile).not.toMatch('#ffff00b3') }) + + diff --git a/packages/playground/css/__tests__/raw.spec.ts b/packages/playground/css/__tests__/raw.spec.ts new file mode 100644 index 00000000000000..e7f42ce43574b0 --- /dev/null +++ b/packages/playground/css/__tests__/raw.spec.ts @@ -0,0 +1,19 @@ +test('?raw', async () => { + const rawImportCss = await page.$('.raw-imported-css'); + const rawImportSass = await page.$('.raw-imported-sass'); + const rawImportLess = await page.$('.raw-imported-less'); + const rawImportStylus = await page.$('.raw-imported-stylus'); + + expect(await rawImportCss.textContent()).toBe( + require('fs').readFileSync(require.resolve('../imported.css'), 'utf-8') + ) + expect(await rawImportSass.textContent()).toBe( + require('fs').readFileSync(require.resolve('../sass.scss'), 'utf-8') + ) + expect(await rawImportLess.textContent()).toBe( + require('fs').readFileSync(require.resolve('../less.less'), 'utf-8') + ) + expect(await rawImportStylus.textContent()).toBe( + require('fs').readFileSync(require.resolve('../stylus.styl'), 'utf-8') + ) +}); diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html index 7a79bb1629f989..f52d6da572c44d 100644 --- a/packages/playground/css/index.html +++ b/packages/playground/css/index.html @@ -104,6 +104,12 @@
Inlined import - this should NOT be red.
+ +Raw Support
+ + + + diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js index 24a278c8687940..ababa5a85ce4e7 100644 --- a/packages/playground/css/main.js +++ b/packages/playground/css/main.js @@ -12,6 +12,18 @@ text('.imported-less', less) import stylus from './stylus.styl' text('.imported-stylus', stylus) +import rawCss from './imported.css?raw' +text('.raw-imported-css', rawCss) + +import rawSass from './sass.scss?raw' +text('.raw-imported-sass', rawSass) + +import rawLess from './less.less?raw' +text('.raw-imported-less', rawLess) + +import rawStylus from './stylus.styl?raw' +text('.raw-imported-stylus', rawStylus) + import mod from './mod.module.css' document.querySelector('.modules').classList.add(mod['apply-color']) text('.modules-code', JSON.stringify(mod, null, 2)) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index a7cd3fd6cc11fa..17fe103bcdecf9 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,7 @@ 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 } @@ -275,7 +275,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { }, async transform(css, id, options) { - if (!isCSSRequest(id) || commonjsProxyRE.test(id)) { + if (!isCSSRequest(id) || commonjsProxyRE.test(id) || SPECIAL_QUERY_RE.test(id)) { return }