fix: return correct value when import css file with ?url

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

@@ -1,13 +1,11 @@
-import fs from 'fs'
-import path from 'path'
 import {
   editFile,
   findAssetFile,
   getBg,
   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)
 })

packages/playground/css/index.html

@@ -102,8 +102,14 @@ <h1>CSS</h1>
     Url separation preservation: should have valid background-image
   </p>
 
-  <p class="inlined">Inlined import - this should NOT be red.</p>
-  <pre class="inlined-code"></pre>
+  <p class="url">?url import - this should NOT be green</p>
+  <pre class="url-code"></pre>
+
+  <p class="raw">?raw import - this should NOT be green</p>
+  <pre class="raw-code"></pre>
+
+  <p class="inline">?inline import - this should NOT be green</p>
+  <pre class="inline-code"></pre>
 </div>
 
 <script type="module" src="./main.js"></script>

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)

packages/playground/css/special-query.scss

@@ -0,0 +1,13 @@
+.inline {
+  color: green;
+}
+
+.url {
+  color: green;
+}
+
+.raw {
+  & {
+    color: green;
+  }
+}

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
       }