@plumeria/webpack-plugin 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) zss-in-js contributer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/create-css.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTheme = exports.createVars = void 0;
+exports.createCSS = createCSS;
+const zss_engine_1 = require("zss-engine");
+function compileToSingleCSS(object) {
+    const baseSheets = [];
+    const querySheets = [];
+    const atomicHashes = 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 sheets = new Set();
+            (0, zss_engine_1.processAtomicProps)(flat, atomicHashes, sheets);
+            for (const sheet of sheets) {
+                if (sheet.includes('@media') || sheet.includes('@container')) {
+                    querySheets.push(sheet);
+                }
+                else {
+                    baseSheets.push(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);
+        }
+    });
+    return [...baseSheets, ...querySheets].join('\n');
+}
+function createCSS(object) {
+    const result = {};
+    Object.entries(object).forEach(([key, styleObj]) => {
+        Object.defineProperty(result, key, {
+            get: () => Object.freeze(styleObj),
+        });
+    });
+    const compiledCSS = compileToSingleCSS(object);
+    return compiledCSS;
+}
+const createVars = (object) => {
+    const styles = {
+        ':root': {},
+    };
+    Object.entries(object).forEach(([key, value]) => {
+        styles[':root'][`--${key}`] = value;
+    });
+    styles;
+    return styles;
+};
+exports.createVars = createVars;
+const createTheme = (object) => {
+    const styles = {};
+    Object.entries(object).forEach(([key, value]) => {
+        Object.entries(value).forEach(([subKey, subValue]) => {
+            if (subKey.startsWith('@media')) {
+                styles[':root'] ||= {};
+                styles[':root'][subKey] ||= {};
+                styles[':root'][subKey][`--${key}`] = subValue;
+            }
+            else {
+                const themeSelector = subKey === 'default' ? ':root' : `:root[data-theme="${subKey}"]`;
+                styles[themeSelector] ||= {};
+                styles[themeSelector][`--${key}`] = subValue;
+            }
+        });
+    });
+    return styles;
+};
+exports.createTheme = createTheme;

package/dist/index.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const webpack_1 = require("webpack");
+const webpack_virtual_modules_1 = __importDefault(require("webpack-virtual-modules"));
+const PLUGIN_NAME = 'PlumeriaPlugin';
+class PlumeriaPlugin {
+    styles = new Map();
+    virtualModules;
+    apply(compiler) {
+        this.virtualModules = new webpack_virtual_modules_1.default();
+        this.virtualModules.apply(compiler);
+        compiler.hooks.compile.tap(PLUGIN_NAME, () => {
+            this.styles.clear();
+        });
+        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+            compilation.hooks.processAssets.tapPromise({
+                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));
+            });
+        });
+    }
+    registerStyle(virtualFileName, css) {
+        this.styles.set(virtualFileName, css);
+        this.virtualModules?.writeModule(virtualFileName, css);
+    }
+}
+exports.default = PlumeriaPlugin;

package/dist/types-table.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/virtual-css-loader.js

