Best-effort attempt to fix PostCSS path resolution

Author: cezaraugusto

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 () => ({}))
 }))
 

programs/develop/webpack/plugin-css/__spec__/css-tools/postcss.spec.ts

@@ -27,4 +27,72 @@ describe('postcss detection', () => {
     const {isUsingPostCss} = await import('../../css-tools/postcss')
     expect(isUsingPostCss('/p')).toBe(true)
   })
+
+  it('uses file-based postcss config discovered from project path', 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
+      }
+    })
+
+    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('/p')
+    // We don't pre-supply plugins; discovery will happen at runtime from /p
+    expect(opts?.plugins).toBeUndefined()
+  })
+
+  it('supports postcss.config.mjs discovered from project path', 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
+      }
+    })
+
+    const {maybeUsePostCss} = await import('../../css-tools/postcss')
+    const rule = await maybeUsePostCss('/p', {mode: 'production'})
+    const opts = rule.options?.postcssOptions
+    expect(opts?.config).toBe('/p')
+    expect(opts?.plugins).toBeUndefined()
+  })
+
+  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')
+    // We don't pre-supply plugins
+    expect(opts?.plugins).toBeUndefined()
+  })
 })

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(res.options?.postcssOptions?.plugins).toBeUndefined()
   })
 })

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)

programs/develop/webpack/plugin-css/css-tools/postcss.ts

@@ -25,6 +25,7 @@ const postCssConfigFiles = [
   '.postcssrc.json',
   '.postcssrc.yaml',
   '.postcssrc.yml',
+  'postcss.config.mjs',
   '.postcssrc.js',
   '.postcssrc.cjs',
   'postcss.config.js',
@@ -83,35 +84,33 @@ export async function maybeUsePostCss(
   projectPath: string,
   opts: StyleLoaderOptions
 ): Promise<Record<string, any>> {
-  if (!isUsingPostCss(projectPath)) return {}
-
   const userPostCssConfig = findPostCssConfig(projectPath)
 
-  // Resolve the project's own PostCSS implementation to avoid resolving from the toolchain
-  function getProjectPostcssImpl(): any {
+  function hasPostCssInPackageJson(p: string): boolean {
     try {
-      const req = createRequire(path.join(projectPath, 'package.json'))
-      return req('postcss')
+      const raw = fs.readFileSync(path.join(p, 'package.json'), 'utf8')
+      const pkg = JSON.parse(raw || '{}')
+      return !!pkg?.postcss
     } catch {
-      try {
-        // Fallback to loader's postcss if not found in project
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
-        return require('postcss')
-      } catch {
-        return undefined
-      }
+      return false
     }
   }
 
+  const pkgHasPostCss = hasPostCssInPackageJson(projectPath)
+  const tailwindPresent = isUsingTailwind(projectPath)
+
+  // Only add postcss-loader when there's a clear signal of usage
+  if (!userPostCssConfig && !pkgHasPostCss && !tailwindPresent) {
+    return {}
+  }
+
   try {
     require.resolve('postcss-loader')
   } catch (e) {
     // SASS and LESS will install PostCSS as a dependency
     // so we don't need to check for it here.
     if (!isUsingSass(projectPath) && !isUsingLess(projectPath)) {
-      const postCssDependencies = userPostCssConfig
-        ? ['postcss', 'postcss-loader']
-        : ['postcss', 'postcss-loader', 'postcss-preset-env']
+      const postCssDependencies = ['postcss', 'postcss-loader']
 
       await installOptionalDependencies('PostCSS', postCssDependencies)
     }
@@ -120,6 +119,22 @@ export async function maybeUsePostCss(
     process.exit(0)
   }
 
+  // Resolve the project's own PostCSS implementation to avoid resolving from the toolchain
+  function getProjectPostcssImpl(): any {
+    try {
+      const req = createRequire(path.join(projectPath, 'package.json'))
+      return req('postcss')
+    } catch {
+      try {
+        // Fallback to loader's postcss if not found in project
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        return require('postcss')
+      } catch {
+        return undefined
+      }
+    }
+  }
+
   return {
     test: /\.css$/,
     type: 'css',
@@ -129,24 +144,10 @@ 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 and discovery happen from the project root
+        cwd: projectPath,
+        // Let postcss-load-config discover config/plugins from the package path
+        config: projectPath
       },
       sourceMap: opts.mode === 'development'
     }

programs/develop/webpack/plugin-css/css-tools/tailwind.ts

@@ -13,7 +13,9 @@ import {hasDependency} from '../css-lib/integrations'
 let userMessageDelivered = false
 
 export function isUsingTailwind(projectPath: string) {
-  const isUsingTailwind = hasDependency(projectPath, 'tailwindcss')
+  const isUsingTailwind =
+    hasDependency(projectPath, 'tailwindcss') ||
+    hasDependency(projectPath, '@tailwindcss/postcss')
 
   if (isUsingTailwind) {
     if (!userMessageDelivered) {