@plumeria/utils 2.4.1 → 3.0.0

package/dist/create.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties } from 'zss-engine';
+export interface StyleRecord {
+    key: string;
+    hash: string;
+    sheet: string;
+}
+export declare function getStyleRecords(key: string, styleRule: CSSProperties, priority?: number): StyleRecord[];

package/dist/create.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyleRecords = getStyleRecords;
+const zss_engine_1 = require("zss-engine");
+function getStyleRecords(key, styleRule, priority = 1 | 2) {
+    const flat = {};
+    const nonFlat = {};
+    const notNormalize = priority === 1 ? ':not(#\\#)' : ':not(#\\#):not(#\\#)';
+    (0, zss_engine_1.splitAtomicAndNested)(styleRule, flat, nonFlat);
+    const finalFlat = (0, zss_engine_1.overrideLonghand)(flat);
+    const records = [];
+    Object.entries(finalFlat).forEach(([prop, value]) => {
+        if (prop.startsWith('@media') || prop.startsWith('@container')) {
+            Object.entries(value).forEach(([innerProp, innerValue]) => {
+                const atomicMap = new Map();
+                (0, zss_engine_1.processAtomicProps)({ [innerProp]: innerValue }, atomicMap, prop);
+                const querySheets = [];
+                const queryHashes = [];
+                for (const [hash, sheet] of atomicMap) {
+                    querySheets.push(sheet.replace(`.${hash}`, `.${hash}${notNormalize}`));
+                    queryHashes.push(hash);
+                }
+                if (querySheets.length > 0) {
+                    records.push({
+                        key: prop + innerProp,
+                        hash: queryHashes.join(' '),
+                        sheet: querySheets.join(''),
+                    });
+                }
+            });
+        }
+        else {
+            const atomicMap = new Map();
+            (0, zss_engine_1.processAtomicProps)({ [prop]: value }, atomicMap);
+            const sheets = [];
+            const hashes = [];
+            for (const [hash, sheet] of atomicMap) {
+                sheets.push(sheet);
+                hashes.push(hash);
+            }
+            if (sheets.length > 0) {
+                records.push({
+                    key: prop,
+                    hash: hashes.join(' '),
+                    sheet: sheets.join(''),
+                });
+            }
+        }
+    });
+    if (Object.keys(nonFlat).length > 0) {
+        const nonFlatBase = {};
+        const nonFlatQuery = {};
+        Object.entries(nonFlat).forEach(([atRule, nestedObj]) => {
+            if (atRule.startsWith('@media') || atRule.startsWith('@container')) {
+                nonFlatQuery[atRule] = nestedObj;
+            }
+            else {
+                nonFlatBase[atRule] = nestedObj;
+            }
+        });
+        Object.entries(nonFlatBase).forEach(([selector, style], index) => {
+            const hashObj = { [key]: { [selector]: style, index } };
+            const hash = (0, zss_engine_1.genBase36Hash)(hashObj, 1, 7);
+            const transpileObj = { [key]: { [selector]: style } };
+            const { styleSheet } = (0, zss_engine_1.transpile)(transpileObj, hash);
+            records.push({
+                key: selector + index,
+                hash: hash,
+                sheet: styleSheet,
+            });
+        });
+        Object.entries(nonFlatQuery).forEach(([atRule, nestedStyles]) => {
+            Object.entries(nestedStyles).forEach(([selector, style], index) => {
+                const hashObj = { [key]: { [atRule]: { [selector]: style, index } } };
+                const hash = (0, zss_engine_1.genBase36Hash)(hashObj, 1, 7);
+                const transpileObj = { [key]: { [atRule]: { [selector]: style } } };
+                const { styleSheet } = (0, zss_engine_1.transpile)(transpileObj, hash);
+                const finalSheet = styleSheet.replace(`.${hash}`, `.${hash}${notNormalize}`);
+                records.push({
+                    key: atRule + selector + index,
+                    hash: hash,
+                    sheet: finalSheet,
+                });
+            });
+        });
+    }
+    return records;
+}

package/dist/createTheme.d.ts

@@ -0,0 +1,3 @@
+import { CreateTheme } from 'zss-engine';
+declare const createTheme: <const T extends CreateTheme>(rule: T) => Record<string, Record<string, string | number | Record<string, string | number>>>;
+export { createTheme };

