fix(css): handle virtual module IDs from framework plugins

Move CSS processing from `load` to `transform` hook so framework
plugins (e.g. Vue SFC) can load virtual modules first. This prevents
ENOENT errors when the CSS plugin tried to read virtual paths like
`MyButton.vue?vue&type=style&index=0&lang.css` from disk.

closes #800

Author: sxzz

dts.snapshot.json

@@ -16,6 +16,7 @@
   "css.d.mts": {
     "createCssPostHooks": "declare function createCssPostHooks(_: { css: { splitting: boolean; fileName: string } }, _: CssStyles): Pick<Required<Plugin>, 'renderChunk' | 'generateBundle'>",
     "CssStyles": "type CssStyles = Map<string, string>",
+    "getCleanId": "declare function getCleanId(_: string): string",
     "getEmptyChunkReplacer": "declare function getEmptyChunkReplacer(_: string[]): (_: string) => string",
     "RE_CSS": "RegExp",
     "removePureCssChunks": "declare function removePureCssChunks(_: Record<string, OutputChunk | OutputAsset>, _: CssStyles): void",
@@ -35,6 +36,7 @@
       "StylusPreprocessorOptions",
       "createCssPostHooks",
       "defaultCssBundleName",
+      "getCleanId",
       "getEmptyChunkReplacer",
       "removePureCssChunks",
       "resolveCssOptions"

package.json

@@ -175,8 +175,10 @@
     "unocss": "catalog:docs",
     "unplugin-ast": "catalog:dev",
     "unplugin-unused": "catalog:peer",
+    "unplugin-vue": "catalog:dev",
     "vite": "catalog:docs",
-    "vitest": "catalog:dev"
+    "vitest": "catalog:dev",
+    "vue": "catalog:docs"
   },
   "prettier": "@sxzz/prettier-config"
 }

packages/css/src/index.ts

@@ -1,10 +1,14 @@
-import { readFile } from 'node:fs/promises'
-import { createCssPostHooks, RE_CSS, type CssStyles } from 'tsdown/css'
+import {
+  createCssPostHooks,
+  getCleanId,
+  RE_CSS,
+  type CssStyles,
+} from 'tsdown/css'
 import {
   bundleWithLightningCSS,
   transformWithLightningCSS,
 } from './lightningcss.ts'
