Best-effort attempt to fix PostCSS path resolution

cezaraugusto · cezaraugusto · commit 619431ec0ab6 · 2025-12-01T18:13:38.000-03:00
diff --git a/programs/develop/webpack/plugin-css/__spec__/common-style-loaders.spec.ts b/programs/develop/webpack/plugin-css/__spec__/common-style-loaders.spec.ts
@@ -13,6 +13,7 @@ vi.mock('../css-tools/less', () => ({
 }))
 
 vi.mock('../css-tools/postcss', () => ({
+  isUsingPostCss: vi.fn(() => false),
   maybeUsePostCss: vi.fn(async () => ({}))
 }))
 
diff --git a/programs/develop/webpack/plugin-css/__spec__/css-tools/postcss-load-plugins.spec.ts b/programs/develop/webpack/plugin-css/__spec__/css-tools/postcss-load-plugins.spec.ts
@@ -0,0 +1,68 @@
+import {describe, it, expect, vi, beforeEach} from 'vitest'
+
+describe('loadPluginsFromUserConfig helper', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
+  it('normalizes array, tuple, map and postcss property forms', async () => {
+    vi.doMock('module', () => ({
+      createRequire: (_: string) => {
+        const req = (id: string) => {
+          if (id.endsWith('postcss.config.js')) {
+            return {
+              plugins: [
+                'plugin-a',
+                ['plugin-b', {b: true}],
+                {postcss: () => 'plugin-c-fn'},
+                {'plugin-d': true, 'plugin-e': {e: 1}, 'plugin-f': false}
+              ]
+            }
+          }
+          if (id === 'plugin-a') return () => 'plugin-a-fn'
+          if (id === 'plugin-b') return () => 'plugin-b-fn'
+          if (id === 'plugin-d') return () => 'plugin-d-fn'
+          if (id === 'plugin-e') return () => 'plugin-e-fn'
+          throw new Error('unexpected require: ' + id)
+        }
+        return req as any
+      }
+    }))
+
+    const {loadPluginsFromUserConfig} = await import(
+      '../../css-tools/postcss/load-plugins-from-user-config'
+    )
+    const res = await loadPluginsFromUserConfig(
+      '/p',
+      '/p/postcss.config.js',
+      'development'
+    )
+    expect(res && res.length).toBe(5)
+  })
+
+  it('returns empty list when plugins missing', async () => {
+    vi.doMock('module', () => ({
+      createRequire: (_: string) => {
+        const req = (id: string) => {
+          if (id.endsWith('postcss.config.js')) {
+            return {}
+          }
+          throw new Error('unexpected require: ' + id)
+        }
+        return req as any
+      }
+    }))
+
+    const {loadPluginsFromUserConfig} = await import(
+      '../../css-tools/postcss/load-plugins-from-user-config'
+    )
+    const res = await loadPluginsFromUserConfig(
+      '/p',
+      '/p/postcss.config.js',
+      'production'
+    )
+    expect(Array.isArray(res)).toBe(true)
+    expect(res?.length).toBe(0)
+  })
+})
diff --git a/programs/develop/webpack/plugin-css/__spec__/css-tools/postcss.spec.ts b/programs/develop/webpack/plugin-css/__spec__/css-tools/postcss.spec.ts
@@ -27,4 +27,119 @@ describe('postcss detection', () => {
     const {isUsingPostCss} = await import('../../css-tools/postcss')
     expect(isUsingPostCss('/p')).toBe(true)
   })