@@ -0,0 +1,637 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 glob_1 = require("@rust-gear/glob");
+const zss_engine_1 = require("zss-engine");
+const PROJECT_ROOT = process.cwd().split('node_modules')[0];
+const PATTERN_PATH = path_1.default.join(PROJECT_ROOT, '**/*.{js,jsx,ts,tsx}');
+const GLOB_OPTIONS = {
+    exclude: ['**/node_modules/**', '**/dist/**', '**/build/**', '**/.next/**'],
+    cwd: PROJECT_ROOT,
+};
+let constTable = {};
+let variableTable = {};
+let keyframesHashTable = {};
+let keyframesObjectTable = {};
+let defineVarsObjectTable = {};
+let defineThemeObjectTable = {};
+function objectExpressionToObject(node, constTable, keyframesHashTable, variableTable) {
+    const obj = {};
+    node.properties.forEach((prop) => {
+        if (!t.isObjectProperty(prop))
+            return;
+        const key = getPropertyKey(prop.key, constTable, variableTable);
+        if (!key)
+            return;
+        const val = prop.value;
+        if (t.isIdentifier(val) || t.isMemberExpression(val)) {
+            const resolvedKeyframe = resolveKeyframesTableMemberExpression(val, keyframesHashTable);
+            if (resolvedKeyframe !== undefined) {
+                obj[key] = resolvedKeyframe;
+                return;
+            }
+            const resolvedVariable = resolveVariableTableMemberExpressionByNode(val, variableTable);
+            if (resolvedVariable !== undefined) {
+                obj[key] = resolvedVariable;
+                return;
+            }
+        }
+        if (t.isStringLiteral(val) ||
+            t.isNumericLiteral(val) ||
+            t.isBooleanLiteral(val)) {
+            obj[key] = val.value;
+        }
+        else if (t.isUnaryExpression(val)) {
+            obj[key] = evaluateUnaryExpression(val);
+        }
+        else if (t.isObjectExpression(val)) {
+            obj[key] = objectExpressionToObject(val, constTable, keyframesHashTable, variableTable);
+        }
+        else if (t.isMemberExpression(val)) {
+            const resolved = resolveConstTableMemberExpression(val, constTable);
+            obj[key] = resolved !== undefined ? resolved : '[unresolved]';
+        }
+        else if (t.isIdentifier(val)) {
+            if (constTable[val.name] !== undefined) {
+                obj[key] = constTable[val.name];
+            }
+            else {
+                obj[key] = '[unresolved identifier]';
+            }
+        }
+        else {
+            obj[key] = '[unsupported value type]';
+        }
+    });
+    return obj;
+}
+function collectLocalConsts(ast) {
+    const localConsts = {};
+    (0, core_1.traverse)(ast, {
+        VariableDeclarator(path) {
+            const { node } = path;
+            if (t.isIdentifier(node.id) &&
+                node.init &&
+                t.isStringLiteral(node.init)) {
+                localConsts[node.id.name] = node.init.value;
+            }
+        },
+    });
+    return localConsts;
+}
+function getPropertyKey(node, constTable, variableTable) {
+    if (t.isIdentifier(node)) {
+        if (constTable[node.name] && typeof constTable[node.name] === 'string') {
+            return constTable[node.name];
+        }
+        return node.name;
+    }
+    if (t.isStringLiteral(node))
+        return node.value;
+    if (t.isMemberExpression(node)) {
+        const result = resolveConstTableMemberExpression(node, constTable);
+        if (typeof result === 'string')
+            return result;
+        throw new Error(`Resolved key is not a string: ${JSON.stringify(result)}`);
+    }
+    if (t.isTemplateLiteral(node)) {
+        return evaluateTemplateLiteral(node, constTable, variableTable);
+    }
+    if (t.isBinaryExpression(node)) {
+        return evaluateBinaryExpression(node, constTable, variableTable);
+    }
+    throw new Error(`Unsupported property key type: ${node.type}`);
+}
+function evaluateTemplateLiteral(node, constTable, variableTable) {
+    let result = '';
+    for (let i = 0; i < node.quasis.length; i++) {
+        result += node.quasis[i].value.cooked || node.quasis[i].value.raw;
+        if (i < node.expressions.length) {
+            const expr = node.expressions[i];
+            const evaluatedExpr = evaluateExpression(expr, constTable, variableTable);
+            result += String(evaluatedExpr);
+        }
+    }
+    return result;
+}
+function evaluateBinaryExpression(node, constTable, variableTable) {
+    const left = evaluateExpression(node.left, constTable, variableTable);
+    const right = evaluateExpression(node.right, constTable, variableTable);
+    if (node.operator === '+') {
+        return String(left) + String(right);
+    }
+    throw new Error(`Unsupported binary operator: ${node.operator}`);
+}
+function evaluateExpression(node, constTable, variableTable) {
+    if (t.isStringLiteral(node)) {
+        return node.value;
+    }
+    if (t.isNumericLiteral(node)) {
+        return node.value;
+    }
+    if (t.isBooleanLiteral(node)) {
+        return node.value;
+    }
+    if (t.isNullLiteral(node)) {
+        return null;
+    }
+    if (t.isIdentifier(node)) {
+        if (constTable[node.name] !== undefined) {
+            return constTable[node.name];
+        }
+        if (keyframesHashTable[node.name] !== undefined) {
+            return keyframesHashTable[node.name];
+        }
+        return `[unresolved: ${node.name}]`;
+    }
+    if (t.isMemberExpression(node)) {
+        const resolved = resolveConstTableMemberExpression(node, constTable);
+        if (resolved !== undefined) {
+            return resolved;
+        }
+        const resolvedVar = resolveVariableTableMemberExpressionByNode(node, variableTable);
+        if (resolvedVar !== undefined) {
+            return resolvedVar;
+        }
+        return `[unresolved member expression]`;
+    }
+    if (t.isBinaryExpression(node)) {
+        return evaluateBinaryExpression(node, constTable, variableTable);
+    }
+    if (t.isTemplateLiteral(node)) {
+        return evaluateTemplateLiteral(node, constTable, variableTable);
+    }
+    if (t.isUnaryExpression(node)) {
+        return evaluateUnaryExpression(node);
+    }
+    throw new Error(`Unsupported expression type: ${node.type}`);
+}
+function evaluateUnaryExpression(node) {
+    const arg = node.argument;
+    switch (node.operator) {
+        case '-':
+            if (t.isNumericLiteral(arg))
+                return -arg.value;
+            break;
+        case '+':
+            if (t.isNumericLiteral(arg))
+                return +arg.value;
+            break;
+        default:
+            throw new Error(`Unsupported unary operator: ${node.operator}`);
+    }
+    throw new Error(`Unsupported UnaryExpression argument type: ${arg.type}`);
+}
+function resolveKeyframesTableMemberExpression(node, keyframesHashTable) {
+    if (t.isIdentifier(node)) {
+        return keyframesHashTable[node.name];
+    }
+    if (t.isMemberExpression(node)) {
+        if (t.isIdentifier(node.object)) {
+            return keyframesHashTable[node.object.name];
+        }
+    }
+    return undefined;
+}
+function resolveConstTableMemberExpression(node, constTable) {
+    if (t.isIdentifier(node.object) && t.isIdentifier(node.property)) {
+        const varName = node.object.name;
+        const key = node.property.name;
+        const tableValue = constTable[varName];
+        if (typeof tableValue === 'string') {
+            return tableValue;
+        }
+        if (tableValue && typeof tableValue === 'object' && key in tableValue) {
+            return tableValue[key];
+        }
+    }
+    return undefined;
+}
+function resolveVariableTableMemberExpressionByNode(node, variableTable) {
+    if (t.isIdentifier(node)) {
+        return variableTable[node.name];
+    }
+    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 (key &&
+                variableTable[varName] &&
+                variableTable[varName][key] !== undefined) {
+                return variableTable[varName][key];
+            }
+        }
+    }
+    return undefined;
+}
+function scanForDefineConsts() {
+    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
+    const constTableLocal = {};
+    for (const filePath of files) {
+        if (!isCSSDefineFile(filePath, 'defineConsts'))
+            continue;
+        this.addDependency(filePath);
+        const source = fs_1.default.readFileSync(filePath, 'utf8');
+        const ast = (0, core_1.parseSync)(source, {
+            sourceType: 'module',
+            presets: [
+                ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
+            ],
+        });
+        if (!ast)
+            continue;
+        for (const node of ast.program.body) {
+            let declarations = [];
+            if (t.isVariableDeclaration(node)) {
+                declarations = node.declarations;
+            }
+            else if (t.isExportNamedDeclaration(node) &&
+                node.declaration &&
+                t.isVariableDeclaration(node.declaration)) {
+                declarations = node.declaration.declarations;
+            }
+            for (const decl of declarations) {
+                if (t.isVariableDeclarator(decl) &&
+                    t.isIdentifier(decl.id) &&
+                    decl.init &&
+                    t.isCallExpression(decl.init) &&
+                    t.isMemberExpression(decl.init.callee) &&
+                    t.isIdentifier(decl.init.callee.object, { name: 'css' }) &&
+                    t.isIdentifier(decl.init.callee.property, { name: 'defineConsts' }) &&
+                    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);
+                    constTableLocal[varName] = obj;
+                }
+            }
+        }
+    }
+    return constTableLocal;
+}
+function scanForKeyframes() {
+    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
+    const keyframesHashTableLocal = {};
+    const keyframesObjectTableLocal = {};
+    for (const filePath of files) {
+        if (!isCSSDefineFile(filePath, 'keyframes'))
+            continue;
+        this.addDependency(filePath);
+        const source = fs_1.default.readFileSync(filePath, 'utf8');
+        const ast = (0, core_1.parseSync)(source, {
+            sourceType: 'module',
+            presets: [
+                ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
+            ],
+        });
+        if (!ast)
+            continue;
+        for (const node of ast.program.body) {
+            let declarations = [];
+            if (t.isVariableDeclaration(node)) {
+                declarations = node.declarations;
+            }
+            else if (t.isExportNamedDeclaration(node) &&
+                node.declaration &&
+                t.isVariableDeclaration(node.declaration)) {
+                declarations = node.declaration.declarations;
+            }
+            for (const decl of declarations) {
+                if (t.isVariableDeclarator(decl) &&
+                    t.isIdentifier(decl.id) &&
+                    decl.init &&
+                    t.isCallExpression(decl.init) &&
+                    t.isMemberExpression(decl.init.callee) &&
+                    t.isIdentifier(decl.init.callee.object, { name: 'css' }) &&
+                    t.isIdentifier(decl.init.callee.property, { name: 'keyframes' }) &&
+                    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 hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
+                    keyframesHashTableLocal[varName] = hash;
+                    keyframesObjectTableLocal[hash] = obj;
+                }
+            }
+        }
+    }
+    return {
+        keyframesHashTableLocal,
+        keyframesObjectTableLocal,
+    };
+}
+function scanForDefineVars() {
+    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
+    const variableTableLocal = {};
+    const defineVarsObjectTableLocal = {};
+    for (const filePath of files) {
+        if (!isCSSDefineFile(filePath, 'defineVars'))
+            continue;
+        this.addDependency(filePath);
+        const source = fs_1.default.readFileSync(filePath, 'utf8');
+        const ast = (0, core_1.parseSync)(source, {
+            sourceType: 'module',
+            presets: [
+                ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
+            ],
+        });
+        if (!ast)
+            continue;
+        for (const node of ast.program.body) {
+            let declarations = [];
+            if (t.isVariableDeclaration(node)) {
+                declarations = node.declarations;
+            }
+            else if (t.isExportNamedDeclaration(node) &&
+                node.declaration &&
+                t.isVariableDeclaration(node.declaration)) {
+                declarations = node.declaration.declarations;
+            }
+            for (const decl of declarations) {
+                if (t.isVariableDeclarator(decl) &&
+                    t.isIdentifier(decl.id) &&
+                    decl.init &&
+                    t.isCallExpression(decl.init) &&
+                    t.isMemberExpression(decl.init.callee) &&
+                    t.isIdentifier(decl.init.callee.object, { name: 'css' }) &&
+                    t.isIdentifier(decl.init.callee.property, { name: 'defineVars' }) &&
+                    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;
+                    defineVarsObjectTableLocal[varName] = obj;
+                }
+            }
+        }
+    }
+    return { variableTableLocal, defineVarsObjectTableLocal };
+}
+function scanForDefineTheme() {
+    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
+    const variableTableLocal = {};
+    const defineThemeObjectTableLocal = {};
+    for (const filePath of files) {
+        if (!isCSSDefineFile(filePath, 'defineTheme'))
+            continue;
+        this.addDependency(filePath);
+        const source = fs_1.default.readFileSync(filePath, 'utf8');
+        const ast = (0, core_1.parseSync)(source, {
+            sourceType: 'module',
+            presets: [
+                ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
+            ],
+        });
+        if (!ast)
+            continue;
+        for (const node of ast.program.body) {
+            let declarations = [];
+            if (t.isVariableDeclaration(node)) {
+                declarations = node.declarations;
+            }
+            else if (t.isExportNamedDeclaration(node) &&
+                node.declaration &&
+                t.isVariableDeclaration(node.declaration)) {
+                declarations = node.declaration.declarations;
+            }
+            for (const decl of declarations) {
+                if (t.isVariableDeclarator(decl) &&
+                    t.isIdentifier(decl.id) &&
+                    decl.init &&
+                    t.isCallExpression(decl.init) &&
+                    t.isMemberExpression(decl.init.callee) &&
+                    t.isIdentifier(decl.init.callee.object, { name: 'css' }) &&
+                    t.isIdentifier(decl.init.callee.property, { name: 'defineTheme' }) &&
+                    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;
+                    defineThemeObjectTableLocal[varName] = obj;
+                }
+            }
+        }
+    }
+    return { variableTableLocal, defineThemeObjectTableLocal };
+}
+function isCSSDefineFile(filePath, target) {
+    if (fs_1.default.statSync(filePath).isDirectory())
+        return false;
+    const code = fs_1.default.readFileSync(filePath, 'utf8');
+    let ast;
+    try {
+        ast = (0, core_1.parseSync)(code, {
+            sourceType: 'module',
+            presets: [
+                ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
+                '@babel/preset-react',
+            ],
+        });
+    }
+    catch (err) {
+        console.log(err);
+        return false;
+    }
+    if (!ast)
+        return false;
+    let found = false;
+    (0, core_1.traverse)(ast, {
+        CallExpression(path) {
+            const callee = path.node.callee;
+            if (callee.type === 'MemberExpression' &&
+                callee.object.type === 'Identifier' &&
+                callee.object.name === 'css' &&
+                callee.property.type === 'Identifier' &&
+                callee.property.name === target) {
+                found = true;
+                path.stop();
+            }
+        },
+    });
+    return found;
+}
+function loader(source) {
+    const callback = this.async();
+    this.addDependency(this.resourcePath);
+    constTable = scanForDefineConsts.call(this);
+    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];
+    }
+    defineVarsObjectTable = defineVarsObjectTableLocal;
+    defineThemeObjectTable = defineThemeObjectTableLocal;
+    let extractedObject = null;
+    const extractedGlobalObjects = [];
+    let ast;
+    try {
+        ast = (0, core_1.parseSync)(source, {
+            sourceType: 'module',
+            presets: [
+                ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
+                '@babel/preset-react',
+            ],
+        });
+    }
+    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;
+    }
+    const localConsts = collectLocalConsts(ast);
+    if (Object.keys(localConsts).length !== 0) {
+        for (const k in localConsts) {
+            constTable[k] = localConsts[k];
+        }
+    }
+    const plugin = {
+        visitor: {
+            CallExpression(path) {
+                const callee = path.node.callee;
+                if (t.isMemberExpression(callee) &&
+                    t.isIdentifier(callee.object) &&
+                    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);
+                        }
+                    }
+                    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);
+                        }
+                    }
+                }
+            },
+        },
+    };
+    (0, core_1.transformFromAstSync)(ast, source, {
+        code: false,
+        plugins: [plugin],
+        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);
+    if (!importPath.startsWith('.')) {
+        importPath = './' + importPath;
+    }
+    importPath = importPath.replace(/\\/g, '/');
+    const resultSource = source + `\nimport ${JSON.stringify(importPath)};`;
+    if (callback)
+        return callback(null, resultSource);
+    return resultSource;
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@plumeria/webpack-plugin",
+  "version": "0.1.0",
+  "description": "Plumeria Webpack plugin",
+  "keywords": [
+    "react",
+    "css",
+    "css-in-js",
+    "plumeria",
+    "styling"
+  ],
+  "repository": "github:zss-in-js/plumeria",
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "dist/",
+    "types/"
+  ],
+  "scripts": {
+    "build": "rimraf dist types && pnpm cjs",
+    "cjs": "tsc --project tsconfig.cjs.json"
+  },
+  "dependencies": {
+    "@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"
+  },
+  "devDependencies": {
+    "@rust-gear/glob": "^0.2.2",
+    "@types/babel__core": "^7.20.5",
+    "@types/loader-utils": "^2.0.6",
+    "@types/webpack": "^5.28.5",
+    "zss-engine": "^0.2.73"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/types/create-css.d.ts

@@ -0,0 +1,5 @@
+import type { CSSProperties, CreateStyleType, CreateTheme, CreateValues } from 'zss-engine';
+declare function createCSS<T extends Record<string, CSSProperties>>(object: CreateStyleType<T>): string;
+declare const createVars: <const T extends CreateValues>(object: T) => Record<string, CreateValues>;
+declare const createTheme: <const T extends CreateTheme>(object: T) => Record<string, Record<string, string | number | object>>;
+export { createCSS, createVars, createTheme };

package/types/index.d.ts

@@ -0,0 +1,7 @@
+import type { Compiler } from 'webpack';
+export default class PlumeriaPlugin {
+    private styles;
+    private virtualModules?;
+    apply(compiler: Compiler): void;
+    registerStyle(virtualFileName: string, css: string): void;
+}

package/types/types-table.d.ts

@@ -0,0 +1,13 @@
+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 CSSObject = {
+    [key: string]: CSSValue;
+};
+export type ConstTable = Record<string, CSSObject | string>;
+export type VariableTable = Record<string, CSSObject>;
+export type KeyframesHashTable = Record<string, string>;
+export type KeyframesObjectTable = Record<string, CSSObject>;
+export type DefineVarsObjectTable = Record<string, CSSObject>;
+export type DefineThemeObjectTable = Record<string, CSSObject>;
+export {};

package/types/virtual-css-loader.d.ts

@@ -0,0 +1,2 @@
+import type { LoaderContext } from 'webpack';
+export default function loader(this: LoaderContext<unknown>, source: string): string | void;