fix(css): cachedPostcssConfig reused for multiple builds (#3906)

* fix(css): cachedPostcssConfig reused for multiple builds

* fix: add tests to demonstrate that PostCSS configs are not reused across projects

* fix: run everything in a single Jest test to ensure module cache isn't cleared

Co-authored-by: François Wouts <f@zenc.io>

packages/playground/css/postcss-caching/blue-app/imported.css

@@ -0,0 +1,3 @@
+.postcss-a {
+  color: pink;
+}

packages/playground/css/postcss-caching/blue-app/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>

packages/playground/css/postcss-caching/blue-app/main.js

@@ -0,0 +1,6 @@
+import css from './imported.css'
+text('.imported-css', css)
+
+function text(el, text) {
+  document.querySelector(el).textContent = text
+}

packages/playground/css/postcss-caching/blue-app/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "blue-app",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
+  }
+}

packages/playground/css/postcss-caching/blue-app/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

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()
+})

packages/playground/css/postcss-caching/green-app/imported.css

@@ -0,0 +1,3 @@
+.postcss-b {
+  color: pink;
+}

packages/playground/css/postcss-caching/green-app/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>

packages/playground/css/postcss-caching/green-app/main.js

@@ -0,0 +1,6 @@
+import css from './imported.css'
+text('.imported-css', css)
+
+function text(el, text) {
+  document.querySelector(el).textContent = text
+}

packages/playground/css/postcss-caching/green-app/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "green-app",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
+  }
+}

packages/playground/css/postcss-caching/green-app/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

packages/vite/src/node/plugins/css.ts

@@ -115,6 +115,11 @@ export const chunkToEmittedCssFileMap = new WeakMap<
   Set<string>
 >()
 
+const postcssConfigCache = new WeakMap<
+  ResolvedConfig,
+  PostCSSConfigResult | null
+>()
+
 /**
  * Plugin applied before user plugins
  */
@@ -729,37 +734,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 = (