-import { processWithPostCSS } from './postcss.ts'
+import { processWithPostCSS as runPostCSS } from './postcss.ts'
 import {
   compilePreprocessor,
   getPreprocessorLang,
@@ -28,16 +32,23 @@ export function CssPlugin(
       styles.clear()
     },
 
-    async load(id) {
+    async transform(code, id) {
       if (!isCssOrPreprocessor(id)) return
 
-      let code: string
+      const cleanId = getCleanId(id)
       const deps: string[] = []
 
       if (config.css.transformer === 'lightningcss') {
-        code = await loadWithLightningCSS(id, deps, config, logger)
+        code = await processWithLightningCSS(
+          code,
+          id,
+          cleanId,
+          deps,
+          config,
+          logger,
+        )
       } else {
-        code = await loadWithPostCSS(id, deps, config)
+        code = await processWithPostCSS(code, id, cleanId, deps, config)
       }
 
       for (const dep of deps) {
@@ -60,80 +71,92 @@ export function CssPlugin(
   }
 }
 
-async function loadWithLightningCSS(
+async function processWithLightningCSS(
+  code: string,
   id: string,
+  cleanId: string,
   deps: string[],
   config: ResolvedConfig,
   logger: MinimalLogger,
 ): Promise<string> {
   const lang = getPreprocessorLang(id)
 
   if (lang) {
-    const rawCode = await readFile(id, 'utf8')
     const preResult = await compilePreprocessor(
       lang,
-      rawCode,
-      id,
+      code,
+      cleanId,
       config.css.preprocessorOptions,
     )
     deps.push(...preResult.deps)
 
-    return transformWithLightningCSS(preResult.code, id, {
+    return transformWithLightningCSS(preResult.code, cleanId, {
       target: config.css.target,
       lightningcss: config.css.lightningcss,
       minify: config.css.minify,
     })
-  } else if (RE_CSS.test(id)) {
-    const bundleResult = await bundleWithLightningCSS(id, {
+  }
+
+  // Virtual modules (with query strings) can't use file-based bundling
+  if (id !== cleanId) {
+    return transformWithLightningCSS(code, cleanId, {
       target: config.css.target,
       lightningcss: config.css.lightningcss,
       minify: config.css.minify,
-      preprocessorOptions: config.css.preprocessorOptions,
-      logger,
     })
+  }
+
+  if (RE_CSS.test(cleanId)) {
+    const bundleResult = await bundleWithLightningCSS(
+      cleanId,
+      {
+        target: config.css.target,
+        lightningcss: config.css.lightningcss,
+        minify: config.css.minify,
+        preprocessorOptions: config.css.preprocessorOptions,
+        logger,
+      },
+      code,
+    )
     deps.push(...bundleResult.deps)
     return bundleResult.code
   }
 
   return ''
 }
 
-async function loadWithPostCSS(
+async function processWithPostCSS(
+  code: string,
   id: string,
+  cleanId: string,
   deps: string[],
   config: ResolvedConfig,
 ): Promise<string> {
   const lang = getPreprocessorLang(id)
-  let code: string
 
   if (lang) {
-    const rawCode = await readFile(id, 'utf8')
     const preResult = await compilePreprocessor(
       lang,
-      rawCode,
-      id,
+      code,
+      cleanId,
       config.css.preprocessorOptions,
     )
     code = preResult.code
     deps.push(...preResult.deps)
-  } else if (RE_CSS.test(id)) {
-    code = await readFile(id, 'utf8')
-  } else {
-    return ''
   }
 
   const needInlineImport = code.includes('@import')
-  const postcssResult = await processWithPostCSS(
+  const postcssResult = await runPostCSS(
     code,
-    id,
+    cleanId,
     config.css.postcss,
     config.cwd,
     needInlineImport,
   )
   code = postcssResult.code
   deps.push(...postcssResult.deps)
 
-  return transformWithLightningCSS(code, id, {
+  return transformWithLightningCSS(code, cleanId, {
     target: config.css.target,
     lightningcss: config.css.lightningcss,
     minify: config.css.minify,

packages/css/src/lightningcss.ts

@@ -62,6 +62,7 @@ export async function transformWithLightningCSS(
 export async function bundleWithLightningCSS(
   filename: string,
   options: BundleCssOptions,
+  code?: string,
 ): Promise<BundleCssResult> {
   const targets =
     options.lightningcss?.targets ??
@@ -77,21 +78,26 @@ export async function bundleWithLightningCSS(
     minify: options.minify,
     resolver: {
       async read(filePath: string) {
-        // Note: LightningCSS explicitly recommends using `readFileSync` instead
-        // of `readFile` for better performance.
-        const code = readFileSync(filePath, 'utf8')
+        let fileCode: string
+        if (code != null && filePath === filename) {
+          fileCode = code
+        } else {
+          // Note: LightningCSS explicitly recommends using `readFileSync` instead
+          // of `readFile` for better performance.
+          fileCode = readFileSync(filePath, 'utf8')
+        }
         const lang = getPreprocessorLang(filePath)
         if (lang) {
           const preprocessed = await compilePreprocessor(
             lang,
-            code,
+            fileCode,
             filePath,
             options.preprocessorOptions,
           )
           deps.push(...preprocessed.deps)
           return preprocessed.code
         }
-        return code
+        return fileCode
       },
       resolve(specifier: string, from: string) {
         const dir = path.dirname(from)

pnpm-lock.yaml

@@ -34,6 +34,7 @@ catalogs:
     rolldown-plugin-require-cjs: ^0.3.3
     typescript: ~5.9.3
     unplugin-ast: ^0.16.0
+    unplugin-vue: ^7.1.1
     vitest: ^4.0.18
   docs:
     '@iconify-json/logos': ^1.2.10

pnpm-workspace.yaml

@@ -2,7 +2,7 @@ export {
   defaultCssBundleName,
   resolveCssOptions,
 } from './features/css/index.ts'
-export { RE_CSS } from './features/css/plugin.ts'
+export { getCleanId, RE_CSS } from './features/css/plugin.ts'
 export { createCssPostHooks } from './features/css/post.ts'
 export {
   getEmptyChunkReplacer,

src/css.ts

@@ -1,10 +1,14 @@
-import { readFile } from 'node:fs/promises'
 import { createCssPostHooks, type CssStyles } from './post.ts'
 import type { ResolvedConfig } from '../../config/index.ts'
 import type { Plugin } from 'rolldown'
 
 export const RE_CSS: RegExp = /\.css(?:$|\?)/
 
+export function getCleanId(id: string): string {
+  const queryIndex = id.indexOf('?')
+  return queryIndex === -1 ? id : id.slice(0, queryIndex)
+}
+
 export function CssPlugin(config: ResolvedConfig): Plugin {
   const styles: CssStyles = new Map()
   const postHooks = createCssPostHooks(config, styles)
@@ -16,18 +20,13 @@ export function CssPlugin(config: ResolvedConfig): Plugin {
       styles.clear()
     },
 
-    load: {
-      filter: {
-        id: RE_CSS,
-      },
-      async handler(id) {
-        let code = await readFile(id, 'utf8')
-        if (code.length > 0 && !code.endsWith('\n')) {
-          code += '\n'
-        }
-        styles.set(id, code)
-        return { code: '', moduleSideEffects: 'no-treeshake', moduleType: 'js' }
-      },
+    transform(code, id) {
+      if (!RE_CSS.test(id)) return
+      if (code.length > 0 && !code.endsWith('\n')) {
+        code += '\n'
+      }
+      styles.set(id, code)
+      return { code: '', moduleSideEffects: 'no-treeshake', moduleType: 'js' }
     },
 
     ...postHooks,

src/features/css/plugin.ts

@@ -0,0 +1,30 @@
+## index.mjs
+
+```mjs
+import { createElementBlock, openBlock } from "vue";
+//#region \0/plugin-vue/export-helper
+var export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+//#region MyButton.vue
+const _sfc_main = {};
+const _hoisted_1 = { class: "btn" };
+function _sfc_render(_ctx, _cache) {
+	return openBlock(), createElementBlock("button", _hoisted_1, "Click");
+}
+var MyButton_default = /* @__PURE__ */ export_helper_default(_sfc_main, [["render", _sfc_render]]);
+//#endregion
+export { MyButton_default as MyButton };
+
+```
+
+## style.css
+
+```css
+
+.btn { color: red; }
+
+```