From 78477b9d5a3c4fcee267b89cacae660c7e267285 Mon Sep 17 00:00:00 2001
From: OneNail <OneNail@yeah.net>
Date: Tue, 22 Jun 2021 22:07:24 +0800
Subject: [PATCH 1/3] fix(css): cachedPostcssConfig reused for multiple builds

---
 packages/vite/src/node/plugins/css.ts | 46 ++++++++++++++++-----------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index c848931f2b3dd3..453a18ba64e587 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -114,6 +114,11 @@ export const chunkToEmittedCssFileMap = new WeakMap<
   Set<string>
 >()
 
+const postcssConfigCache = new WeakMap<
+  ResolvedConfig,
+  PostCSSConfigResult | null
+>()
+
 /**
  * Plugin applied before user plugins
  */
@@ -720,37 +725,40 @@ interface PostCSSConfigResult {
   plugins: Postcss.Plugin[]
 }
 
-let cachedPostcssConfig: PostCSSConfigResult | null | undefined
-
 async function resolvePostcssConfig(
   config: ResolvedConfig
 ): Promise<PostCSSConfigResult | null> {
-  if (cachedPostcssConfig !== undefined) {
-    return cachedPostcssConfig
+  let result = postcssConfigCache.get(config)
+  if (result !== undefined) {
+    return result
   }
 
   // inline postcss config via vite config
   const inlineOptions = config.css?.postcss
   if (isObject(inlineOptions)) {
-    const result = {
-      options: { ...inlineOptions },
+    const options = { ...inlineOptions }
+
+    delete options.plugins
+    result = {
+      options,
       plugins: inlineOptions.plugins || []
     }
-    delete result.options.plugins
-    return (cachedPostcssConfig = result)
-  }
-
-  try {
-    const searchPath =
-      typeof inlineOptions === 'string' ? inlineOptions : config.root
-    // @ts-ignore
-    return (cachedPostcssConfig = await postcssrc({}, searchPath))
-  } catch (e) {
-    if (!/No PostCSS Config found/.test(e.message)) {
-      throw e
+  } else {
+    try {
+      const searchPath =
+        typeof inlineOptions === 'string' ? inlineOptions : config.root
+      // @ts-ignore
+      result = await postcssrc({}, searchPath)
+    } catch (e) {
+      if (!/No PostCSS Config found/.test(e.message)) {
+        throw e
+      }
+      result = null
     }
-    return (cachedPostcssConfig = null)
   }
+
+  postcssConfigCache.set(config, result)
+  return result
 }
 
 type CssUrlReplacer = (

From 6dc5645d74f165485fcd1bc4d753b3eb99482368 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= <f@zenc.io>
Date: Wed, 7 Jul 2021 08:56:02 +1000
Subject: [PATCH 2/3] fix: add tests to demonstrate that PostCSS configs are
 not reused across projects

---
 .../css-config-caching-a/__tests__/css.spec.ts    |  8 ++++++++
 .../playground/css-config-caching-a/imported.css  |  3 +++
 .../playground/css-config-caching-a/index.html    | 12 ++++++++++++
 packages/playground/css-config-caching-a/main.js  |  6 ++++++
 .../playground/css-config-caching-a/package.json  | 11 +++++++++++
 .../css-config-caching-a/postcss.config.js        | 15 +++++++++++++++
 .../css-config-caching-b/__tests__/css.spec.ts    |  8 ++++++++
 .../playground/css-config-caching-b/imported.css  |  3 +++
 .../playground/css-config-caching-b/index.html    | 12 ++++++++++++
 packages/playground/css-config-caching-b/main.js  |  6 ++++++
 .../playground/css-config-caching-b/package.json  | 11 +++++++++++
 .../css-config-caching-b/postcss.config.js        | 15 +++++++++++++++
 12 files changed, 110 insertions(+)
 create mode 100644 packages/playground/css-config-caching-a/__tests__/css.spec.ts
 create mode 100644 packages/playground/css-config-caching-a/imported.css
 create mode 100644 packages/playground/css-config-caching-a/index.html
 create mode 100644 packages/playground/css-config-caching-a/main.js
 create mode 100644 packages/playground/css-config-caching-a/package.json
 create mode 100644 packages/playground/css-config-caching-a/postcss.config.js
 create mode 100644 packages/playground/css-config-caching-b/__tests__/css.spec.ts
 create mode 100644 packages/playground/css-config-caching-b/imported.css
 create mode 100644 packages/playground/css-config-caching-b/index.html
 create mode 100644 packages/playground/css-config-caching-b/main.js
 create mode 100644 packages/playground/css-config-caching-b/package.json
 create mode 100644 packages/playground/css-config-caching-b/postcss.config.js

diff --git a/packages/playground/css-config-caching-a/__tests__/css.spec.ts b/packages/playground/css-config-caching-a/__tests__/css.spec.ts
new file mode 100644
index 00000000000000..c7285b7574dde7
--- /dev/null
+++ b/packages/playground/css-config-caching-a/__tests__/css.spec.ts
@@ -0,0 +1,8 @@
+import { getColor } from '../../testUtils'
+
+test('postcss config', async () => {
+  const a = await page.$('.postcss-a')
+  expect(await getColor(a)).toBe('blue')
+  const b = await page.$('.postcss-b')
+  expect(await getColor(b)).toBe('black')
+})
diff --git a/packages/playground/css-config-caching-a/imported.css b/packages/playground/css-config-caching-a/imported.css
new file mode 100644
index 00000000000000..2db9597eed1011
--- /dev/null
+++ b/packages/playground/css-config-caching-a/imported.css
@@ -0,0 +1,3 @@
+.postcss-a {
+  color: pink;
+}
diff --git a/packages/playground/css-config-caching-a/index.html b/packages/playground/css-config-caching-a/index.html
new file mode 100644
index 00000000000000..48bc3c24d3a262
--- /dev/null
+++ b/packages/playground/css-config-caching-a/index.html
@@ -0,0 +1,12 @@
+<div class="wrapper">
+  <h1>CSS</h1>
+
+  <p>Imported css string:</p>
+  <pre class="imported-css"></pre>
+
+  <p class="postcss-a">This should be blue</p>
+
+  <p class="postcss-b">This should be black</p>
+</div>
+
+<script type="module" src="./main.js"></script>
diff --git a/packages/playground/css-config-caching-a/main.js b/packages/playground/css-config-caching-a/main.js
new file mode 100644
index 00000000000000..53286e882053fa
--- /dev/null
+++ b/packages/playground/css-config-caching-a/main.js
@@ -0,0 +1,6 @@
+import css from './imported.css'
+text('.imported-css', css)
+
+function text(el, text) {
+  document.querySelector(el).textContent = text
+}
diff --git a/packages/playground/css-config-caching-a/package.json b/packages/playground/css-config-caching-a/package.json
new file mode 100644
index 00000000000000..52d83255e96b30
--- /dev/null
+++ b/packages/playground/css-config-caching-a/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "test-css-config-caching-a",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
+  }
+}
diff --git a/packages/playground/css-config-caching-a/postcss.config.js b/packages/playground/css-config-caching-a/postcss.config.js
new file mode 100644
index 00000000000000..2506cd535feef7
--- /dev/null
+++ b/packages/playground/css-config-caching-a/postcss.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+  plugins: [replacePinkWithBlue]
+}
+
+function replacePinkWithBlue() {
+  return {
+    postcssPlugin: 'replace-pink-with-blue',
+    Declaration(decl) {
+      if (decl.value === 'pink') {
+        decl.value = 'blue'
+      }
+    }
+  }
+}
+replacePinkWithBlue.postcss = true
diff --git a/packages/playground/css-config-caching-b/__tests__/css.spec.ts b/packages/playground/css-config-caching-b/__tests__/css.spec.ts
new file mode 100644
index 00000000000000..b8f3a41a397a7e
--- /dev/null
+++ b/packages/playground/css-config-caching-b/__tests__/css.spec.ts
@@ -0,0 +1,8 @@
+import { getColor } from '../../testUtils'
+
+test('postcss config', async () => {
+  const a = await page.$('.postcss-a')
+  expect(await getColor(a)).toBe('black')
+  const b = await page.$('.postcss-b')
+  expect(await getColor(b)).toBe('green')
+})
diff --git a/packages/playground/css-config-caching-b/imported.css b/packages/playground/css-config-caching-b/imported.css
new file mode 100644
index 00000000000000..8fd68a56a7284d
--- /dev/null
+++ b/packages/playground/css-config-caching-b/imported.css
@@ -0,0 +1,3 @@
+.postcss-b {
+  color: pink;
+}
diff --git a/packages/playground/css-config-caching-b/index.html b/packages/playground/css-config-caching-b/index.html
new file mode 100644
index 00000000000000..4c0428b578e03e
--- /dev/null
+++ b/packages/playground/css-config-caching-b/index.html
@@ -0,0 +1,12 @@
+<div class="wrapper">
+  <h1>CSS</h1>
+
+  <p>Imported css string:</p>
+  <pre class="imported-css"></pre>
+
+  <p class="postcss-a">This should be black</p>
+
+  <p class="postcss-b">This should be green</p>
+</div>
+
+<script type="module" src="./main.js"></script>
diff --git a/packages/playground/css-config-caching-b/main.js b/packages/playground/css-config-caching-b/main.js
new file mode 100644
index 00000000000000..53286e882053fa
--- /dev/null
+++ b/packages/playground/css-config-caching-b/main.js
@@ -0,0 +1,6 @@
+import css from './imported.css'
+text('.imported-css', css)
+
+function text(el, text) {
+  document.querySelector(el).textContent = text
+}
diff --git a/packages/playground/css-config-caching-b/package.json b/packages/playground/css-config-caching-b/package.json
new file mode 100644
index 00000000000000..bae709e117da71
--- /dev/null
+++ b/packages/playground/css-config-caching-b/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "test-css-config-caching-b",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
+  }
+}
diff --git a/packages/playground/css-config-caching-b/postcss.config.js b/packages/playground/css-config-caching-b/postcss.config.js
new file mode 100644
index 00000000000000..1367dfc1d27c7b
--- /dev/null
+++ b/packages/playground/css-config-caching-b/postcss.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+  plugins: [replacePinkWithGreen]
+}
+
+function replacePinkWithGreen() {
+  return {
+    postcssPlugin: 'replace-pink-with-green',
+    Declaration(decl) {
+      if (decl.value === 'pink') {
+        decl.value = 'green'
+      }
+    }
+  }
+}
+replacePinkWithGreen.postcss = true

