@plumeria/utils 19.14.3 → 19.15.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) zss-in-js contributer
+Copyright (c) zss-in-js contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/compile.js

@@ -43,6 +43,7 @@ const rs = __importStar(require("@rust-gear/glob"));
 const index_1 = require("./index");
 const index_2 = require("./index");
 const dynamicKey_1 = require("./dynamicKey");
+const varType_1 = require("./varType");
 const unwrapExport = (node) => {
     if (node?.type === 'ExportDeclaration')
         return node.declaration;
@@ -126,6 +127,7 @@ const isStaticArgValue = (node) => node.type === 'StringLiteral' ||
 const dynamicTablesOf = (ctx) => ({
     keyframesHashTable: ctx.mergedKeyframesTable,
     viewTransitionHashTable: ctx.mergedViewTransitionTable,
+    varTypeHashTable: ctx.mergedVarTypeTable,
     createThemeHashTable: ctx.mergedCreateThemeHashTable,
     createThemeObjectTable: ctx.scannedTables.createThemeObjectTable,
     createHashTable: ctx.mergedCreateTable,
@@ -345,6 +347,7 @@ function compileCSS(options) {
         const importMap = {};
         const keyframesImportMap = {};
         const viewTransitionImportMap = {};
+        const varTypeImportMap = {};
         const createImportMap = {};
         const createFunctionImportMap = {};
         const createThemeImportMap = {};
@@ -406,6 +409,9 @@ function compileCSS(options) {
                             if (scannedTables.viewTransitionHashTable[uniqueKey])
                                 viewTransitionImportMap[localName] =
                                     scannedTables.viewTransitionHashTable[uniqueKey];
+                            if (scannedTables.varTypeHashTable?.[uniqueKey])
+                                varTypeImportMap[localName] =
+                                    scannedTables.varTypeHashTable[uniqueKey];
                             if (scannedTables.createHashTable[uniqueKey])
                                 createImportMap[localName] =
                                     scannedTables.createHashTable[uniqueKey];
@@ -446,6 +452,15 @@ function compileCSS(options) {
         for (const key of Object.keys(viewTransitionImportMap)) {
             mergedViewTransitionTable[key] = viewTransitionImportMap[key];
         }
+        const varTypeHashTable = scannedTables.varTypeHashTable ?? {};
+        const mergedVarTypeTable = Object.create(varTypeHashTable);
+        for (const key of (0, index_1.fileTableKeys)(resourcePath, 'varTypeHashTable') ?? []) {
+            mergedVarTypeTable[key.slice(resourcePath.length + 1)] =
+                varTypeHashTable[key];
+        }
+        for (const key of Object.keys(varTypeImportMap)) {
+            mergedVarTypeTable[key] = varTypeImportMap[key];
+        }
         const mergedCreateThemeHashTable = Object.create(scannedTables.createThemeHashTable);
         for (const key of (0, index_1.fileTableKeys)(resourcePath, 'createThemeHashTable') ??
             []) {
@@ -477,6 +492,7 @@ function compileCSS(options) {
             mergedStaticTable,
             mergedKeyframesTable,
             mergedViewTransitionTable,
+            mergedVarTypeTable,
             mergedCreateThemeHashTable,
             mergedCreateStaticHashTable,
             mergedCreateTable,
@@ -601,7 +617,7 @@ function compileCSS(options) {
                     return merged;
                 }
                 if (index_1.t.isObjectExpression(expr)) {
-                    return (0, index_1.objectExpressionToObject)(expr, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable);
+                    return (0, index_1.objectExpressionToObject)(expr, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, undefined, ctx.mergedVarTypeTable);
                 }
                 else if (index_1.t.isMemberExpression(expr) &&
                     index_1.t.isIdentifier(expr.object) &&
@@ -715,7 +731,7 @@ function compileCSS(options) {
                     properties: argExpr.properties.filter((prop) => prop.type === 'Identifier' ||
                         (prop.type === 'KeyValueProperty' &&
                             isStaticArgValue(prop.value))),
-                }, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable);
+                }, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, undefined, ctx.mergedVarTypeTable);
                 if (func.named) {
                     const argExpr = callArgs[0]?.expression;
                     if (callArgs.length > 1 ||
@@ -973,7 +989,7 @@ function compileCSS(options) {
                     propName = originalName;
             }
             if (propName) {
-                if (['create', 'createTheme', 'createStatic'].includes(propName) &&
+                if (['create', 'createTheme', 'createStatic', 'varType'].includes(propName) &&
                     !registeredStyleCalls.has(node.span.start)) {
                     throw new Error(`[plumeria] css.${propName} must be assigned to a named top-level variable. ` +
                         `Destructuring, assignment statements, and default-exported calls cannot be compiled. ` +
@@ -1003,14 +1019,14 @@ function compileCSS(options) {
                 else if (propName === 'keyframes' &&
                     args.length > 0 &&
                     index_1.t.isObjectExpression(args[0].expression)) {
-                    const obj = (0, index_1.objectExpressionToObject)(args[0].expression, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable);
+                    const obj = (0, index_1.objectExpressionToObject)(args[0].expression, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, undefined, ctx.mergedVarTypeTable);
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     writes.keyframesObjectTable[hash] = obj;
                 }
                 else if (propName === 'viewTransition' &&
                     args.length > 0 &&
                     index_1.t.isObjectExpression(args[0].expression)) {
-                    const obj = (0, index_1.objectExpressionToObject)(args[0].expression, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable);
+                    const obj = (0, index_1.objectExpressionToObject)(args[0].expression, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, undefined, ctx.mergedVarTypeTable);
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     writes.viewTransitionObjectTable[hash] = obj;
                 }
@@ -1027,7 +1043,7 @@ function compileCSS(options) {
                         throw new Error(`[plumeria] Unsupported at-rule: "${selector}". createTheme only supports ` +
                             `nesting at-rules such as @media, @container, @supports, @layer, and @scope. (${path.basename(resourcePath)})`);
                     }
-                    const obj = (0, index_1.objectExpressionToObject)(args[1].expression, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable);
+                    const obj = (0, index_1.objectExpressionToObject)(args[1].expression, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, undefined, ctx.mergedVarTypeTable);
                     const hash = (0, index_1.themeHashOf)(selector, obj);
                     writes.createThemeObjectTable[hash] = obj;
                     if (ctx.scannedTables.createThemeSelectorTable) {
@@ -1037,7 +1053,7 @@ function compileCSS(options) {
                 else if (propName === 'createStatic' &&
                     args.length > 0 &&
                     index_1.t.isObjectExpression(args[0].expression)) {
-                    const obj = (0, index_1.objectExpressionToObject)(args[0].expression, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable);
+                    const obj = (0, index_1.objectExpressionToObject)(args[0].expression, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, undefined, ctx.mergedVarTypeTable);
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     writes.createStaticObjectTable[hash] = obj;
                 }
@@ -1088,7 +1104,7 @@ function compileCSS(options) {
                                     ? ctx.scannedTables.createAtomicMapTable[ctx.mergedCreateThemeHashTable[name]]
                                     : undefined);
                             if (pName === 'create') {
-                                const obj = (0, index_1.objectExpressionToObject)(arg, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, resolveVariable);
+                                const obj = (0, index_1.objectExpressionToObject)(arg, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, resolveVariable, ctx.mergedVarTypeTable);
                                 if (obj) {
                                     const styleFunctions = (0, index_1.styleFunctionsOf)(arg);
                                     ctx.localCreateStyles[node.id.value] = {
@@ -1109,7 +1125,7 @@ function compileCSS(options) {
                                     throw new Error(`[plumeria] Unsupported at-rule: "${selector}". createTheme only supports ` +
                                         `nesting at-rules such as @media, @container, @supports, @layer, and @scope. (${path.basename(resourcePath)})`);
                                 }
-                                const obj = (0, index_1.objectExpressionToObject)(arg, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable);
+                                const obj = (0, index_1.objectExpressionToObject)(arg, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, undefined, ctx.mergedVarTypeTable);
                                 const hash = (0, index_1.themeHashOf)(selector, obj);
                                 const uKey = `${resourcePath}-${node.id.value}`;
                                 writes.createThemeHashTable[uKey] = hash;
@@ -1129,8 +1145,12 @@ function compileCSS(options) {
                                     obj: ctx.scannedTables.createAtomicMapTable[hash],
                                 };
                             }
+                            else if (pName === 'varType') {
+                                const obj = (0, index_1.objectExpressionToObject)(arg, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, undefined, ctx.mergedVarTypeTable);
+                                ctx.mergedVarTypeTable[node.id.value] = (0, varType_1.checkedVarTypeHash)(node.id.value, obj);
+                            }
                             else if (pName === 'createStatic') {
-                                const obj = (0, index_1.objectExpressionToObject)(arg, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable);
+                                const obj = (0, index_1.objectExpressionToObject)(arg, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, undefined, ctx.mergedVarTypeTable);
                                 if (obj) {
                                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                                     const uKey = `${resourcePath}-${node.id.value}`;

package/dist/dynamicKey.d.ts

@@ -1,5 +1,5 @@
 import type { Expression, ObjectExpression } from '@swc/core';
-import type { CSSObject, StaticTable, KeyframesHashTable, ViewTransitionHashTable, CreateHashTable, CreateThemeHashTable, CreateThemeObjectTable, CreateStaticHashTable, CreateStaticObjectTable } from './types';
+import type { CSSObject, StaticTable, KeyframesHashTable, ViewTransitionHashTable, VarTypeHashTable, CreateHashTable, CreateThemeHashTable, CreateThemeObjectTable, CreateStaticHashTable, CreateStaticObjectTable } from './types';
 export type NamedParam = {
     key: string;
     local: string;
@@ -29,6 +29,7 @@ export declare const applyVarFallback: (style: CSSObject, cssVar: string, litera
 export type DynamicStyleTables = {
     keyframesHashTable: KeyframesHashTable;
     viewTransitionHashTable: ViewTransitionHashTable;
+    varTypeHashTable?: VarTypeHashTable;
     createThemeHashTable: CreateThemeHashTable;
     createThemeObjectTable: CreateThemeObjectTable;
     createHashTable: CreateHashTable;

package/dist/dynamicKey.js

@@ -381,7 +381,7 @@ const resolveDynamicStyle = (func, runtimeParams, staticTable, tables, providedP
                 value: expr,
             },
         ],
-    }, table, tables.keyframesHashTable, tables.viewTransitionHashTable, tables.createThemeHashTable, tables.createThemeObjectTable, tables.createHashTable, tables.createStaticHashTable, tables.createStaticObjectTable).value;
+    }, table, tables.keyframesHashTable, tables.viewTransitionHashTable, tables.createThemeHashTable, tables.createThemeObjectTable, tables.createHashTable, tables.createStaticHashTable, tables.createStaticObjectTable, undefined, tables.varTypeHashTable).value;
     const withDefault = Object.entries(func.defaults ?? {}).filter(([param]) => providedParams
         ? !providedParams.has(param)
         : tempStaticTable[param] === undefined);
@@ -424,7 +424,7 @@ const resolveDynamicStyle = (func, runtimeParams, staticTable, tables, providedP
             return undefined;
         }
     });
-    const resolveBody = () => (0, parser_1.objectExpressionToObject)(body, tempStaticTable, tables.keyframesHashTable, tables.viewTransitionHashTable, tables.createThemeHashTable, tables.createThemeObjectTable, tables.createHashTable, tables.createStaticHashTable, tables.createStaticObjectTable);
+    const resolveBody = () => (0, parser_1.objectExpressionToObject)(body, tempStaticTable, tables.keyframesHashTable, tables.viewTransitionHashTable, tables.createThemeHashTable, tables.createThemeObjectTable, tables.createHashTable, tables.createStaticHashTable, tables.createStaticObjectTable, undefined, tables.varTypeHashTable);
     const varNames = [...varParams, ...derived.map(({ name }) => name)];
     if (varNames.length > 0) {
         varNames.forEach((name) => (tempStaticTable[name] = name));

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export type { CSSObject, StaticTable, KeyframesHashTable, ViewTransitionHashTable, CreateHashTable, CreateFunctionTable, CreateThemeHashTable, CreateStaticHashTable, } from './types';
+export type { CSSObject, StaticTable, KeyframesHashTable, ViewTransitionHashTable, VarTypeHashTable, CreateHashTable, CreateFunctionTable, CreateThemeHashTable, CreateStaticHashTable, } from './types';
 export { objectExpressionToObject, collectLocalConsts, traverse, t, getRootIdentifier, resolveOriginError, unwrapExpression, extractOndemandStyles, appendSheet, deepMerge, scanAll, scanOverlay, fileTableKeys, resolveFileError, getFileDependencies, resolveExport, resolveComponentKey, resolveThemeSelector, } from './parser';
 export { resolveExportValue } from './constValue';
 export type { StyleRecord } from './create';

package/dist/parser.d.ts

@@ -1,4 +1,4 @@
-import type { CSSObject, Tables, StaticTable, KeyframesHashTable, ViewTransitionHashTable, CreateHashTable, CreateThemeHashTable, CreateThemeObjectTable, CreateStaticHashTable, CreateStaticObjectTable, SheetSink } from './types';
+import type { CSSObject, Tables, StaticTable, KeyframesHashTable, ViewTransitionHashTable, VarTypeHashTable, CreateHashTable, CreateThemeHashTable, CreateThemeObjectTable, CreateStaticHashTable, CreateStaticObjectTable, SheetSink } from './types';
 import type { Module, Expression, CallExpression, Identifier, KeyValueProperty, StringLiteral, NumericLiteral, BooleanLiteral, ObjectExpression, MemberExpression, TemplateLiteral, BinaryExpression, UnaryExpression, ParenthesisExpression, VariableDeclaration, VariableDeclarator, ExportDeclaration, ConditionalExpression, JSXExpression, ArrowFunctionExpression, FunctionExpression } from '@swc/core';
 export declare function unwrapExpression(node: any): any;
 export declare const getRootIdentifier: (node: Expression) => string | null;
@@ -43,7 +43,7 @@ export declare function traverse(node: Module | JSXExpression, visitor: {
         stop: () => void;
     }) => void;
 }): void;
-export declare function objectExpressionToObject(node: ObjectExpression, staticTable: StaticTable, keyframesHashTable: KeyframesHashTable, viewTransitionHashTable: ViewTransitionHashTable, createThemeHashTable: CreateThemeHashTable, createThemeObjectTable: CreateThemeObjectTable, createHashTable: CreateHashTable, createStaticHashTable: CreateStaticHashTable, createStaticObjectTable: CreateStaticObjectTable, resolveVariable?: (name: string) => any): CSSObject;
+export declare function objectExpressionToObject(node: ObjectExpression, staticTable: StaticTable, keyframesHashTable: KeyframesHashTable, viewTransitionHashTable: ViewTransitionHashTable, createThemeHashTable: CreateThemeHashTable, createThemeObjectTable: CreateThemeObjectTable, createHashTable: CreateHashTable, createStaticHashTable: CreateStaticHashTable, createStaticObjectTable: CreateStaticObjectTable, resolveVariable?: (name: string) => any, varTypeHashTable?: VarTypeHashTable): CSSObject;
 export declare function collectLocalConstNodes(ast: Module): Map<string, any>;
 export declare function collectLocalConsts(ast: Module): Record<string, any>;
 export declare function readsParams(node: any, params: Set<string>): boolean;

package/dist/parser.js

@@ -61,6 +61,7 @@ const fs = __importStar(require("fs"));
 const rs = __importStar(require("@rust-gear/glob"));
 const zss_engine_1 = require("zss-engine");
 const viewTransition_1 = require("./viewTransition");
+const varType_1 = require("./varType");
 const constants_1 = require("./constants");
 const stylePropFilter_1 = require("./stylePropFilter");
 const create_1 = require("./create");
@@ -274,12 +275,12 @@ function traverse(node, visitor) {
     }
     walk(node);
 }
-function objectExpressionToObject(node, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createHashTable, createStaticHashTable, createStaticObjectTable, resolveVariable) {
+function objectExpressionToObject(node, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createHashTable, createStaticHashTable, createStaticObjectTable, resolveVariable, varTypeHashTable = {}) {
     const obj = Object.create(null);
     node.properties.forEach((prop) => {
         if (prop.type === 'SpreadElement') {
             const arg = prop.arguments;
-            const spreadVal = evaluateExpression(arg, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
+            const spreadVal = evaluateExpression(arg, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
             if (typeof spreadVal === 'object' && spreadVal !== null) {
                 Object.assign(obj, spreadVal);
             }
@@ -301,7 +302,7 @@ function objectExpressionToObject(node, staticTable, keyframesHashTable, viewTra
         }
         if (!exports.t.isObjectProperty(prop))
             return;
-        const rawKey = getPropertyKey(prop.key, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
+        const rawKey = getPropertyKey(prop.key, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
         if (!rawKey)
             return;
         const key = typeof rawKey === 'string' ? (0, zss_engine_1.stripSelectorComments)(rawKey) : rawKey;
@@ -340,6 +341,10 @@ function objectExpressionToObject(node, staticTable, keyframesHashTable, viewTra
                 obj[key] = 'vt-' + resolvedViewTransitioin;
                 return;
             }
+            if (exports.t.isIdentifier(val) && varTypeHashTable[val.value] !== undefined) {
+                obj[key] = '--pr-' + varTypeHashTable[val.value];
+                return;
+            }
             const resolvedCreate = resolveCreateTableMemberExpression(val, createHashTable);
             if (resolvedCreate !== undefined) {
                 obj[key] = 'cr-' + resolvedCreate;
@@ -362,13 +367,13 @@ function objectExpressionToObject(node, staticTable, keyframesHashTable, viewTra
             obj[key] = val.value;
         }
         else if (exports.t.isUnaryExpression(val)) {
-            obj[key] = evaluateExpression(val, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
+            obj[key] = evaluateExpression(val, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
         }
         else if (exports.t.isObjectExpression(val)) {
-            obj[key] = objectExpressionToObject(val, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createHashTable, createStaticHashTable, createStaticObjectTable, resolveVariable);
+            obj[key] = objectExpressionToObject(val, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createHashTable, createStaticHashTable, createStaticObjectTable, resolveVariable, varTypeHashTable);
         }
         else if (exports.t.isBinaryExpression(val) || exports.t.isTemplateLiteral(val)) {
-            obj[key] = evaluateExpression(val, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
+            obj[key] = evaluateExpression(val, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
         }
         else if (exports.t.isMemberExpression(val)) {
             const resolved = resolveStaticTableMemberExpression(val, staticTable);
@@ -439,7 +444,7 @@ function collectLocalConsts(ast) {
             else if (exports.t.isBinaryExpression(init) ||
                 exports.t.isTemplateLiteral(init) ||
                 exports.t.isUnaryExpression(init)) {
-                result = evaluateExpression(init, localConsts, {}, {}, {}, {}, {}, {});
+                result = evaluateExpression(init, localConsts, {}, {}, {}, {}, {}, {}, {});
             }
         }
         catch (e) {
@@ -670,7 +675,7 @@ function inlineOuterScope(objExpression, resolveProperty) {
     });
     return changed ? { ...objExpression, properties } : objExpression;
 }
-function getPropertyKey(node, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable) {
+function getPropertyKey(node, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable) {
     if (exports.t.isIdentifier(node)) {
         return node.value;
     }
@@ -690,9 +695,12 @@ function getPropertyKey(node, staticTable, keyframesHashTable, viewTransitionHas
                 typeof staticTable[expr.value] === 'string') {
                 return staticTable[expr.value];
             }
+            if (varTypeHashTable[expr.value] !== undefined) {
+                return '--pr-' + varTypeHashTable[expr.value];
+            }
         }
         if (exports.t.isCallExpression(expr)) {
-            const result = evaluateExpression(expr, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
+            const result = evaluateExpression(expr, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
             if (typeof result === 'string')
                 return result;
         }
@@ -708,28 +716,28 @@ function getPropertyKey(node, staticTable, keyframesHashTable, viewTransitionHas
                 return themeResult;
         }
         if (exports.t.isTemplateLiteral(expr)) {
-            return evaluateTemplateLiteral(expr, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
+            return evaluateTemplateLiteral(expr, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
         }
         if (exports.t.isBinaryExpression(expr)) {
-            return evaluateBinaryExpression(expr, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
+            return evaluateBinaryExpression(expr, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
         }
         return '';
     }
     if (exports.t.isTemplateLiteral(node)) {
-        return evaluateTemplateLiteral(node, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
+        return evaluateTemplateLiteral(node, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
     }
     if (exports.t.isBinaryExpression(node)) {
-        return evaluateBinaryExpression(node, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
+        return evaluateBinaryExpression(node, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
     }
     return '';
 }
-function evaluateTemplateLiteral(node, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable) {
+function evaluateTemplateLiteral(node, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable) {
     let result = '';
     for (let i = 0; i < node.quasis.length; i++) {
         result += node.quasis[i].cooked || node.quasis[i].raw;
         if (i < node.expressions.length) {
             const expr = node.expressions[i];
-            const evaluatedExpr = evaluateExpression(expr, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
+            const evaluatedExpr = evaluateExpression(expr, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
             if (evaluatedExpr === null || typeof evaluatedExpr === 'object')
                 throw new Error(`[plumeria] Template value cannot be resolved to a primitive: ${(0, exports.expressionLabel)(expr)} inside \${} must resolve to a string or number at build time.`);
             result += String(evaluatedExpr);
@@ -737,15 +745,15 @@ function evaluateTemplateLiteral(node, staticTable, keyframesHashTable, viewTran
     }
     return result;
 }
-function evaluateBinaryExpression(node, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable) {
-    const left = evaluateExpression(node.left, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
+function evaluateBinaryExpression(node, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable) {
+    const left = evaluateExpression(node.left, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
     if (node.operator === '&&' && !left)
         return left;
     if (node.operator === '||' && left)
         return left;
     if (node.operator === '??' && left !== null)
         return left;
-    const right = evaluateExpression(node.right, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
+    const right = evaluateExpression(node.right, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
     if (['&&', '||', '??'].includes(node.operator))
         return right;
     if (typeof left === 'number' && typeof right === 'number') {
@@ -815,8 +823,8 @@ function evaluateCallExpression(node, staticTable) {
     if (method === 'marker') {
         const args = node.arguments;
         if (args.length >= 2) {
-            const id = evaluateExpression(args[0].expression, staticTable, {}, {}, {}, {}, {}, {});
-            const pseudo = evaluateExpression(args[1].expression, staticTable, {}, {}, {}, {}, {}, {});
+            const id = evaluateExpression(args[0].expression, staticTable, {}, {}, {}, {}, {}, {}, {});
+            const pseudo = evaluateExpression(args[1].expression, staticTable, {}, {}, {}, {}, {}, {}, {});
             if (typeof id === 'string' && typeof pseudo === 'string') {
                 const varName = getMarkerVar(id, pseudo);
                 return {
@@ -830,8 +838,8 @@ function evaluateCallExpression(node, staticTable) {
     if (method === 'extended') {
         const args = node.arguments;
         if (args.length >= 2) {
-            const id = evaluateExpression(args[0].expression, staticTable, {}, {}, {}, {}, {}, {});
-            const pseudo = evaluateExpression(args[1].expression, staticTable, {}, {}, {}, {}, {}, {});
+            const id = evaluateExpression(args[0].expression, staticTable, {}, {}, {}, {}, {}, {}, {});
+            const pseudo = evaluateExpression(args[1].expression, staticTable, {}, {}, {}, {}, {}, {}, {});
             if (typeof id === 'string' && typeof pseudo === 'string') {
                 const varName = getMarkerVar(id, pseudo);
                 return `@container style(${varName}: 1)`;
@@ -840,7 +848,7 @@ function evaluateCallExpression(node, staticTable) {
     }
     return null;
 }
-function evaluateExpression(node, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable) {
+function evaluateExpression(node, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable) {
     node = unwrapExpression(node);
     if (exports.t.isCallExpression(node)) {
         return evaluateCallExpression(node, staticTable);
@@ -867,6 +875,9 @@ function evaluateExpression(node, staticTable, keyframesHashTable, viewTransitio
         if (viewTransitionHashTable[node.value] !== undefined) {
             return 'vt-' + viewTransitionHashTable[node.value];
         }
+        if (varTypeHashTable[node.value] !== undefined) {
+            return '--pr-' + varTypeHashTable[node.value];
+        }
         if (createStaticHashTable[node.value] !== undefined) {
             const hash = createStaticHashTable[node.value];
             if (createStaticObjectTable[hash] !== undefined) {
@@ -891,13 +902,13 @@ function evaluateExpression(node, staticTable, keyframesHashTable, viewTransitio
         throw new Error(`[plumeria] Cannot resolve static member expression: ${(0, exports.expressionLabel)(node)}. Its object must be a const or a value created by css.createStatic or css.createTheme.`);
     }
     if (exports.t.isBinaryExpression(node)) {
-        return evaluateBinaryExpression(node, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
+        return evaluateBinaryExpression(node, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
     }
     if (exports.t.isTemplateLiteral(node)) {
-        return evaluateTemplateLiteral(node, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
+        return evaluateTemplateLiteral(node, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
     }
     if (exports.t.isUnaryExpression(node)) {
-        const value = evaluateExpression(node.argument, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
+        const value = evaluateExpression(node.argument, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
         if (node.operator === '!')
             return !value;
         if (typeof value === 'number') {
@@ -911,7 +922,7 @@ function evaluateExpression(node, staticTable, keyframesHashTable, viewTransitio
         throw new Error(`[plumeria] Unsupported unary operand for ${node.operator}: ${(0, exports.expressionLabel)(node.argument)} must resolve to a number at build time.`);
     }
     if (exports.t.isParenthesisExpression(node)) {
-        return evaluateExpression(node.expression, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
+        return evaluateExpression(node.expression, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
     }
     throw new Error(`[plumeria] Unsupported expression type: ${(0, exports.expressionLabel)(node)}. Style values must be literals, consts, or arithmetic and template expressions of them.`);
 }
@@ -1023,7 +1034,7 @@ function resolveCreateStaticTableMemberExpression(node, createStaticHashTable, c
 }
 function resolveThemeSelector(node, staticTable, createStaticHashTable, createStaticObjectTable) {
     try {
-        const value = evaluateExpression(node, staticTable, {}, {}, {}, {}, createStaticHashTable, createStaticObjectTable);
+        const value = evaluateExpression(node, staticTable, {}, {}, {}, {}, {}, createStaticHashTable, createStaticObjectTable);
         return typeof value === 'string' ? value : '';
     }
     catch {
@@ -1074,7 +1085,9 @@ const globalAgregatedTables = {
     keyframesHashTable: {},
     keyframesObjectTable: {},
     viewTransitionHashTable: {},
+    varTypeHashTable: {},
     viewTransitionObjectTable: {},
+    varTypeObjectTable: {},
     createThemeObjectTable: {},
     createThemeSelectorTable: {},
     createHashTable: {},
@@ -1098,6 +1111,7 @@ const detachedTables = new Set([
     'staticTable',
     'keyframesHashTable',
     'viewTransitionHashTable',
+    'varTypeHashTable',
     'createHashTable',
     'createObjectTable',
     'createFunctionTable',
@@ -1433,6 +1447,7 @@ function runScan(scanCwd, styleProp) {
                     keyframesHashTable: {},
                     keyframesObjectTable: {},
                     viewTransitionHashTable: {},
+                    varTypeHashTable: {},
                     viewTransitionObjectTable: {},
                     createThemeHashTable: {},
                     createThemeSelectorTable: {},
@@ -1492,7 +1507,9 @@ function runScan(scanCwd, styleProp) {
                 const localKeyframesHashTable = {};
                 const localKeyframesObjectTable = {};
                 const localViewTransitionHashTable = {};
+                const localVarTypeHashTable = {};
                 const localViewTransitionObjectTable = {};
+                const localVarTypeObjectTable = {};
                 const localCreateThemeObjectTable = {};
                 const localCreateThemeSelectorTable = {};
                 const localCreateHashTable = {};
@@ -1578,6 +1595,14 @@ function runScan(scanCwd, styleProp) {
                                                     localTables.keyframesObjectTable[hash];
                                             }
                                         }
+                                        if (localTables.varTypeHashTable?.[uniqueKey]) {
+                                            const hash = localTables.varTypeHashTable[uniqueKey];
+                                            localVarTypeHashTable[localName] = hash;
+                                            if (localTables.varTypeObjectTable?.[hash]) {
+                                                localVarTypeObjectTable[hash] =
+                                                    localTables.varTypeObjectTable[hash];
+                                            }
+                                        }
                                         if (localTables.viewTransitionHashTable[uniqueKey]) {
                                             const hash = localTables.viewTransitionHashTable[uniqueKey];
                                             localViewTransitionHashTable[localName] = hash;
@@ -1681,6 +1706,7 @@ function runScan(scanCwd, styleProp) {
                                     'createStatic',
                                     'keyframes',
                                     'viewTransition',
+                                    'varType',
                                 ].includes(method)) {
                                 const argument = decl.init.arguments[method === 'createTheme' ? 1 : 0];
                                 if (argument)
@@ -1710,13 +1736,14 @@ function runScan(scanCwd, styleProp) {
                                 const isPassOneMethod = method === 'createStatic' ||
                                     method === 'createTheme' ||
                                     method === 'keyframes' ||
-                                    method === 'viewTransition';
+                                    method === 'viewTransition' ||
+                                    method === 'varType';
                                 if (isFirstPass && !isPassOneMethod)
                                     continue;
                                 const objExpression = isCreateTheme
                                     ? init.arguments[1].expression
                                     : init.arguments[0].expression;
-                                const obj = objectExpressionToObject(objExpression, scopedStaticTable, localKeyframesHashTable, localViewTransitionHashTable, localCreateThemeHashTable, localCreateThemeObjectTable, localCreateHashTable, localCreateStaticHashTable, localCreateStaticObjectTable, resolveVariable);
+                                const obj = objectExpressionToObject(objExpression, scopedStaticTable, localKeyframesHashTable, localViewTransitionHashTable, localCreateThemeHashTable, localCreateThemeObjectTable, localCreateHashTable, localCreateStaticHashTable, localCreateStaticObjectTable, resolveVariable, localVarTypeHashTable);
                                 const uniqueKey = `${filePath}-${name}`;
                                 if (method === 'createStatic') {
                                     localStaticTable[name] = obj;
@@ -1739,6 +1766,15 @@ function runScan(scanCwd, styleProp) {
                                     localKeyframesObjectTable[hash] = obj;
                                     registerObjectOwner('keyframesObjectTable', hash, filePath);
                                 }
+                                else if (method === 'varType') {
+                                    const hash = (0, varType_1.checkedVarTypeHash)(name, obj);
+                                    localVarTypeHashTable[name] = hash;
+                                    localTables.varTypeHashTable[uniqueKey] = hash;
+                                    registerFileKey('varTypeHashTable', uniqueKey, filePath);
+                                    (localTables.varTypeObjectTable ??= {})[hash] = obj;
+                                    localVarTypeObjectTable[hash] = obj;
+                                    registerObjectOwner('varTypeObjectTable', hash, filePath);
+                                }
                                 else if (method === 'viewTransition') {
                                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                                     localViewTransitionHashTable[name] = hash;
@@ -1788,7 +1824,7 @@ function runScan(scanCwd, styleProp) {
                                             inlineOuterScope(objExpression, (property) => objectExpressionToObject({
                                                 ...objExpression,
                                                 properties: [property],
-                                            }, scopedStaticTable, localKeyframesHashTable, localViewTransitionHashTable, localCreateThemeHashTable, localCreateThemeObjectTable, localCreateHashTable, localCreateStaticHashTable, localCreateStaticObjectTable, resolveVariable));
+                                            }, scopedStaticTable, localKeyframesHashTable, localViewTransitionHashTable, localCreateThemeHashTable, localCreateThemeObjectTable, localCreateHashTable, localCreateStaticHashTable, localCreateStaticObjectTable, resolveVariable, localVarTypeHashTable));
                                         registerFileKey('createFunctionTable', uniqueKey, filePath);
                                     }
                                     const hashMap = {};
@@ -1817,7 +1853,9 @@ function runScan(scanCwd, styleProp) {
                     localKeyframesHashTable,
                     localKeyframesObjectTable,
                     localViewTransitionHashTable,
+                    localVarTypeHashTable,
                     localViewTransitionObjectTable,
+                    localVarTypeObjectTable,
                     localCreateThemeObjectTable,
                     localCreateThemeSelectorTable,
                     localCreateHashTable,
@@ -1837,7 +1875,7 @@ function runScan(scanCwd, styleProp) {
     for (const entry of jsxPhaseQueue) {
         try {
             delete fileErrors[entry.filePath];
-            const { filePath, ast, mtimeMs, localDependencies, localStaticTable, localKeyframesHashTable, localKeyframesObjectTable, localViewTransitionHashTable, localViewTransitionObjectTable, localCreateThemeObjectTable, localCreateThemeSelectorTable, localCreateHashTable, localCreateObjectTable, localCreateAtomicMapTable, localCreateThemeHashTable, localCreateStaticHashTable, localCreateStaticObjectTable, localImports, } = entry;
+            const { filePath, ast, mtimeMs, localDependencies, localStaticTable, localKeyframesHashTable, localKeyframesObjectTable, localViewTransitionHashTable, localVarTypeHashTable, localViewTransitionObjectTable, localVarTypeObjectTable, localCreateThemeObjectTable, localCreateThemeSelectorTable, localCreateHashTable, localCreateObjectTable, localCreateAtomicMapTable, localCreateThemeHashTable, localCreateStaticHashTable, localCreateStaticObjectTable, localImports, } = entry;
             const localCreateFunctionTable = {};
             for (const localName of Object.keys(localImports)) {
                 const { actualPath, importedName } = localImports[localName];
@@ -1858,6 +1896,7 @@ function runScan(scanCwd, styleProp) {
             const dynamicStyleTables = {
                 keyframesHashTable: localKeyframesHashTable,
                 viewTransitionHashTable: localViewTransitionHashTable,
+                varTypeHashTable: localVarTypeHashTable,
                 createThemeHashTable: localCreateThemeHashTable,
                 createThemeObjectTable: localTables.createThemeObjectTable,
                 createHashTable: localCreateHashTable,
@@ -2273,7 +2312,9 @@ function runScan(scanCwd, styleProp) {
                 keyframesHashTable: localKeyframesHashTable,
                 keyframesObjectTable: localKeyframesObjectTable,
                 viewTransitionHashTable: localViewTransitionHashTable,
+                varTypeHashTable: localVarTypeHashTable,
                 viewTransitionObjectTable: localViewTransitionObjectTable,
+                varTypeObjectTable: localVarTypeObjectTable,
                 createThemeHashTable: localCreateThemeHashTable,
                 createThemeSelectorTable: localCreateThemeSelectorTable,
                 createThemeObjectTable: localCreateThemeObjectTable,
@@ -2472,6 +2513,7 @@ function extractAndCacheExports(filePath, ast, mtimeMs) {
             keyframesHashTable: {},
             keyframesObjectTable: {},
             viewTransitionHashTable: {},
+            varTypeHashTable: {},
             viewTransitionObjectTable: {},
             createThemeHashTable: {},
             createThemeSelectorTable: {},
@@ -2548,7 +2590,7 @@ function resolveExport(filePath, exportName, visited = new Set()) {
     }
     return null;
 }
-const REFERENCE_MARKER = /(kf|vt|cr)-([0-9a-z]+)/g;
+const REFERENCE_MARKER = /(kf|vt|cr|pr)-([0-9a-z]+)/g;
 const CUSTOM_PROPERTY = /var\(\s*(--[^\s,)]+)/g;
 const appendSheet = (sheets) => {
     const existingSheets = new Set(sheets);
@@ -2566,16 +2608,31 @@ function extractOndemandStyles(obj, addSheet, t) {
     const visited = new Set();
     const keyframesHashes = new Set();
     const viewTransitionHashes = new Set();
+    const varTypeHashes = new Set();
     const createHashes = new Set();
     const usedVariables = new Set();
+    function findVarTypes(text) {
+        for (const [, kind, hash] of text.matchAll(REFERENCE_MARKER)) {
+            if (kind === 'pr' && t.varTypeObjectTable?.[hash])
+                varTypeHashes.add(hash);
+        }
+    }
     function walk(n) {
         if (!n || typeof n !== 'object' || visited.has(n))
             return;
         visited.add(n);
+        for (const key of Object.keys(n)) {
+            if (key.includes('pr-'))
+                findVarTypes(key);
+        }
         Object.values(n).forEach((val) => {
             if (typeof val === 'string') {
+                if (val.includes('pr-'))
+                    findVarTypes(val);
                 if (val.includes('kf-') || val.includes('vt-') || val.includes('cr-')) {
                     for (const [, kind, hash] of val.matchAll(REFERENCE_MARKER)) {
+                        if (kind === 'pr')
+                            continue;
                         if (kind === 'kf') {
                             if (!keyframesHashes.has(hash) && t.keyframesObjectTable[hash]) {
                                 keyframesHashes.add(hash);
@@ -2616,6 +2673,10 @@ function extractOndemandStyles(obj, addSheet, t) {
             }
         }
     }
+    for (const hash of varTypeHashes) {
+        const { styleSheet } = (0, zss_engine_1.transpile)((0, varType_1.createVarType)(t.varTypeObjectTable[hash], hash), undefined, '--global');
+        addSheet(styleSheet);
+    }
     if (viewTransitionHashes.size > 0) {
         for (const hash of viewTransitionHashes) {
             const obj = t.viewTransitionObjectTable[hash];

package/dist/transform.js

@@ -39,6 +39,7 @@ const path = __importStar(require("path"));
 const zss_engine_1 = require("zss-engine");
 const parser_1 = require("./parser");
 const unresolvableValue_1 = require("./unresolvableValue");
+const varType_1 = require("./varType");
 const spreadValues = (tables, constNodes, sourceOf) => {
     const spread = (prop) => {
         let values;
@@ -341,6 +342,7 @@ const transformSource = async (env) => {
     const importMap = {};
     const keyframesImportMap = {};
     const viewTransitionImportMap = {};
+    const varTypeImportMap = {};
     const createImportMap = {};
     const createFunctionImportMap = {};
     const createThemeImportMap = {};
@@ -404,6 +406,10 @@ const transformSource = async (env) => {
                         viewTransitionImportMap[localName] =
                             scannedTables.viewTransitionHashTable[uniqueKey];
                     }
+                    if (scannedTables.varTypeHashTable?.[uniqueKey]) {
+                        varTypeImportMap[localName] =
+                            scannedTables.varTypeHashTable[uniqueKey];
+                    }
                     if (scannedTables.createHashTable[uniqueKey]) {
                         createImportMap[localName] =
                             scannedTables.createHashTable[uniqueKey];
@@ -447,6 +453,15 @@ const transformSource = async (env) => {
     for (const key of Object.keys(viewTransitionImportMap)) {
         mergedViewTransitionTable[key] = viewTransitionImportMap[key];
     }
+    const varTypeHashTable = scannedTables.varTypeHashTable ?? {};
+    const mergedVarTypeTable = Object.create(varTypeHashTable);
+    for (const key of (0, parser_1.fileTableKeys)(resourcePath, 'varTypeHashTable') ?? []) {
+        mergedVarTypeTable[key.slice(resourcePath.length + 1)] =
+            varTypeHashTable[key];
+    }
+    for (const key of Object.keys(varTypeImportMap)) {
+        mergedVarTypeTable[key] = varTypeImportMap[key];
+    }
     const mergedCreateTable = Object.create(scannedTables.createHashTable);
     for (const key of (0, parser_1.fileTableKeys)(resourcePath, 'createHashTable') ?? []) {
         mergedCreateTable[key.slice(resourcePath.length + 1)] =
@@ -475,6 +490,7 @@ const transformSource = async (env) => {
     const dynamicStyleTables = {
         keyframesHashTable: mergedKeyframesTable,
         viewTransitionHashTable: mergedViewTransitionTable,
+        varTypeHashTable: mergedVarTypeTable,
         createThemeHashTable: mergedCreateThemeHashTable,
         createThemeObjectTable: scannedTables.createThemeObjectTable,
         createHashTable: mergedCreateTable,
@@ -595,11 +611,11 @@ const transformSource = async (env) => {
             }
         }
         if (propName && init && parser_1.t.isCallExpression(init)) {
-            if (['create', 'createTheme', 'createStatic'].includes(propName) &&
+            if (['create', 'createTheme', 'createStatic', 'varType'].includes(propName) &&
                 !topLevelDeclarators.has(node)) {
                 throwCompilationError(`[plumeria] css.${propName} must be assigned to a top-level variable so its styles can be resolved across files. Move this declaration outside the function or block.`, node);
             }
-            if (['create', 'createTheme', 'createStatic'].includes(propName)) {
+            if (['create', 'createTheme', 'createStatic', 'varType'].includes(propName)) {
                 const argumentIndex = propName === 'createTheme' ? 1 : 0;
                 const argument = init.arguments[argumentIndex];
                 const object = argument && literalObjectArgument(argument.expression);
@@ -610,7 +626,7 @@ const transformSource = async (env) => {
             }
             if (propName === 'create' &&
                 parser_1.t.isObjectExpression(init.arguments[0].expression)) {
-                const obj = (0, parser_1.objectExpressionToObject)(init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable);
+                const obj = (0, parser_1.objectExpressionToObject)(init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, undefined, mergedVarTypeTable);
                 (0, unresolvableValue_1.assertNoDroppedValues)(init.arguments[0].expression, obj, spreadValues([
                     mergedStaticTable,
                     mergedKeyframesTable,
@@ -620,6 +636,8 @@ const transformSource = async (env) => {
                     mergedCreateTable,
                     mergedCreateStaticHashTable,
                     scannedTables.createStaticObjectTable,
+                    undefined,
+                    mergedVarTypeTable,
                 ], localConstNodes, getSource));
                 if (obj) {
                     const hashMap = {};
@@ -670,7 +688,7 @@ const transformSource = async (env) => {
                 if (selector.startsWith('@') && !(0, zss_engine_1.isAtRule)(selector)) {
                     throwCompilationError(`[plumeria] Unsupported at-rule: "${selector}". createTheme only supports nesting at-rules such as @media, @container, @supports, @layer, and @scope.`, selectorExpr);
                 }
-                const obj = (0, parser_1.objectExpressionToObject)(init.arguments[1].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable);
+                const obj = (0, parser_1.objectExpressionToObject)(init.arguments[1].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, undefined, mergedVarTypeTable);
                 (0, unresolvableValue_1.assertNoDroppedValues)(init.arguments[1].expression, obj, spreadValues([
                     mergedStaticTable,
                     mergedKeyframesTable,
@@ -680,6 +698,8 @@ const transformSource = async (env) => {
                     mergedCreateTable,
                     mergedCreateStaticHashTable,
                     scannedTables.createStaticObjectTable,
+                    undefined,
+                    mergedVarTypeTable,
                 ], localConstNodes, getSource));
                 const hash = (0, createTheme_1.themeHashOf)(selector, obj);
                 if (parser_1.t.isIdentifier(node.id)) {
@@ -713,12 +733,44 @@ const transformSource = async (env) => {
                     };
                 }
             }
+            else if (propName === 'varType' &&
+                parser_1.t.isIdentifier(node.id) &&
+                parser_1.t.isObjectExpression(init.arguments[0].expression)) {
+                const expr = init.arguments[0].expression;
+                const obj = (0, parser_1.objectExpressionToObject)(expr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, undefined, mergedVarTypeTable);
+                (0, unresolvableValue_1.assertNoDroppedValues)(expr, obj, spreadValues([
+                    mergedStaticTable,
+                    mergedKeyframesTable,
+                    mergedViewTransitionTable,
+                    mergedCreateThemeHashTable,
+                    scannedTables.createThemeObjectTable,
+                    mergedCreateTable,
+                    mergedCreateStaticHashTable,
+                    scannedTables.createStaticObjectTable,
+                    undefined,
+                    mergedVarTypeTable,
+                ], localConstNodes, getSource));
+                let hash = '';
+                try {
+                    hash = (0, varType_1.checkedVarTypeHash)(node.id.value, obj);
+                }
+                catch (error) {
+                    throwCompilationError(error.message, init);
+                }
+                mergedVarTypeTable[node.id.value] = hash;
+                (scannedTables.varTypeObjectTable ??= {})[hash] = obj;
+                replacements.push({
+                    start: init.span.start - baseByteOffset,
+                    end: init.span.end - baseByteOffset,
+                    content: JSON.stringify(`--pr-${hash}`),
+                });
+            }
             else if (propName === 'createStatic' &&
                 parser_1.t.isObjectExpression(init.arguments[0].expression)) {
                 if (parser_1.t.isIdentifier(node.id)) {
                     idSpans.add(node.id.span.start);
                 }
-                const obj = (0, parser_1.objectExpressionToObject)(init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable);
+                const obj = (0, parser_1.objectExpressionToObject)(init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, undefined, mergedVarTypeTable);
                 (0, unresolvableValue_1.assertNoDroppedValues)(init.arguments[0].expression, obj, spreadValues([
                     mergedStaticTable,
                     mergedKeyframesTable,
@@ -728,6 +780,8 @@ const transformSource = async (env) => {
                     mergedCreateTable,
                     mergedCreateStaticHashTable,
                     scannedTables.createStaticObjectTable,
+                    undefined,
+                    mergedVarTypeTable,
                 ], localConstNodes, getSource));
                 const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                 if (parser_1.t.isIdentifier(node.id)) {
@@ -832,7 +886,7 @@ const transformSource = async (env) => {
                 }
             }
             if (propName) {
-                if (['create', 'createTheme', 'createStatic'].includes(propName) &&
+                if (['create', 'createTheme', 'createStatic', 'varType'].includes(propName) &&
                     !registeredStyleCalls.has(node.span.start)) {
                     throwCompilationError(`[plumeria] css.${propName} must be assigned to a named top-level variable. Destructuring, assignment statements, and default-exported calls cannot be compiled.`, node);
                 }
@@ -840,7 +894,7 @@ const transformSource = async (env) => {
                 if (propName === 'keyframes' && args.length > 0) {
                     const expr = args[0].expression;
                     if (parser_1.t.isObjectExpression(expr)) {
-                        const obj = (0, parser_1.objectExpressionToObject)(expr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable);
+                        const obj = (0, parser_1.objectExpressionToObject)(expr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, undefined, mergedVarTypeTable);
                         (0, unresolvableValue_1.assertNoDroppedValues)(expr, obj, spreadValues([
                             mergedStaticTable,
                             mergedKeyframesTable,
@@ -850,6 +904,8 @@ const transformSource = async (env) => {
                             mergedCreateTable,
                             mergedCreateStaticHashTable,
                             scannedTables.createStaticObjectTable,
+                            undefined,
+                            mergedVarTypeTable,
                         ], localConstNodes, getSource));
                         const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                         scannedTables.keyframesObjectTable[hash] = obj;
@@ -863,7 +919,7 @@ const transformSource = async (env) => {
                 else if (propName === 'viewTransition' &&
                     args.length > 0 &&
                     parser_1.t.isObjectExpression(args[0].expression)) {
-                    const obj = (0, parser_1.objectExpressionToObject)(args[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable);
+                    const obj = (0, parser_1.objectExpressionToObject)(args[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, undefined, mergedVarTypeTable);
                     (0, unresolvableValue_1.assertNoDroppedValues)(args[0].expression, obj, spreadValues([
                         mergedStaticTable,
                         mergedKeyframesTable,
@@ -873,6 +929,8 @@ const transformSource = async (env) => {
                         mergedCreateTable,
                         mergedCreateStaticHashTable,
                         scannedTables.createStaticObjectTable,
+                        undefined,
+                        mergedVarTypeTable,
                     ], localConstNodes, getSource));
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     scannedTables.viewTransitionObjectTable[hash] = obj;
@@ -894,7 +952,7 @@ const transformSource = async (env) => {
                     if (selector.startsWith('@') && !(0, zss_engine_1.isAtRule)(selector)) {
                         throwCompilationError(`[plumeria] Unsupported at-rule: "${selector}". createTheme only supports nesting at-rules such as @media, @container, @supports, @layer, and @scope.`, selectorExpr);
                     }
-                    const obj = (0, parser_1.objectExpressionToObject)(args[1].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable);
+                    const obj = (0, parser_1.objectExpressionToObject)(args[1].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, undefined, mergedVarTypeTable);
                     (0, unresolvableValue_1.assertNoDroppedValues)(args[1].expression, obj, spreadValues([
                         mergedStaticTable,
                         mergedKeyframesTable,
@@ -904,6 +962,8 @@ const transformSource = async (env) => {
                         mergedCreateTable,
                         mergedCreateStaticHashTable,
                         scannedTables.createStaticObjectTable,
+                        undefined,
+                        mergedVarTypeTable,
                     ], localConstNodes, getSource));
                     const hash = (0, createTheme_1.themeHashOf)(selector, obj);
                     scannedTables.createThemeObjectTable[hash] = obj;
@@ -914,7 +974,7 @@ const transformSource = async (env) => {
                 else if (propName === 'createStatic' &&
                     args.length > 0 &&
                     parser_1.t.isObjectExpression(args[0].expression)) {
-                    const obj = (0, parser_1.objectExpressionToObject)(args[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable);
+                    const obj = (0, parser_1.objectExpressionToObject)(args[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, undefined, mergedVarTypeTable);
                     (0, unresolvableValue_1.assertNoDroppedValues)(args[0].expression, obj, spreadValues([
                         mergedStaticTable,
                         mergedKeyframesTable,
@@ -924,6 +984,8 @@ const transformSource = async (env) => {
                         mergedCreateTable,
                         mergedCreateStaticHashTable,
                         scannedTables.createStaticObjectTable,
+                        undefined,
+                        mergedVarTypeTable,
                     ], localConstNodes, getSource));
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     scannedTables.createStaticObjectTable[hash] = obj;
@@ -931,7 +993,7 @@ const transformSource = async (env) => {
                 else if (propName === 'create' &&
                     args.length > 0 &&
                     parser_1.t.isObjectExpression(args[0].expression)) {
-                    const obj = (0, parser_1.objectExpressionToObject)(args[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable);
+                    const obj = (0, parser_1.objectExpressionToObject)(args[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, undefined, mergedVarTypeTable);
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     scannedTables.createObjectTable[hash] = obj;
                 }
@@ -1031,7 +1093,7 @@ const transformSource = async (env) => {
             return merged;
         }
         if (parser_1.t.isObjectExpression(expr)) {
-            return (0, parser_1.objectExpressionToObject)(expr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable);
+            return (0, parser_1.objectExpressionToObject)(expr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, undefined, mergedVarTypeTable);
         }
         else if (parser_1.t.isMemberExpression(expr) &&
             parser_1.t.isIdentifier(expr.object) &&
@@ -1130,7 +1192,7 @@ const transformSource = async (env) => {
             properties: argExpr.properties.filter((prop) => prop.type === 'Identifier' ||
                 (prop.type === 'KeyValueProperty' &&
                     isStaticArgValue(prop.value))),
-        }, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable);
+        }, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, undefined, mergedVarTypeTable);
         if (func.named) {
             const argExpr = callArgs[0]?.expression;
             if (callArgs.length > 1 ||

package/dist/types.d.ts

@@ -9,6 +9,7 @@ export type StaticTable = Record<string, CSSValue>;
 export type KeyframesHashTable = Record<string, string>;
 export type KeyframesObjectTable = Record<string, CSSObject>;
 export type ViewTransitionHashTable = Record<string, string>;
+export type VarTypeHashTable = Record<string, string>;
 export type ViewTransitionObjectTable = Record<string, CSSObject>;
 export type CreateThemeObjectTable = Record<string, CSSObject>;
 export type CreateHashTable = Record<string, string>;
@@ -38,6 +39,8 @@ export interface Tables {
     keyframesObjectTable: KeyframesObjectTable;
     viewTransitionHashTable: ViewTransitionHashTable;
     viewTransitionObjectTable: ViewTransitionObjectTable;
+    varTypeHashTable?: VarTypeHashTable;
+    varTypeObjectTable?: Record<string, CSSObject>;
     createThemeHashTable: CreateThemeHashTable;
     createThemeSelectorTable: CreateThemeSelectorTable;
     createThemeObjectTable: CreateThemeObjectTable;

package/dist/varType.d.ts

@@ -0,0 +1,9 @@
+export declare const varTypeHashOf: (name: string, rule: Record<string, unknown>) => string;
+export declare const createVarType: (rule: Record<string, unknown>, hash: string) => {
+    [x: string]: {
+        initialValue?: {} | null | undefined;
+        syntax: string;
+        inherits: string;
+    };
+};
+export declare const checkedVarTypeHash: (name: string, rule: Record<string, unknown>) => string;

package/dist/varType.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkedVarTypeHash = exports.createVarType = exports.varTypeHashOf = void 0;
+const lightningcss_1 = require("lightningcss");
+const zss_engine_1 = require("zss-engine");
+const varTypeHashOf = (name, rule) => (0, zss_engine_1.genBase36Hash)({ _varTypeName: name, ...rule }, 1, 8);
+exports.varTypeHashOf = varTypeHashOf;
+const createVarType = (rule, hash) => ({
+    [`@property --pr-${hash}`]: {
+        syntax: `"${typeof rule.syntax === 'string' ? rule.syntax : '*'}"`,
+        inherits: rule.inherits === true ? 'true' : 'false',
+        ...(rule.initialValue !== undefined && {
+            initialValue: rule.initialValue,
+        }),
+    },
+});
+exports.createVarType = createVarType;
+const checkedVarTypeHash = (name, rule) => {
+    const hash = (0, exports.varTypeHashOf)(name, rule);
+    const { styleSheet } = (0, zss_engine_1.transpile)((0, exports.createVarType)(rule, hash), undefined, '--global');
+    try {
+        (0, lightningcss_1.transform)({ filename: 'global.css', code: Buffer.from(styleSheet) });
+        return hash;
+    }
+    catch {
+        const syntax = typeof rule.syntax === 'string' ? `syntax "${rule.syntax}"` : 'no syntax';
+        const initial = typeof rule.initialValue === 'string'
+            ? `initialValue "${rule.initialValue}"`
+            : typeof rule.initialValue === 'number'
+                ? `initialValue ${rule.initialValue}`
+                : 'no initialValue';
+        throw new Error(`[plumeria] css.varType "${name}" is not a valid @property: ${syntax} with ${initial}. The syntax has to be a valid @property syntax, and the initial value has to match it.`);
+    }
+};
+exports.checkedVarTypeHash = checkedVarTypeHash;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/utils",
-  "version": "19.14.3",
+  "version": "19.15.0",
   "description": "Plumeria Utils",
   "author": "Refirst 11",
   "license": "MIT",