+
+  it('loads plugins from file-based postcss config and disables config discovery', async () => {
+    // Simulate presence of postcss.config.js
+    vi.doMock('fs', async () => {
+      const actual = await vi.importActual<any>('fs')
+      return {
+        ...actual,
+        existsSync: (p: string) =>
+          String(p).endsWith('postcss.config.js') || actual.existsSync(p),
+        readFileSync: actual.readFileSync
+      }
+    })
+
+    // Mock createRequire to return our config and plugin modules
+    vi.doMock('module', () => ({
+      createRequire: (_: string) => {
+        const req = (id: string) => {
+          if (id.endsWith('postcss.config.js')) {
+            // Return mixed plugin shapes: string, tuple, map
+            return {
+              plugins: [
+                'plugin-a',
+                ['plugin-b', {b: true}],
+                {postcss: () => 'plugin-c-fn'},
+                {'plugin-d': true, 'plugin-e': {e: 1}, 'plugin-f': false}
+              ]
+            }
+          }
+          if (id === 'plugin-a') return () => 'plugin-a-fn'
+          if (id === 'plugin-b') return () => 'plugin-b-fn'
+          if (id === 'plugin-d') return () => 'plugin-d-fn'
+          if (id === 'plugin-e') return () => 'plugin-e-fn'
+          throw new Error('unexpected require: ' + id)
+        }
+        return req as any
+      }
+    }))
+
+    const {maybeUsePostCss} = await import('../../css-tools/postcss')
+    const rule = await maybeUsePostCss('/p', {mode: 'development'})
+    // Ensure loader configured
+    expect(rule.loader).toBeDefined()
+    const opts = rule.options?.postcssOptions
+    expect(opts?.config).toBe(false)
+    // Expect normalized plugins present (5 entries: a, b, c, d, e; f=false is skipped)
+    expect(Array.isArray(opts?.plugins)).toBe(true)
+    expect((opts?.plugins as any[]).length).toBe(5)
+  })
+
+  it('supports postcss.config.mjs presence and disables config discovery', async () => {
+    // Simulate presence of postcss.config.mjs; still use createRequire path in tests
+    vi.doMock('fs', async () => {
+      const actual = await vi.importActual<any>('fs')
+      return {
+        ...actual,
+        existsSync: (p: string) =>
+          String(p).endsWith('postcss.config.mjs') || actual.existsSync(p),
+        readFileSync: actual.readFileSync
+      }
+    })
+
+    vi.doMock('module', () => ({
+      createRequire: (_: string) => {
+        const req = (id: string) => {
+          if (id.endsWith('postcss.config.mjs')) {
+            return {
+              plugins: {
+                'plugin-x': true,
+                'plugin-y': {y: 2}
+              }
+            }
+          }
+          if (id === 'plugin-x') return () => 'x'
+          if (id === 'plugin-y') return () => 'y'
+          throw new Error('unexpected require: ' + id)
+        }
+        return req as any
+      }
+    }))
+
+    const {maybeUsePostCss} = await import('../../css-tools/postcss')
+    const rule = await maybeUsePostCss('/p', {mode: 'production'})
+    const opts = rule.options?.postcssOptions
+    expect(opts?.config).toBe(false)
+    expect(Array.isArray(opts?.plugins)).toBe(true)
+    expect((opts?.plugins as any[]).length).toBe(2)
+  })
+
+  it('uses project-root discovery when only package.json contains postcss config', async () => {
+    vi.doMock('fs', async () => {
+      const actual = await vi.importActual<any>('fs')
+      return {
+        ...actual,
+        existsSync: (p: string) => {
+          // No file configs
+          if (String(p).includes('postcss.config')) return false
+          return actual.existsSync(p)
+        },
+        readFileSync: (p: string, enc: string) => {
+          if (String(p).endsWith('package.json')) {
+            return JSON.stringify({postcss: {}})
+          }
+          return (actual as any).readFileSync(p, enc)
+        }
+      }
+    })
+
+    const {maybeUsePostCss} = await import('../../css-tools/postcss')
+    const rule = await maybeUsePostCss('/p', {mode: 'development'})
+    const opts = rule.options?.postcssOptions
+    expect(opts?.config).toBe('/p')
+    // When using user config via discovery, we don't pre-supply plugins
+    expect(Array.isArray(opts?.plugins)).toBe(true)
+    expect((opts?.plugins as any[]).length).toBe(0)
+  })
 })
diff --git a/programs/develop/webpack/plugin-css/__spec__/tools.spec.ts b/programs/develop/webpack/plugin-css/__spec__/tools.spec.ts
@@ -141,8 +141,9 @@ describe('css tools additional coverage', () => {
     const res = await maybeUsePostCss('/project', {mode: 'development'})
     expect(res.loader).toBeDefined()
     expect(String(res.loader)).toContain('postcss-loader')
-    expect(
-      res.options?.postcssOptions?.config?.endsWith('postcss.config.js')
-    ).toBe(true)
+    // Since the test doesn't provide a real config module to load,
+    // we fall back to discovery from the project root
+    expect(res.options?.postcssOptions?.config).toBe('/project')
+    expect(Array.isArray(res.options?.postcssOptions?.plugins)).toBe(true)
   })
 })
diff --git a/programs/develop/webpack/plugin-css/common-style-loaders.ts b/programs/develop/webpack/plugin-css/common-style-loaders.ts
@@ -2,7 +2,7 @@ import {type RuleSetRule} from '@rspack/core'
 import {isUsingTailwind} from './css-tools/tailwind'
 import {isUsingSass} from './css-tools/sass'
 import {isUsingLess} from './css-tools/less'
