From 41b0fdf3f21d95b408ee910f40b6d557873d3a3f Mon Sep 17 00:00:00 2001
From: CHOYSEN <choysen@qq.com>
Date: Fri, 8 Oct 2021 17:20:49 +0800
Subject: [PATCH 1/2] fix: return correct value when import css file with ?url

---
 packages/vite/src/node/plugins/css.ts | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

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
       }
 

From b63cb6fdab5d303e138ae9cff2045550584fdfce Mon Sep 17 00:00:00 2001
From: CHOYSEN <choysen@qq.com>
Date: Fri, 8 Oct 2021 20:47:45 +0800
Subject: [PATCH 2/2] test: for special query

---
 packages/playground/css/__tests__/css.spec.ts | 21 ++++++++++++++-----
 packages/playground/css/index.html            | 10 +++++++--
 packages/playground/css/inlined.css           |  3 ---
 packages/playground/css/main.js               | 14 ++++++++++---
 packages/playground/css/special-query.scss    | 13 ++++++++++++
 5 files changed, 48 insertions(+), 13 deletions(-)
 delete mode 100644 packages/playground/css/inlined.css
 create mode 100644 packages/playground/css/special-query.scss

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 @@ <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>
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;
+  }
+}