feat: support importing css with ?raw

vitejs · Nov 23, 2021 · cd5f7e1 · cd5f7e1
1 parent faae331
commit cd5f7e1
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 3 deletions.
diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
@@ -356,3 +356,19 @@ test('minify css', async () => {
   expect(cssFile).toMatch('rgba(')
   expect(cssFile).not.toMatch('#ffff00b3')
 })
+
+
+test('?raw', async () => {;
+  expect(await page.textContent('.raw-imported-css')).toBe(
+    require('fs').readFileSync(require.resolve('../imported.css'), 'utf-8')
+  )
+  expect(await page.textContent('.raw-imported-sass')).toBe(
+    require('fs').readFileSync(require.resolve('../sass.scss'), 'utf-8')
+  )
+  expect(await page.textContent('.raw-imported-less')).toBe(
+    require('fs').readFileSync(require.resolve('../less.less'), 'utf-8')
+  )
+  expect(await page.textContent('.raw-imported-stylus')).toBe(
+    require('fs').readFileSync(require.resolve('../stylus.styl'), 'utf-8')
+  )
+});
diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html
@@ -104,6 +104,12 @@ <h1>CSS</h1>
 
   <p class="inlined">Inlined import - this should NOT be red.</p>
   <pre class="inlined-code"></pre>
+
+  <p>Raw Support</p>
+  <pre class="raw-imported-css"></pre>
+  <pre class="raw-imported-sass"></pre>
+  <pre class="raw-imported-less"></pre>
+  <pre class="raw-imported-stylus"></pre>
 </div>
 
 <script type="module" src="./main.js"></script>
diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
@@ -12,6 +12,18 @@ text('.imported-less', less)
 import stylus from './stylus.styl'
 text('.imported-stylus', stylus)
 
+import rawCss from './imported.css?raw'
+text('.raw-imported-css', rawCss)
+
+import rawSass from './sass.scss?raw'
+text('.raw-imported-sass', rawSass)
+
+import rawLess from './less.less?raw'
+text('.raw-imported-less', rawLess)
+
+import rawStylus from './stylus.styl?raw'
+text('.raw-imported-stylus', rawStylus)
+
 import mod from './mod.module.css'
 document.querySelector('.modules').classList.add(mod['apply-color'])
 text('.modules-code', JSON.stringify(mod, null, 2))

diff --git 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,7 @@ 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
       }
 
@@ -275,7 +275,7 @@ 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
       }