chore(deps)!: update postcss-load-config to v6 (#15235)

Co-authored-by: bluwy <bjornlu.dev@gmail.com>
Co-authored-by: sapphi-red <49056869+sapphi-red@users.noreply.github.com>

.npmrc

@@ -1,4 +1,3 @@
-hoist-pattern[]=ts-node # package/vite: postcss-load-config
 hoist-pattern[]=postcss # package/vite
 hoist-pattern[]=pug # playground/tailwind: @vue/compiler-sfc
 shell-emulator=true

docs/guide/migration.md

@@ -20,6 +20,10 @@ From Vite 6, even when `json.stringify: true` is set, `json.namedExports` is not
 
 Vite 6 also introduces a new default value for `json.stringify` which is `'auto'`, which will only stringify large JSON files. To disable this behavior, set `json.stringify: false`.
 
+### postcss-load-config
+
+[`postcss-load-config`](https://npmjs.com/package/postcss-load-config) has been updated to v6 from v4. [`tsx`](https://www.npmjs.com/package/tsx) or [`jiti`](https://www.npmjs.com/package/jiti) is now required to load TypeScript postcss config files instead of [`ts-node`](https://www.npmjs.com/package/ts-node). Also [`yaml`](https://www.npmjs.com/package/yaml) is now required to load YAML postcss config files.
+
 ### Sass now uses modern API by default
 
 In Vite 5, the legacy API was used by default for Sass. Vite 5.4 added support for the modern API.

eslint.config.js

@@ -203,7 +203,6 @@ export default tseslint.config(
       'playground/**/*dep*/**',
       'playground/resolve/browser-module-field2/index.web.js',
       'playground/resolve/browser-field/**',
-      'playground/tailwind/**', // blocked by https://github.com/postcss/postcss-load-config/issues/239
     ],
     rules: {
       'import-x/no-commonjs': 'error',

packages/vite/LICENSE.md

@@ -2518,24 +2518,3 @@ Repository: git+https://github.com/websockets/ws.git
 > COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 > IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 > CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----------------------------------------
-
-## yaml
-License: ISC
-By: Eemeli Aro
-Repository: github:eemeli/yaml
-
-> Copyright Eemeli Aro <eemeli@gmail.com>
-> 
-> Permission to use, copy, modify, and/or distribute this software for any purpose
-> with or without fee is hereby granted, provided that the above copyright notice
-> and this permission notice appear in all copies.
-> 
-> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-> REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
-> FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-> INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
-> OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
-> TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
-> THIS SOFTWARE.

packages/vite/package.json

@@ -136,7 +136,7 @@
     "picocolors": "^1.1.1",
     "picomatch": "^4.0.2",
     "postcss-import": "^16.1.0",
-    "postcss-load-config": "^4.0.2",
+    "postcss-load-config": "^6.0.1",
     "postcss-modules": "^6.0.0",
     "resolve.exports": "^2.0.2",
     "rollup-plugin-dts": "^6.1.1",
@@ -157,18 +157,24 @@
   },
   "peerDependencies": {
     "@types/node": "^18.0.0 || >=20.0.0",
+    "jiti": ">=1.21.0",
     "less": "*",
     "lightningcss": "^1.21.0",
     "sass": "*",
     "sass-embedded": "*",
     "stylus": "*",
     "sugarss": "*",
-    "terser": "^5.16.0"
+    "terser": "^5.16.0",
+    "tsx": "^4.8.1",
+    "yaml": "^2.4.2"
   },
   "peerDependenciesMeta": {
     "@types/node": {
       "optional": true
     },
+    "jiti": {
+      "optional": true
+    },
     "sass": {
       "optional": true
     },
@@ -189,6 +195,12 @@
     },
     "terser": {
       "optional": true
+    },
+    "tsx": {
+      "optional": true
+    },
+    "yaml": {
+      "optional": true
     }
   }
 }

packages/vite/rollup.config.ts

