@plumeria/webpack-plugin 0.18.4 → 0.19.0

package/dist/create.d.ts

@@ -1,5 +1,5 @@
-import type { CSSProperties, CreateStyleType, CreateTheme, CreateValues } from 'zss-engine';
+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 createTheme: <const T extends CreateTheme>(object: T) => Record<string, Record<string, string | number | object>>;
-export { createCSS, createVars, createTheme };
+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,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createTheme = exports.createVars = void 0;
+exports.createTokens = exports.createVars = void 0;
 exports.createCSS = createCSS;
 const zss_engine_1 = require("zss-engine");
 function compileToSingleCSS(object) {
@@ -83,7 +83,7 @@ const createVars = (object) => {
     return styles;
 };
 exports.createVars = createVars;
-const createTheme = (object) => {
+const createTokens = (object) => {
     const styles = {};
     Object.entries(object).forEach(([key, value]) => {
         Object.entries(value).forEach(([subKey, subValue]) => {
@@ -101,4 +101,4 @@ const createTheme = (object) => {
     });
     return styles;
 };
-exports.createTheme = createTheme;
+exports.createTokens = createTokens;

package/dist/index.js

@@ -61,9 +61,8 @@ class PlumeriaPlugin {
         const prev = this.stylesByFile.get(absPath) || {
             filePath,
             keyframeStyles: '',
-            varStyles: '',
-            themeStyles: '',
-            globalStyles: '',
+            viewTransitionStyles: '',
+            tokenStyles: '',
             baseStyles: '',
         };
         const isCurrentPage = this.isCurrentPageFile(absPath);
@@ -82,25 +81,29 @@ class PlumeriaPlugin {
     }
     generateOrderedCSS() {
         const allStyles = Array.from(this.stylesByFile.values());
+        if (allStyles.length === 0) {
+            return '';
+        }
         const sortedStyles = allStyles.sort((a, b) => (b.lastAccessed || 0) - (a.lastAccessed || 0));
+        const latestStyles = sortedStyles[0];
         const keyframeStylesSet = new Set();
-        const varStylesSet = new Set();
-        const themeStylesSet = new Set();
+        const viewTransitionStylesSet = new Set();
+        const tokenStylesSet = new Set();
         const baseStylesSet = new Set();
+        if (latestStyles.keyframeStyles?.trim().length > 0)
+            keyframeStylesSet.add(latestStyles.keyframeStyles);
+        if (latestStyles.viewTransitionStyles?.trim().length > 0)
+            viewTransitionStylesSet.add(latestStyles.viewTransitionStyles);
+        if (latestStyles.tokenStyles?.trim().length > 0)
+            tokenStylesSet.add(latestStyles.tokenStyles);
         for (const s of sortedStyles) {
-            if (s.keyframeStyles?.trim().length > 0)
-                keyframeStylesSet.add(s.keyframeStyles);
-            if (s.varStyles?.trim().length > 0)
-                varStylesSet.add(s.varStyles);
-            if (s.themeStyles?.trim().length > 0)
-                themeStylesSet.add(s.themeStyles);
             if (s.baseStyles?.trim().length > 0)
                 baseStylesSet.add(s.baseStyles);
         }
         return [
             ...Array.from(keyframeStylesSet),
-            ...Array.from(varStylesSet),
-            ...Array.from(themeStylesSet),
+            ...Array.from(viewTransitionStylesSet),
+            ...Array.from(tokenStylesSet),
             ...Array.from(baseStylesSet),
         ]
             .filter(Boolean)

package/dist/types.d.ts

@@ -6,9 +6,10 @@ export type CSSObject = {
 };
 export type ConstTable = Record<string, CSSObject | string>;
 export type VariableTable = Record<string, CSSObject>;
-export type ThemeTable = Record<string, CSSObject>;
+export type TokensTable = 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 type ViewTransitionHashTable = Record<string, string>;
+export type ViewTransitionObjectTable = Record<string, CSSObject>;
+export type DefineTokensObjectTable = Record<string, CSSObject>;
 export {};

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

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

package/dist/virtual-css-loader.js

@@ -51,33 +51,33 @@ const GLOB_OPTIONS = {
     cwd: PROJECT_ROOT,
 };
 let constTable = {};
-let variableTable = {};
-let themeTable = {};
+let tokensTable = {};
 let keyframesHashTable = {};
 let keyframesObjectTable = {};
-let defineVarsObjectTable = {};
-let defineThemeObjectTable = {};
-function objectExpressionToObject(node, constTable, keyframesHashTable, variableTable, themeTable) {
+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, variableTable);
+        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] = resolvedKeyframe;
+                obj[key] = 'kf-' + resolvedKeyframe;
                 return;
             }
-            const resolvedVariable = resolveVariableTableMemberExpressionByNode(val, variableTable);
-            if (resolvedVariable !== undefined) {
-                obj[key] = resolvedVariable;
+            const resolvedViewTransitioin = resolveViewTransitionTableMemberExpression(val, viewTransitionHashTable);
+            if (resolvedViewTransitioin !== undefined) {
+                obj[key] = 'vt-' + resolvedViewTransitioin;
                 return;
             }
-            const resolvedTheme = resolveThemeTableMemberExpressionByNode(val, themeTable);
+            const resolvedTheme = resolveTokensTableMemberExpressionByNode(val, tokensTable);
             if (resolvedTheme !== undefined) {
                 obj[key] = resolvedTheme;
                 return;
@@ -92,7 +92,7 @@ function objectExpressionToObject(node, constTable, keyframesHashTable, variable
             obj[key] = evaluateUnaryExpression(val);
         }
         else if (t.isObjectExpression(val)) {
-            obj[key] = objectExpressionToObject(val, constTable, keyframesHashTable, variableTable, themeTable);
+            obj[key] = objectExpressionToObject(val, constTable, keyframesHashTable, viewTransitionHashTable, tokensTable);
         }
         else if (t.isMemberExpression(val)) {
             const resolved = resolveConstTableMemberExpression(val, constTable);
@@ -126,7 +126,7 @@ function collectLocalConsts(ast) {
     });
     return localConsts;
 }
-function getPropertyKey(node, constTable, variableTable) {
+function getPropertyKey(node, constTable) {
     if (t.isIdentifier(node)) {
         if (constTable[node.name] && typeof constTable[node.name] === 'string') {
             return constTable[node.name];
@@ -142,34 +142,34 @@ function getPropertyKey(node, constTable, variableTable) {
         throw new Error(`Resolved key is not a string: ${JSON.stringify(result)}`);
     }
     if (t.isTemplateLiteral(node)) {
-        return evaluateTemplateLiteral(node, constTable, variableTable);
+        return evaluateTemplateLiteral(node, constTable);
     }
     if (t.isBinaryExpression(node)) {
-        return evaluateBinaryExpression(node, constTable, variableTable);
+        return evaluateBinaryExpression(node, constTable);
     }
     throw new Error(`Unsupported property key type: ${node.type}`);
 }
-function evaluateTemplateLiteral(node, constTable, variableTable) {
+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, variableTable);
+            const evaluatedExpr = evaluateExpression(expr, constTable);
             result += String(evaluatedExpr);
         }
     }
     return result;
 }
-function evaluateBinaryExpression(node, constTable, variableTable) {
-    const left = evaluateExpression(node.left, constTable, variableTable);
-    const right = evaluateExpression(node.right, constTable, variableTable);
+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, variableTable) {
+function evaluateExpression(node, constTable) {
     if (t.isStringLiteral(node)) {
         return node.value;
     }
@@ -189,6 +189,9 @@ function evaluateExpression(node, constTable, variableTable) {
         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)) {
@@ -196,21 +199,17 @@ function evaluateExpression(node, constTable, variableTable) {
         if (resolved !== undefined) {
             return resolved;
         }
-        const resolvedVar = resolveVariableTableMemberExpressionByNode(node, variableTable);
-        if (resolvedVar !== undefined) {
-            return resolvedVar;
-        }
-        const resolvedTheme = resolveThemeTableMemberExpressionByNode(node, themeTable);
+        const resolvedTheme = resolveTokensTableMemberExpressionByNode(node, tokensTable);
         if (resolvedTheme !== undefined) {
             return resolvedTheme;
         }
         return `[unresolved member expression]`;
     }
     if (t.isBinaryExpression(node)) {
-        return evaluateBinaryExpression(node, constTable, variableTable);
+        return evaluateBinaryExpression(node, constTable);
     }
     if (t.isTemplateLiteral(node)) {
-        return evaluateTemplateLiteral(node, constTable, variableTable);
+        return evaluateTemplateLiteral(node, constTable);
     }
     if (t.isUnaryExpression(node)) {
         return evaluateUnaryExpression(node);
@@ -244,6 +243,17 @@ function resolveKeyframesTableMemberExpression(node, keyframesHashTable) {
     }
     return undefined;
 }
+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];
+        }
+    }
+    return undefined;
+}
 function resolveConstTableMemberExpression(node, constTable) {
     if (t.isIdentifier(node.object) && t.isIdentifier(node.property)) {
         const varName = node.object.name;
@@ -258,10 +268,10 @@ function resolveConstTableMemberExpression(node, constTable) {
     }
     return undefined;
 }
-function resolveVariableTableMemberExpressionByNode(node, variableTable, asObject = false) {
+function resolveTokensTableMemberExpressionByNode(node, tokensTable, asObject = false) {
     if (t.isIdentifier(node)) {
-        if (asObject && typeof variableTable[node.name] === 'object') {
-            return { ...variableTable[node.name] };
+        if (asObject && typeof tokensTable[node.name] === 'object') {
+            return { ...tokensTable[node.name] };
         }
         const cssVarName = (0, zss_engine_1.camelToKebabCase)(node.name);
         return `var(--${cssVarName})`;
@@ -276,37 +286,10 @@ function resolveVariableTableMemberExpressionByNode(node, variableTable, asObjec
             key = node.property.value;
         }
         if (key &&
-            variableTable[varName] &&
-            variableTable[varName][key] !== undefined) {
+            tokensTable[varName] &&
+            tokensTable[varName][key] !== undefined) {
             if (asObject) {
-                return { [key]: 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] };
+                return { [key]: tokensTable[varName][key] };
             }
             const cssVarName = (0, zss_engine_1.camelToKebabCase)(key);
             return `var(--${cssVarName})`;
@@ -349,7 +332,7 @@ function scanForDefineConsts() {
                     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, variableTable, themeTable);
+                    const obj = objectExpressionToObject(decl.init.arguments[0], constTableLocal, keyframesHashTable, viewTransitionHashTable, tokensTable);
                     constTableLocal[varName] = obj;
                 }
             }
@@ -393,7 +376,7 @@ function scanForKeyframes() {
                     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, variableTable, themeTable);
+                    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;
@@ -406,12 +389,12 @@ function scanForKeyframes() {
         keyframesObjectTableLocal,
     };
 }
-function scanForDefineVars() {
-    const variableTableLocal = {};
-    const defineVarsObjectTableLocal = {};
+function scanForDefineTokens() {
+    const tokensTableLocal = {};
+    const defineTokensObjectTableLocal = {};
     const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
     for (const filePath of files) {
-        if (!isCSSDefineFile(filePath, 'defineVars'))
+        if (!isCSSDefineFile(filePath, 'defineTokens'))
             continue;
         this.addDependency(filePath);
         const source = fs_1.default.readFileSync(filePath, 'utf8');
@@ -439,24 +422,24 @@ function scanForDefineVars() {
                     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' }) &&
+                    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, variableTableLocal, themeTable);
-                    variableTableLocal[varName] = obj;
-                    defineVarsObjectTableLocal[varName] = obj;
+                    const obj = objectExpressionToObject(decl.init.arguments[0], constTable, keyframesHashTable, viewTransitionHashTable, tokensTableLocal);
+                    tokensTableLocal[varName] = obj;
+                    defineTokensObjectTableLocal[varName] = obj;
                 }
             }
         }
     }
-    return { variableTableLocal, defineVarsObjectTableLocal };
+    return { tokensTableLocal, defineTokensObjectTableLocal };
 }
-function scanForDefineTheme() {
-    const themeTableLocal = {};
-    const defineThemeObjectTableLocal = {};
+function scanForViewTransition() {
+    const viewTransitionHashTableLocal = {};
+    const viewTransitionObjectTableLocal = {};
     const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
     for (const filePath of files) {
-        if (!isCSSDefineFile(filePath, 'defineTheme'))
+        if (!isCSSDefineFile(filePath, 'viewTransition'))
             continue;
         this.addDependency(filePath);
         const source = fs_1.default.readFileSync(filePath, 'utf8');
@@ -484,17 +467,23 @@ function scanForDefineTheme() {
                     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' }) &&
+                    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, variableTable, themeTableLocal);
-                    themeTableLocal[varName] = obj;
-                    defineThemeObjectTableLocal[varName] = obj;
+                    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 { themeTableLocal, defineThemeObjectTableLocal };
+    return {
+        viewTransitionHashTableLocal,
+        viewTransitionObjectTableLocal,
+    };
 }
 function isCSSDefineFile(filePath, target) {
     if (fs_1.default.statSync(filePath).isDirectory())
@@ -532,19 +521,24 @@ function isCSSDefineFile(filePath, target) {
     return found;
 }
 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);
-    const callback = this.async();
     constTable = scanForDefineConsts.call(this);
     const { keyframesHashTableLocal, keyframesObjectTableLocal } = scanForKeyframes.call(this);
     keyframesHashTable = keyframesHashTableLocal;
     keyframesObjectTable = keyframesObjectTableLocal;
-    const { variableTableLocal, defineVarsObjectTableLocal } = scanForDefineVars.call(this);
-    const { themeTableLocal, defineThemeObjectTableLocal } = scanForDefineTheme.call(this);
-    variableTable = variableTableLocal;
-    themeTable = themeTableLocal;
-    defineVarsObjectTable = defineVarsObjectTableLocal;
-    defineThemeObjectTable = defineThemeObjectTableLocal;
+    const { viewTransitionHashTableLocal, viewTransitionObjectTableLocal } = scanForViewTransition.call(this);
+    viewTransitionHashTable = viewTransitionHashTableLocal;
+    viewTransitionObjectTable = viewTransitionObjectTableLocal;
+    const { tokensTableLocal, defineTokensObjectTableLocal } = scanForDefineTokens.call(this);
+    tokensTable = tokensTableLocal;
+    defineTokensObjectTable = defineTokensObjectTableLocal;
     let extractedObject = null;
     let ast;
     try {
@@ -557,10 +551,13 @@ function loader(source) {
     }
     catch (err) {
         console.log(err);
-        return callback(null, source);
+        callback(null, source);
+        return;
+    }
+    if (!ast) {
+        callback(null, source);
+        return;
     }
-    if (!ast)
-        return callback(null, source);
     const localConsts = collectLocalConsts(ast);
     Object.assign(constTable, localConsts);
     const pluginAst = {
@@ -574,7 +571,7 @@ function loader(source) {
                     if (callee.property.name === 'create' &&
                         args.length === 1 &&
                         t.isObjectExpression(args[0])) {
-                        extractedObject = objectExpressionToObject(args[0], constTable, keyframesHashTable, variableTable, themeTable);
+                        extractedObject = objectExpressionToObject(args[0], constTable, keyframesHashTable, viewTransitionHashTable, tokensTable);
                     }
                 }
             },
@@ -593,19 +590,21 @@ function loader(source) {
     }
     if (Object.keys(keyframesObjectTable).length > 0) {
         fileStyles.keyframeStyles = Object.entries(keyframesObjectTable)
-            .map(([hash, obj]) => (0, zss_engine_1.transpile)({ [`@keyframes ${hash}`]: obj }, undefined, '--global')
+            .map(([hash, obj]) => (0, zss_engine_1.transpile)({ [`@keyframes kf-${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)
+    if (Object.keys(viewTransitionObjectTable).length > 0) {
+        fileStyles.viewTransitionStyles = Object.entries(viewTransitionObjectTable)
+            .map(([hash, obj]) => (0, zss_engine_1.transpile)({
+            [`::view-transition-old(vt-${hash})`]: obj.old,
+            [`::view-transition-new(vt-${hash})`]: obj.new,
+        }, 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')
+    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')
             .styleSheet)
             .join('\n');
     }
@@ -639,7 +638,5 @@ function loader(source) {
             pluginInstance.registerFileStyles(fileKey, fileStyles);
         }
     }
-    if (callback)
-        callback(null, source + postfix);
-    return source + postfix;
+    callback(null, source + postfix);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/webpack-plugin",
-  "version": "0.18.4",
+  "version": "0.19.0",
   "description": "Plumeria Webpack plugin",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
     "@rust-gear/glob": "^0.2.2",
     "@types/babel__core": "^7.20.5",
     "webpack": "^5.101.0",
-    "zss-engine": "^0.2.84"
+    "zss-engine": "^0.2.87"
   },
   "publishConfig": {
     "access": "public"