diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index ad5d9f344813e4..c62c2d5f46ae84 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')).toMatch(
+    isBuild
+      ? `data:application/javascript;base64,${Buffer.from(source).toString(
+          'base64'
+        )}`
+      : '/special-query.scss'
+  )
+  expect(await page.textContent('.raw')).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;
+  }
+}