@plumeria/webpack-plugin 0.8.0 → 0.10.0

package/dist/{create-css.js → create.js}

@@ -6,28 +6,59 @@ const zss_engine_1 = require("zss-engine");
 function compileToSingleCSS(object) {
     const baseSheets = [];
     const querySheets = [];
-    const atomicHashes = new Set();
+    const processedHashes = new Set();
     Object.entries(object).forEach(([key, styleObj]) => {
         const flat = {};
         const nonFlat = {};
         (0, zss_engine_1.splitAtomicAndNested)(styleObj, flat, nonFlat);
-        if (Object.keys(flat).length > 0) {
+        const records = [];
+        Object.entries(flat).forEach(([prop, value]) => {
+            const hashes = new Set();
             const sheets = new Set();
-            (0, zss_engine_1.processAtomicProps)(flat, atomicHashes, sheets);
+            (0, zss_engine_1.processAtomicProps)({ [prop]: value }, hashes, sheets);
+            const propBaseSheets = [];
+            const propQuerySheets = [];
             for (const sheet of sheets) {
                 if (sheet.includes('@media') || sheet.includes('@container')) {
-                    querySheets.push(sheet);
+                    propQuerySheets.push(sheet);
                 }
                 else {
-                    baseSheets.push(sheet);
+                    propBaseSheets.push(sheet);
                 }
             }
-        }
+            const hash = [...hashes].join(' ');
+            const sheet = [...propBaseSheets, ...propQuerySheets].join('');
+            records.push({
+                key: prop,
+                hash,
+                sheet,
+            });
+        });
         if (Object.keys(nonFlat).length > 0) {
-            const nonFlatHash = (0, zss_engine_1.genBase36Hash)({ [key]: nonFlat }, 1, 7);
-            const { styleSheet } = (0, zss_engine_1.transpile)({ [key]: nonFlat }, nonFlatHash);
-            baseSheets.push(styleSheet);
+            const nonFlatObj = { [key]: nonFlat };
+            const nonFlatHash = (0, zss_engine_1.genBase36Hash)(nonFlatObj, 1, 7);
+            const { styleSheet } = (0, zss_engine_1.transpile)(nonFlatObj, nonFlatHash);
+            Object.entries(nonFlat).forEach(([atRule, nestedObj]) => {
+                Object.entries(nestedObj).forEach(([prop]) => {
+                    records.push({
+                        key: atRule + prop,
+                        hash: nonFlatHash,
+                        sheet: styleSheet,
+                    });
+                });
+            });
         }
+        records.forEach(({ hash, sheet }) => {
+            if (!processedHashes.has(hash)) {
+                processedHashes.add(hash);
+                if (sheet.includes('@media') || sheet.includes('@container')) {
+                    querySheets.push(sheet);
+                }
+                else {
+                    baseSheets.push(sheet);
+                }
+            }
+        });
     });
     return [...baseSheets, ...querySheets].join('\n');
 }

package/dist/index.d.ts

@@ -1,7 +1,11 @@
 import type { Compiler } from 'webpack';
 export declare class PlumeriaPlugin {
-    private styles;
-    private virtualModules?;
+    private outputFileName;
+    private stylesByFile;
+    private outFile;
+    constructor(outputFileName?: string);
     apply(compiler: Compiler): void;
-    registerStyle(virtualFileName: string, css: string): void;
+    registerFileStyles(filePath: string, styles: Partial<any>): void;
+    private generateOrderedCSS;
+    private writeCSS;
 }

package/dist/index.js

@@ -5,30 +5,84 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlumeriaPlugin = void 0;
 const webpack_1 = require("webpack");
