@plumeria/unplugin 19.1.2 → 19.1.3

package/dist/core.d.ts

@@ -1,5 +1,12 @@
 import type { UnpluginFactory } from 'unplugin';
 import type { PropertyPolicyOptions } from '@plumeria/utils';
+export type CssImportContext = {
+    id: string;
+    cssId: string;
+    cssFilename: string;
+    css: string;
+};
+export type CssImportFormatter = (ctx: CssImportContext) => string | null;
 export interface PluginOptions extends PropertyPolicyOptions {
     include?: string | RegExp | Array<string | RegExp>;
     exclude?: string | RegExp | Array<string | RegExp>;

package/dist/core.js

@@ -47,6 +47,7 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
     const targets = [];
     const devCssSheets = new Map();
     let isDev = false;
+    let cssImport = null;
     let viteRoot = process.cwd();
     return {
         name: '@plumeria/unplugin',
@@ -63,6 +64,9 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
             setRoot(root) {
                 viteRoot = root;
             },
+            setCssImport(formatter) {
+                cssImport = formatter;
+            },
         },
         resolveId(id, importer) {
             const [pathId, query] = id.split('?');
@@ -143,8 +147,16 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                 else {
                     targets.push({ id, dependencies });
                 }
+                const statement = cssImport
+                    ? cssImport({
+                        id,
+                        cssId,
+                        cssFilename,
+                        css: cssLookup.get(cssFilename) ?? '',
+                    })
+                    : `\nimport ${JSON.stringify(cssId)};`;
                 return {
-                    code: transformedSource + `\nimport ${JSON.stringify(cssId)};`,
+                    code: statement ? transformedSource + statement : transformedSource,
                     map: null,
                 };
             }

package/dist/core.mjs

@@ -11,6 +11,7 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
     const targets = [];
     const devCssSheets = new Map();
     let isDev = false;
+    let cssImport = null;
     let viteRoot = process.cwd();
     return {
         name: '@plumeria/unplugin',
@@ -27,6 +28,9 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
             setRoot(root) {
                 viteRoot = root;
             },
+            setCssImport(formatter) {
+                cssImport = formatter;
+            },
         },
         resolveId(id, importer) {
             const [pathId, query] = id.split('?');
@@ -107,8 +111,16 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                 else {
                     targets.push({ id, dependencies });
                 }
+                const statement = cssImport
+                    ? cssImport({
+                        id,
+                        cssId,
+                        cssFilename,
+                        css: cssLookup.get(cssFilename) ?? '',
+                    })
+                    : `\nimport ${JSON.stringify(cssId)};`;
                 return {
-                    code: transformedSource + `\nimport ${JSON.stringify(cssId)};`,
+                    code: statement ? transformedSource + statement : transformedSource,
                     map: null,
                 };
             }

package/dist/disk-css.d.ts

@@ -1,4 +1,6 @@
+import type { CssImportContext } from './core';
 export declare function resolveVirtualCssPath(): string;
 export declare function ensureVirtualCssFile(virtualCssPath: string): void;
 export declare function writeCssBlock(virtualCssPath: string, filePathKey: string, cssContent: string): void;
 export declare function rewriteImportPath(sourceFilePath: string, virtualCssPath: string): string;
+export declare function createDiskCssImport(getRoot: () => string, virtualCssPath?: string): ({ id, cssFilename, css }: CssImportContext) => string;

package/dist/disk-css.js

@@ -37,6 +37,7 @@ exports.resolveVirtualCssPath = resolveVirtualCssPath;
 exports.ensureVirtualCssFile = ensureVirtualCssFile;
 exports.writeCssBlock = writeCssBlock;
 exports.rewriteImportPath = rewriteImportPath;
+exports.createDiskCssImport = createDiskCssImport;
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 const module_1 = require("module");
@@ -102,3 +103,13 @@ function rewriteImportPath(sourceFilePath, virtualCssPath) {
     }
     return relativeImportPath;
 }
+function createDiskCssImport(getRoot, virtualCssPath = resolveVirtualCssPath()) {
+    return ({ id, cssFilename, css }) => {
+        ensureVirtualCssFile(virtualCssPath);
+        const filePathKey = path
+            .relative(getRoot(), cssFilename)
+            .replace(/\\/g, '/');
+        writeCssBlock(virtualCssPath, filePathKey, css);
+        return `\nimport "${rewriteImportPath(id, virtualCssPath)}";`;
+    };
+}

