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 <[email protected]>

Author: y1d7ng

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"
+  }
+}