@plumeria/webpack-plugin 6.2.1 → 6.3.1

package/dist/index.d.ts

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

package/dist/index.js

@@ -5,15 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = loader;
 const core_1 = require("@swc/core");
-const fs_1 = __importDefault(require("fs"));
+const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
 const zss_engine_1 = require("zss-engine");
 const utils_1 = require("@plumeria/utils");
 const VIRTUAL_FILE_PATH = path_1.default.resolve(__dirname, '..', 'zero-virtual.css');
 if (process.env.NODE_ENV === 'production') {
-    fs_1.default.writeFileSync(VIRTUAL_FILE_PATH, '/** Placeholder file */', 'utf-8');
+    (0, fs_1.writeFileSync)(VIRTUAL_FILE_PATH, '/** Placeholder file */\n', 'utf-8');
 }
-function loader(source) {
+async function loader(source) {
     const callback = this.async();
     const isProduction = process.env.NODE_ENV === 'production';
     if (this.resourcePath.includes('node_modules') ||
@@ -41,6 +41,8 @@ function loader(source) {
     const localConsts = (0, utils_1.collectLocalConsts)(ast);
     const resourcePath = this.resourcePath;
     const importMap = {};
+    const createThemeImportMap = {};
+    const createStaticImportMap = {};
     const plumeriaAliases = {};
     (0, utils_1.traverse)(ast, {
         ImportDeclaration({ node }) {
@@ -88,11 +90,11 @@ function loader(source) {
                             importMap[localName] = scannedTables.variantsHashTable[uniqueKey];
                         }
                         if (scannedTables.createThemeHashTable[uniqueKey]) {
-                            importMap[localName] =
+                            createThemeImportMap[localName] =
                                 scannedTables.createThemeHashTable[uniqueKey];
                         }
                         if (scannedTables.createStaticHashTable[uniqueKey]) {
-                            importMap[localName] =
+                            createStaticImportMap[localName] =
                                 scannedTables.createStaticHashTable[uniqueKey];
                         }
                     }
@@ -124,20 +126,6 @@ function loader(source) {
     for (const key of Object.keys(importMap)) {
         mergedViewTransitionTable[key] = importMap[key];
     }
-    const mergedCreateThemeHashTable = {};
-    for (const key of Object.keys(scannedTables.createThemeHashTable)) {
-        mergedCreateThemeHashTable[key] = scannedTables.createThemeHashTable[key];
-    }
-    for (const key of Object.keys(importMap)) {
-        mergedCreateThemeHashTable[key] = importMap[key];
-    }
-    const mergedCreateStaticHashTable = {};
-    for (const key of Object.keys(scannedTables.createStaticHashTable)) {
-        mergedCreateStaticHashTable[key] = scannedTables.createStaticHashTable[key];
-    }
-    for (const key of Object.keys(importMap)) {
-        mergedCreateStaticHashTable[key] = importMap[key];
-    }
     const mergedCreateTable = {};
     for (const key of Object.keys(scannedTables.createHashTable)) {
         mergedCreateTable[key] = scannedTables.createHashTable[key];
@@ -152,6 +140,30 @@ function loader(source) {
     for (const key of Object.keys(importMap)) {
         mergedVariantsTable[key] = importMap[key];
     }
+    const mergedCreateThemeHashTable = {};
+    for (const key of Object.keys(scannedTables.createThemeHashTable)) {
+        mergedCreateThemeHashTable[key] = scannedTables.createThemeHashTable[key];
+        if (key.startsWith(`${resourcePath}-`)) {
+            const varName = key.slice(resourcePath.length + 1);
+            mergedCreateThemeHashTable[varName] =
+                scannedTables.createThemeHashTable[key];
+        }
+    }
+    for (const key of Object.keys(createThemeImportMap)) {
+        mergedCreateThemeHashTable[key] = createThemeImportMap[key];
+    }
+    const mergedCreateStaticHashTable = {};
+    for (const key of Object.keys(scannedTables.createStaticHashTable)) {
+        mergedCreateStaticHashTable[key] = scannedTables.createStaticHashTable[key];
+        if (key.startsWith(`${resourcePath}-`)) {
+            const varName = key.slice(resourcePath.length + 1);
+            mergedCreateStaticHashTable[varName] =
+                scannedTables.createStaticHashTable[key];
+        }
+    }
+    for (const key of Object.keys(createStaticImportMap)) {
+        mergedCreateStaticHashTable[key] = createStaticImportMap[key];
+    }
     const localCreateStyles = {};
     const replacements = [];
     const extractedSheets = [];
@@ -210,7 +222,7 @@ function loader(source) {
                 if (obj) {
                     const hashMap = {};
                     Object.entries(obj).forEach(([key, style]) => {
-                        const records = (0, utils_1.getStyleRecords)(key, style, 2);
+                        const records = (0, utils_1.getStyleRecords)(key, style);
                         if (!isProduction) {
                             (0, utils_1.extractOndemandStyles)(style, extractedSheets, scannedTables);
                             records.forEach((r) => {
@@ -241,27 +253,11 @@ function loader(source) {
                     };
                 }
             }
-            else if ((propName === 'createTheme' || propName === 'createStatic') &&
-                (utils_1.t.isObjectExpression(node.init.arguments[0].expression) ||
-                    utils_1.t.isStringLiteral(node.init.arguments[0].expression))) {
-                localCreateStyles[node.id.value] = {
-                    name: node.id.value,
-                    type: 'constant',
-                    obj: {},
-                    hashMap: {},
-                    isExported,
-                    initSpan: {
-                        start: node.init.span.start - ast.span.start,
-                        end: node.init.span.end - ast.span.start,
-                    },
-                    declSpan: {
-                        start: declSpan.start - ast.span.start,
-                        end: declSpan.end - ast.span.start,
-                    },
-                };
-            }
             else if (propName === 'variants' &&
                 utils_1.t.isObjectExpression(node.init.arguments[0].expression)) {
+                if (utils_1.t.isIdentifier(node.id)) {
+                    idSpans.add(node.id.span.start);
+                }
                 const obj = (0, utils_1.objectExpressionToObject)(node.init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable, (name) => {
                     if (localCreateStyles[name]) {
                         return localCreateStyles[name].obj;
@@ -290,6 +286,32 @@ function loader(source) {
                     },
                 };
             }
+            else if (propName === 'createTheme' &&
+                utils_1.t.isObjectExpression(node.init.arguments[0].expression)) {
+                if (utils_1.t.isIdentifier(node.id)) {
+                    idSpans.add(node.id.span.start);
+                }
+                const obj = (0, utils_1.objectExpressionToObject)(node.init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
+                const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
+                const uniqueKey = `${resourcePath}-${node.id.value}`;
+                scannedTables.createThemeHashTable[uniqueKey] = hash;
+                scannedTables.createThemeObjectTable[hash] = obj;
+                localCreateStyles[node.id.value] = {
+                    name: node.id.value,
+                    type: 'constant',
+                    obj,
+                    hashMap: scannedTables.createAtomicMapTable[hash],
+                    isExported,
+                    initSpan: {
+                        start: node.init.span.start - ast.span.start,
+                        end: node.init.span.end - ast.span.start,
+                    },
+                    declSpan: {
+                        start: declSpan.start - ast.span.start,
+                        end: declSpan.end - ast.span.start,
+                    },
+                };
+            }
         }
     };
     (0, utils_1.traverse)(ast, {
@@ -350,6 +372,9 @@ function loader(source) {
                     const obj = (0, utils_1.objectExpressionToObject)(args[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     scannedTables.keyframesObjectTable[hash] = obj;
+                    if (!isProduction) {
+                        (0, utils_1.extractOndemandStyles)({ kf: `kf-${hash}` }, extractedSheets, scannedTables);
+                    }
                     replacements.push({
                         start: node.span.start - ast.span.start,
                         end: node.span.end - ast.span.start,
@@ -363,7 +388,6 @@ function loader(source) {
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     scannedTables.viewTransitionObjectTable[hash] = obj;
                     if (!isProduction) {
-                        (0, utils_1.extractOndemandStyles)(obj, extractedSheets, scannedTables);
                         (0, utils_1.extractOndemandStyles)({ vt: `vt-${hash}` }, extractedSheets, scannedTables);
                     }
                     replacements.push({
@@ -372,12 +396,23 @@ function loader(source) {
                         content: JSON.stringify(`vt-${hash}`),
                     });
                 }
-                else if (propName === 'createTheme' &&
+                else if ((propName === 'createTheme' || propName === 'createStatic') &&
                     args.length > 0 &&
                     utils_1.t.isObjectExpression(args[0].expression)) {
                     const obj = (0, utils_1.objectExpressionToObject)(args[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
-                    scannedTables.createThemeObjectTable[hash] = obj;
+                    if (propName === 'createTheme') {
+                        scannedTables.createThemeObjectTable[hash] = obj;
+                    }
+                    else {
+                        scannedTables.createStaticObjectTable[hash] = obj;
+                    }
+                    const prefix = propName === 'createTheme' ? 'tm-' : 'st-';
+                    replacements.push({
+                        start: node.span.start - ast.span.start,
+                        end: node.span.end - ast.span.start,
+                        content: JSON.stringify(`${prefix}${hash}`),
+                    });
                 }
                 else if (propName === 'create' &&
                     args.length > 0 &&
@@ -387,7 +422,7 @@ function loader(source) {
                     scannedTables.createObjectTable[hash] = obj;
                     Object.entries(obj).forEach(([key, style]) => {
                         if (typeof style === 'object' && style !== null) {
-                            const records = (0, utils_1.getStyleRecords)(key, style, 2);
+                            const records = (0, utils_1.getStyleRecords)(key, style);
                             if (!isProduction) {
                                 (0, utils_1.extractOndemandStyles)(style, extractedSheets, scannedTables);
                                 records.forEach((r) => addSheet(r.sheet));
@@ -403,7 +438,7 @@ function loader(source) {
             if (utils_1.t.isIdentifier(node.object) && utils_1.t.isIdentifier(node.property)) {
                 const varName = node.object.value;
                 const propName = node.property.value;
-                const uniqueKey = `${this.resourcePath}-${varName}`;
+                const uniqueKey = `${resourcePath}-${varName}`;
                 let hash = scannedTables.createHashTable[uniqueKey];
                 if (!hash) {
                     hash = mergedCreateTable[varName];
@@ -426,13 +461,12 @@ function loader(source) {
                     themeHash = mergedCreateThemeHashTable[varName];
                 }
                 if (themeHash) {
-                    const themeObj = scannedTables.createThemeObjectTable[themeHash];
-                    if (themeObj && themeObj[propName] !== undefined) {
-                        const cssVarName = (0, zss_engine_1.camelToKebabCase)(propName);
+                    const atomicMap = scannedTables.createAtomicMapTable[themeHash];
+                    if (atomicMap && atomicMap && atomicMap[propName]) {
                         replacements.push({
                             start: node.span.start - ast.span.start,
                             end: node.span.end - ast.span.start,
-                            content: JSON.stringify(`var(--${cssVarName})`),
+                            content: JSON.stringify(atomicMap[propName]),
                         });
                     }
                 }
@@ -467,7 +501,7 @@ function loader(source) {
                 return;
             }
             const varName = node.value;
-            const uniqueKey = `${this.resourcePath}-${varName}`;
+            const uniqueKey = `${resourcePath}-${varName}`;
             let hash = scannedTables.createHashTable[uniqueKey];
             if (!hash) {
                 hash = mergedCreateTable[varName];
@@ -489,46 +523,19 @@ function loader(source) {
                     });
                 }
             }
-            let kfHash = scannedTables.keyframesHashTable[uniqueKey];
-            if (!kfHash) {
-                kfHash = mergedKeyframesTable[varName];
-            }
-            if (kfHash) {
-                replacements.push({
-                    start: node.span.start - ast.span.start,
-                    end: node.span.end - ast.span.start,
-                    content: JSON.stringify(`kf-${kfHash}`),
-                });
-                return;
-            }
-            let vtHash = scannedTables.viewTransitionHashTable[uniqueKey];
-            if (!vtHash) {
-                vtHash = mergedViewTransitionTable[varName];
-            }
-            if (vtHash) {
-                replacements.push({
-                    start: node.span.start - ast.span.start,
-                    end: node.span.end - ast.span.start,
-                    content: JSON.stringify(`vt-${vtHash}`),
-                });
-                return;
-            }
             let themeHash = scannedTables.createThemeHashTable[uniqueKey];
             if (!themeHash) {
                 themeHash = mergedCreateThemeHashTable[varName];
             }
             if (themeHash) {
-                const themeObj = scannedTables.createThemeObjectTable[themeHash];
-                if (themeObj) {
-                    const themeVars = {};
-                    Object.keys(themeObj).forEach((key) => {
-                        themeVars[key] = `var(--${(0, zss_engine_1.camelToKebabCase)(key)})`;
-                    });
+                const atomicMap = scannedTables.createAtomicMapTable[themeHash];
+                if (atomicMap) {
                     replacements.push({
                         start: node.span.start - ast.span.start,
                         end: node.span.end - ast.span.start,
-                        content: JSON.stringify(themeVars),
+                        content: JSON.stringify(atomicMap),
                     });
+                    return;
                 }
             }
             let staticHash = scannedTables.createStaticHashTable[uniqueKey];
@@ -602,17 +609,21 @@ function loader(source) {
                     }
                     else if (utils_1.t.isIdentifier(expr)) {
                         const varName = expr.value;
-                        const styleInfo = localCreateStyles[varName];
-                        if (styleInfo && styleInfo.obj) {
-                            return styleInfo.obj;
+                        const uniqueKey = `${this.resourcePath}-${varName}`;
+                        let hash = scannedTables.createHashTable[uniqueKey];
+                        if (!hash) {
+                            hash = mergedCreateTable[varName];
                         }
-                        const hash = mergedCreateTable[varName];
                         if (hash) {
                             const obj = scannedTables.createObjectTable[hash];
                             if (obj && typeof obj === 'object') {
                                 return obj;
                             }
                         }
+                        const styleInfo = localCreateStyles[varName];
+                        if (styleInfo && styleInfo.obj) {
+                            return styleInfo.obj;
+                        }
                         if (localCreateStyles[varName]) {
                             return localCreateStyles[varName].obj;
                         }
@@ -632,13 +643,18 @@ function loader(source) {
                     if (utils_1.t.isCallExpression(expr) && utils_1.t.isIdentifier(expr.callee)) {
                         const varName = expr.callee.value;
                         let variantObj;
-                        if (localCreateStyles[varName] && localCreateStyles[varName].obj) {
-                            variantObj = localCreateStyles[varName].obj;
+                        const uniqueKey = `${this.resourcePath}-${varName}`;
+                        let hash = scannedTables.variantsHashTable[uniqueKey];
+                        if (!hash) {
+                            hash = mergedVariantsTable[varName];
                         }
-                        else if (mergedVariantsTable[varName]) {
-                            const hash = mergedVariantsTable[varName];
-                            if (scannedTables.variantsObjectTable[hash]) {
-                                variantObj = scannedTables.variantsObjectTable[hash];
+                        if (hash && scannedTables.variantsObjectTable[hash]) {
+                            variantObj = scannedTables.variantsObjectTable[hash];
+                        }
+                        if (!variantObj) {
+                            if (localCreateStyles[varName] &&
+                                localCreateStyles[varName].obj) {
+                                variantObj = localCreateStyles[varName].obj;
                             }
                         }
                         if (variantObj) {
@@ -757,7 +773,7 @@ function loader(source) {
                             (0, utils_1.extractOndemandStyles)(baseStyle, extractedSheets, scannedTables);
                         }
                         const hash = (0, zss_engine_1.genBase36Hash)(baseStyle, 1, 8);
-                        const records = (0, utils_1.getStyleRecords)(hash, baseStyle, 2);
+                        const records = (0, utils_1.getStyleRecords)(hash, baseStyle);
                         if (!isProduction) {
                             records.forEach((r) => addSheet(r.sheet));
                         }
@@ -794,12 +810,12 @@ function loader(source) {
                                 table[i] = '';
                                 continue;
                             }
-                            if (!isProduction) {
+                            if (process.env.NODE_ENV !== 'production') {
                                 (0, utils_1.extractOndemandStyles)(currentStyle, extractedSheets, scannedTables);
                             }
                             const hash = (0, zss_engine_1.genBase36Hash)(currentStyle, 1, 8);
-                            const records = (0, utils_1.getStyleRecords)(hash, currentStyle, 2);
-                            if (!isProduction) {
+                            const records = (0, utils_1.getStyleRecords)(hash, currentStyle);
+                            if (process.env.NODE_ENV !== 'production') {
                                 records.forEach((r) => extractedSheets.push(r.sheet));
                             }
                             const className = records
@@ -836,6 +852,9 @@ function loader(source) {
         },
     });
     Object.values(localCreateStyles).forEach((info) => {
+        if (info.type === 'constant') {
+            return;
+        }
         if (info.isExported) {
             replacements.push({
                 start: info.declSpan.start,
@@ -851,10 +870,7 @@ function loader(source) {
             });
         }
     });
-    if (extractedSheets.length > 0) {
-        fileStyles.baseStyles =
-            (fileStyles.baseStyles || '') + extractedSheets.join('');
-    }
+    const optInCSS = await (0, utils_1.optimizer)(extractedSheets.join(''));
     const buffer = Buffer.from(source);
     let offset = 0;
     const parts = [];
@@ -880,7 +896,7 @@ function loader(source) {
     }
     const virtualCssRequest = stringifyRequest(this, `${VIRTUAL_CSS_PATH}`);
     const postfix = `\nimport ${virtualCssRequest};`;
-    const css = fs_1.default.readFileSync(VIRTUAL_FILE_PATH, 'utf-8');
+    const css = (0, fs_1.readFileSync)(VIRTUAL_FILE_PATH, 'utf-8');
     function generateOrderedCSS(styles) {
         const sections = [];
         if (styles.keyframeStyles?.trim()) {
@@ -900,7 +916,7 @@ function loader(source) {
         }
         return sections.join('\n');
     }
-    const orderedCSS = generateOrderedCSS(fileStyles);
+    const orderedCSS = await (0, utils_1.optimizer)(generateOrderedCSS(fileStyles));
     const relativeId = path_1.default.relative(process.cwd(), this.resourcePath);
     const hmrCode = `
     if (module.hot) {
@@ -934,7 +950,7 @@ function loader(source) {
     }
   `;
     if (extractedSheets.length > 0 && process.env.NODE_ENV === 'development') {
-        fs_1.default.appendFileSync(VIRTUAL_FILE_PATH, extractedSheets.join(''), 'utf-8');
+        (0, fs_1.appendFileSync)(VIRTUAL_FILE_PATH, optInCSS, 'utf-8');
     }
     const useClientDirective = /^\s*['"]use client['"]/;
     if (process.env.NODE_ENV === 'production')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/webpack-plugin",
-  "version": "6.2.1",
+  "version": "6.3.1",
   "description": "Plumeria Webpack plugin",
   "author": "Refirst 11",
   "license": "MIT",
@@ -22,7 +22,7 @@
     "zero-virtual.css"
   ],
   "dependencies": {
-    "@plumeria/utils": "^6.2.1"
+    "@plumeria/utils": "^6.3.1"
   },
   "devDependencies": {
     "@swc/core": "1.15.8",