From de7b5adcbba3938090e743c9811244e0cc23d607 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= <f@zenc.io>
Date: Sat, 17 Jul 2021 08:05:48 +1000
Subject: [PATCH 3/3] fix: run everything in a single Jest test to ensure
 module cache isn't cleared

---
 .../__tests__/css.spec.ts                     |  8 -----
 .../__tests__/css.spec.ts                     |  8 -----
 .../postcss-caching/blue-app}/imported.css    |  0
 .../postcss-caching/blue-app}/index.html      |  0
 .../postcss-caching/blue-app}/main.js         |  0
 .../postcss-caching/blue-app}/package.json    |  2 +-
 .../blue-app}/postcss.config.js               |  0
 .../css/postcss-caching/css.spec.ts           | 29 +++++++++++++++++++
 .../postcss-caching/green-app}/imported.css   |  0
 .../postcss-caching/green-app}/index.html     |  0
 .../postcss-caching/green-app}/main.js        |  0
 .../postcss-caching/green-app}/package.json   |  2 +-
 .../green-app}/postcss.config.js              |  0
 13 files changed, 31 insertions(+), 18 deletions(-)
 delete mode 100644 packages/playground/css-config-caching-a/__tests__/css.spec.ts
 delete mode 100644 packages/playground/css-config-caching-b/__tests__/css.spec.ts
 rename packages/playground/{css-config-caching-a => css/postcss-caching/blue-app}/imported.css (100%)
 rename packages/playground/{css-config-caching-a => css/postcss-caching/blue-app}/index.html (100%)
 rename packages/playground/{css-config-caching-a => css/postcss-caching/blue-app}/main.js (100%)
 rename packages/playground/{css-config-caching-a => css/postcss-caching/blue-app}/package.json (83%)
 rename packages/playground/{css-config-caching-a => css/postcss-caching/blue-app}/postcss.config.js (100%)
 create mode 100644 packages/playground/css/postcss-caching/css.spec.ts
 rename packages/playground/{css-config-caching-b => css/postcss-caching/green-app}/imported.css (100%)
 rename packages/playground/{css-config-caching-b => css/postcss-caching/green-app}/index.html (100%)
 rename packages/playground/{css-config-caching-b => css/postcss-caching/green-app}/main.js (100%)
 rename packages/playground/{css-config-caching-b => css/postcss-caching/green-app}/package.json (83%)
 rename packages/playground/{css-config-caching-b => css/postcss-caching/green-app}/postcss.config.js (100%)