-const webpack_virtual_modules_1 = __importDefault(require("webpack-virtual-modules"));
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
 const PLUGIN_NAME = 'PlumeriaPlugin';
 class PlumeriaPlugin {
-    styles = new Map();
-    virtualModules;
+    outputFileName;
+    stylesByFile = new Map();
+    outFile;
+    constructor(outputFileName = 'zero-virtual.css') {
+        this.outputFileName = outputFileName;
+    }
     apply(compiler) {
-        this.virtualModules = new webpack_virtual_modules_1.default();
-        this.virtualModules.apply(compiler);
+        this.outFile = path_1.default.resolve(__dirname, '..', this.outputFileName);
         compiler.hooks.compile.tap(PLUGIN_NAME, () => {
-            this.styles.clear();
+            this.stylesByFile.clear();
+        });
+        compiler.hooks.normalModuleFactory.tap(PLUGIN_NAME, (nmf) => {
+            nmf.hooks.createModule.tap(PLUGIN_NAME, (createData) => {
+                const modPath = createData.matchResource ?? createData.resourceResolveData?.path;
+                if (modPath && modPath.includes('zero-virtual.css')) {
+                    createData.settings ??= {};
+                    createData.settings.sideEffects = true;
+                }
+            });
         });
         compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
-            compilation.hooks.processAssets.tapPromise({
+            compilation.hooks.processAssets.tap({
                 name: PLUGIN_NAME,
                 stage: webpack_1.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
-            }, async () => {
-                const fullCss = Array.from(this.styles.values()).join('\n');
-                compilation.emitAsset('plumeria.css', new webpack_1.sources.RawSource(fullCss));
+            }, () => {
+                this.writeCSS();
             });
         });
     }
-    registerStyle(virtualFileName, css) {
-        this.styles.set(virtualFileName, css);
-        this.virtualModules?.writeModule(virtualFileName, css);
+    registerFileStyles(filePath, styles) {
+        const prev = this.stylesByFile.get(filePath) || {
+            filePath,
+            globalStyles: '',
+            keyframeStyles: '',
+            varStyles: '',
+            themeStyles: '',
+            baseStyles: '',
+        };
+        this.stylesByFile.set(filePath, { ...prev, ...styles });
+        this.writeCSS();
+    }
+    generateOrderedCSS() {
+        const allStyles = Array.from(this.stylesByFile.values());
+        const globalStyles = [];
+        const keyframeStylesSet = new Set();
+        const varStylesSet = new Set();
+        const themeStylesSet = new Set();
+        const baseStyles = [];
+        for (const s of allStyles) {
+            if (s.globalStyles)
+                globalStyles.push(s.globalStyles);
+            if (s.keyframeStyles)
+                keyframeStylesSet.add(s.keyframeStyles);
+            if (s.varStyles)
+                varStylesSet.add(s.varStyles);
+            if (s.themeStyles)
+                themeStylesSet.add(s.themeStyles);
+            if (s.baseStyles)
+                baseStyles.push(s.baseStyles);
+        }
+        return [
+            ...globalStyles,
+            ...Array.from(keyframeStylesSet),
+            ...Array.from(varStylesSet),
+            ...Array.from(themeStylesSet),
+            ...baseStyles,
+        ]
+            .filter(Boolean)
+            .join('\n');
+    }
+    writeCSS() {
+        const css = this.generateOrderedCSS();
+        fs_1.default.mkdirSync(path_1.default.dirname(this.outFile), { recursive: true });
+        fs_1.default.writeFileSync(this.outFile, css, 'utf-8');
     }
 }
 exports.PlumeriaPlugin = PlumeriaPlugin;

package/dist/{types-table.d.ts → types.d.ts}

@@ -1,11 +1,12 @@
 type CSSPrimitive = string | number | boolean | null;
 type ParseErrorString = `[unresolved]` | `[unresolved identifier]` | `[unsupported value type]` | `[unresolved: ${string}]` | `[unresolved member expression]`;
-type CSSValue = CSSPrimitive | CSSObject | ParseErrorString;
+export type CSSValue = CSSPrimitive | CSSObject | ParseErrorString;
 export type CSSObject = {
     [key: string]: CSSValue;
 };
 export type ConstTable = Record<string, CSSObject | string>;
 export type VariableTable = Record<string, CSSObject>;
+export type ThemeTable = Record<string, CSSObject>;
 export type KeyframesHashTable = Record<string, string>;
 export type KeyframesObjectTable = Record<string, CSSObject>;
 export type DefineVarsObjectTable = Record<string, CSSObject>;

package/dist/virtual-css-loader.js

@@ -39,10 +39,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = loader;
 const core_1 = require("@babel/core");
 const t = __importStar(require("@babel/types"));
-const loader_utils_1 = __importDefault(require("loader-utils"));
 const path_1 = __importDefault(require("path"));
 const fs_1 = __importDefault(require("fs"));
-const create_css_1 = require("./create-css");
+const create_1 = require("./create");
 const glob_1 = require("@rust-gear/glob");
 const zss_engine_1 = require("zss-engine");
 const PROJECT_ROOT = process.cwd().split('node_modules')[0];
@@ -53,11 +52,12 @@ const GLOB_OPTIONS = {
 };
 let constTable = {};
 let variableTable = {};
+let themeTable = {};
 let keyframesHashTable = {};
 let keyframesObjectTable = {};
 let defineVarsObjectTable = {};
 let defineThemeObjectTable = {};
-function objectExpressionToObject(node, constTable, keyframesHashTable, variableTable) {
+function objectExpressionToObject(node, constTable, keyframesHashTable, variableTable, themeTable) {
     const obj = {};
     node.properties.forEach((prop) => {
         if (!t.isObjectProperty(prop))
@@ -77,6 +77,11 @@ function objectExpressionToObject(node, constTable, keyframesHashTable, variable
                 obj[key] = resolvedVariable;
                 return;
             }
+            const resolvedTheme = resolveThemeTableMemberExpressionByNode(val, themeTable);
+            if (resolvedTheme !== undefined) {
+                obj[key] = resolvedTheme;
+                return;
+            }
         }
         if (t.isStringLiteral(val) ||
             t.isNumericLiteral(val) ||
@@ -87,7 +92,7 @@ function objectExpressionToObject(node, constTable, keyframesHashTable, variable
             obj[key] = evaluateUnaryExpression(val);
         }
         else if (t.isObjectExpression(val)) {
-            obj[key] = objectExpressionToObject(val, constTable, keyframesHashTable, variableTable);
+            obj[key] = objectExpressionToObject(val, constTable, keyframesHashTable, variableTable, themeTable);
         }
         else if (t.isMemberExpression(val)) {
             const resolved = resolveConstTableMemberExpression(val, constTable);
@@ -195,6 +200,10 @@ function evaluateExpression(node, constTable, variableTable) {
         if (resolvedVar !== undefined) {
             return resolvedVar;
         }
+        const resolvedTheme = resolveThemeTableMemberExpressionByNode(node, themeTable);
+        if (resolvedTheme !== undefined) {
+            return resolvedTheme;
+        }
         return `[unresolved member expression]`;
     }
     if (t.isBinaryExpression(node)) {
@@ -249,32 +258,65 @@ function resolveConstTableMemberExpression(node, constTable) {
     }
     return undefined;
 }
-function resolveVariableTableMemberExpressionByNode(node, variableTable) {
+function resolveVariableTableMemberExpressionByNode(node, variableTable, asObject = false) {
     if (t.isIdentifier(node)) {
-        return variableTable[node.name];
+        if (asObject && typeof variableTable[node.name] === 'object') {
+            return { ...variableTable[node.name] };
+        }
+        const cssVarName = (0, zss_engine_1.camelToKebabCase)(node.name);
+        return `var(--${cssVarName})`;
     }
-    if (t.isMemberExpression(node)) {
-        if (t.isIdentifier(node.object)) {
-            const varName = node.object.name;
-            let key;
-            if (t.isIdentifier(node.property)) {
-                key = node.property.name;
-            }
-            else if (t.isStringLiteral(node.property)) {
-                key = node.property.value;
+    if (t.isMemberExpression(node) && t.isIdentifier(node.object)) {
+        const varName = node.object.name;
+        let key;
+        if (t.isIdentifier(node.property)) {
+            key = node.property.name;
+        }
+        else if (t.isStringLiteral(node.property)) {
+            key = node.property.value;
+        }
+        if (key &&
+            variableTable[varName] &&
+            variableTable[varName][key] !== undefined) {
+            if (asObject) {
+                return { [key]: variableTable[varName][key] };
             }
-            if (key &&
-                variableTable[varName] &&
-                variableTable[varName][key] !== undefined) {
-                return variableTable[varName][key];
+            const cssVarName = (0, zss_engine_1.camelToKebabCase)(key);
+            return `var(--${cssVarName})`;
+        }
+    }
+    return undefined;
+}
+function resolveThemeTableMemberExpressionByNode(node, themeTable, asObject = false) {
+    if (t.isIdentifier(node)) {
+        if (asObject && typeof themeTable[node.name] === 'object') {
+            return { ...themeTable[node.name] };
+        }
+        const cssVarName = (0, zss_engine_1.camelToKebabCase)(node.name);
+        return `var(--${cssVarName})`;
+    }
+    if (t.isMemberExpression(node) && t.isIdentifier(node.object)) {
+        const varName = node.object.name;
+        let key;
+        if (t.isIdentifier(node.property)) {
+            key = node.property.name;
+        }
+        else if (t.isStringLiteral(node.property)) {
+            key = node.property.value;
+        }
+        if (key && themeTable[varName] && themeTable[varName][key] !== undefined) {
+            if (asObject) {
+                return { [key]: themeTable[varName][key] };
             }
+            const cssVarName = (0, zss_engine_1.camelToKebabCase)(key);
+            return `var(--${cssVarName})`;
         }
     }
     return undefined;
 }
 function scanForDefineConsts() {
-    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
     const constTableLocal = {};
+    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
     for (const filePath of files) {
         if (!isCSSDefineFile(filePath, 'defineConsts'))
             continue;
@@ -309,7 +351,7 @@ function scanForDefineConsts() {
                     decl.init.arguments.length === 1 &&
                     t.isObjectExpression(decl.init.arguments[0])) {
                     const varName = decl.id.name;
-                    const obj = objectExpressionToObject(decl.init.arguments[0], constTableLocal, keyframesHashTable, variableTable);
+                    const obj = objectExpressionToObject(decl.init.arguments[0], constTableLocal, keyframesHashTable, variableTable, themeTable);
                     constTableLocal[varName] = obj;
                 }
             }
@@ -318,9 +360,9 @@ function scanForDefineConsts() {
     return constTableLocal;
 }
 function scanForKeyframes() {
-    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
     const keyframesHashTableLocal = {};
     const keyframesObjectTableLocal = {};
+    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
     for (const filePath of files) {
         if (!isCSSDefineFile(filePath, 'keyframes'))
             continue;
@@ -355,7 +397,7 @@ function scanForKeyframes() {
                     decl.init.arguments.length === 1 &&
                     t.isObjectExpression(decl.init.arguments[0])) {
                     const varName = decl.id.name;
-                    const obj = objectExpressionToObject(decl.init.arguments[0], constTable, keyframesHashTableLocal, variableTable);
+                    const obj = objectExpressionToObject(decl.init.arguments[0], constTable, keyframesHashTableLocal, variableTable, themeTable);
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     keyframesHashTableLocal[varName] = hash;
                     keyframesObjectTableLocal[hash] = obj;
@@ -369,9 +411,9 @@ function scanForKeyframes() {
     };
 }
 function scanForDefineVars() {
-    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
     const variableTableLocal = {};
     const defineVarsObjectTableLocal = {};
+    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
     for (const filePath of files) {
         if (!isCSSDefineFile(filePath, 'defineVars'))
             continue;
@@ -406,7 +448,7 @@ function scanForDefineVars() {
                     decl.init.arguments.length === 1 &&
                     t.isObjectExpression(decl.init.arguments[0])) {
                     const varName = decl.id.name;
-                    const obj = objectExpressionToObject(decl.init.arguments[0], constTable, keyframesHashTable, variableTableLocal);
+                    const obj = objectExpressionToObject(decl.init.arguments[0], constTable, keyframesHashTable, variableTableLocal, themeTable);
                     variableTableLocal[varName] = obj;
                     defineVarsObjectTableLocal[varName] = obj;
                 }
@@ -416,9 +458,9 @@ function scanForDefineVars() {
     return { variableTableLocal, defineVarsObjectTableLocal };
 }
 function scanForDefineTheme() {
-    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
-    const variableTableLocal = {};
+    const themeTableLocal = {};
     const defineThemeObjectTableLocal = {};
+    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
     for (const filePath of files) {
         if (!isCSSDefineFile(filePath, 'defineTheme'))
             continue;
@@ -453,14 +495,14 @@ function scanForDefineTheme() {
                     decl.init.arguments.length === 1 &&
                     t.isObjectExpression(decl.init.arguments[0])) {
                     const varName = decl.id.name;
-                    const obj = objectExpressionToObject(decl.init.arguments[0], constTable, keyframesHashTable, variableTableLocal);
-                    variableTableLocal[varName] = obj;
+                    const obj = objectExpressionToObject(decl.init.arguments[0], constTable, keyframesHashTable, variableTable, themeTableLocal);
+                    themeTableLocal[varName] = obj;
                     defineThemeObjectTableLocal[varName] = obj;
                 }
             }
         }
     }
-    return { variableTableLocal, defineThemeObjectTableLocal };
+    return { themeTableLocal, defineThemeObjectTableLocal };
 }
 function isCSSDefineFile(filePath, target) {
     if (fs_1.default.statSync(filePath).isDirectory())
@@ -505,12 +547,10 @@ function loader(source) {
     const { keyframesHashTableLocal, keyframesObjectTableLocal } = scanForKeyframes.call(this);
     keyframesHashTable = keyframesHashTableLocal;
     keyframesObjectTable = keyframesObjectTableLocal;
-    const { variableTableLocal: varsTable, defineVarsObjectTableLocal } = scanForDefineVars.call(this);
-    const { variableTableLocal: themeTable, defineThemeObjectTableLocal } = scanForDefineTheme.call(this);
-    variableTable = varsTable;
-    for (const k in themeTable) {
-        variableTable[k] = themeTable[k];
-    }
+    const { variableTableLocal, defineVarsObjectTableLocal } = scanForDefineVars.call(this);
+    const { themeTableLocal, defineThemeObjectTableLocal } = scanForDefineTheme.call(this);
+    variableTable = variableTableLocal;
+    themeTable = themeTableLocal;
     defineVarsObjectTable = defineVarsObjectTableLocal;
     defineThemeObjectTable = defineThemeObjectTableLocal;
     let extractedObject = null;
@@ -525,53 +565,31 @@ function loader(source) {
             ],
         });
     }
-    catch (e) {
-        console.warn('[virtual-css-loader] parseSync error:', e);
-        if (callback)
-            return callback(null, source);
-        return source;
-    }
-    if (!ast) {
-        console.warn('[virtual-css-loader] parseSync returned null');
-        if (callback)
-            return callback(null, source);
-        return source;
+    catch (err) {
+        console.log(err);
+        return callback(null, source);
     }
+    if (!ast)
+        return callback(null, source);
     const localConsts = collectLocalConsts(ast);
-    if (Object.keys(localConsts).length !== 0) {
-        for (const k in localConsts) {
-            constTable[k] = localConsts[k];
-        }
-    }
-    const plugin = {
+    Object.assign(constTable, localConsts);
+    const pluginAst = {
         visitor: {
             CallExpression(path) {
                 const callee = path.node.callee;
                 if (t.isMemberExpression(callee) &&
-                    t.isIdentifier(callee.object) &&
-                    callee.object.name === 'css' &&
+                    t.isIdentifier(callee.object, { name: 'css' }) &&
                     t.isIdentifier(callee.property)) {
                     const args = path.node.arguments;
                     if (callee.property.name === 'create' &&
                         args.length === 1 &&
                         t.isObjectExpression(args[0])) {
-                        try {
-                            extractedObject = objectExpressionToObject(args[0], constTable, keyframesHashTable, variableTable);
-                        }
-                        catch (e) {
-                            console.warn('[virtual-css-loader] Failed to build object from AST:', e);
-                        }
+                        extractedObject = objectExpressionToObject(args[0], constTable, keyframesHashTable, variableTable, themeTable);
                     }
                     if (callee.property.name === 'global' &&
                         args.length === 1 &&
                         t.isObjectExpression(args[0])) {
-                        try {
-                            const globalObj = objectExpressionToObject(args[0], constTable, keyframesHashTable, variableTable);
-                            extractedGlobalObjects.push(globalObj);
-                        }
-                        catch (e) {
-                            console.warn('[virtual-css-loader] Failed to build global object from AST:', e);
-                        }
+                        extractedGlobalObjects.push(objectExpressionToObject(args[0], constTable, keyframesHashTable, variableTable, themeTable));
                     }
                 }
             },
@@ -579,59 +597,66 @@ function loader(source) {
     };
     (0, core_1.transformFromAstSync)(ast, source, {
         code: false,
-        plugins: [plugin],
+        plugins: [pluginAst],
         configFile: false,
     });
-    if (!extractedObject && extractedGlobalObjects.length === 0) {
-        if (callback)
-            return callback(null, source);
-        return source;
-    }
-    const css = extractedObject ? (0, create_css_1.createCSS)(extractedObject) : '';
-    let globalCss = '';
-    for (const obj of extractedGlobalObjects) {
-        globalCss +=
-            (0, zss_engine_1.transpile)(obj, undefined, '--global').styleSheet + '\n';
-    }
-    let keyframeCss = '';
-    for (const [hash, obj] of Object.entries(keyframesObjectTable)) {
-        const keyframeWrapped = { [`@keyframes ${hash}`]: obj };
-        const { styleSheet } = (0, zss_engine_1.transpile)(keyframeWrapped, undefined, '--global');
-        keyframeCss += styleSheet + '\n';
-    }
-    let varCss = '';
-    for (const [, obj] of Object.entries(defineVarsObjectTable)) {
-        const { styleSheet } = (0, zss_engine_1.transpile)((0, create_css_1.createVars)(obj), undefined, '--global');
-        varCss += styleSheet + '\n';
-    }
-    let themeCss = '';
-    for (const [, obj] of Object.entries(defineThemeObjectTable)) {
-        const { styleSheet } = (0, zss_engine_1.transpile)((0, create_css_1.createTheme)(obj), undefined, '--global');
-        themeCss += styleSheet + '\n';
-    }
-    const finalCss = globalCss +
-        '\n' +
-        keyframeCss +
-        '\n' +
-        varCss +
-        '\n' +
-        themeCss +
-        '\n' +
-        css;
-    const virtualCssFileName = loader_utils_1.default.interpolateName(this, '[path][name].[hash:base64:8].virtual.css', {
-        content: finalCss,
-        context: this.rootContext,
-    });
-    const absVirtualCssFileName = path_1.default.resolve(this.rootContext, virtualCssFileName);
-    const pluginInstance = this._compiler?.options?.plugins.find((p) => p?.constructor?.name === 'PlumeriaPlugin');
-    pluginInstance?.registerStyle?.(absVirtualCssFileName, finalCss);
-    let importPath = path_1.default.posix.relative(path_1.default.dirname(this.resourcePath), absVirtualCssFileName);
+    const fileStyles = {};
+    if (extractedObject) {
+        const base = (0, create_1.createCSS)(extractedObject);
+        if (base)
+            fileStyles.baseStyles = base;
+    }
+    if (extractedGlobalObjects.length > 0) {
+        fileStyles.globalStyles = extractedGlobalObjects
+            .map((obj) => (0, zss_engine_1.transpile)(obj, undefined, '--global').styleSheet)
+            .join('\n');
+    }
+    if (Object.keys(keyframesObjectTable).length > 0) {
+        fileStyles.keyframeStyles = Object.entries(keyframesObjectTable)
+            .map(([hash, obj]) => (0, zss_engine_1.transpile)({ [`@keyframes ${hash}`]: obj }, undefined, '--global')
+            .styleSheet)
+            .join('\n');
+    }
+    if (Object.keys(defineVarsObjectTable).length > 0) {
+        fileStyles.varStyles = Object.values(defineVarsObjectTable)
+            .map((obj) => (0, zss_engine_1.transpile)((0, create_1.createVars)(obj), undefined, '--global')
+            .styleSheet)
+            .join('\n');
+    }
+    if (Object.keys(defineThemeObjectTable).length > 0) {
+        fileStyles.themeStyles = Object.values(defineThemeObjectTable)
+            .map((obj) => (0, zss_engine_1.transpile)((0, create_1.createTheme)(obj), undefined, '--global')
+            .styleSheet)
+            .join('\n');
+    }
+    const VIRTUAL_CSS_PATH = require.resolve(path_1.default.resolve(__dirname, '..', 'zero-virtual.css'));
+    function stringifyRequest(loaderContext, request) {
+        return JSON.stringify(loaderContext.utils.contextify(loaderContext.context || loaderContext.rootContext, request));
+    }
+    const virtualCssImportPath = path_1.default.posix.join(path_1.default.posix.relative(path_1.default.dirname(this.resourcePath), path_1.default.resolve(__dirname, '..', VIRTUAL_CSS_PATH)));
+    let importPath = virtualCssImportPath;
     if (!importPath.startsWith('.')) {
         importPath = './' + importPath;
     }
-    importPath = importPath.replace(/\\/g, '/');
-    const resultSource = source + `\nimport ${JSON.stringify(importPath)};`;
+    const serializedStyleRules = JSON.stringify(fileStyles);
+    const urlParams = new URLSearchParams({
+        from: this.resourcePath,
+        plumeria: serializedStyleRules,
+    });
+    const virtualCssRequest = stringifyRequest(this, `${VIRTUAL_CSS_PATH}?${urlParams.toString()}`);
+    const postfix = `\nimport ${virtualCssRequest};`;
+    const pluginInstance = this._compiler?.options?.plugins.find((p) => p?.constructor?.name === 'PlumeriaPlugin');
+    if (pluginInstance) {
+        if (!pluginInstance.__plumeriaRegistered) {
+            pluginInstance.__plumeriaRegistered = new Set();
+        }
+        const cache = pluginInstance.__plumeriaRegistered;
+        if (!cache.has(virtualCssRequest)) {
+            cache.add(virtualCssRequest);
+            pluginInstance?.registerFileStyles(virtualCssRequest, fileStyles);
+        }
+    }
     if (callback)
-        return callback(null, resultSource);
-    return resultSource;
+        callback(null, source + postfix);
+    return source + postfix;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/webpack-plugin",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Plumeria Webpack plugin",
   "repository": {
     "type": "git",
@@ -12,7 +12,8 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist/"
+    "dist/",
+    "zero-virtual.css"
   ],
   "scripts": {
     "build": "rimraf dist && pnpm cjs",
@@ -22,14 +23,11 @@
     "@babel/core": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@babel/types": "^7.28.2",
-    "loader-utils": "^3.3.1",
-    "webpack-virtual-modules": "^0.6.2"
+    "@babel/types": "^7.28.2"
   },
   "devDependencies": {
     "@rust-gear/glob": "^0.2.2",
     "@types/babel__core": "^7.20.5",
-    "@types/loader-utils": "^2.0.6",
     "webpack": "^5.101.0",
     "zss-engine": "^0.2.75"
   },