From ebcc38e51e43ea09b20d70fbe1cd52d6a14ce8d1 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Wed, 20 Apr 2022 16:29:34 +0900
Subject: [PATCH 1/2] fix(css): do not clean id when passing to postcss

---
 packages/playground/css/__tests__/css.spec.ts    |  6 ++++++
 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, 29 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 6ca00e760349b1..1437020db60b0d 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/packages/playground/css/__tests__/css.spec.ts
@@ -405,3 +405,9 @@ 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('/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 2f5ab3df58b46a..a3b95a76471bad 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -785,8 +785,8 @@ async function compileCSS(
     .default(postcssPlugins)
     .process(code, {
       ...postcssOptions,
-      to: cleanUrl(id),
-      from: cleanUrl(id),
+      to: id,
+      from: id,
       map: {
         inline: false,
         annotation: false,

From 9a178e4e2d06e9865ee4fae316fbfe80569a73a0 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Wed, 20 Apr 2022 17:06:07 +0900
Subject: [PATCH 2/2] test: fix build will also have used query

---
 packages/playground/css/__tests__/css.spec.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index 1437020db60b0d..70108cb63457c5 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/packages/playground/css/__tests__/css.spec.ts
@@ -409,5 +409,9 @@ test("relative path rewritten in Less's data-uri", async () => {
 test('PostCSS source.input.from includes query', async () => {
   const code = await page.textContent('.postcss-source-input')
   // should resolve assets
-  expect(code).toContain('/postcss-source-input.css?query=foo')
+  expect(code).toContain(
+    isBuild
+      ? '/postcss-source-input.css?used&query=foo'
+      : '/postcss-source-input.css?query=foo'
+  )
 })