From 68de7cbd33a942168d2a74c244ba1c4300c6d31b Mon Sep 17 00:00:00 2001 From: stygian-desolator <73412177+stygian-desolator@users.noreply.github.com> Date: Sun, 26 Dec 2021 15:54:08 +0800 Subject: [PATCH] feat: support importing css with ?raw --- packages/playground/assets/__tests__/assets.spec.ts | 10 ++++++++++ packages/playground/assets/index.html | 6 ++++++ packages/playground/css/__tests__/css.spec.ts | 8 ++++++++ packages/playground/css/index.html | 3 +++ packages/playground/css/main.js | 3 +++ packages/playground/css/raw-imported.css | 3 +++ packages/vite/src/node/plugins/css.ts | 10 +++++++--- 7 files changed, 40 insertions(+), 3 deletions(-) create mode 100644 packages/playground/css/raw-imported.css diff --git a/packages/playground/assets/__tests__/assets.spec.ts b/packages/playground/assets/__tests__/assets.spec.ts index c51bb4094b7b8c..8c66588d50716d 100644 --- a/packages/playground/assets/__tests__/assets.spec.ts +++ b/packages/playground/assets/__tests__/assets.spec.ts @@ -189,6 +189,16 @@ test('?url import', async () => { ) }) +test('?url import on css', async () => { + const src = readFile('css/icons.css') + const txt = await page.textContent('.url-css') + expect(txt).toEqual( + isBuild + ? `data:text/css;base64,${Buffer.from(src).toString('base64')}` + : '/foo/css/icons.css' + ) +}) + describe('unicode url', () => { test('from js import', async () => { const src = readFile('テスト-測試-white space.js') diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html index f3b9a0b372a608..66753240c8a54e 100644 --- a/packages/playground/assets/index.html +++ b/packages/playground/assets/index.html @@ -133,6 +133,9 @@
+
+
@@ -211,6 +214,9 @@ 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..df3563a9d73906 100644 --- a/packages/playground/css/main.js +++ b/packages/playground/css/main.js @@ -12,6 +12,9 @@ text('.imported-less', less) import stylus from './stylus.styl' text('.imported-stylus', stylus) +import rawCss from './raw-imported.css?raw' +text('.raw-imported-css', rawCss) + 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/playground/css/raw-imported.css b/packages/playground/css/raw-imported.css new file mode 100644 index 00000000000000..ac0aee96390c33 --- /dev/null +++ b/packages/playground/css/raw-imported.css @@ -0,0 +1,3 @@ +.raw-imported { + color: yellow; +} diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 280a4ed177983d..2a14dc638fc4ed 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -25,7 +25,7 @@ import type { } from 'rollup' import { dataToEsm } from '@rollup/pluginutils' import colors from 'picocolors' -import { CLIENT_PUBLIC_PATH } from '../constants' +import { CLIENT_PUBLIC_PATH, SPECIAL_QUERY_RE } from '../constants' import type { ResolveFn, ViteDevServer } from '../' import { getAssetFilename, @@ -165,7 +165,7 @@ export function cssPlugin(config: ResolvedConfig): Plugin { }, async transform(raw, id, options) { - if (!isCSSRequest(id) || commonjsProxyRE.test(id)) { + if (!isCSSRequest(id) || commonjsProxyRE.test(id) || SPECIAL_QUERY_RE.test(id)) { return } const ssr = options?.ssr === true @@ -282,7 +282,11 @@ 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 }