diff --git a/packages/playground/css-config-caching-a/__tests__/css.spec.ts b/packages/playground/css-config-caching-a/__tests__/css.spec.ts
deleted file mode 100644
index c7285b7574dde7..00000000000000
--- a/packages/playground/css-config-caching-a/__tests__/css.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { getColor } from '../../testUtils'
-
-test('postcss config', async () => {
-  const a = await page.$('.postcss-a')
-  expect(await getColor(a)).toBe('blue')
-  const b = await page.$('.postcss-b')
-  expect(await getColor(b)).toBe('black')
-})
diff --git a/packages/playground/css-config-caching-b/__tests__/css.spec.ts b/packages/playground/css-config-caching-b/__tests__/css.spec.ts
deleted file mode 100644
index b8f3a41a397a7e..00000000000000
--- a/packages/playground/css-config-caching-b/__tests__/css.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { getColor } from '../../testUtils'
-
-test('postcss config', async () => {
-  const a = await page.$('.postcss-a')
-  expect(await getColor(a)).toBe('black')
-  const b = await page.$('.postcss-b')
-  expect(await getColor(b)).toBe('green')
-})
diff --git a/packages/playground/css-config-caching-a/imported.css b/packages/playground/css/postcss-caching/blue-app/imported.css
similarity index 100%
rename from packages/playground/css-config-caching-a/imported.css
rename to packages/playground/css/postcss-caching/blue-app/imported.css
diff --git a/packages/playground/css-config-caching-a/index.html b/packages/playground/css/postcss-caching/blue-app/index.html
similarity index 100%
rename from packages/playground/css-config-caching-a/index.html
rename to packages/playground/css/postcss-caching/blue-app/index.html
diff --git a/packages/playground/css-config-caching-a/main.js b/packages/playground/css/postcss-caching/blue-app/main.js
similarity index 100%
rename from packages/playground/css-config-caching-a/main.js
rename to packages/playground/css/postcss-caching/blue-app/main.js
diff --git a/packages/playground/css-config-caching-a/package.json b/packages/playground/css/postcss-caching/blue-app/package.json
similarity index 83%
rename from packages/playground/css-config-caching-a/package.json
rename to packages/playground/css/postcss-caching/blue-app/package.json
index 52d83255e96b30..542b4f5711180e 100644
--- a/packages/playground/css-config-caching-a/package.json
+++ b/packages/playground/css/postcss-caching/blue-app/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "test-css-config-caching-a",
+  "name": "blue-app",
   "private": true,
   "version": "0.0.0",
   "scripts": {
diff --git a/packages/playground/css-config-caching-a/postcss.config.js b/packages/playground/css/postcss-caching/blue-app/postcss.config.js
similarity index 100%
rename from packages/playground/css-config-caching-a/postcss.config.js
rename to packages/playground/css/postcss-caching/blue-app/postcss.config.js
diff --git a/packages/playground/css/postcss-caching/css.spec.ts b/packages/playground/css/postcss-caching/css.spec.ts
new file mode 100644
index 00000000000000..835538666db7bb
--- /dev/null
+++ b/packages/playground/css/postcss-caching/css.spec.ts
@@ -0,0 +1,29 @@
+import { getColor } from '../../testUtils'
+import { createServer } from 'vite'
+import path from 'path'
+
+test('postcss config', async () => {
+  const port = 5005
+  const blueAppDir = path.join(__dirname, 'blue-app')
+  const greenAppDir = path.join(__dirname, 'green-app')
+
+  process.chdir(blueAppDir)
+  const blueApp = await createServer()
+  await blueApp.listen(port)
+  await page.goto(`http://localhost:${port}`)
+  const blueA = await page.$('.postcss-a')
+  expect(await getColor(blueA)).toBe('blue')
+  const blueB = await page.$('.postcss-b')
+  expect(await getColor(blueB)).toBe('black')
+  await blueApp.close()
+
+  process.chdir(greenAppDir)
+  const greenApp = await createServer()
+  await greenApp.listen(port)
+  await page.goto(`http://localhost:${port}`)
+  const greenA = await page.$('.postcss-a')
+  expect(await getColor(greenA)).toBe('black')
+  const greenB = await page.$('.postcss-b')
+  expect(await getColor(greenB)).toBe('green')
+  await greenApp.close()
+})
diff --git a/packages/playground/css-config-caching-b/imported.css b/packages/playground/css/postcss-caching/green-app/imported.css
similarity index 100%
rename from packages/playground/css-config-caching-b/imported.css
rename to packages/playground/css/postcss-caching/green-app/imported.css
diff --git a/packages/playground/css-config-caching-b/index.html b/packages/playground/css/postcss-caching/green-app/index.html
similarity index 100%
rename from packages/playground/css-config-caching-b/index.html
rename to packages/playground/css/postcss-caching/green-app/index.html
diff --git a/packages/playground/css-config-caching-b/main.js b/packages/playground/css/postcss-caching/green-app/main.js
similarity index 100%
rename from packages/playground/css-config-caching-b/main.js
rename to packages/playground/css/postcss-caching/green-app/main.js
diff --git a/packages/playground/css-config-caching-b/package.json b/packages/playground/css/postcss-caching/green-app/package.json
similarity index 83%
rename from packages/playground/css-config-caching-b/package.json
rename to packages/playground/css/postcss-caching/green-app/package.json
index bae709e117da71..1ac4969a18eccd 100644
--- a/packages/playground/css-config-caching-b/package.json
+++ b/packages/playground/css/postcss-caching/green-app/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "test-css-config-caching-b",
+  "name": "green-app",
   "private": true,
   "version": "0.0.0",
   "scripts": {
diff --git a/packages/playground/css-config-caching-b/postcss.config.js b/packages/playground/css/postcss-caching/green-app/postcss.config.js
similarity index 100%
rename from packages/playground/css-config-caching-b/postcss.config.js
rename to packages/playground/css/postcss-caching/green-app/postcss.config.js