feat: support importing css with ?raw (#5796)

packages/playground/assets/__tests__/assets.spec.ts

@@ -194,6 +194,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')

packages/playground/assets/index.html

@@ -134,6 +134,9 @@ <h2>?raw import</h2>
 <h2>?url import</h2>
 <code class="url"></code>
 
+<h2>?url import with css</h2>
+<code class="url-css"></code>
+
 <h2>new URL('...', import.meta.url)</h2>
 <img class="import-meta-url-img" />
 <code class="import-meta-url"></code>
@@ -242,6 +245,9 @@ <h3 class="foo-public">
   import unicodeUrl from './テスト-測試-white space.js?url'
   text('.unicode-url', unicodeUrl)
 
+  import cssUrl from './css/icons.css?url'
+  text('.url-css', cssUrl)
+
   // const url = new URL('non_existent_file.png', import.meta.url)
   const metaUrl = new URL('./nested/asset.png', import.meta.url)
   text('.import-meta-url', metaUrl)

packages/playground/css/__tests__/css.spec.ts

@@ -365,6 +365,14 @@ test('minify css', async () => {
   expect(cssFile).not.toMatch('#ffff00b3')
 })
 
+test('?raw', async () => {
+  const rawImportCss = await page.$('.raw-imported-css')
+
+  expect(await rawImportCss.textContent()).toBe(
+    require('fs').readFileSync(require.resolve('../raw-imported.css'), 'utf-8')
+  )
+})
+
 test('import css in less', async () => {
   expect(await getColor('.css-in-less')).toBe('yellow')
   expect(await getColor('.css-in-less-2')).toBe('blue')

packages/playground/css/index.html

@@ -118,6 +118,9 @@ <h1>CSS</h1>
   </div>
 
   <pre class="inlined-code"></pre>
+
+  <p>Raw Support</p>
+  <pre class="raw-imported-css"></pre>
 </div>
 
 <script type="module" src="./main.js"></script>

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))

packages/playground/css/raw-imported.css

@@ -0,0 +1,3 @@
+.raw-imported {
+  color: yellow;
+}

packages/vite/src/node/plugins/css.ts

@@ -27,7 +27,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,
@@ -163,7 +163,11 @@ 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
@@ -280,7 +284,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
       }