@plumeria/webpack-plugin 0.29.0 → 1.0.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import type { Compiler } from 'webpack';
-import { CSSObject } from './types';
+import type { CSSObject } from '@plumeria/utils';
 export declare class PlumeriaPlugin {
     private stylesByFile;
     private outFile;

package/dist/index.js

@@ -19,6 +19,9 @@ class PlumeriaPlugin {
                 this.stylesByFile.delete(absPath);
             }
         });
+        compiler.hooks.watchRun.tap(PLUGIN_NAME, () => {
+            this.stylesByFile.clear();
+        });
         compiler.hooks.normalModuleFactory.tap(PLUGIN_NAME, (nmf) => {
             nmf.hooks.createModule.tap(PLUGIN_NAME, (createData) => {
                 const modPath = createData.matchResource ?? createData.resourceResolveData?.path;
@@ -51,7 +54,7 @@ class PlumeriaPlugin {
         if (allStyles.length === 0) {
             return '';
         }
-        const sortedStyles = allStyles.sort((a, b) => (b.lastAccessed || 0) - (a.lastAccessed || 0));
+        const sortedStyles = allStyles.sort((b, a) => (b.lastAccessed || 0) - (a.lastAccessed || 0));
         const keyframeStylesSet = new Set();
         const viewTransitionStylesSet = new Set();
         const tokenStylesSet = new Set();
@@ -76,8 +79,7 @@ class PlumeriaPlugin {
             .join('\n');
     }
     writeCSS() {
-        let css = this.generateOrderedCSS();
-        css = '@layer base, queries;\n\n' + css;
+        const css = this.generateOrderedCSS();
         fs_1.default.writeFileSync(this.outFile, css, 'utf-8');
     }
 }

package/dist/virtual-css-loader.js

@@ -1,529 +1,35 @@
 "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 core_1 = require("@swc/core");
 const path_1 = __importDefault(require("path"));
 const fs_1 = __importDefault(require("fs"));
-const create_1 = require("./create");
 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 tokensTable = {};
-let keyframesHashTable = {};
-let keyframesObjectTable = {};
-let viewTransitionHashTable = {};
-let viewTransitionObjectTable = {};
-let defineTokensObjectTable = {};
-function objectExpressionToObject(node, constTable, keyframesHashTable, viewTransitionHashTable, tokensTable) {
-    const obj = {};
-    node.properties.forEach((prop) => {
-        if (!t.isObjectProperty(prop))
-            return;
-        const key = getPropertyKey(prop.key, constTable);
-        if (!key)
-            return;
-        const val = prop.value;
-        if (t.isIdentifier(val) || t.isMemberExpression(val)) {
-            const resolvedKeyframe = resolveKeyframesTableMemberExpression(val, keyframesHashTable);
-            if (resolvedKeyframe !== undefined) {
-                obj[key] = 'kf-' + resolvedKeyframe;
-                return;
-            }
-            const resolvedViewTransitioin = resolveViewTransitionTableMemberExpression(val, viewTransitionHashTable);
-            if (resolvedViewTransitioin !== undefined) {
-                obj[key] = 'vt-' + resolvedViewTransitioin;
-                return;
-            }
-            const resolvedTheme = resolveTokensTableMemberExpressionByNode(val, tokensTable);
-            if (resolvedTheme !== undefined) {
-                obj[key] = resolvedTheme;
-                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, viewTransitionHashTable, tokensTable);
-        }
-        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) {
-                if (t.isStringLiteral(node.init)) {
-                    localConsts[node.id.name] = node.init.value;
-                }
-                else if (t.isObjectExpression(node.init)) {
-                    localConsts[node.id.name] = objectExpressionToObject(node.init, localConsts, keyframesHashTable, viewTransitionHashTable, tokensTable);
-                }
-            }
-        },
-    });
-    return localConsts;
-}
-function getPropertyKey(node, constTable) {
-    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);
-    }
-    if (t.isBinaryExpression(node)) {
-        return evaluateBinaryExpression(node, constTable);
-    }
-    throw new Error(`Unsupported property key type: ${node.type}`);
-}
-function evaluateTemplateLiteral(node, constTable) {
-    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);
-            result += String(evaluatedExpr);
-        }
-    }
-    return result;
-}
-function evaluateBinaryExpression(node, constTable) {
-    const left = evaluateExpression(node.left, constTable);
-    const right = evaluateExpression(node.right, constTable);
-    if (node.operator === '+') {
-        return String(left) + String(right);
-    }
-    throw new Error(`Unsupported binary operator: ${node.operator}`);
-}
-function evaluateExpression(node, constTable) {
-    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];
-        }
-        if (viewTransitionHashTable[node.name] !== undefined) {
-            return viewTransitionHashTable[node.name];
-        }
-        return `[unresolved: ${node.name}]`;
-    }
-    if (t.isMemberExpression(node)) {
-        const resolved = resolveConstTableMemberExpression(node, constTable);
-        if (resolved !== undefined) {
-            return resolved;
-        }
-        const resolvedTheme = resolveTokensTableMemberExpressionByNode(node, tokensTable);
-        if (resolvedTheme !== undefined) {
-            return resolvedTheme;
-        }
-        return `[unresolved member expression]`;
-    }
-    if (t.isBinaryExpression(node)) {
-        return evaluateBinaryExpression(node, constTable);
-    }
-    if (t.isTemplateLiteral(node)) {
-        return evaluateTemplateLiteral(node, constTable);
-    }
-    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];
-        }
-    }
-}
-function resolveViewTransitionTableMemberExpression(node, viewTransitionHashTable) {
-    if (t.isIdentifier(node)) {
-        return viewTransitionHashTable[node.name];
-    }
-    if (t.isMemberExpression(node)) {
-        if (t.isIdentifier(node.object)) {
-            return viewTransitionHashTable[node.object.name];
-        }
-    }
-}
-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 (tableValue && typeof tableValue === 'object' && key in tableValue) {
-            return tableValue[key];
-        }
-    }
-    return undefined;
-}
-function resolveTokensTableMemberExpressionByNode(node, tokensTable) {
-    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 &&
-            tokensTable[varName] &&
-            tokensTable[varName][key] !== undefined) {
-            const cssVarName = (0, zss_engine_1.camelToKebabCase)(key);
-            return `var(--${cssVarName})`;
-        }
-    }
-    return undefined;
-}
-function scanForKeyframes() {
-    const keyframesHashTableLocal = {};
-    const keyframesObjectTableLocal = {};
-    const files = fs_1.default.globSync(PATTERN_PATH, GLOB_OPTIONS);
-    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 }],
-            ],
-        });
-        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) &&
-                    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' }) &&
-                    t.isObjectExpression(decl.init.arguments[0])) {
-                    const varName = decl.id.name;
-                    const obj = objectExpressionToObject(decl.init.arguments[0], constTable, keyframesHashTableLocal, viewTransitionHashTable, tokensTable);
-                    const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
-                    keyframesHashTableLocal[varName] = hash;
-                    keyframesObjectTableLocal[hash] = obj;
-                }
-            }
-        }
-    }
-    return {
-        keyframesHashTableLocal,
-        keyframesObjectTableLocal,
-    };
-}
-function scanForViewTransition() {
-    const viewTransitionHashTableLocal = {};
-    const viewTransitionObjectTableLocal = {};
-    const files = fs_1.default.globSync(PATTERN_PATH, GLOB_OPTIONS);
-    for (const filePath of files) {
-        if (!isCSSDefineFile(filePath, 'viewTransition'))
-            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 }],
-            ],
-        });
-        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) &&
-                    t.isCallExpression(decl.init) &&
-                    t.isMemberExpression(decl.init.callee) &&
-                    t.isIdentifier(decl.init.callee.object, { name: 'css' }) &&
-                    t.isIdentifier(decl.init.callee.property, {
-                        name: 'viewTransition',
-                    }) &&
-                    t.isObjectExpression(decl.init.arguments[0])) {
-                    const varName = decl.id.name;
-                    const obj = objectExpressionToObject(decl.init.arguments[0], constTable, keyframesHashTable, viewTransitionHashTableLocal, tokensTable);
-                    const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
-                    viewTransitionHashTableLocal[varName] = hash;
-                    viewTransitionObjectTableLocal[hash] = obj;
-                }
-            }
-        }
-    }
-    return {
-        viewTransitionHashTableLocal,
-        viewTransitionObjectTableLocal,
-    };
-}
-function scanForDefineConsts() {
-    const constTableLocal = {};
-    const files = fs_1.default.globSync(PATTERN_PATH, GLOB_OPTIONS);
-    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 }],
-            ],
-        });
-        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) &&
-                    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' }) &&
-                    t.isObjectExpression(decl.init.arguments[0])) {
-                    const varName = decl.id.name;
-                    const obj = objectExpressionToObject(decl.init.arguments[0], constTableLocal, keyframesHashTable, viewTransitionHashTable, tokensTable);
-                    constTableLocal[varName] = obj;
-                }
-            }
-        }
-    }
-    return constTableLocal;
-}
-function scanForDefineTokens() {
-    const tokensTableLocal = {};
-    const defineTokensObjectTableLocal = {};
-    const files = fs_1.default.globSync(PATTERN_PATH, GLOB_OPTIONS);
-    for (const filePath of files) {
-        if (!isCSSDefineFile(filePath, 'defineTokens'))
-            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 }],
-            ],
-        });
-        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) &&
-                    t.isCallExpression(decl.init) &&
-                    t.isMemberExpression(decl.init.callee) &&
-                    t.isIdentifier(decl.init.callee.object, { name: 'css' }) &&
-                    t.isIdentifier(decl.init.callee.property, { name: 'defineTokens' }) &&
-                    t.isObjectExpression(decl.init.arguments[0])) {
-                    const varName = decl.id.name;
-                    const obj = objectExpressionToObject(decl.init.arguments[0], constTable, keyframesHashTable, viewTransitionHashTable, tokensTableLocal);
-                    tokensTableLocal[varName] = obj;
-                    defineTokensObjectTableLocal[varName] = obj;
-                }
-            }
-        }
-    }
-    return { tokensTableLocal, defineTokensObjectTableLocal };
-}
-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 }],
-            ],
-        });
-    }
-    catch (err) {
-        console.log(err);
-        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;
-}
+const utils_1 = require("@plumeria/utils");
 function loader(source) {
     const callback = this.async();
-    const useClientDirective = /^\s*['"]use client['"]/;
-    if (useClientDirective.test(source)) {
-        callback(null, source);
-        return;
-    }
     this.clearDependencies();
     this.addDependency(this.resourcePath);
-    constTable = scanForDefineConsts.call(this);
-    const { keyframesHashTableLocal, keyframesObjectTableLocal } = scanForKeyframes.call(this);
-    keyframesHashTable = keyframesHashTableLocal;
-    keyframesObjectTable = keyframesObjectTableLocal;
-    const { viewTransitionHashTableLocal, viewTransitionObjectTableLocal } = scanForViewTransition.call(this);
-    viewTransitionHashTable = viewTransitionHashTableLocal;
-    viewTransitionObjectTable = viewTransitionObjectTableLocal;
-    const { tokensTableLocal, defineTokensObjectTableLocal } = scanForDefineTokens.call(this);
-    tokensTable = tokensTableLocal;
-    defineTokensObjectTable = defineTokensObjectTableLocal;
+    utils_1.tables.constTable = (0, utils_1.scanForDefineConsts)((path) => this.addDependency(path));
+    const { keyframesHashTableLocal, keyframesObjectTableLocal } = (0, utils_1.scanForKeyframes)((path) => this.addDependency(path));
+    utils_1.tables.keyframesHashTable = keyframesHashTableLocal;
+    utils_1.tables.keyframesObjectTable = keyframesObjectTableLocal;
+    const { viewTransitionHashTableLocal, viewTransitionObjectTableLocal } = (0, utils_1.scanForViewTransition)((path) => this.addDependency(path));
+    utils_1.tables.viewTransitionHashTable = viewTransitionHashTableLocal;
+    utils_1.tables.viewTransitionObjectTable = viewTransitionObjectTableLocal;
+    const { tokensTableLocal, defineTokensObjectTableLocal } = (0, utils_1.scanForDefineTokens)((path) => this.addDependency(path));
+    utils_1.tables.tokensTable = tokensTableLocal;
+    utils_1.tables.defineTokensObjectTable = defineTokensObjectTableLocal;
     const extractedObjects = [];
     let ast;
     try {
         ast = (0, core_1.parseSync)(source, {
-            sourceType: 'module',
-            presets: [
-                ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
-            ],
+            syntax: 'typescript',
+            tsx: true,
+            target: 'es2022',
         });
     }
     catch (err) {
@@ -531,49 +37,44 @@ function loader(source) {
         callback(null, source);
         return;
     }
-    const localConsts = collectLocalConsts(ast);
-    Object.assign(constTable, localConsts);
-    const pluginAst = {
-        visitor: {
-            CallExpression(path) {
-                const callee = path.node.callee;
-                if (t.isMemberExpression(callee) &&
-                    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])) {
-                        const obj = objectExpressionToObject(args[0], constTable, keyframesHashTable, viewTransitionHashTable, tokensTable);
-                        if (obj) {
-                            extractedObjects.push(obj);
-                        }
+    const localConsts = (0, utils_1.collectLocalConsts)(ast);
+    Object.assign(utils_1.tables.constTable, localConsts);
+    let hasCssCreate = false;
+    (0, utils_1.traverse)(ast, {
+        CallExpression({ node }) {
+            const callee = node.callee;
+            if (utils_1.t.isMemberExpression(callee) &&
+                utils_1.t.isIdentifier(callee.object, { name: 'css' }) &&
+                utils_1.t.isIdentifier(callee.property)) {
+                const args = node.arguments;
+                if (callee.property.value === 'create' &&
+                    args.length === 1 &&
+                    utils_1.t.isObjectExpression(args[0].expression)) {
+                    hasCssCreate = true;
+                    const obj = (0, utils_1.objectExpressionToObject)(args[0].expression, utils_1.tables.constTable, utils_1.tables.keyframesHashTable, utils_1.tables.viewTransitionHashTable, utils_1.tables.tokensTable);
+                    if (obj) {
+                        extractedObjects.push(obj);
                     }
                 }
-            },
+            }
         },
-    };
-    (0, core_1.transformFromAstSync)(ast, source, {
-        code: false,
-        plugins: [pluginAst],
-        configFile: false,
     });
     const fileStyles = {};
     if (extractedObjects.length > 0) {
         const combinedStyles = extractedObjects.reduce((acc, obj) => Object.assign(acc, obj), {});
-        const base = (0, create_1.createCSS)(combinedStyles);
+        const base = (0, utils_1.createCSS)(combinedStyles);
         if (base) {
             fileStyles.baseStyles = base;
         }
     }
-    if (Object.keys(keyframesObjectTable).length > 0) {
-        fileStyles.keyframeStyles = Object.entries(keyframesObjectTable)
+    if (Object.keys(utils_1.tables.keyframesObjectTable).length > 0) {
+        fileStyles.keyframeStyles = Object.entries(utils_1.tables.keyframesObjectTable)
             .map(([hash, obj]) => (0, zss_engine_1.transpile)({ [`@keyframes kf-${hash}`]: obj }, undefined, '--global')
             .styleSheet)
             .join('\n');
     }
-    if (Object.keys(viewTransitionObjectTable).length > 0) {
-        fileStyles.viewTransitionStyles = Object.entries(viewTransitionObjectTable)
+    if (Object.keys(utils_1.tables.viewTransitionObjectTable).length > 0) {
+        fileStyles.viewTransitionStyles = Object.entries(utils_1.tables.viewTransitionObjectTable)
             .map(([hash, obj]) => (0, zss_engine_1.transpile)({
             [`::view-transition-group(vt-${hash})`]: obj.group,
             [`::view-transition-image-pair(vt-${hash})`]: obj.imagePair,
@@ -582,9 +83,9 @@ function loader(source) {
         }, undefined, '--global').styleSheet)
             .join('\n');
     }
-    if (Object.keys(defineTokensObjectTable).length > 0) {
-        fileStyles.tokenStyles = Object.values(defineTokensObjectTable)
-            .map((obj) => (0, zss_engine_1.transpile)((0, create_1.createTokens)(obj), undefined, '--global')
+    if (Object.keys(utils_1.tables.defineTokensObjectTable).length > 0) {
+        fileStyles.tokenStyles = Object.values(utils_1.tables.defineTokensObjectTable)
+            .map((obj) => (0, zss_engine_1.transpile)((0, utils_1.createTokens)(obj), undefined, '--global')
             .styleSheet)
             .join('\n');
     }
@@ -618,5 +119,69 @@ function loader(source) {
             pluginInstance.registerFileStyles(fileKey, fileStyles);
         }
     }
-    callback(null, source + postfix);
+    let css = '';
+    css = fs_1.default.readFileSync(path_1.default.resolve(__dirname, '../zero-virtual.css'), 'utf-8');
+    function generateOrderedCSS(styles) {
+        const sections = [];
+        if (styles.keyframeStyles?.trim()) {
+            if (!css.includes(styles.keyframeStyles))
+                sections.push(styles.keyframeStyles);
+        }
+        if (styles.viewTransitionStyles?.trim()) {
+            if (!css.includes(styles.viewTransitionStyles))
+                sections.push(styles.viewTransitionStyles);
+        }
+        if (styles.tokenStyles?.trim()) {
+            if (!css.includes(styles.tokenStyles))
+                sections.push(styles.tokenStyles);
+        }
+        if (styles.baseStyles?.trim()) {
+            sections.push(styles.baseStyles);
+        }
+        return sections.join('\n');
+    }
+    const orderedCSS = generateOrderedCSS(fileStyles);
+    const relativeId = path_1.default.relative(process.cwd(), this.resourcePath);
+    const hmrCode = `
+    if (module.hot) {
+      module.hot.accept(${virtualCssRequest});
+
+      const styleId = "plumeria-hmr";
+      const fileKey = ${JSON.stringify(relativeId)};
+      
+      let styleEl = document.getElementById(styleId);
+      
+      if (!styleEl) {
+        styleEl = document.createElement("style");
+        styleEl.id = styleId;
+        styleEl.setAttribute("data-plumeria-hmr", "");
+        document.head.prepend(styleEl);
+        styleEl.__plumeriaStyles = {};
+      }
+
+      styleEl.__plumeriaStyles[fileKey] = ${JSON.stringify(orderedCSS)};
+      styleEl.textContent = Object.values(styleEl.__plumeriaStyles).join('\\n');
+
+      module.hot.dispose(() => {
+        if (styleEl && styleEl.__plumeriaStyles) {
+          delete styleEl.__plumeriaStyles[fileKey];
+          styleEl.textContent = Object.values(styleEl.__plumeriaStyles).join('\\n');
+          
+          if (Object.keys(styleEl.__plumeriaStyles).length === 0 && styleEl.parentNode) {
+            styleEl.parentNode.removeChild(styleEl);
+          }
+        }
+      });
+    }
+  `;
+    if (hasCssCreate) {
+        callback(null, source + hmrCode);
+        return;
+    }
+    const useClientDirective = /^\s*['"]use client['"]/;
+    if (!useClientDirective.test(source)) {
+        callback(null, source + postfix);
+        return;
+    }
+    callback(null, source);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/webpack-plugin",
-  "version": "0.29.0",
+  "version": "1.0.0",
   "description": "Plumeria Webpack plugin",
   "repository": {
     "type": "git",
@@ -16,14 +16,12 @@
     "zero-virtual.css"
   ],
   "dependencies": {
-    "@babel/core": "^7.28.0",
-    "@babel/preset-typescript": "^7.27.1",
-    "@babel/types": "^7.28.2"
+    "@plumeria/utils": "^1.0.0"
   },
   "devDependencies": {
-    "@types/babel__core": "^7.20.5",
-    "webpack": "^5.101.0",
-    "zss-engine": "^0.2.100"
+    "@swc/core": "1.15.2",
+    "webpack": "5.101.0",
+    "zss-engine": "1.0.0"
   },
   "publishConfig": {
     "access": "public",

package/dist/create.d.ts

@@ -1,5 +0,0 @@
-import type { CSSProperties, CreateStyleType, CreateTokens, 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 createTokens: <const T extends CreateTokens>(object: T) => Record<string, Record<string, string | number | object>>;
-export { createCSS, createVars, createTokens };

package/dist/create.js

@@ -1,117 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createTokens = exports.createVars = void 0;
-exports.createCSS = createCSS;
-const zss_engine_1 = require("zss-engine");
-function compileToSingleCSS(object) {
-    const baseSheets = [];
-    const querySheets = [];
-    const processedHashes = new Set();
-    Object.entries(object).forEach(([key, styleObj]) => {
-        const flat = {};
-        const nonFlat = {};
-        (0, zss_engine_1.splitAtomicAndNested)(styleObj, flat, nonFlat);
-        const finalFlat = (0, zss_engine_1.overrideLonghand)(flat);
-        const records = [];
-        Object.entries(finalFlat).forEach(([prop, value]) => {
-            const hashes = new Set();
-            const sheets = new Set();
-            (0, zss_engine_1.processAtomicProps)({ [prop]: value }, hashes, sheets);
-            const hashArray = [...hashes];
-            const sheetArray = [...sheets];
-            const baseSheetParts = [];
-            const baseHashParts = [];
-            const querySheetParts = [];
-            const queryHashParts = [];
-            for (let i = 0; i < sheetArray.length; i++) {
-                const sheet = sheetArray[i];
-                const hash = hashArray[i];
-                if (sheet.includes('@media') || sheet.includes('@container')) {
-                    querySheetParts.push(sheet);
-                    queryHashParts.push(hash);
-                }
-                else {
-                    baseSheetParts.push(sheet);
-                    baseHashParts.push(hash);
-                }
-            }
-            if (baseSheetParts.length > 0) {
-                records.push({
-                    key: prop,
-                    hash: baseHashParts.join(' '),
-                    sheet: baseSheetParts.join(''),
-                });
-            }
-            if (querySheetParts.length > 0) {
-                records.push({
-                    key: prop + '__queries__',
-                    hash: queryHashParts.join(' '),
-                    sheet: querySheetParts.join(''),
-                });
-            }
-        });
-        if (Object.keys(nonFlat).length > 0) {
-            const modNonFlat = (0, zss_engine_1.transformNestedSelectors)(nonFlat);
-            const nonFlatObj = { [key]: modNonFlat };
-            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.keys(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);
-                }
-            }
-        });
-    });
-    const baseLayer = baseSheets.length > 0 ? `@layer base {\n${baseSheets.join('')}}` : '';
-    return [baseLayer, ...querySheets].filter(Boolean).join('\n');
-}
-function createCSS(object) {
-    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 createTokens = (object) => {
-    const styles = {};
-    Object.entries(object).forEach(([key, value]) => {
-        const kebabKey = (0, zss_engine_1.camelToKebabCase)(key);
-        Object.entries(value).forEach(([subKey, subValue]) => {
-            if (subKey.startsWith('@media')) {
-                styles[':root'] ||= {};
-                styles[':root'][subKey] ||= {};
-                styles[':root'][subKey][`--${kebabKey}`] = subValue;
-            }
-            else {
-                const themeSelector = subKey === 'default' ? ':root' : `:root[data-theme="${subKey}"]`;
-                styles[themeSelector] ||= {};
-                styles[themeSelector][`--${kebabKey}`] = subValue;
-            }
-        });
-    });
-    return styles;
-};
-exports.createTokens = createTokens;

package/dist/types.d.ts

@@ -1,15 +0,0 @@
-type CSSPrimitive = string | number | boolean | null;
-type ParseErrorString = `[unresolved]` | `[unresolved identifier]` | `[unsupported value type]` | `[unresolved: ${string}]` | `[unresolved member expression]`;
-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 TokensTable = Record<string, CSSObject>;
-export type KeyframesHashTable = Record<string, string>;
-export type KeyframesObjectTable = Record<string, CSSObject>;
-export type ViewTransitionHashTable = Record<string, string>;
-export type ViewTransitionObjectTable = Record<string, CSSObject>;
-export type DefineTokensObjectTable = Record<string, CSSObject>;
-export {};

package/dist/types.js

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