@@ -99,6 +99,10 @@ const nodeConfig = defineConfig({
     'fsevents',
     'lightningcss',
     'rollup/parseAst',
+    // postcss-load-config
+    'yaml',
+    'jiti',
+    /^tsx(\/|$)/,
     ...Object.keys(pkg.dependencies),
   ],
   plugins: [
@@ -107,35 +111,50 @@ const nodeConfig = defineConfig({
     // Shim them with eval() so rollup can skip these calls.
     shimDepsPlugin({
       // chokidar -> fsevents
-      'fsevents-handler.js': {
-        src: `require('fsevents')`,
-        replacement: `__require('fsevents')`,
-      },
+      'fsevents-handler.js': [
+        {
+          src: `require('fsevents')`,
+          replacement: `__require('fsevents')`,
+        },
+      ],
       // postcss-import -> sugarss
-      'process-content.js': {
-        src: 'require("sugarss")',
-        replacement: `__require('sugarss')`,
-      },
-      'lilconfig/src/index.js': {
-        pattern: /: require;/g,
-        replacement: `: __require;`,
-      },
-      // postcss-load-config calls require after register ts-node
-      'postcss-load-config/src/index.js': {
-        pattern: /require(?=\((configFile|'ts-node')\))/g,
-        replacement: `__require`,
-      },
+      'process-content.js': [
+        {
+          src: 'require("sugarss")',
+          replacement: `__require('sugarss')`,
+        },
+      ],
+      'lilconfig/src/index.js': [
+        {
+          pattern: /: require;/g,
+          replacement: ': __require;',
+        },
+      ],
+      'postcss-load-config/src/req.js': [
+        {
+          src: "const { pathToFileURL } = require('node:url')",
+          replacement: `const { fileURLToPath, pathToFileURL } = require('node:url')`,
+        },
+        {
+          src: '__filename',
+          replacement: 'fileURLToPath(import.meta.url)',
+        },
+      ],
       // postcss-import uses the `resolve` dep if the `resolve` option is not passed.
       // However, we always pass the `resolve` option. Remove this import to avoid
       // bundling the `resolve` dep.
-      'postcss-import/index.js': {
-        src: 'const resolveId = require("./lib/resolve-id")',
-        replacement: 'const resolveId = (id) => id',
-      },
-      'postcss-import/lib/parse-styles.js': {
-        src: 'const resolveId = require("./resolve-id")',
-        replacement: 'const resolveId = (id) => id',
-      },
+      'postcss-import/index.js': [
+        {
+          src: 'const resolveId = require("./lib/resolve-id")',
+          replacement: 'const resolveId = (id) => id',
+        },
+      ],
+      'postcss-import/lib/parse-styles.js': [
+        {
+          src: 'const resolveId = require("./resolve-id")',
+          replacement: 'const resolveId = (id) => id',
+        },
+      ],
     }),
     ...createSharedNodePlugins({}),
     licensePlugin(
@@ -199,46 +218,53 @@ interface ShimOptions {
   pattern?: RegExp
 }
 
-function shimDepsPlugin(deps: Record<string, ShimOptions>): Plugin {
+function shimDepsPlugin(deps: Record<string, ShimOptions[]>): Plugin {
   const transformed: Record<string, boolean> = {}
 
   return {
     name: 'shim-deps',
     transform(code, id) {
       for (const file in deps) {
         if (id.replace(/\\/g, '/').endsWith(file)) {
-          const { src, replacement, pattern } = deps[file]
+          for (const { src, replacement, pattern } of deps[file]) {
+            const magicString = new MagicString(code)
 
-          const magicString = new MagicString(code)
-          if (src) {
-            const pos = code.indexOf(src)
-            if (pos < 0) {
-              this.error(
-                `Could not find expected src "${src}" in file "${file}"`,
-              )
-            }
-            transformed[file] = true
-            magicString.overwrite(pos, pos + src.length, replacement)
-            console.log(`shimmed: ${file}`)
-          }
-
-          if (pattern) {
-            let match
-            while ((match = pattern.exec(code))) {
+            if (src) {
+              const pos = code.indexOf(src)
+              if (pos < 0) {
+                this.error(
+                  `Could not find expected src "${src}" in file "${file}"`,
+                )
+              }
               transformed[file] = true
-              const start = match.index
-              const end = start + match[0].length
-              magicString.overwrite(start, end, replacement)
+              magicString.overwrite(pos, pos + src.length, replacement)
             }
-            if (!transformed[file]) {
-              this.error(
-                `Could not find expected pattern "${pattern}" in file "${file}"`,
-              )
+
+            if (pattern) {
+              let match
+              while ((match = pattern.exec(code))) {
+                transformed[file] = true
+                const start = match.index
+                const end = start + match[0].length
+                let _replacement = replacement
+                for (let i = 1; i <= match.length; i++) {
+                  _replacement = _replacement.replace(`$${i}`, match[i] || '')
+                }
+                magicString.overwrite(start, end, _replacement)
+              }
+              if (!transformed[file]) {
+                this.error(
+                  `Could not find expected pattern "${pattern}" in file "${file}"`,
+                )
+              }
             }
-            console.log(`shimmed: ${file}`)
+
+            code = magicString.toString()
           }
 
-          return magicString.toString()
+          console.log(`shimmed: ${file}`)
+
+          return code
         }
       }
     },

playground/tailwind/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-tailwind",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -15,6 +16,6 @@
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
-    "ts-node": "^10.9.2"
+    "tsx": "^4.11.0"
   }
 }

playground/tailwind/postcss.config.ts

@@ -1,7 +1,11 @@
 // postcss.config.ts
-module.exports = {
+import { fileURLToPath } from 'node:url'
+
+export default {
   plugins: {
-    tailwindcss: { config: __dirname + '/tailwind.config.js' },
+    tailwindcss: {
+      config: fileURLToPath(new URL('./tailwind.config.ts', import.meta.url)),
+    },
     autoprefixer: {},
   },
 }

playground/tailwind/tailwind.config.js → playground/tailwind/tailwind.config.ts

@@ -1,6 +1,6 @@
-/** @type {import('tailwindcss').Config} */
+import type { Config } from 'tailwindcss'
 
-module.exports = {
+export default {
   content: [
     // Before editing this section, make sure no paths are matching with `/src/main.js`
     // Look https://github.com/vitejs/vite/pull/6959 for more details
@@ -14,4 +14,4 @@ module.exports = {
     extend: {},
   },
   plugins: [],
-}
+} satisfies Config