@plumeria/webpack-plugin 0.9.0 → 0.11.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/index.d.ts

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

package/dist/index.js

@@ -8,27 +8,57 @@ const webpack_1 = require("webpack");
 const webpack_virtual_modules_1 = __importDefault(require("webpack-virtual-modules"));
 const PLUGIN_NAME = 'PlumeriaPlugin';
 class PlumeriaPlugin {
-    styles = new Map();
+    stylesByFile = 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();
+            this.stylesByFile.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));
+                const css = this.generateOrderedCSS(this.stylesByFile);
+                compilation.emitAsset('plumeria.css', new webpack_1.sources.RawSource(css));
             });
         });
     }
-    registerStyle(virtualFileName, css) {
-        this.styles.set(virtualFileName, css);
+    registerStyle(virtualFileName, styles) {
+        this.stylesByFile.set(virtualFileName, styles);
+        const css = this.generateOrderedCSS(this.stylesByFile);
         this.virtualModules?.writeModule(virtualFileName, css);
     }
+    generateOrderedCSS(styles) {
+        const allStyles = Array.from(styles.values());
+        const globalStyles = [];
+        const keyframeStylesSet = new Set();
+        const varStylesSet = new Set();
+        const themeStylesSet = new Set();
+        const baseStyles = [];
+        for (const s of allStyles) {
+            if (s.globalStyles)
+                globalStyles.push(s.globalStyles);
+            if (s.keyframeStyles)
+                keyframeStylesSet.add(s.keyframeStyles);
+            if (s.varStyles)
+                varStylesSet.add(s.varStyles);
+            if (s.themeStyles)
+                themeStylesSet.add(s.themeStyles);
+            if (s.baseStyles)
+                baseStyles.push(s.baseStyles);
+        }
+        return [
+            ...globalStyles,
+            ...Array.from(keyframeStylesSet),
+            ...Array.from(varStylesSet),
+            ...Array.from(themeStylesSet),
+            ...baseStyles,
+        ]
+            .filter(Boolean)
+            .join('\n');
+    }
 }
 exports.PlumeriaPlugin = PlumeriaPlugin;

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

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

package/dist/virtual-css-loader.js

@@ -39,12 +39,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = loader;
 const core_1 = require("@babel/core");
 const t = __importStar(require("@babel/types"));
-const loader_utils_1 = __importDefault(require("loader-utils"));
 const path_1 = __importDefault(require("path"));
 const fs_1 = __importDefault(require("fs"));
-const create_css_1 = require("./create-css");
+const create_1 = require("./create");
 const glob_1 = require("@rust-gear/glob");
 const zss_engine_1 = require("zss-engine");