package/dist/createTheme.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTheme = void 0;
+const zss_engine_1 = require("zss-engine");
+const createTheme = (rule) => {
+    const styles = {};
+    for (const key in rule) {
+        const varKey = `--${(0, zss_engine_1.camelToKebabCase)(key)}`;
+        const themeMap = rule[key];
+        for (const themeKey in themeMap) {
+            const value = themeMap[themeKey];
+            const isQuery = themeKey.startsWith('@media') || themeKey.startsWith('@container');
+            const selector = isQuery || themeKey === 'default'
+                ? ':root'
+                : `:root[data-theme="${themeKey}"]`;
+            const target = (styles[selector] ||= {});
+            if (isQuery) {
+                const queryObj = (target[themeKey] ||= {});
+                queryObj[varKey] = value;
+            }
+            else {
+                target[varKey] = value;
+            }
+        }
+    }
+    return styles;
+};
+exports.createTheme = createTheme;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export type { CSSObject, FileStyles } from './types';
-export { createCSS, createVars, createTheme } from './transform';
-export { scanForCreateStatic, scanForCreateTheme, scanForKeyframes, scanForViewTransition, objectExpressionToObject, collectLocalConsts, traverse, t, tables, } from './parser';
+export { scanForCreateStatic, scanForCreateTheme, scanForKeyframes, scanForViewTransition, objectExpressionToObject, collectLocalConsts, traverse, t, tables, extractOndemandStyles, } from './parser';
+export { getStyleRecords } from './create';
+export type { StyleRecord } from './create';

package/dist/index.js

@@ -1,10 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tables = exports.t = exports.traverse = exports.collectLocalConsts = exports.objectExpressionToObject = exports.scanForViewTransition = exports.scanForKeyframes = exports.scanForCreateTheme = exports.scanForCreateStatic = exports.createTheme = exports.createVars = exports.createCSS = void 0;
-var transform_1 = require("./transform");
-Object.defineProperty(exports, "createCSS", { enumerable: true, get: function () { return transform_1.createCSS; } });
-Object.defineProperty(exports, "createVars", { enumerable: true, get: function () { return transform_1.createVars; } });
-Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return transform_1.createTheme; } });
+exports.getStyleRecords = exports.extractOndemandStyles = exports.tables = exports.t = exports.traverse = exports.collectLocalConsts = exports.objectExpressionToObject = exports.scanForViewTransition = exports.scanForKeyframes = exports.scanForCreateTheme = exports.scanForCreateStatic = void 0;
 var parser_1 = require("./parser");
 Object.defineProperty(exports, "scanForCreateStatic", { enumerable: true, get: function () { return parser_1.scanForCreateStatic; } });
 Object.defineProperty(exports, "scanForCreateTheme", { enumerable: true, get: function () { return parser_1.scanForCreateTheme; } });
@@ -15,3 +11,6 @@ Object.defineProperty(exports, "collectLocalConsts", { enumerable: true, get: fu
 Object.defineProperty(exports, "traverse", { enumerable: true, get: function () { return parser_1.traverse; } });
 Object.defineProperty(exports, "t", { enumerable: true, get: function () { return parser_1.t; } });
 Object.defineProperty(exports, "tables", { enumerable: true, get: function () { return parser_1.tables; } });
+Object.defineProperty(exports, "extractOndemandStyles", { enumerable: true, get: function () { return parser_1.extractOndemandStyles; } });
+var create_1 = require("./create");
+Object.defineProperty(exports, "getStyleRecords", { enumerable: true, get: function () { return create_1.getStyleRecords; } });

package/dist/parser.d.ts

@@ -39,5 +39,6 @@ export declare function scanForViewTransition(addDependency: (path: string) => v
 export declare function scanForCreateStatic(addDependency: (path: string) => void): StaticTable;
 export declare function scanForCreateTheme(addDependency: (path: string) => void): {
     themeTableLocal: Record<string, Record<string, any>>;
-    createThemeObjectTableLocal: Record<string, any>;
+    createThemeObjectTableLocal: Record<string, Record<string, any>>;
 };
+export declare function extractOndemandStyles(obj: any, extractedSheets: string[]): void;

package/dist/parser.js

@@ -11,10 +11,13 @@ exports.scanForKeyframes = scanForKeyframes;
 exports.scanForViewTransition = scanForViewTransition;
 exports.scanForCreateStatic = scanForCreateStatic;
 exports.scanForCreateTheme = scanForCreateTheme;
+exports.extractOndemandStyles = extractOndemandStyles;
+const createTheme_1 = require("./createTheme");
 const core_1 = require("@swc/core");
 const path_1 = __importDefault(require("path"));
 const fs_1 = __importDefault(require("fs"));
 const zss_engine_1 = require("zss-engine");
+const viewTransition_1 = require("./viewTransition");
 exports.t = {
     isObjectExpression: (node) => node?.type === 'ObjectExpression',
     isObjectProperty: (node) => node?.type === 'KeyValueProperty',
@@ -500,8 +503,9 @@ function scanForCreateTheme(addDependency) {
                     exports.t.isObjectExpression(decl.init.arguments[0].expression)) {
                     const varName = decl.id.value;
                     const obj = objectExpressionToObject(decl.init.arguments[0].expression, exports.tables.staticTable, exports.tables.keyframesHashTable, exports.tables.viewTransitionHashTable, themeTableLocal);
+                    const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     themeTableLocal[varName] = obj;
-                    createThemeObjectTableLocal[varName] = obj;
+                    createThemeObjectTableLocal[hash] = obj;
                 }
             }
         }
@@ -540,3 +544,59 @@ function isCSSDefineFile(filePath, target) {
     });
     return found;
 }