-import {maybeUsePostCss} from './css-tools/postcss'
+import {isUsingPostCss, maybeUsePostCss} from './css-tools/postcss'
 import {type DevOptions} from '../webpack-types'
 
 export interface StyleLoaderOptions {
@@ -19,6 +19,7 @@ export async function commonStyleLoaders(
 
   // Handle PostCSS for Tailwind, Sass, or Less
   if (
+    isUsingPostCss(projectPath) ||
     isUsingTailwind(projectPath) ||
     isUsingSass(projectPath) ||
     isUsingLess(projectPath)
diff --git a/programs/develop/webpack/plugin-css/css-tools/postcss/index.ts b/programs/develop/webpack/plugin-css/css-tools/postcss/index.ts
@@ -8,15 +8,16 @@
 import * as path from 'path'
 import * as fs from 'fs'
 import {createRequire} from 'module'
-import * as messages from '../css-lib/messages'
+import * as messages from '../../css-lib/messages'
 import {
   installOptionalDependencies,
   hasDependency
-} from '../css-lib/integrations'
-import {isUsingTailwind} from './tailwind'
-import {isUsingSass} from './sass'
-import {isUsingLess} from './less'
-import type {StyleLoaderOptions} from '../common-style-loaders'
+} from '../../css-lib/integrations'
+import {isUsingTailwind} from '../tailwind'
+import {isUsingSass} from '../sass'
+import {isUsingLess} from '../less'
+import type {StyleLoaderOptions} from '../../common-style-loaders'
+import {loadPluginsFromUserConfig} from './load-plugins-from-user-config'
 
 let userMessageDelivered = false
 
@@ -25,6 +26,7 @@ const postCssConfigFiles = [
   '.postcssrc.json',
   '.postcssrc.yaml',
   '.postcssrc.yml',
+  'postcss.config.mjs',
   '.postcssrc.js',
   '.postcssrc.cjs',
   'postcss.config.js',
@@ -87,6 +89,16 @@ export async function maybeUsePostCss(
 
   const userPostCssConfig = findPostCssConfig(projectPath)
 
+  function hasPostCssInPackageJson(p: string): boolean {
+    try {
+      const raw = fs.readFileSync(path.join(p, 'package.json'), 'utf8')
+      const pkg = JSON.parse(raw || '{}')
+      return !!pkg?.postcss
+    } catch {
+      return false
+    }
+  }
+
   // Resolve the project's own PostCSS implementation to avoid resolving from the toolchain
   function getProjectPostcssImpl(): any {
     try {
@@ -120,6 +132,14 @@ export async function maybeUsePostCss(
     process.exit(0)
   }
 
+  const pkgHasPostCss = hasPostCssInPackageJson(projectPath)
+  const loadedPlugins = await loadPluginsFromUserConfig(
+    projectPath,
+    userPostCssConfig,
+    opts.mode
+  )
+  const useUserConfig = !!userPostCssConfig || pkgHasPostCss
+
   return {
     test: /\.css$/,
     type: 'css',
@@ -129,24 +149,31 @@ export async function maybeUsePostCss(
       implementation: getProjectPostcssImpl(),
       postcssOptions: {
         ident: 'postcss',
-        // When the user has a config, pass the string path (tests rely on this being a string)
-        // Otherwise, disable auto discovery to avoid resolving outside the project.
-        config: userPostCssConfig ? userPostCssConfig : false,
-        // If the user has their own PostCSS config, defer entirely to it.
-        // Otherwise, apply a sensible default with postcss-preset-env.
-        plugins: userPostCssConfig
-          ? []
-          : [
-              [
-                'postcss-preset-env',
-                {
-                  autoprefixer: {
-                    flexbox: 'no-2009'
-                  },
-                  stage: 3
-                }
-              ]
-            ].filter(Boolean)
+        // Ensure resolution happens from the project root, never the toolchain/cache
+        cwd: projectPath,
+        // If we successfully loaded a file config, disable rediscovery and pass plugins directly.
+        // Else if there's a package.json "postcss", allow discovery starting from the project path.
+        // Otherwise disable config discovery and fall back to defaults.
+        config: loadedPlugins ? false : useUserConfig ? projectPath : false,
+        // If the user has a config (file or package.json), let it drive plugins.
+        // When we loaded a file config ourselves, provide the normalized plugins explicitly.
+        // Otherwise, provide a default preset.
+        plugins:
+          loadedPlugins !== undefined
+            ? loadedPlugins
+            : useUserConfig
+              ? []
+              : [
+                  [
+                    'postcss-preset-env',
+                    {
+                      autoprefixer: {
+                        flexbox: 'no-2009'
+                      },
+                      stage: 3
+                    }
+                  ]
+                ].filter(Boolean)
       },
       sourceMap: opts.mode === 'development'
     }
diff --git a/programs/develop/webpack/plugin-css/css-tools/postcss/load-plugins-from-user-config.ts b/programs/develop/webpack/plugin-css/css-tools/postcss/load-plugins-from-user-config.ts
diff --git a/programs/develop/webpack/plugin-css/css-tools/tailwind.ts b/programs/develop/webpack/plugin-css/css-tools/tailwind.ts