+const loader_utils_1 = __importDefault(require("loader-utils"));
 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 = {
@@ -53,11 +53,12 @@ const GLOB_OPTIONS = {
 };
 let constTable = {};
 let variableTable = {};
+let themeTable = {};
 let keyframesHashTable = {};
 let keyframesObjectTable = {};
 let defineVarsObjectTable = {};
 let defineThemeObjectTable = {};
-function objectExpressionToObject(node, constTable, keyframesHashTable, variableTable) {
+function objectExpressionToObject(node, constTable, keyframesHashTable, variableTable, themeTable) {
     const obj = {};
     node.properties.forEach((prop) => {
         if (!t.isObjectProperty(prop))
@@ -77,6 +78,11 @@ function objectExpressionToObject(node, constTable, keyframesHashTable, variable
                 obj[key] = resolvedVariable;
                 return;
             }
+            const resolvedTheme = resolveThemeTableMemberExpressionByNode(val, themeTable);
+            if (resolvedTheme !== undefined) {
+                obj[key] = resolvedTheme;
+                return;
+            }
         }
         if (t.isStringLiteral(val) ||
             t.isNumericLiteral(val) ||
@@ -87,7 +93,7 @@ function objectExpressionToObject(node, constTable, keyframesHashTable, variable
             obj[key] = evaluateUnaryExpression(val);
         }
         else if (t.isObjectExpression(val)) {
-            obj[key] = objectExpressionToObject(val, constTable, keyframesHashTable, variableTable);
+            obj[key] = objectExpressionToObject(val, constTable, keyframesHashTable, variableTable, themeTable);
         }
         else if (t.isMemberExpression(val)) {
             const resolved = resolveConstTableMemberExpression(val, constTable);
@@ -195,6 +201,10 @@ function evaluateExpression(node, constTable, variableTable) {
         if (resolvedVar !== undefined) {
             return resolvedVar;
         }
+        const resolvedTheme = resolveThemeTableMemberExpressionByNode(node, themeTable);
+        if (resolvedTheme !== undefined) {
+            return resolvedTheme;
+        }
         return `[unresolved member expression]`;
     }
     if (t.isBinaryExpression(node)) {
@@ -249,32 +259,65 @@ function resolveConstTableMemberExpression(node, constTable) {
     }
     return undefined;
 }
-function resolveVariableTableMemberExpressionByNode(node, variableTable) {
+function resolveVariableTableMemberExpressionByNode(node, variableTable, asObject = false) {
     if (t.isIdentifier(node)) {
-        return variableTable[node.name];
+        if (asObject && typeof variableTable[node.name] === 'object') {
+            return { ...variableTable[node.name] };
+        }
+        const cssVarName = (0, zss_engine_1.camelToKebabCase)(node.name);
+        return `var(--${cssVarName})`;
     }
-    if (t.isMemberExpression(node)) {
-        if (t.isIdentifier(node.object)) {
-            const varName = node.object.name;
-            let key;
-            if (t.isIdentifier(node.property)) {
-                key = node.property.name;
-            }
-            else if (t.isStringLiteral(node.property)) {
-                key = node.property.value;
+    if (t.isMemberExpression(node) && t.isIdentifier(node.object)) {
+        const varName = node.object.name;
+        let key;
+        if (t.isIdentifier(node.property)) {
+            key = node.property.name;
+        }
+        else if (t.isStringLiteral(node.property)) {
+            key = node.property.value;
+        }
+        if (key &&
+            variableTable[varName] &&
+            variableTable[varName][key] !== undefined) {
+            if (asObject) {
+                return { [key]: variableTable[varName][key] };
             }
-            if (key &&
-                variableTable[varName] &&
-                variableTable[varName][key] !== undefined) {
-                return variableTable[varName][key];
+            const cssVarName = (0, zss_engine_1.camelToKebabCase)(key);
+            return `var(--${cssVarName})`;
+        }
+    }
+    return undefined;
+}
+function resolveThemeTableMemberExpressionByNode(node, themeTable, asObject = false) {
+    if (t.isIdentifier(node)) {
+        if (asObject && typeof themeTable[node.name] === 'object') {
+            return { ...themeTable[node.name] };
+        }
+        const cssVarName = (0, zss_engine_1.camelToKebabCase)(node.name);
+        return `var(--${cssVarName})`;
+    }
+    if (t.isMemberExpression(node) && t.isIdentifier(node.object)) {
+        const varName = node.object.name;
+        let key;
+        if (t.isIdentifier(node.property)) {
+            key = node.property.name;
+        }
+        else if (t.isStringLiteral(node.property)) {
+            key = node.property.value;
+        }
+        if (key && themeTable[varName] && themeTable[varName][key] !== undefined) {
+            if (asObject) {
+                return { [key]: themeTable[varName][key] };
             }
+            const cssVarName = (0, zss_engine_1.camelToKebabCase)(key);
+            return `var(--${cssVarName})`;
         }
     }
     return undefined;
 }
 function scanForDefineConsts() {
-    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
     const constTableLocal = {};
+    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
     for (const filePath of files) {
         if (!isCSSDefineFile(filePath, 'defineConsts'))
             continue;
@@ -309,7 +352,7 @@ function scanForDefineConsts() {
                     decl.init.arguments.length === 1 &&
                     t.isObjectExpression(decl.init.arguments[0])) {
                     const varName = decl.id.name;
-                    const obj = objectExpressionToObject(decl.init.arguments[0], constTableLocal, keyframesHashTable, variableTable);
+                    const obj = objectExpressionToObject(decl.init.arguments[0], constTableLocal, keyframesHashTable, variableTable, themeTable);
                     constTableLocal[varName] = obj;
                 }
             }
@@ -318,9 +361,9 @@ function scanForDefineConsts() {
     return constTableLocal;
 }
 function scanForKeyframes() {
-    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
     const keyframesHashTableLocal = {};
     const keyframesObjectTableLocal = {};
+    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
     for (const filePath of files) {
         if (!isCSSDefineFile(filePath, 'keyframes'))
             continue;
@@ -355,7 +398,7 @@ function scanForKeyframes() {
                     decl.init.arguments.length === 1 &&
                     t.isObjectExpression(decl.init.arguments[0])) {
                     const varName = decl.id.name;
-                    const obj = objectExpressionToObject(decl.init.arguments[0], constTable, keyframesHashTableLocal, variableTable);
+                    const obj = objectExpressionToObject(decl.init.arguments[0], constTable, keyframesHashTableLocal, variableTable, themeTable);
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     keyframesHashTableLocal[varName] = hash;
                     keyframesObjectTableLocal[hash] = obj;
@@ -369,9 +412,9 @@ function scanForKeyframes() {
     };
 }
 function scanForDefineVars() {
-    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
     const variableTableLocal = {};
     const defineVarsObjectTableLocal = {};
+    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
     for (const filePath of files) {
         if (!isCSSDefineFile(filePath, 'defineVars'))
             continue;
@@ -406,7 +449,7 @@ function scanForDefineVars() {
                     decl.init.arguments.length === 1 &&
                     t.isObjectExpression(decl.init.arguments[0])) {
                     const varName = decl.id.name;
-                    const obj = objectExpressionToObject(decl.init.arguments[0], constTable, keyframesHashTable, variableTableLocal);
+                    const obj = objectExpressionToObject(decl.init.arguments[0], constTable, keyframesHashTable, variableTableLocal, themeTable);
                     variableTableLocal[varName] = obj;
                     defineVarsObjectTableLocal[varName] = obj;
                 }
@@ -416,9 +459,9 @@ function scanForDefineVars() {
     return { variableTableLocal, defineVarsObjectTableLocal };
 }
 function scanForDefineTheme() {
-    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
-    const variableTableLocal = {};
+    const themeTableLocal = {};
     const defineThemeObjectTableLocal = {};
+    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
     for (const filePath of files) {
         if (!isCSSDefineFile(filePath, 'defineTheme'))
             continue;
@@ -453,14 +496,14 @@ function scanForDefineTheme() {
                     decl.init.arguments.length === 1 &&
                     t.isObjectExpression(decl.init.arguments[0])) {
                     const varName = decl.id.name;
-                    const obj = objectExpressionToObject(decl.init.arguments[0], constTable, keyframesHashTable, variableTableLocal);
-                    variableTableLocal[varName] = obj;
+                    const obj = objectExpressionToObject(decl.init.arguments[0], constTable, keyframesHashTable, variableTable, themeTableLocal);
+                    themeTableLocal[varName] = obj;
                     defineThemeObjectTableLocal[varName] = obj;
                 }
             }
         }
     }
-    return { variableTableLocal, defineThemeObjectTableLocal };
+    return { themeTableLocal, defineThemeObjectTableLocal };
 }
 function isCSSDefineFile(filePath, target) {
     if (fs_1.default.statSync(filePath).isDirectory())
@@ -500,17 +543,16 @@ function isCSSDefineFile(filePath, target) {
 }
 function loader(source) {
     const callback = this.async();
+    this.clearDependencies();
     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];
-    }
+    const { variableTableLocal, defineVarsObjectTableLocal } = scanForDefineVars.call(this);
+    const { themeTableLocal, defineThemeObjectTableLocal } = scanForDefineTheme.call(this);
+    variableTable = variableTableLocal;
+    themeTable = themeTableLocal;
     defineVarsObjectTable = defineVarsObjectTableLocal;
     defineThemeObjectTable = defineThemeObjectTableLocal;
     let extractedObject = null;
@@ -525,53 +567,31 @@ function loader(source) {
             ],
         });
     }
-    catch (e) {
-        console.warn('[virtual-css-loader] parseSync error:', e);
-        if (callback)
-            return callback(null, source);
-        return source;
-    }
-    if (!ast) {
-        console.warn('[virtual-css-loader] parseSync returned null');
-        if (callback)
-            return callback(null, source);
-        return source;
+    catch (err) {
+        console.log(err);
+        return callback(null, source);
     }
+    if (!ast)
+        return callback(null, source);
     const localConsts = collectLocalConsts(ast);
-    if (Object.keys(localConsts).length !== 0) {
-        for (const k in localConsts) {
-            constTable[k] = localConsts[k];
-        }
-    }
-    const plugin = {
+    Object.assign(constTable, localConsts);
+    const pluginAst = {
         visitor: {
             CallExpression(path) {
                 const callee = path.node.callee;
                 if (t.isMemberExpression(callee) &&
-                    t.isIdentifier(callee.object) &&
-                    callee.object.name === 'css' &&
+                    t.isIdentifier(callee.object, { name: 'css' }) &&
                     t.isIdentifier(callee.property)) {
                     const args = path.node.arguments;
                     if (callee.property.name === 'create' &&
                         args.length === 1 &&
                         t.isObjectExpression(args[0])) {
-                        try {
-                            extractedObject = objectExpressionToObject(args[0], constTable, keyframesHashTable, variableTable);
-                        }
-                        catch (e) {
-                            console.warn('[virtual-css-loader] Failed to build object from AST:', e);
-                        }
+                        extractedObject = objectExpressionToObject(args[0], constTable, keyframesHashTable, variableTable, themeTable);
                     }
                     if (callee.property.name === 'global' &&
                         args.length === 1 &&
                         t.isObjectExpression(args[0])) {
-                        try {
-                            const globalObj = objectExpressionToObject(args[0], constTable, keyframesHashTable, variableTable);
-                            extractedGlobalObjects.push(globalObj);
-                        }
-                        catch (e) {
-                            console.warn('[virtual-css-loader] Failed to build global object from AST:', e);
-                        }
+                        extractedGlobalObjects.push(objectExpressionToObject(args[0], constTable, keyframesHashTable, variableTable, themeTable));
                     }
                 }
             },
@@ -579,52 +599,54 @@ function loader(source) {
     };
     (0, core_1.transformFromAstSync)(ast, source, {
         code: false,
-        plugins: [plugin],
+        plugins: [pluginAst],
         configFile: false,
     });
-    if (!extractedObject && extractedGlobalObjects.length === 0) {
-        if (callback)
-            return callback(null, source);
-        return source;
-    }
-    const css = extractedObject ? (0, create_css_1.createCSS)(extractedObject) : '';
-    let globalCss = '';
-    for (const obj of extractedGlobalObjects) {
-        globalCss +=
-            (0, zss_engine_1.transpile)(obj, undefined, '--global').styleSheet + '\n';
-    }
-    let keyframeCss = '';
-    for (const [hash, obj] of Object.entries(keyframesObjectTable)) {
-        const keyframeWrapped = { [`@keyframes ${hash}`]: obj };
-        const { styleSheet } = (0, zss_engine_1.transpile)(keyframeWrapped, undefined, '--global');
-        keyframeCss += styleSheet + '\n';
-    }
-    let varCss = '';
-    for (const [, obj] of Object.entries(defineVarsObjectTable)) {
-        const { styleSheet } = (0, zss_engine_1.transpile)((0, create_css_1.createVars)(obj), undefined, '--global');
-        varCss += styleSheet + '\n';
-    }
-    let themeCss = '';
-    for (const [, obj] of Object.entries(defineThemeObjectTable)) {
-        const { styleSheet } = (0, zss_engine_1.transpile)((0, create_css_1.createTheme)(obj), undefined, '--global');
-        themeCss += styleSheet + '\n';
-    }
-    const finalCss = globalCss +
-        '\n' +
-        keyframeCss +
-        '\n' +
-        varCss +
-        '\n' +
-        themeCss +
-        '\n' +
-        css;
+    const fileStyles = {};
+    if (extractedObject) {
+        const base = (0, create_1.createCSS)(extractedObject);
+        if (base)
+            fileStyles.baseStyles = base;
+    }
+    if (extractedGlobalObjects.length > 0) {
+        fileStyles.globalStyles = extractedGlobalObjects
+            .map((obj) => (0, zss_engine_1.transpile)(obj, undefined, '--global').styleSheet)
+            .join('\n');
+    }
+    if (Object.keys(keyframesObjectTable).length > 0) {
+        fileStyles.keyframeStyles = Object.entries(keyframesObjectTable)
+            .map(([hash, obj]) => (0, zss_engine_1.transpile)({ [`@keyframes ${hash}`]: obj }, undefined, '--global')
+            .styleSheet)
+            .join('\n');
+    }
+    if (Object.keys(defineVarsObjectTable).length > 0) {
+        fileStyles.varStyles = Object.values(defineVarsObjectTable)
+            .map((obj) => (0, zss_engine_1.transpile)((0, create_1.createVars)(obj), undefined, '--global')
+            .styleSheet)
+            .join('\n');
+    }
+    if (Object.keys(defineThemeObjectTable).length > 0) {
+        fileStyles.themeStyles = Object.values(defineThemeObjectTable)
+            .map((obj) => (0, zss_engine_1.transpile)((0, create_1.createTheme)(obj), undefined, '--global')
+            .styleSheet)
+            .join('\n');
+    }
     const virtualCssFileName = loader_utils_1.default.interpolateName(this, '[path][name].[hash:base64:8].virtual.css', {
-        content: finalCss,
+        content: JSON.stringify(fileStyles),
         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);
+    if (pluginInstance) {
+        if (!pluginInstance.__plumeriaRegistered) {
+            pluginInstance.__plumeriaRegistered = new Set();
+        }
+        const cache = pluginInstance.__plumeriaRegistered;
+        if (!cache.has(absVirtualCssFileName)) {
+            cache.add(absVirtualCssFileName);
+            pluginInstance.registerStyle(absVirtualCssFileName, fileStyles);
+        }
+    }
     let importPath = path_1.default.posix.relative(path_1.default.dirname(this.resourcePath), absVirtualCssFileName);
     if (!importPath.startsWith('.')) {
         importPath = './' + importPath;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/webpack-plugin",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Plumeria Webpack plugin",
   "repository": {
     "type": "git",
@@ -14,10 +14,6 @@
   "files": [
     "dist/"
   ],
-  "scripts": {
-    "build": "rimraf dist && pnpm cjs",
-    "cjs": "tsc --project tsconfig.cjs.json"
-  },
   "dependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
@@ -35,5 +31,9 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "rimraf dist && pnpm cjs",
+    "cjs": "tsc --project tsconfig.cjs.json"
   }
-}
+}