+function extractOndemandStyles(obj, extractedSheets) {
+    if (!obj || typeof obj !== 'object')
+        return;
+    const visited = new Set();
+    const processedThemes = new Set();
+    function walk(n) {
+        if (!n || typeof n !== 'object' || visited.has(n))
+            return;
+        visited.add(n);
+        Object.values(n).forEach((val) => {
+            if (typeof val === 'string') {
+                if (val.startsWith('kf-')) {
+                    const hash = val.slice(3);
+                    const definition = exports.tables.keyframesObjectTable[hash];
+                    if (definition) {
+                        const { styleSheet } = (0, zss_engine_1.transpile)({ [`@keyframes kf-${hash}`]: definition }, undefined, '--global');
+                        if (!extractedSheets.includes(styleSheet)) {
+                            extractedSheets.push(styleSheet);
+                        }
+                    }
+                }
+                else if (val.startsWith('vt-')) {
+                    const hash = val.slice(3);
+                    const obj = exports.tables.viewTransitionObjectTable[hash];
+                    if (obj) {
+                        const { styleSheet } = (0, zss_engine_1.transpile)((0, viewTransition_1.createViewTransition)(obj, hash), undefined, '--global');
+                        if (!extractedSheets.includes(styleSheet)) {
+                            extractedSheets.push(styleSheet);
+                        }
+                    }
+                }
+                else if (val.includes('var(--')) {
+                    Object.keys(exports.tables.themeTable).forEach((themeVarName) => {
+                        if (!processedThemes.has(themeVarName)) {
+                            processedThemes.add(themeVarName);
+                            const themeObj = exports.tables.themeTable[themeVarName];
+                            const hash = (0, zss_engine_1.genBase36Hash)(themeObj, 1, 8);
+                            const definition = exports.tables.createThemeObjectTable[hash];
+                            if (definition && typeof definition === 'object') {
+                                const styles = (0, createTheme_1.createTheme)(definition);
+                                const { styleSheet } = (0, zss_engine_1.transpile)(styles, undefined, '--global');
+                                if (!extractedSheets.includes(styleSheet)) {
+                                    extractedSheets.push(styleSheet);
+                                }
+                            }
+                        }
+                    });
+                }
+            }
+            else {
+                walk(val);
+            }
+        });
+    }
+    walk(obj);
+}

package/dist/viewTransition.d.ts

@@ -0,0 +1,4 @@
+import type { CSSProperties, ViewTransition } from 'zss-engine';
+export declare const createViewTransition: (rule: ViewTransition, hash: string) => {
+    [x: string]: CSSProperties;
+};

package/dist/viewTransition.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createViewTransition = void 0;
+const createViewTransition = (rule, hash) => ({
+    [`::view-transition-group(vt-${hash})`]: rule.group,
+    [`::view-transition-image-pair(vt-${hash})`]: rule.imagePair,
+    [`::view-transition-old(vt-${hash})`]: rule.old,
+    [`::view-transition-new(vt-${hash})`]: rule.new,
+});
+exports.createViewTransition = createViewTransition;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/utils",
-  "version": "2.4.1",
+  "version": "3.0.0",
   "description": "Plumeria Utils",
   "author": "Refirst 11",
   "license": "MIT",
