test: for special query

vitejs · Oct 8, 2021 · c37f16f · c37f16f
1 parent 41b0fdf
commit c37f16f
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 13 deletions.
diff --git a/packages/playground/css/__tests__/css.spec.ts b/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')).toMatch(
+    isBuild
+      ? `data:null;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
@@ -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
diff --git 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
@@ -0,0 +1,13 @@
+.inline {
+  color: green;
+}
+
+.url {
+  color: green;
+}
+
+.raw {
+  & {
+    color: green;
+  }
+}