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,typeCssStyles}from'tsdown/css'
+import{
+createCssPostHooks,
+getCleanId,
+RE_CSS,
+typeCssStyles,
+}from'tsdown/css'
 import{
 bundleWithLightningCSS,
 transformWithLightningCSS,
 }from'./lightningcss.ts'
-import{processWithPostCSS}from'./postcss.ts'
+import{processWithPostCSSasrunPostCSS}from'./postcss.ts'
 import{
 compilePreprocessor,
 getPreprocessorLang,
@@ -28,16 +32,23 @@ export function CssPlugin(
 styles.clear()
 },
 
-asyncload(id){
+asynctransform(code,id){
 if(!isCssOrPreprocessor(id))return
 
-letcode: string
+constcleanId=getCleanId(id)
 constdeps: string[]=[]
 
 if(config.css.transformer==='lightningcss'){
-code=awaitloadWithLightningCSS(id,deps,config,logger)
+code=awaitprocessWithLightningCSS(
+code,
+id,
+cleanId,
+deps,
+config,
+logger,
+)
 }else{
-code=awaitloadWithPostCSS(id,deps,config)
+code=awaitprocessWithPostCSS(code,id,cleanId,deps,config)
 }
 
 for(constdepofdeps){
@@ -60,80 +71,92 @@ export function CssPlugin(
 }
 }
 
-asyncfunctionloadWithLightningCSS(
+asyncfunctionprocessWithLightningCSS(
+code: string,
 id: string,
+cleanId: string,
 deps: string[],
 config: ResolvedConfig,
 logger: MinimalLogger,
 ): Promise<string>{
 constlang=getPreprocessorLang(id)
 
 if(lang){
-constrawCode=awaitreadFile(id,'utf8')
 constpreResult=awaitcompilePreprocessor(
 lang,
-rawCode,
-id,
+code,
+cleanId,
 config.css.preprocessorOptions,
 )
 deps.push(...preResult.deps)
 
-returntransformWithLightningCSS(preResult.code,id,{
+returntransformWithLightningCSS(preResult.code,cleanId,{
 target: config.css.target,
 lightningcss: config.css.lightningcss,
 minify: config.css.minify,
 })
-}elseif(RE_CSS.test(id)){
-constbundleResult=awaitbundleWithLightningCSS(id,{
+}
+
+// Virtual modules (with query strings) can't use file-based bundling
+if(id!==cleanId){
+returntransformWithLightningCSS(code,cleanId,{
 target: config.css.target,
 lightningcss: config.css.lightningcss,
 minify: config.css.minify,
-preprocessorOptions: config.css.preprocessorOptions,
- logger,
 })
+}
+
+if(RE_CSS.test(cleanId)){
+constbundleResult=awaitbundleWithLightningCSS(
+cleanId,
+{
+target: config.css.target,
+lightningcss: config.css.lightningcss,
+minify: config.css.minify,
+preprocessorOptions: config.css.preprocessorOptions,
+ logger,
+},
+code,
+)
 deps.push(...bundleResult.deps)
 returnbundleResult.code
 }
 
 return''
 }
 
-asyncfunctionloadWithPostCSS(
+asyncfunctionprocessWithPostCSS(
+code: string,
 id: string,
+cleanId: string,
 deps: string[],
 config: ResolvedConfig,
 ): Promise<string>{
 constlang=getPreprocessorLang(id)
-letcode: string
 
 if(lang){
-constrawCode=awaitreadFile(id,'utf8')
 constpreResult=awaitcompilePreprocessor(
 lang,
-rawCode,
-id,
+code,
+cleanId,
 config.css.preprocessorOptions,
 )
 code=preResult.code
 deps.push(...preResult.deps)
-}elseif(RE_CSS.test(id)){
-code=awaitreadFile(id,'utf8')
-}else{
-return''
 }
 
 constneedInlineImport=code.includes('@import')
-constpostcssResult=awaitprocessWithPostCSS(
+constpostcssResult=awaitrunPostCSS(
 code,
-id,
+cleanId,
 config.css.postcss,
 config.cwd,
 needInlineImport,
 )
 code=postcssResult.code
 deps.push(...postcssResult.deps)
 
-returntransformWithLightningCSS(code,id,{
+returntransformWithLightningCSS(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(
 exportasyncfunctionbundleWithLightningCSS(
 filename: string,
 options: BundleCssOptions,
+code?: string,
 ): Promise<BundleCssResult>{
 consttargets=
 options.lightningcss?.targets??
@@ -77,21 +78,26 @@ export async function bundleWithLightningCSS(
 minify: options.minify,
 resolver: {
 asyncread(filePath: string){
-// Note: LightningCSS explicitly recommends using `readFileSync` instead
-// of `readFile` for better performance.
-constcode=readFileSync(filePath,'utf8')
+letfileCode: 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')
+}
 constlang=getPreprocessorLang(filePath)
 if(lang){
 constpreprocessed=awaitcompilePreprocessor(
 lang,
-code,
+fileCode,
 filePath,
 options.preprocessorOptions,
 )
 deps.push(...preprocessed.deps)
 returnpreprocessed.code
 }
-returncode
+returnfileCode
 },
 resolve(specifier: string,from: string){
 constdir=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,typeCssStyles}from'./post.ts'
 importtype{ResolvedConfig}from'../../config/index.ts'
 importtype{Plugin}from'rolldown'
 
 exportconstRE_CSS: RegExp=/\.css(?:$|\?)/
 
+exportfunctiongetCleanId(id: string): string{
+constqueryIndex=id.indexOf('?')
+returnqueryIndex===-1 ? id : id.slice(0,queryIndex)
+}
+
 exportfunctionCssPlugin(config: ResolvedConfig): Plugin{
 conststyles: CssStyles=newMap()
 constpostHooks=createCssPostHooks(config,styles)
@@ -16,18 +20,13 @@ export function CssPlugin(config: ResolvedConfig): Plugin {
 styles.clear()
 },
 
-load: {
-filter: {
-id: RE_CSS,
-},
-asynchandler(id){
-letcode=awaitreadFile(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
+varexport_helper_default= (sfc, props) => {
+consttarget=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) {
+returnopenBlock(), createElementBlock("button", _hoisted_1, "Click");
+}
+var MyButton_default =/* @__PURE__ */export_helper_default(_sfc_main, [["render", _sfc_render]]);
+//#endregion
+export { MyButton_defaultasMyButton };
+
+```
+
+## style.css
+
+```css
+
+.btn { color: red; }
+
+```