@@ -21,10 +21,8 @@
     "dist/"
   ],
   "dependencies": {
-    "@swc/core": "1.15.2"
-  },
-  "devDependencies": {
-    "zss-engine": "2.1.0"
+    "@swc/core": "1.15.2",
+    "zss-engine": "2.1.2"
   },
   "publishConfig": {
     "access": "public",

package/dist/transform.d.ts

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

package/dist/transform.js

@@ -1,142 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createTheme = exports.createVars = void 0;
-exports.createCSS = createCSS;
-const zss_engine_1 = require("zss-engine");
-function compileToSingleCSS(rule) {
-    const baseSheets = [];
-    const querySheets = [];
-    const processedHashes = new Set();
-    Object.entries(rule).forEach(([key, styleRule]) => {
-        const flat = {};
-        const nonFlat = {};
-        (0, zss_engine_1.splitAtomicAndNested)(styleRule, flat, nonFlat);
-        const finalFlat = (0, zss_engine_1.overrideLonghand)(flat);
-        const records = [];
-        Object.entries(finalFlat).forEach(([prop, value]) => {
-            if (prop.startsWith('@media') || prop.startsWith('@container')) {
-                Object.entries(value).forEach(([innerProp, innerValue]) => {
-                    const atomicMap = new Map();
-                    (0, zss_engine_1.processAtomicProps)({ [innerProp]: innerValue }, atomicMap, prop);
-                    const querySheets = [];
-                    const queryHashes = [];
-                    for (const [hash, sheet] of atomicMap) {
-                        querySheets.push(sheet.replace(`.${hash}`, `.${hash}:not(#\\#):not(#\\#)`));
-                        queryHashes.push(hash);
-                    }
-                    if (querySheets.length > 0) {
-                        records.push({
-                            key: prop + innerProp,
-                            hash: queryHashes.join(' '),
-                            sheet: querySheets.join(''),
-                        });
-                    }
-                });
-            }
-            else {
-                const atomicMap = new Map();
-                (0, zss_engine_1.processAtomicProps)({ [prop]: value }, atomicMap);
-                const sheets = [];
-                const hashes = [];
-                for (const [hash, sheet] of atomicMap) {
-                    sheets.push(sheet);
-                    hashes.push(hash);
-                }
-                if (sheets.length > 0) {
-                    records.push({
-                        key: prop,
-                        hash: hashes.join(' '),
-                        sheet: sheets.join(''),
-                    });
-                }
-            }
-        });
-        if (Object.keys(nonFlat).length > 0) {
-            const nonFlatBase = {};
-            const nonFlatQuery = {};
-            Object.entries(nonFlat).forEach(([atRule, nestedObj]) => {
-                if (atRule.startsWith('@media') || atRule.startsWith('@container')) {
-                    nonFlatQuery[atRule] = nestedObj;
-                }
-                else {
-                    nonFlatBase[atRule] = nestedObj;
-                }
-            });
-            Object.entries(nonFlatBase).forEach(([selector, style], index) => {
-                const hashObj = { [key]: { [selector]: style, index } };
-                const hash = (0, zss_engine_1.genBase36Hash)(hashObj, 1, 7);
-                const transpileObj = { [key]: { [selector]: style } };
-                const { styleSheet } = (0, zss_engine_1.transpile)(transpileObj, hash);
-                records.push({
-                    key: selector + index,
-                    hash: hash,
-                    sheet: styleSheet,
-                });
-            });
-            Object.entries(nonFlatQuery).forEach(([atRule, nestedStyles]) => {
-                Object.entries(nestedStyles).forEach(([selector, style], index) => {
-                    const hashObj = { [key]: { [atRule]: { [selector]: style, index } } };
-                    const hash = (0, zss_engine_1.genBase36Hash)(hashObj, 1, 7);
-                    const transpileObj = { [key]: { [atRule]: { [selector]: style } } };
-                    const { styleSheet } = (0, zss_engine_1.transpile)(transpileObj, hash);
-                    const finalSheet = styleSheet.replace(`.${hash}`, `.${hash}:not(#\\#):not(#\\#)`);
-                    records.push({
-                        key: atRule + selector + index,
-                        hash: hash,
-                        sheet: finalSheet,
-                    });
-                });
-            });
-        }
-        records.reverse().forEach(({ hash, sheet }) => {
-            if (!processedHashes.has(hash)) {
-                processedHashes.add(hash);
-                if (sheet.includes('@media') || sheet.includes('@container')) {
-                    querySheets.push(sheet);
-                }
-                else {
-                    baseSheets.push(sheet);
-                }
-            }
-        });
-    });
-    return [...baseSheets, ...querySheets].filter(Boolean).join('');
-}
-function createCSS(rule) {
-    const compiledCSS = compileToSingleCSS(rule);
-    return compiledCSS;
-}
-const createVars = (rule) => {
-    const styles = {
-        ':root': {},
-    };
-    Object.entries(rule).forEach(([key, value]) => {
-        styles[':root'][`--${key}`] = value;
-    });
-    return styles;
-};
-exports.createVars = createVars;
-const createTheme = (rule) => {
-    const styles = {};
-    for (const key in rule) {
-        const varKey = `--${(0, zss_engine_1.camelToKebabCase)(key)}`;
-        const themeMap = rule[key];
-        for (const themeKey in themeMap) {
-            const value = themeMap[themeKey];
-            const isQuery = themeKey.startsWith('@media') || themeKey.startsWith('@container');
-            const selector = isQuery || themeKey === 'default'
-                ? ':root'
-                : `:root[data-theme="${themeKey}"]`;
-            const target = (styles[selector] ||= {});
-            if (isQuery) {
-                const queryObj = (target[themeKey] ||= {});
-                queryObj[varKey] = value;
-            }
-            else {
-                target[varKey] = value;
-            }
-        }
-    }
-    return styles;
-};
-exports.createTheme = createTheme;