package/dist/disk-css.mjs

@@ -63,3 +63,13 @@ export function rewriteImportPath(sourceFilePath, virtualCssPath) {
     }
     return relativeImportPath;
 }
+export function createDiskCssImport(getRoot, virtualCssPath = resolveVirtualCssPath()) {
+    return ({ id, cssFilename, css }) => {
+        ensureVirtualCssFile(virtualCssPath);
+        const filePathKey = path
+            .relative(getRoot(), cssFilename)
+            .replace(/\\/g, '/');
+        writeCssBlock(virtualCssPath, filePathKey, css);
+        return `\nimport "${rewriteImportPath(id, virtualCssPath)}";`;
+    };
+}

package/dist/farm.js

@@ -1,70 +1,14 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 const unplugin_1 = require("unplugin");
 const core_1 = require("./core");
-const path = __importStar(require("path"));
 const disk_css_1 = require("./disk-css");
 function attachFarmHooks(plugin) {
-    const { targets } = plugin.__plumeriaInternal;
+    const { targets, setCssImport } = plugin.__plumeriaInternal;
     let isDev = false;
     let farmRoot = process.cwd();
-    const virtualCssPath = (0, disk_css_1.resolveVirtualCssPath)();
-    const baseTransform = plugin.transform;
-    plugin.transform = async function (code, id) {
-        const result = await baseTransform.call(this, code, id);
-        if (isDev && result && typeof result === 'object' && result.code) {
-            const { cssLookup, cssFileLookup } = plugin.__plumeriaInternal;
-            result.code = result.code.replace(/import\s+["'](\/[^"']+\.zero\.css)["'];/g, (_match, cssPath) => {
-                const absolutePath = cssFileLookup.get(cssPath);
-                if (!absolutePath)
-                    return _match;
-                const cssContent = cssLookup.get(absolutePath);
-                if (cssContent == null)
-                    return _match;
-                (0, disk_css_1.ensureVirtualCssFile)(virtualCssPath);
-                const filePathKey = path
-                    .relative(farmRoot, absolutePath)
-                    .replace(/\\/g, '/');
-                (0, disk_css_1.writeCssBlock)(virtualCssPath, filePathKey, cssContent);
-                const importPath = (0, disk_css_1.rewriteImportPath)(id, virtualCssPath);
-                return `import "${importPath}";`;
-            });
-        }
-        return result;
-    };
+    const diskCssImport = (0, disk_css_1.createDiskCssImport)(() => farmRoot);
+    setCssImport((ctx) => isDev ? diskCssImport(ctx) : `\nimport ${JSON.stringify(ctx.cssId)};`);
     plugin.farm = {
         config(config) {
             if (plugin.__plumeriaInternal) {

package/dist/farm.mjs

@@ -1,35 +1,12 @@
 import { createFarmPlugin } from 'unplugin';
 import { unpluginFactory, EXTENSION_PATTERN } from './core.mjs';
-import * as path from 'path';
-import { resolveVirtualCssPath, ensureVirtualCssFile, writeCssBlock, rewriteImportPath, } from './disk-css.mjs';
+import { createDiskCssImport } from './disk-css.mjs';
 function attachFarmHooks(plugin) {
-    const { targets } = plugin.__plumeriaInternal;
+    const { targets, setCssImport } = plugin.__plumeriaInternal;
     let isDev = false;
     let farmRoot = process.cwd();
-    const virtualCssPath = resolveVirtualCssPath();
-    const baseTransform = plugin.transform;
-    plugin.transform = async function (code, id) {
-        const result = await baseTransform.call(this, code, id);
-        if (isDev && result && typeof result === 'object' && result.code) {
-            const { cssLookup, cssFileLookup } = plugin.__plumeriaInternal;
-            result.code = result.code.replace(/import\s+["'](\/[^"']+\.zero\.css)["'];/g, (_match, cssPath) => {
-                const absolutePath = cssFileLookup.get(cssPath);
-                if (!absolutePath)
-                    return _match;
-                const cssContent = cssLookup.get(absolutePath);
-                if (cssContent == null)
-                    return _match;
-                ensureVirtualCssFile(virtualCssPath);
-                const filePathKey = path
-                    .relative(farmRoot, absolutePath)
-                    .replace(/\\/g, '/');
-                writeCssBlock(virtualCssPath, filePathKey, cssContent);
-                const importPath = rewriteImportPath(id, virtualCssPath);
-                return `import "${importPath}";`;
-            });
-        }
-        return result;
-    };
+    const diskCssImport = createDiskCssImport(() => farmRoot);
+    setCssImport((ctx) => isDev ? diskCssImport(ctx) : `\nimport ${JSON.stringify(ctx.cssId)};`);
     plugin.farm = {
         config(config) {
             if (plugin.__plumeriaInternal) {

package/dist/vite.js

@@ -38,13 +38,30 @@ const core_1 = require("./core");
 const utils_1 = require("@plumeria/utils");
 const path = __importStar(require("path"));
 const disk_css_1 = require("./disk-css");
+function isRscConfig(userConfig) {
+    if (userConfig.environments?.rsc)
+        return true;
+    const plugins = (userConfig.plugins ?? [])
+        .flat(Infinity)
+        .filter((p) => !!p && typeof p === 'object');
+    return plugins.some((p) => p.name === 'rsc' || !!p.name?.startsWith('rsc:'));
+}
 function attachViteHooks(plugin, options) {
     let devServer;
-    const { cssLookup, cssFileLookup, targets, setDev, setRoot } = plugin.__plumeriaInternal;
+    const { cssLookup, cssFileLookup, targets, setDev, setRoot, setCssImport } = plugin.__plumeriaInternal;
     const useDiskEmit = options?.devEmitToDisk ?? false;
     let isDev = false;
     let viteRoot = process.cwd();
-    const virtualCssPath = useDiskEmit ? (0, disk_css_1.resolveVirtualCssPath)() : '';
+    const diskCssImport = useDiskEmit
+        ? (0, disk_css_1.createDiskCssImport)(() => viteRoot)
+        : null;
+    setCssImport((ctx) => {
+        if (isRsc && isBuild)
+            return null;
+        if (isDev && diskCssImport)
+            return diskCssImport(ctx);
+        return `\nimport ${JSON.stringify(ctx.cssId)};`;
+    });
     let propsTableSnapshot = {};
     const snapshotPropsTable = () => {
         const snap = {};
@@ -61,43 +78,75 @@ function attachViteHooks(plugin, options) {
         return snap;
     };
     const lastServedCss = new Map();
+    let isRsc = false;
+    let isBuild = false;
+    let sheetRef;
+    const clientCssModules = (cssFilename) => {
+        const clientEnv = devServer?.environments?.client;
+        const graph = clientEnv?.moduleGraph;
+        if (!graph)
+            return null;
+        const mods = new Set(graph.getModulesByFile(cssFilename) ?? []);
+        const byId = graph.getModuleById(cssFilename);
+        if (byId)
+            mods.add(byId);
+        return { clientEnv, graph, mods };
+    };
+    const invalidateClientCss = (cssFilename) => {
+        const found = clientCssModules(cssFilename);
+        if (!found || found.mods.size === 0)
+            return;
+        found.mods.forEach((m) => found.graph.invalidateModule(m));
+        const cssId = `/${path.relative(viteRoot, cssFilename).replace(/\\/g, '/')}`;
+        found.clientEnv.hot.send({
+            type: 'update',
+            updates: [
+                {
+                    type: 'css-update',
+                    timestamp: Date.now(),
+                    path: cssId,
+                    acceptedPath: cssId,
+                },
+            ],
+        });
+    };
+    const reloadClientCss = (cssFilename) => {
+        const found = clientCssModules(cssFilename);
+        if (found && found.mods.size > 0) {
+            found.mods.forEach((m) => found.clientEnv.reloadModule(m));
+            return true;
+        }
+        return false;
+    };
     const baseTransform = plugin.transform;
     plugin.transform = async function (code, id) {
         const result = await baseTransform.call(this, code, id);
-        if (isDev &&
-            useDiskEmit &&
-            result &&
-            typeof result === 'object' &&
-            result.code) {
-            result.code = result.code.replace(/import\s+["'](\/[^"']+\.zero\.css)["'];/g, (_match, cssPath) => {
-                const absolutePath = cssFileLookup.get(cssPath);
-                if (!absolutePath)
-                    return _match;
-                const cssContent = cssLookup.get(absolutePath);
-                if (cssContent == null)
-                    return _match;
-                (0, disk_css_1.ensureVirtualCssFile)(virtualCssPath);
-                const filePathKey = path
-                    .relative(viteRoot, absolutePath)
-                    .replace(/\\/g, '/');
-                (0, disk_css_1.writeCssBlock)(virtualCssPath, filePathKey, cssContent);
-                const importPath = (0, disk_css_1.rewriteImportPath)(id, virtualCssPath);
-                return `import "${importPath}";`;
-            });
-        }
-        else if (!useDiskEmit &&
+        if (!useDiskEmit &&
             devServer &&
             result &&
             typeof result === 'object' &&
             result.code.includes('.zero.css')) {
             const baseId = id.replace(core_1.EXTENSION_PATTERN, '');
             const cssFilename = `${baseId}.zero.css`;
-            const mod = devServer.moduleGraph.getModuleById(cssFilename);
-            if (mod) {
-                const cssContent = cssLookup.get(cssFilename) ?? '';
-                if (lastServedCss.get(cssFilename) !== cssContent) {
-                    lastServedCss.set(cssFilename, cssContent);
-                    devServer.reloadModule(mod);
+            const cssContent = cssLookup.get(cssFilename) ?? '';
+            const envName = this.environment?.name;
+            const seenKey = `${envName ?? ''}:${cssFilename}`;
+            if (envName && envName !== 'client') {
+                if (lastServedCss.get(seenKey) !== cssContent) {
+                    lastServedCss.set(seenKey, cssContent);
+                    invalidateClientCss(cssFilename);
+                }
+            }
+            else if (lastServedCss.get(seenKey) !== cssContent) {
+                if (reloadClientCss(cssFilename)) {
+                    lastServedCss.set(seenKey, cssContent);
+                }
+                else {
+                    const mod = devServer.moduleGraph.getModuleById(cssFilename);
+                    if (mod) {
+                        lastServedCss.set(seenKey, cssContent);
+                        devServer.reloadModule(mod);
+                    }
                 }
             }
         }
@@ -115,14 +164,49 @@ function attachViteHooks(plugin, options) {
                     ],
                 },
             };
-            if (command === 'build') {
+            isBuild = command === 'build';
+            isRsc = isRscConfig(userConfig);
+            if (isBuild && !isRsc) {
                 configToReturn.build = {
                     ...(userConfig.build ?? {}),
                     cssCodeSplit: false,
                 };
             }
+            if (isBuild && isRsc) {
+                configToReturn.environments = {
+                    rsc: { build: { cssCodeSplit: false } },
+                };
+            }
             return configToReturn;
         },
+        buildStart() {
+            sheetRef = undefined;
+        },
+        async buildEnd() {
+            if (!isRsc || !isBuild)
+                return;
+            if (this.environment?.name !== 'rsc')
+                return;
+            const source = await (0, utils_1.optimizer)([...cssLookup.keys()]
+                .sort()
+                .map((key) => cssLookup.get(key))
+                .join(''));
+            if (!source.trim())
+                return;
+            sheetRef = this.emitFile({
+                type: 'asset',
+                name: 'plumeria.css',
+                source,
+            });
+        },
+        renderChunk(_code, chunk) {
+            if (!sheetRef)
+                return null;
+            if (this.environment?.name !== 'rsc')
+                return null;
+            chunk.viteMetadata.importedCss.add(this.getFileName(sheetRef));
+            return null;
+        },
         configResolved(config) {
             viteRoot = config.root;
             setRoot(config.root);
@@ -174,13 +258,15 @@ function attachViteHooks(plugin, options) {
     };
     if (!useDiskEmit) {
         vitePlugin.resolveId = function (importeeUrl) {
-            const [id] = importeeUrl.split('?', 1);
+            const queryIndex = importeeUrl.indexOf('?');
+            const id = queryIndex === -1 ? importeeUrl : importeeUrl.slice(0, queryIndex);
+            const query = queryIndex === -1 ? '' : importeeUrl.slice(queryIndex);
             if (cssLookup.has(id)) {
-                return id;
+                return id + query;
             }
             const resolved = cssFileLookup.get(id);
             if (resolved) {
-                return resolved;
+                return resolved + query;
             }
             return null;
         };

package/dist/vite.mjs

@@ -1,15 +1,32 @@
 import { createVitePlugin } from 'unplugin';
 import { unpluginFactory, EXTENSION_PATTERN } from './core.mjs';
-import { scanAll } from '@plumeria/utils';
+import { scanAll, optimizer } from '@plumeria/utils';
 import * as path from 'path';
-import { resolveVirtualCssPath, ensureVirtualCssFile, writeCssBlock, rewriteImportPath, } from './disk-css.mjs';
+import { createDiskCssImport } from './disk-css.mjs';
+function isRscConfig(userConfig) {
+    if (userConfig.environments?.rsc)
+        return true;
+    const plugins = (userConfig.plugins ?? [])
+        .flat(Infinity)
+        .filter((p) => !!p && typeof p === 'object');
+    return plugins.some((p) => p.name === 'rsc' || !!p.name?.startsWith('rsc:'));
+}
 function attachViteHooks(plugin, options) {
     let devServer;
-    const { cssLookup, cssFileLookup, targets, setDev, setRoot } = plugin.__plumeriaInternal;
+    const { cssLookup, cssFileLookup, targets, setDev, setRoot, setCssImport } = plugin.__plumeriaInternal;
     const useDiskEmit = options?.devEmitToDisk ?? false;
     let isDev = false;
     let viteRoot = process.cwd();
-    const virtualCssPath = useDiskEmit ? resolveVirtualCssPath() : '';
+    const diskCssImport = useDiskEmit
+        ? createDiskCssImport(() => viteRoot)
+        : null;
+    setCssImport((ctx) => {
+        if (isRsc && isBuild)
+            return null;
+        if (isDev && diskCssImport)
+            return diskCssImport(ctx);
+        return `\nimport ${JSON.stringify(ctx.cssId)};`;
+    });
     let propsTableSnapshot = {};
     const snapshotPropsTable = () => {
         const snap = {};
@@ -26,43 +43,75 @@ function attachViteHooks(plugin, options) {
         return snap;
     };
     const lastServedCss = new Map();
+    let isRsc = false;
+    let isBuild = false;
+    let sheetRef;
+    const clientCssModules = (cssFilename) => {
+        const clientEnv = devServer?.environments?.client;
+        const graph = clientEnv?.moduleGraph;
+        if (!graph)
+            return null;
+        const mods = new Set(graph.getModulesByFile(cssFilename) ?? []);
+        const byId = graph.getModuleById(cssFilename);
+        if (byId)
+            mods.add(byId);
+        return { clientEnv, graph, mods };
+    };
+    const invalidateClientCss = (cssFilename) => {
+        const found = clientCssModules(cssFilename);
+        if (!found || found.mods.size === 0)
+            return;
+        found.mods.forEach((m) => found.graph.invalidateModule(m));
+        const cssId = `/${path.relative(viteRoot, cssFilename).replace(/\\/g, '/')}`;
+        found.clientEnv.hot.send({
+            type: 'update',
+            updates: [
+                {
+                    type: 'css-update',
+                    timestamp: Date.now(),
+                    path: cssId,
+                    acceptedPath: cssId,
+                },
+            ],
+        });
+    };
+    const reloadClientCss = (cssFilename) => {
+        const found = clientCssModules(cssFilename);
+        if (found && found.mods.size > 0) {
+            found.mods.forEach((m) => found.clientEnv.reloadModule(m));
+            return true;
+        }
+        return false;
+    };
     const baseTransform = plugin.transform;
     plugin.transform = async function (code, id) {
         const result = await baseTransform.call(this, code, id);
-        if (isDev &&
-            useDiskEmit &&
-            result &&
-            typeof result === 'object' &&
-            result.code) {
-            result.code = result.code.replace(/import\s+["'](\/[^"']+\.zero\.css)["'];/g, (_match, cssPath) => {
-                const absolutePath = cssFileLookup.get(cssPath);
-                if (!absolutePath)
-                    return _match;
-                const cssContent = cssLookup.get(absolutePath);
-                if (cssContent == null)
-                    return _match;
-                ensureVirtualCssFile(virtualCssPath);
-                const filePathKey = path
-                    .relative(viteRoot, absolutePath)
-                    .replace(/\\/g, '/');
-                writeCssBlock(virtualCssPath, filePathKey, cssContent);
-                const importPath = rewriteImportPath(id, virtualCssPath);
-                return `import "${importPath}";`;
-            });
-        }
-        else if (!useDiskEmit &&
+        if (!useDiskEmit &&
             devServer &&
             result &&
             typeof result === 'object' &&
             result.code.includes('.zero.css')) {
             const baseId = id.replace(EXTENSION_PATTERN, '');
             const cssFilename = `${baseId}.zero.css`;
-            const mod = devServer.moduleGraph.getModuleById(cssFilename);
-            if (mod) {
-                const cssContent = cssLookup.get(cssFilename) ?? '';
-                if (lastServedCss.get(cssFilename) !== cssContent) {
-                    lastServedCss.set(cssFilename, cssContent);
-                    devServer.reloadModule(mod);
+            const cssContent = cssLookup.get(cssFilename) ?? '';
+            const envName = this.environment?.name;
+            const seenKey = `${envName ?? ''}:${cssFilename}`;
+            if (envName && envName !== 'client') {
+                if (lastServedCss.get(seenKey) !== cssContent) {
+                    lastServedCss.set(seenKey, cssContent);
+                    invalidateClientCss(cssFilename);
+                }
+            }
+            else if (lastServedCss.get(seenKey) !== cssContent) {
+                if (reloadClientCss(cssFilename)) {
+                    lastServedCss.set(seenKey, cssContent);
+                }
+                else {
+                    const mod = devServer.moduleGraph.getModuleById(cssFilename);
+                    if (mod) {
+                        lastServedCss.set(seenKey, cssContent);
+                        devServer.reloadModule(mod);
+                    }
                 }
             }
         }
@@ -80,14 +129,49 @@ function attachViteHooks(plugin, options) {
                     ],
                 },
             };
-            if (command === 'build') {
+            isBuild = command === 'build';
+            isRsc = isRscConfig(userConfig);
+            if (isBuild && !isRsc) {
                 configToReturn.build = {
                     ...(userConfig.build ?? {}),
                     cssCodeSplit: false,
                 };
             }
+            if (isBuild && isRsc) {
+                configToReturn.environments = {
+                    rsc: { build: { cssCodeSplit: false } },
+                };
+            }
             return configToReturn;
         },
+        buildStart() {
+            sheetRef = undefined;
+        },
+        async buildEnd() {
+            if (!isRsc || !isBuild)
+                return;
+            if (this.environment?.name !== 'rsc')
+                return;
+            const source = await optimizer([...cssLookup.keys()]
+                .sort()
+                .map((key) => cssLookup.get(key))
+                .join(''));
+            if (!source.trim())
+                return;
+            sheetRef = this.emitFile({
+                type: 'asset',
+                name: 'plumeria.css',
+                source,
+            });
+        },
+        renderChunk(_code, chunk) {
+            if (!sheetRef)
+                return null;
+            if (this.environment?.name !== 'rsc')
+                return null;
+            chunk.viteMetadata.importedCss.add(this.getFileName(sheetRef));
+            return null;
+        },
         configResolved(config) {
             viteRoot = config.root;
             setRoot(config.root);
@@ -139,13 +223,15 @@ function attachViteHooks(plugin, options) {
     };
     if (!useDiskEmit) {
         vitePlugin.resolveId = function (importeeUrl) {
-            const [id] = importeeUrl.split('?', 1);
+            const queryIndex = importeeUrl.indexOf('?');
+            const id = queryIndex === -1 ? importeeUrl : importeeUrl.slice(0, queryIndex);
+            const query = queryIndex === -1 ? '' : importeeUrl.slice(queryIndex);
             if (cssLookup.has(id)) {
-                return id;
+                return id + query;
             }
             const resolved = cssFileLookup.get(id);
             if (resolved) {
-                return resolved;
+                return resolved + query;
             }
             return null;
         };

package/dist/webpack.js

@@ -40,7 +40,13 @@ const path = __importStar(require("path"));
 const ZERO_CSS_SUFFIX = '(?:$|\\?|%3F)';
 const VIRTUAL_CSS_PATH = new RegExp(`\\.zero\\.css${ZERO_CSS_SUFFIX}`);
 function attachWebpackHooks(plugin) {
-    const { setDev, setRoot } = plugin.__plumeriaInternal;
+    const { setDev, setRoot, setCssImport } = plugin.__plumeriaInternal;
+    setCssImport(({ id, cssFilename }) => {
+        let rel = path.relative(path.dirname(id), cssFilename).replace(/\\/g, '/');
+        if (!rel.startsWith('.'))
+            rel = `./${rel}`;
+        return `\nimport "${rel}?t=${Date.now()}";`;
+    });
     plugin.transformInclude = (id) => {
         const [pathId] = id.split('?', 1);
         return (/\.(ts|tsx|js|jsx)$/.test(pathId) &&
@@ -51,25 +57,6 @@ function attachWebpackHooks(plugin) {
         const [pathId] = id.split('?', 1);
         return pathId.endsWith('.zero.css');
     };
-    const originalTransform = plugin.transform;
-    plugin.transform = async function (code, id) {
-        const result = await originalTransform.call(this, code, id);
-        if (result && typeof result === 'object' && result.code) {
-            const { cssFileLookup } = plugin.__plumeriaInternal;
-            result.code = result.code.replace(/import\s+"(\/[^"]+\.zero\.css)";/g, (_match, cssPath) => {
-                const absoluteCssPath = cssFileLookup.get(cssPath);
-                if (!absoluteCssPath)
-                    return _match;
-                let rel = path
-                    .relative(path.dirname(id), absoluteCssPath)
-                    .replace(/\\/g, '/');
-                if (!rel.startsWith('.'))
-                    rel = `./${rel}`;
-                return `import "${rel}?t=${Date.now()}";`;
-            });
-        }
-        return result;
-    };
     plugin.resolveId = function (id, importer) {
         const [pathId, query] = id.split('?');
         const { cssLookup } = plugin.__plumeriaInternal;

package/dist/webpack.mjs

@@ -1,10 +1,16 @@
 import { createWebpackPlugin } from 'unplugin';
-import { unpluginFactory } from './core.mjs';
+import { unpluginFactory, } from './core.mjs';
 import * as path from 'path';
 const ZERO_CSS_SUFFIX = '(?:$|\\?|%3F)';
 const VIRTUAL_CSS_PATH = new RegExp(`\\.zero\\.css${ZERO_CSS_SUFFIX}`);
 export function attachWebpackHooks(plugin) {
-    const { setDev, setRoot } = plugin.__plumeriaInternal;
+    const { setDev, setRoot, setCssImport } = plugin.__plumeriaInternal;
+    setCssImport(({ id, cssFilename }) => {
+        let rel = path.relative(path.dirname(id), cssFilename).replace(/\\/g, '/');
+        if (!rel.startsWith('.'))
+            rel = `./${rel}`;
+        return `\nimport "${rel}?t=${Date.now()}";`;
+    });
     plugin.transformInclude = (id) => {
         const [pathId] = id.split('?', 1);
         return (/\.(ts|tsx|js|jsx)$/.test(pathId) &&
@@ -15,25 +21,6 @@ export function attachWebpackHooks(plugin) {
         const [pathId] = id.split('?', 1);
         return pathId.endsWith('.zero.css');
     };
-    const originalTransform = plugin.transform;
-    plugin.transform = async function (code, id) {
-        const result = await originalTransform.call(this, code, id);
-        if (result && typeof result === 'object' && result.code) {
-            const { cssFileLookup } = plugin.__plumeriaInternal;
-            result.code = result.code.replace(/import\s+"(\/[^"]+\.zero\.css)";/g, (_match, cssPath) => {
-                const absoluteCssPath = cssFileLookup.get(cssPath);
-                if (!absoluteCssPath)
-                    return _match;
-                let rel = path
-                    .relative(path.dirname(id), absoluteCssPath)
-                    .replace(/\\/g, '/');
-                if (!rel.startsWith('.'))
-                    rel = `./${rel}`;
-                return `import "${rel}?t=${Date.now()}";`;
-            });
-        }
-        return result;
-    };
     plugin.resolveId = function (id, importer) {
         const [pathId, query] = id.split('?');
         const { cssLookup } = plugin.__plumeriaInternal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/unplugin",
-  "version": "19.1.2",
+  "version": "19.1.3",
   "description": "Universal Plumeria plugin for various build tools",
   "author": "Refirst 11",
   "license": "MIT",
@@ -94,7 +94,7 @@
   "dependencies": {
     "@rollup/pluginutils": "^5.4.0",
     "unplugin": "^3.0.0",
-    "@plumeria/utils": "^19.1.2"
+    "@plumeria/utils": "^19.1.3"
   },
   "devDependencies": {
     "vite": "^8.0.13"