fix: update postcss-load-config to load PostCSS plugins based on thei…

…r config file path (#6856)

.npmrc

@@ -0,0 +1,7 @@
+hoist-pattern[]=*eslint*
+hoist-pattern[]=*babel*
+hoist-pattern[]=*jest*
+hoist-pattern[]=@emotion/*
+hoist-pattern[]=postcss
+hoist-pattern[]=pug
+hoist-pattern[]=source-map-support

packages/playground/backend-integration/package.json

@@ -10,5 +10,8 @@
   },
   "dependencies": {
     "tailwindcss": "^2.2.19"
+  },
+  "devDependencies": {
+    "fast-glob": "^3.2.11"
   }
 }

packages/playground/css/__tests__/postcss-plugins-different-dir.spec.ts

@@ -0,0 +1,29 @@
+import { getColor, getBgColor } from '../../testUtils'
+import { createServer } from 'vite'
+import path from 'path'
+
+// Regression test for https://github.com/vitejs/vite/issues/4000
+test('postcss plugins in different dir', async () => {
+  const port = 5005
+  const server = await createServer({
+    root: path.join(__dirname, '..', '..', 'tailwind'),
+    logLevel: 'silent',
+    server: {
+      port,
+      strictPort: true
+    },
+    build: {
+      // skip transpilation during tests to make it faster
+      target: 'esnext'
+    }
+  })
+  await server.listen()
+  try {
+    await page.goto(`http://localhost:${port}`)
+    const tailwindStyle = await page.$('.tailwind-style')
+    expect(await getBgColor(tailwindStyle)).toBe('rgb(254, 226, 226)')
+    expect(await getColor(tailwindStyle)).toBe('rgb(136, 136, 136)')
+  } finally {
+    await server.close()
+  }
+})

packages/playground/css/package.json

@@ -10,6 +10,7 @@
   },
   "devDependencies": {
     "css-dep": "link:./css-dep",
+    "fast-glob": "^3.2.11",
     "less": "^4.1.2",
     "postcss-nested": "^5.0.6",
     "sass": "^1.43.4",

packages/playground/legacy/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@vitejs/plugin-legacy": "workspace:*"
+    "@vitejs/plugin-legacy": "workspace:*",
+    "express": "^4.17.1"
   }
 }

packages/playground/multiple-entrypoints/package.json

@@ -7,5 +7,9 @@
     "build": "vite build",
     "debug": "node --inspect-brk ../../vite/bin/vite",
     "preview": "vite preview"
+  },
+  "devDependencies": {
+    "fast-glob": "^3.2.11",
+    "sass": "^1.43.4"
   }
 }

packages/playground/tailwind/src/views/Page.vue

@@ -2,7 +2,9 @@
   <div>
     <h1 id="pagetitle" class="text-[rgb(11,22,33)] text-2xl">|Page title|</h1>
     <div @click="val = val + 1">{{ val }}</div>
-    <div class="bg-red-100 inline-block h-24 px-8 mb-8 text-[#888888]">
+    <div
+      class="tailwind-style bg-red-100 inline-block h-24 px-8 mb-8 text-[#888888]"
+    >
       Tailwind style
     </div>
     <HelloWorld />

packages/playground/testUtils.ts

@@ -64,6 +64,11 @@ export async function getBg(el: string | ElementHandle): Promise<string> {
   return el.evaluate((el) => getComputedStyle(el as Element).backgroundImage)
 }
 
+export async function getBgColor(el: string | ElementHandle): Promise<string> {
+  el = await toEl(el)
+  return el.evaluate((el) => getComputedStyle(el as Element).backgroundColor)
+}
+
 export function readFile(filename: string): string {
   return fs.readFileSync(path.resolve(testDir, filename), 'utf-8')
 }

packages/vite/LICENSE.md

@@ -3088,7 +3088,7 @@ Repository: https://github.com/postcss/postcss-import.git
 
 ## postcss-load-config
 License: MIT
-By: Michael Ciniawky, Ryan Dunckel, Mateusz Derks, Dalton Santos, Patrick Gilday
+By: Michael Ciniawky, Ryan Dunckel, Mateusz Derks, Dalton Santos, Patrick Gilday, François Wouts
 Repository: postcss/postcss-load-config
 
 > The MIT License (MIT)

packages/vite/package.json

@@ -104,7 +104,7 @@
     "periscopic": "^2.0.3",
     "picocolors": "^1.0.0",
     "postcss-import": "^14.0.2",
-    "postcss-load-config": "^3.1.1",
+    "postcss-load-config": "^3.1.3",
     "postcss-modules": "^4.3.0",
     "resolve.exports": "^1.1.0",
     "rollup-plugin-license": "^2.6.1",