fix(css): do not clean id when passing to postcss (fix #7822) (#7827)

vitejs · May 4, 2022 · 72f17f8 · 72f17f8
1 parent d49e3fb
commit 72f17f8
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 3 deletions.
diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
@@ -413,3 +413,13 @@ test("relative path rewritten in Less's data-uri", async () => {
     /^url\("data:image\/svg\+xml,%3Csvg/
   )
 })
+
+test('PostCSS source.input.from includes query', async () => {
+  const code = await page.textContent('.postcss-source-input')
+  // should resolve assets
+  expect(code).toContain(
+    isBuild
+      ? '/postcss-source-input.css?used&query=foo'
+      : '/postcss-source-input.css?query=foo'
+  )
+})
diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html
@@ -135,6 +135,9 @@ <h1>CSS</h1>
 
   <p>Raw Support</p>
   <pre class="raw-imported-css"></pre>
+
+  <p>PostCSS source.input.from. Should include query</p>
+  <pre class="postcss-source-input"></pre>
 </div>
 
 <script type="module" src="./main.js"></script>
diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
@@ -87,3 +87,6 @@ Promise.all(Object.keys(glob).map((key) => glob[key]())).then((res) => {
 // globEager
 const globEager = import.meta.globEager('./glob-import/*.css')
 text('.imported-css-globEager', JSON.stringify(globEager, null, 2))
+
+import postcssSourceInput from './postcss-source-input.css?query=foo'
+text('.postcss-source-input', postcssSourceInput)
diff --git a/packages/playground/css/postcss-source-input.css b/packages/playground/css/postcss-source-input.css
@@ -0,0 +1 @@
+@source-input;
diff --git a/packages/playground/css/postcss.config.js b/packages/playground/css/postcss.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: [require('postcss-nested'), testDirDep]
+  plugins: [require('postcss-nested'), testDirDep, testSourceInput]
 }
 
 const fs = require('fs')
@@ -35,3 +35,16 @@ function testDirDep() {
   }
 }
 testDirDep.postcss = true
+
+function testSourceInput() {
+  return {
+    postcssPlugin: 'source-input',
+    AtRule(atRule) {
+      if (atRule.name === 'source-input') {
+        atRule.after(`/* ${atRule.source.input.from} */`)
+        atRule.remove()
+      }
+    }
+  }
+}
+testSourceInput.postcss = true
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -799,8 +799,8 @@ async function compileCSS(
     .default(postcssPlugins)
     .process(code, {
       ...postcssOptions,
-      to: cleanUrl(id),
-      from: cleanUrl(id),
+      to: id,
+      from: id,
       map: {
         inline: false,
         annotation: false,