From 72f17f89296d6b2373fb05edcc01959f30c551d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=A0=20/=20green?= <green@sapphi.red>
Date: Wed, 4 May 2022 17:50:44 +0900
Subject: [PATCH] fix(css): do not clean id when passing to postcss (fix #7822)
 (#7827)

---
 packages/playground/css/__tests__/css.spec.ts    | 10 ++++++++++
 packages/playground/css/index.html               |  3 +++
 packages/playground/css/main.js                  |  3 +++
 packages/playground/css/postcss-source-input.css |  1 +
 packages/playground/css/postcss.config.js        | 15 ++++++++++++++-
 packages/vite/src/node/plugins/css.ts            |  4 ++--
 6 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 packages/playground/css/postcss-source-input.css

diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index 9869bb34d2c690..e666ca40517d57 100644
--- 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
index fef6a0be393748..15e81192cec7f1 100644
--- 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
index 0d03aafbf0ec7f..f728b0251066d1 100644
--- 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
new file mode 100644
index 00000000000000..c6c3cb0c16dece
--- /dev/null
+++ 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
index f3d6ac9548b6a9..e90b4f9c987820 100644
--- 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
index 04c4ebeea95332..cd57acd1690902 100644
--- 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,