fix: resolve css files in node_modules (#795)

ocavue · autofix-ci[bot] · sxzz · web-flow · commit d8a1f5c7092d · 2026-03-05T12:57:13.000+09:00
Co-authored-by: autofix-ci[bot] &lt;114827586+autofix-ci[bot]@users.noreply.github.com&gt;
Co-authored-by: Kevin Deng &lt;sxzz@sxzz.moe&gt;
Co-authored-by: Rei &lt;claw@sxzz.moe&gt;
diff --git a/packages/css/package.json b/packages/css/package.json
@@ -62,6 +62,7 @@
   },
   "dependencies": {
     "lightningcss": "catalog:prod",
-    "postcss-load-config": "catalog:prod"
+    "postcss-load-config": "catalog:prod",
+    "rolldown": "catalog:prod"
   }
 }
diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts
@@ -10,9 +10,14 @@ import {
   getPreprocessorLang,
   isCssOrPreprocessor,
 } from './preprocessors.ts'
-import type { ResolvedConfig, Rolldown } from 'tsdown'
+import type { MinimalLogger } from './types.ts'
+import type { Plugin } from 'rolldown'
+import type { ResolvedConfig } from 'tsdown'
 
-export function CssPlugin(config: ResolvedConfig): Rolldown.Plugin {
+export function CssPlugin(
+  config: ResolvedConfig,
+  { logger }: { logger: MinimalLogger },
+): Plugin {
   const styles: CssStyles = new Map()
   const postHooks = createCssPostHooks(config, styles)
 
@@ -30,7 +35,7 @@ export function CssPlugin(config: ResolvedConfig): Rolldown.Plugin {
       const deps: string[] = []
 
       if (config.css.transformer === 'lightningcss') {
-        code = await loadWithLightningCSS(id, deps, config)
+        code = await loadWithLightningCSS(id, deps, config, logger)
       } else {
         code = await loadWithPostCSS(id, deps, config)
       }
@@ -59,6 +64,7 @@ async function loadWithLightningCSS(
   id: string,
   deps: string[],
   config: ResolvedConfig,
+  logger: MinimalLogger,
 ): Promise<string> {
   const lang = getPreprocessorLang(id)
 
@@ -83,6 +89,7 @@ async function loadWithLightningCSS(
       lightningcss: config.css.lightningcss,
       minify: config.css.minify,
       preprocessorOptions: config.css.preprocessorOptions,
+      logger,
     })
     deps.push(...bundleResult.deps)
     return bundleResult.code
diff --git a/packages/css/src/lightningcss.ts b/packages/css/src/lightningcss.ts
@@ -1,9 +1,18 @@
-import { readFile } from 'node:fs/promises'
+import { readFileSync } from 'node:fs'
 import path from 'node:path'
+import { ResolverFactory } from 'rolldown/experimental'
 import { compilePreprocessor, getPreprocessorLang } from './preprocessors.ts'
+import type { MinimalLogger } from './types.ts'
 import type { Targets } from 'lightningcss'
 import type { LightningCSSOptions, PreprocessorOptions } from 'tsdown/css'
 
+let resolver: ResolverFactory | undefined
+function getResolver(): ResolverFactory {
+  return (resolver ??= new ResolverFactory({
+    conditionNames: ['style', 'default'],
+  }))
+}
+
 const encoder = new TextEncoder()
 const decoder = new TextDecoder()
 
@@ -18,6 +27,7 @@ export interface BundleCssOptions {
   lightningcss?: LightningCSSOptions
   minify?: boolean
   preprocessorOptions?: PreprocessorOptions
+  logger: MinimalLogger
 }
 
 export interface BundleCssResult {
@@ -67,7 +77,9 @@ export async function bundleWithLightningCSS(
     minify: options.minify,
     resolver: {
       async read(filePath: string) {
-        const code = await readFile(filePath, 'utf8')
+        // Note: LightningCSS explicitly recommends using `readFileSync` instead
+        // of `readFile` for better performance.
+        const code = readFileSync(filePath, 'utf8')
         const lang = getPreprocessorLang(filePath)
         if (lang) {
           const preprocessed = await compilePreprocessor(
@@ -82,7 +94,15 @@ export async function bundleWithLightningCSS(
         return code
       },
       resolve(specifier: string, from: string) {
-        return path.resolve(path.dirname(from), specifier)
+        const dir = path.dirname(from)
+        const result = getResolver().sync(dir, specifier)
+        if (result.error || !result.path) {
+          options.logger.warn(
+            `[@tsdown/css] Failed to resolve import '${specifier}' from '${from}': ${result.error || 'unknown error'}`,
+          )
+          return path.resolve(dir, specifier)
+        }
+        return result.path
       },
     },
   })
diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
@@ -0,0 +1,4 @@
+export interface MinimalLogger {
+  info: (...args: any[]) => void
+  warn: (...args: any[]) => void
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/features/rolldown.ts b/src/features/rolldown.ts
@@ -152,7 +152,7 @@ async function resolveInputOptions(
     let cssPlugin: Plugin
     try {
       const { CssPlugin: AdvancedCssPlugin } = await import('@tsdown/css')
-      cssPlugin = AdvancedCssPlugin(config)
+      cssPlugin = AdvancedCssPlugin(config, { logger })
     } catch {
       cssPlugin = CssPlugin(config)
     }
diff --git a/tests/__snapshots__/css/lightningcss-inlines-import-default-.snap.md b/tests/__snapshots__/css/lightningcss-inlines-import-default-.snap.md
@@ -11,6 +11,10 @@ export {  };
   color: #00f;
 }
 
+.lib {
+  color: green;
+}
+
 .main {
   color: red;
 }
diff --git a/tests/__snapshots__/css/lightningcss-transformer-ignores-postcss-plugins.snap.md b/tests/__snapshots__/css/lightningcss-transformer-ignores-postcss-plugins.snap.md
diff --git a/tests/__snapshots__/css/lightningcss-transformer-inlines-import.snap.md b/tests/__snapshots__/css/lightningcss-transformer-inlines-import.snap.md
diff --git a/tests/__snapshots__/css/postcss-with-import.snap.md b/tests/__snapshots__/css/postcss-with-import.snap.md
@@ -7,6 +7,6 @@ export {  };
 ## style.css
 
 ```css
-/* postcss-processed */ .other { color: blue } .main { color: red }
+/* postcss-processed */ .other { color: blue } .lib { color: green } .main { color: red }
 
 ```
diff --git a/tests/css.test.ts b/tests/css.test.ts
@@ -249,8 +249,13 @@ describe('css', () => {
       context,
       files: {
         'index.ts': `import './style.css'`,
-        'style.css': `@import './other.css'; .main { color: red }`,
+        'style.css': `@import './other.css'; @import 'my-awesome-lib/lib.css'; .main { color: red }`,
         'other.css': `.other { color: blue }`,
+        'node_modules/my-awesome-lib/lib.css': `.lib { color: green }`,
+        'node_modules/my-awesome-lib/package.json': JSON.stringify({
+          name: 'my-awesome-lib',
+          exports: { './lib.css': './lib.css' },
+        }),
       },
       options: {
         css: {
@@ -270,6 +275,7 @@ describe('css', () => {
     })
     expect(fileMap['style.css']).toContain('postcss-processed')
     expect(fileMap['style.css']).toContain('.other')
+    expect(fileMap['style.css']).toContain('.lib')
     expect(fileMap['style.css']).toContain('.main')
     expect(fileMap['style.css']).not.toContain('@import')
   })
@@ -279,11 +285,17 @@ describe('css', () => {
       context,
       files: {
         'index.ts': `import './style.css'`,
-        'style.css': `@import './other.css'; .main { color: red }`,
+        'style.css': `@import './other.css'; @import 'my-awesome-lib/lib.css'; .main { color: red }`,
         'other.css': `.other { color: blue }`,
+        'node_modules/my-awesome-lib/lib.css': `.lib { color: green }`,
+        'node_modules/my-awesome-lib/package.json': JSON.stringify({
+          name: 'my-awesome-lib',
+          exports: { './lib.css': './lib.css' },
+        }),
       },
     })
     expect(fileMap['style.css']).toContain('.other')
+    expect(fileMap['style.css']).toContain('.lib')
     expect(fileMap['style.css']).toContain('.main')
     expect(fileMap['style.css']).not.toContain('@import')
   })

Original file line number	Diff line number	Diff line change
`@@ -62,6 +62,7 @@`
`62`	`62`	`},`
`63`	`63`	`"dependencies": {`
`64`	`64`	`"lightningcss": "catalog:prod",`
`65`		`- "postcss-load-config": "catalog:prod"`
	`65`	`+ "postcss-load-config": "catalog:prod",`
	`66`	`+ "rolldown": "catalog:prod"`
`66`	`67`	`}`
`67`	`68`	`}`
Original file line number	Diff line number	Diff line change
`@@ -152,7 +152,7 @@ async function resolveInputOptions(`
`152`	`152`	`let cssPlugin: Plugin`
`153`	`153`	`try {`
`154`	`154`	`const { CssPlugin: AdvancedCssPlugin } = await import('@tsdown/css')`
`155`		`- cssPlugin = AdvancedCssPlugin(config)`
	`155`	`+ cssPlugin = AdvancedCssPlugin(config, { logger })`
`156`	`156`	`} catch {`
`157`	`157`	`cssPlugin = CssPlugin(config)`
`158`	`158`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,10 @@ export { };`
`11`	`11`	`color: #00f;`
`12`	`12`	`}`
`13`	`13`
	`14`	`+.lib {`
	`15`	`+ color: green;`
	`16`	`+}`
	`17`	`+`
`14`	`18`	`.main {`
`15`	`19`	`color: red;`
`16`	`20`	`}`