@plumeria/utils 19.14.4 → 20.0.0

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,8 @@ const isStaticArgValue = (node) => node.type === 'StringLiteral' ||
 const dynamicTablesOf = (ctx) => ({
     keyframesHashTable: ctx.mergedKeyframesTable,
     viewTransitionHashTable: ctx.mergedViewTransitionTable,
+    varTypeHashTable: ctx.mergedVarTypeTable,
+    positionTryHashTable: ctx.mergedPositionTryTable,
     createThemeHashTable: ctx.mergedCreateThemeHashTable,
     createThemeObjectTable: ctx.scannedTables.createThemeObjectTable,
     createHashTable: ctx.mergedCreateTable,
@@ -345,6 +348,8 @@ function compileCSS(options) {
         const importMap = {};
         const keyframesImportMap = {};
         const viewTransitionImportMap = {};
+        const varTypeImportMap = {};
+        const positionTryImportMap = {};
         const createImportMap = {};
         const createFunctionImportMap = {};
         const createThemeImportMap = {};
@@ -406,6 +411,12 @@ function compileCSS(options) {
                             if (scannedTables.viewTransitionHashTable[uniqueKey])
                                 viewTransitionImportMap[localName] =
                                     scannedTables.viewTransitionHashTable[uniqueKey];
+                            if (scannedTables.varTypeHashTable?.[uniqueKey])
+                                varTypeImportMap[localName] =
+                                    scannedTables.varTypeHashTable[uniqueKey];
+                            if (scannedTables.positionTryHashTable?.[uniqueKey])
+                                positionTryImportMap[localName] =
+                                    scannedTables.positionTryHashTable[uniqueKey];
                             if (scannedTables.createHashTable[uniqueKey])
                                 createImportMap[localName] =
                                     scannedTables.createHashTable[uniqueKey];
@@ -446,6 +457,25 @@ 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 positionTryHashTable = scannedTables.positionTryHashTable ?? {};
+        const mergedPositionTryTable = Object.create(positionTryHashTable);
+        for (const key of (0, index_1.fileTableKeys)(resourcePath, 'positionTryHashTable') ??
+            []) {
+            mergedPositionTryTable[key.slice(resourcePath.length + 1)] =
+                positionTryHashTable[key];
+        }
+        for (const key of Object.keys(positionTryImportMap)) {
+            mergedPositionTryTable[key] = positionTryImportMap[key];
+        }
         const mergedCreateThemeHashTable = Object.create(scannedTables.createThemeHashTable);
         for (const key of (0, index_1.fileTableKeys)(resourcePath, 'createThemeHashTable') ??
             []) {
@@ -477,6 +507,8 @@ function compileCSS(options) {
             mergedStaticTable,
             mergedKeyframesTable,
             mergedViewTransitionTable,
+            mergedVarTypeTable,
+            mergedPositionTryTable,
             mergedCreateThemeHashTable,
             mergedCreateStaticHashTable,
             mergedCreateTable,
@@ -601,7 +633,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, ctx.mergedPositionTryTable);
                 }
                 else if (index_1.t.isMemberExpression(expr) &&
                     index_1.t.isIdentifier(expr.object) &&
@@ -715,7 +747,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, ctx.mergedPositionTryTable);
                 if (func.named) {
                     const argExpr = callArgs[0]?.expression;
                     if (callArgs.length > 1 ||
@@ -973,7 +1005,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 +1035,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, ctx.mergedPositionTryTable);
                     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, ctx.mergedPositionTryTable);
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     writes.viewTransitionObjectTable[hash] = obj;
                 }
@@ -1025,9 +1057,9 @@ function compileCSS(options) {
                     }
                     if (selector.startsWith('@') && !(0, zss_engine_1.isAtRule)(selector)) {
                         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)})`);
+                            `nesting at-rules such as @media, @container, and @supports. (${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, ctx.mergedPositionTryTable);
                     const hash = (0, index_1.themeHashOf)(selector, obj);
                     writes.createThemeObjectTable[hash] = obj;
                     if (ctx.scannedTables.createThemeSelectorTable) {
@@ -1037,7 +1069,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, ctx.mergedPositionTryTable);
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     writes.createStaticObjectTable[hash] = obj;
                 }
@@ -1088,7 +1120,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, ctx.mergedPositionTryTable);
                                 if (obj) {
                                     const styleFunctions = (0, index_1.styleFunctionsOf)(arg);
                                     ctx.localCreateStyles[node.id.value] = {
@@ -1107,9 +1139,9 @@ function compileCSS(options) {
                                 }
                                 if (selector.startsWith('@') && !(0, zss_engine_1.isAtRule)(selector)) {
                                     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)})`);
+                                        `nesting at-rules such as @media, @container, and @supports. (${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, ctx.mergedPositionTryTable);
                                 const hash = (0, index_1.themeHashOf)(selector, obj);
                                 const uKey = `${resourcePath}-${node.id.value}`;
                                 writes.createThemeHashTable[uKey] = hash;
@@ -1129,8 +1161,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.mergedPositionTryTable);
+                                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, ctx.mergedPositionTryTable);
                                 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, PositionTryHashTable, CreateHashTable, CreateThemeHashTable, CreateThemeObjectTable, CreateStaticHashTable, CreateStaticObjectTable } from './types';
 export type NamedParam = {
     key: string;
     local: string;
@@ -29,6 +29,8 @@ export declare const applyVarFallback: (style: CSSObject, cssVar: string, litera
 export type DynamicStyleTables = {
     keyframesHashTable: KeyframesHashTable;
     viewTransitionHashTable: ViewTransitionHashTable;
+    varTypeHashTable?: VarTypeHashTable;
+    positionTryHashTable?: PositionTryHashTable;
     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, tables.positionTryHashTable).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, tables.positionTryHashTable);
     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, PositionTryHashTable, 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, PositionTryHashTable, 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, positionTryHashTable?: PositionTryHashTable): 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,8 @@ 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 positionTry_1 = require("./positionTry");
 const constants_1 = require("./constants");
 const stylePropFilter_1 = require("./stylePropFilter");
 const create_1 = require("./create");
@@ -274,12 +276,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 = {}, positionTryHashTable = {}) {
     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, positionTryHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
             if (typeof spreadVal === 'object' && spreadVal !== null) {
                 Object.assign(obj, spreadVal);
             }
@@ -301,7 +303,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, positionTryHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
         if (!rawKey)
             return;
         const key = typeof rawKey === 'string' ? (0, zss_engine_1.stripSelectorComments)(rawKey) : rawKey;
@@ -340,6 +342,15 @@ 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;
+            }
+            if (exports.t.isIdentifier(val) &&
+                positionTryHashTable[val.value] !== undefined) {
+                obj[key] = '--pt-' + positionTryHashTable[val.value];
+                return;
+            }
             const resolvedCreate = resolveCreateTableMemberExpression(val, createHashTable);
             if (resolvedCreate !== undefined) {
                 obj[key] = 'cr-' + resolvedCreate;
@@ -362,13 +373,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, positionTryHashTable, 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, positionTryHashTable);
         }
         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, positionTryHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
         }
         else if (exports.t.isMemberExpression(val)) {
             const resolved = resolveStaticTableMemberExpression(val, staticTable);
@@ -439,7 +450,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 +681,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, positionTryHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable) {
     if (exports.t.isIdentifier(node)) {
         return node.value;
     }
@@ -690,9 +701,15 @@ 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 (positionTryHashTable[expr.value] !== undefined) {
+                return '--pt-' + positionTryHashTable[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, positionTryHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
             if (typeof result === 'string')
                 return result;
         }
@@ -708,28 +725,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, positionTryHashTable, 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, positionTryHashTable, 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, positionTryHashTable, 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, positionTryHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
     }
     return '';
 }
-function evaluateTemplateLiteral(node, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable) {
+function evaluateTemplateLiteral(node, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, positionTryHashTable, 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, positionTryHashTable, 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 +754,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, positionTryHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable) {
+    const left = evaluateExpression(node.left, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, positionTryHashTable, 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, positionTryHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
     if (['&&', '||', '??'].includes(node.operator))
         return right;
     if (typeof left === 'number' && typeof right === 'number') {
@@ -815,8 +832,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 +847,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 +857,7 @@ function evaluateCallExpression(node, staticTable) {
     }
     return null;
 }
-function evaluateExpression(node, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable) {
+function evaluateExpression(node, staticTable, keyframesHashTable, viewTransitionHashTable, varTypeHashTable, positionTryHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable) {
     node = unwrapExpression(node);
     if (exports.t.isCallExpression(node)) {
         return evaluateCallExpression(node, staticTable);
@@ -867,6 +884,12 @@ 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 (positionTryHashTable[node.value] !== undefined) {
+            return '--pt-' + positionTryHashTable[node.value];
+        }
         if (createStaticHashTable[node.value] !== undefined) {
             const hash = createStaticHashTable[node.value];
             if (createStaticObjectTable[hash] !== undefined) {
@@ -891,13 +914,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, positionTryHashTable, 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, positionTryHashTable, 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, positionTryHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
         if (node.operator === '!')
             return !value;
         if (typeof value === 'number') {
@@ -911,7 +934,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, positionTryHashTable, 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 +1046,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 +1097,11 @@ const globalAgregatedTables = {
     keyframesHashTable: {},
     keyframesObjectTable: {},
     viewTransitionHashTable: {},
+    varTypeHashTable: {},
+    positionTryHashTable: {},
     viewTransitionObjectTable: {},
+    varTypeObjectTable: {},
+    positionTryObjectTable: {},
     createThemeObjectTable: {},
     createThemeSelectorTable: {},
     createHashTable: {},
@@ -1098,6 +1125,8 @@ const detachedTables = new Set([
     'staticTable',
     'keyframesHashTable',
     'viewTransitionHashTable',
+    'varTypeHashTable',
+    'positionTryHashTable',
     'createHashTable',
     'createObjectTable',
     'createFunctionTable',
@@ -1433,6 +1462,8 @@ function runScan(scanCwd, styleProp) {
                     keyframesHashTable: {},
                     keyframesObjectTable: {},
                     viewTransitionHashTable: {},
+                    varTypeHashTable: {},
+                    positionTryHashTable: {},
                     viewTransitionObjectTable: {},
                     createThemeHashTable: {},
                     createThemeSelectorTable: {},
@@ -1492,7 +1523,11 @@ function runScan(scanCwd, styleProp) {
                 const localKeyframesHashTable = {};
                 const localKeyframesObjectTable = {};
                 const localViewTransitionHashTable = {};
+                const localVarTypeHashTable = {};
                 const localViewTransitionObjectTable = {};
+                const localVarTypeObjectTable = {};
+                const localPositionTryHashTable = {};
+                const localPositionTryObjectTable = {};
                 const localCreateThemeObjectTable = {};
                 const localCreateThemeSelectorTable = {};
                 const localCreateHashTable = {};
@@ -1578,6 +1613,22 @@ 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.positionTryHashTable?.[uniqueKey]) {
+                                            const hash = localTables.positionTryHashTable[uniqueKey];
+                                            localPositionTryHashTable[localName] = hash;
+                                            if (localTables.positionTryObjectTable?.[hash]) {
+                                                localPositionTryObjectTable[hash] =
+                                                    localTables.positionTryObjectTable[hash];
+                                            }
+                                        }
                                         if (localTables.viewTransitionHashTable[uniqueKey]) {
                                             const hash = localTables.viewTransitionHashTable[uniqueKey];
                                             localViewTransitionHashTable[localName] = hash;
@@ -1681,6 +1732,8 @@ function runScan(scanCwd, styleProp) {
                                     'createStatic',
                                     'keyframes',
                                     'viewTransition',
+                                    'positionTry',
+                                    'varType',
                                 ].includes(method)) {
                                 const argument = decl.init.arguments[method === 'createTheme' ? 1 : 0];
                                 if (argument)
@@ -1710,13 +1763,15 @@ function runScan(scanCwd, styleProp) {
                                 const isPassOneMethod = method === 'createStatic' ||
                                     method === 'createTheme' ||
                                     method === 'keyframes' ||
-                                    method === 'viewTransition';
+                                    method === 'viewTransition' ||
+                                    method === 'positionTry' ||
+                                    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, localPositionTryHashTable);
                                 const uniqueKey = `${filePath}-${name}`;
                                 if (method === 'createStatic') {
                                     localStaticTable[name] = obj;
@@ -1739,6 +1794,24 @@ 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 === 'positionTry') {
+                                    const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
+                                    localPositionTryHashTable[name] = hash;
+                                    localTables.positionTryHashTable[uniqueKey] = hash;
+                                    registerFileKey('positionTryHashTable', uniqueKey, filePath);
+                                    (localTables.positionTryObjectTable ??= {})[hash] = obj;
+                                    localPositionTryObjectTable[hash] = obj;
+                                    registerObjectOwner('positionTryObjectTable', hash, filePath);
+                                }
                                 else if (method === 'viewTransition') {
                                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                                     localViewTransitionHashTable[name] = hash;
@@ -1788,7 +1861,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, localPositionTryHashTable));
                                         registerFileKey('createFunctionTable', uniqueKey, filePath);
                                     }
                                     const hashMap = {};
@@ -1817,7 +1890,11 @@ function runScan(scanCwd, styleProp) {
                     localKeyframesHashTable,
                     localKeyframesObjectTable,
                     localViewTransitionHashTable,
+                    localVarTypeHashTable,
+                    localPositionTryHashTable,
                     localViewTransitionObjectTable,
+                    localVarTypeObjectTable,
+                    localPositionTryObjectTable,
                     localCreateThemeObjectTable,
                     localCreateThemeSelectorTable,
                     localCreateHashTable,
@@ -1837,7 +1914,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, localPositionTryHashTable, localViewTransitionObjectTable, localVarTypeObjectTable, localPositionTryObjectTable, 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 +1935,8 @@ function runScan(scanCwd, styleProp) {
             const dynamicStyleTables = {
                 keyframesHashTable: localKeyframesHashTable,
                 viewTransitionHashTable: localViewTransitionHashTable,
+                varTypeHashTable: localVarTypeHashTable,
+                positionTryHashTable: localPositionTryHashTable,
                 createThemeHashTable: localCreateThemeHashTable,
                 createThemeObjectTable: localTables.createThemeObjectTable,
                 createHashTable: localCreateHashTable,
@@ -2273,7 +2352,11 @@ function runScan(scanCwd, styleProp) {
                 keyframesHashTable: localKeyframesHashTable,
                 keyframesObjectTable: localKeyframesObjectTable,
                 viewTransitionHashTable: localViewTransitionHashTable,
+                varTypeHashTable: localVarTypeHashTable,
+                positionTryHashTable: localPositionTryHashTable,
                 viewTransitionObjectTable: localViewTransitionObjectTable,
+                varTypeObjectTable: localVarTypeObjectTable,
+                positionTryObjectTable: localPositionTryObjectTable,
                 createThemeHashTable: localCreateThemeHashTable,
                 createThemeSelectorTable: localCreateThemeSelectorTable,
                 createThemeObjectTable: localCreateThemeObjectTable,
@@ -2472,6 +2555,8 @@ function extractAndCacheExports(filePath, ast, mtimeMs) {
             keyframesHashTable: {},
             keyframesObjectTable: {},
             viewTransitionHashTable: {},
+            varTypeHashTable: {},
+            positionTryHashTable: {},
             viewTransitionObjectTable: {},
             createThemeHashTable: {},
             createThemeSelectorTable: {},
@@ -2548,7 +2633,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|pt|cr|pr)-([0-9a-z]+)/g;
 const CUSTOM_PROPERTY = /var\(\s*(--[^\s,)]+)/g;
 const appendSheet = (sheets) => {
     const existingSheets = new Set(sheets);
@@ -2566,16 +2651,35 @@ function extractOndemandStyles(obj, addSheet, t) {
     const visited = new Set();
     const keyframesHashes = new Set();
     const viewTransitionHashes = new Set();
+    const positionTryHashes = 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('kf-') || val.includes('vt-') || val.includes('cr-')) {
+                if (val.includes('pr-'))
+                    findVarTypes(val);
+                if (val.includes('kf-') ||
+                    val.includes('vt-') ||
+                    val.includes('pt-') ||
+                    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);
@@ -2589,6 +2693,13 @@ function extractOndemandStyles(obj, addSheet, t) {
                                 walk(t.viewTransitionObjectTable[hash]);
                             }
                         }
+                        else if (kind === 'pt') {
+                            if (!positionTryHashes.has(hash) &&
+                                t.positionTryObjectTable?.[hash]) {
+                                positionTryHashes.add(hash);
+                                walk(t.positionTryObjectTable[hash]);
+                            }
+                        }
                         else if (!createHashes.has(hash) && t.createObjectTable[hash]) {
                             createHashes.add(hash);
                             walk(t.createObjectTable[hash]);
@@ -2616,6 +2727,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];
@@ -2625,6 +2740,10 @@ function extractOndemandStyles(obj, addSheet, t) {
             }
         }
     }
+    for (const hash of positionTryHashes) {
+        const { styleSheet } = (0, zss_engine_1.transpile)((0, positionTry_1.createPositionTry)(t.positionTryObjectTable[hash], hash), undefined, '--global');
+        addSheet(styleSheet);
+    }
     if (createHashes.size > 0) {
         for (const hash of createHashes) {
             const obj = t.createObjectTable[hash];

package/dist/positionTry.d.ts

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

package/dist/positionTry.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPositionTry = void 0;
+const createPositionTry = (rule, hash) => ({
+    [`@position-try --pt-${hash}`]: rule,
+});
+exports.createPositionTry = createPositionTry;

package/dist/propertyPolicy.js

@@ -37,7 +37,7 @@ exports.assertPropertyPolicy = exports.resolvePropertyPolicy = void 0;
 const path = __importStar(require("path"));
 const zss_engine_1 = require("zss-engine");
 const parser_1 = require("./parser");
-const STYLE_APIS = ['create', 'keyframes', 'viewTransition'];
+const STYLE_APIS = ['create', 'keyframes', 'viewTransition', 'positionTry'];
 const MESSAGES = {
     physical: (name, counterpart) => `'${name}' is the physical name of this property. Write it as '${counterpart}', which follows the writing mode.`,
     logical: (name, counterpart) => `'${name}' is the logical name of this property. This project is written in physical properties; use '${counterpart}'.`,
@@ -137,6 +137,10 @@ const assertPropertyPolicy = (ast, policy, resourcePath) => {
             node.arguments.forEach(({ expression }) => {
                 if (!parser_1.t.isObjectExpression(expression))
                     return;
+                if (apiName === 'positionTry') {
+                    check(expression);
+                    return;
+                }
                 expression.properties.forEach((prop) => {
                     if (!parser_1.t.isObjectProperty(prop))
                         return;

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,8 @@ const transformSource = async (env) => {
     const importMap = {};
     const keyframesImportMap = {};
     const viewTransitionImportMap = {};
+    const varTypeImportMap = {};
+    const positionTryImportMap = {};
     const createImportMap = {};
     const createFunctionImportMap = {};
     const createThemeImportMap = {};
@@ -404,6 +407,14 @@ const transformSource = async (env) => {
                         viewTransitionImportMap[localName] =
                             scannedTables.viewTransitionHashTable[uniqueKey];
                     }
+                    if (scannedTables.varTypeHashTable?.[uniqueKey]) {
+                        varTypeImportMap[localName] =
+                            scannedTables.varTypeHashTable[uniqueKey];
+                    }
+                    if (scannedTables.positionTryHashTable?.[uniqueKey]) {
+                        positionTryImportMap[localName] =
+                            scannedTables.positionTryHashTable[uniqueKey];
+                    }
                     if (scannedTables.createHashTable[uniqueKey]) {
                         createImportMap[localName] =
                             scannedTables.createHashTable[uniqueKey];
@@ -447,6 +458,24 @@ 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 positionTryHashTable = scannedTables.positionTryHashTable ?? {};
+    const mergedPositionTryTable = Object.create(positionTryHashTable);
+    for (const key of (0, parser_1.fileTableKeys)(resourcePath, 'positionTryHashTable') ?? []) {
+        mergedPositionTryTable[key.slice(resourcePath.length + 1)] =
+            positionTryHashTable[key];
+    }
+    for (const key of Object.keys(positionTryImportMap)) {
+        mergedPositionTryTable[key] = positionTryImportMap[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 +504,8 @@ const transformSource = async (env) => {
     const dynamicStyleTables = {
         keyframesHashTable: mergedKeyframesTable,
         viewTransitionHashTable: mergedViewTransitionTable,
+        varTypeHashTable: mergedVarTypeTable,
+        positionTryHashTable: mergedPositionTryTable,
         createThemeHashTable: mergedCreateThemeHashTable,
         createThemeObjectTable: scannedTables.createThemeObjectTable,
         createHashTable: mergedCreateTable,
@@ -595,11 +626,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 +641,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, mergedPositionTryTable);
                 (0, unresolvableValue_1.assertNoDroppedValues)(init.arguments[0].expression, obj, spreadValues([
                     mergedStaticTable,
                     mergedKeyframesTable,
@@ -620,6 +651,9 @@ const transformSource = async (env) => {
                     mergedCreateTable,
                     mergedCreateStaticHashTable,
                     scannedTables.createStaticObjectTable,
+                    undefined,
+                    mergedVarTypeTable,
+                    mergedPositionTryTable,
                 ], localConstNodes, getSource));
                 if (obj) {
                     const hashMap = {};
@@ -668,9 +702,9 @@ const transformSource = async (env) => {
                         `Pass a string literal such as ".dark", or a name this file declares as one.`, selectorExpr);
                 }
                 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);
+                    throwCompilationError(`[plumeria] Unsupported at-rule: "${selector}". createTheme only supports nesting at-rules such as @media, @container, and @supports.`, 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, mergedPositionTryTable);
                 (0, unresolvableValue_1.assertNoDroppedValues)(init.arguments[1].expression, obj, spreadValues([
                     mergedStaticTable,
                     mergedKeyframesTable,
@@ -680,6 +714,9 @@ const transformSource = async (env) => {
                     mergedCreateTable,
                     mergedCreateStaticHashTable,
                     scannedTables.createStaticObjectTable,
+                    undefined,
+                    mergedVarTypeTable,
+                    mergedPositionTryTable,
                 ], localConstNodes, getSource));
                 const hash = (0, createTheme_1.themeHashOf)(selector, obj);
                 if (parser_1.t.isIdentifier(node.id)) {
@@ -713,12 +750,45 @@ 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, mergedPositionTryTable);
+                (0, unresolvableValue_1.assertNoDroppedValues)(expr, obj, spreadValues([
+                    mergedStaticTable,
+                    mergedKeyframesTable,
+                    mergedViewTransitionTable,
+                    mergedCreateThemeHashTable,
+                    scannedTables.createThemeObjectTable,
+                    mergedCreateTable,
+                    mergedCreateStaticHashTable,
+                    scannedTables.createStaticObjectTable,
+                    undefined,
+                    mergedVarTypeTable,
+                    mergedPositionTryTable,
+                ], 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, mergedPositionTryTable);
                 (0, unresolvableValue_1.assertNoDroppedValues)(init.arguments[0].expression, obj, spreadValues([
                     mergedStaticTable,
                     mergedKeyframesTable,
@@ -728,6 +798,9 @@ const transformSource = async (env) => {
                     mergedCreateTable,
                     mergedCreateStaticHashTable,
                     scannedTables.createStaticObjectTable,
+                    undefined,
+                    mergedVarTypeTable,
+                    mergedPositionTryTable,
                 ], localConstNodes, getSource));
                 const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                 if (parser_1.t.isIdentifier(node.id)) {
@@ -832,7 +905,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 +913,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, mergedPositionTryTable);
                         (0, unresolvableValue_1.assertNoDroppedValues)(expr, obj, spreadValues([
                             mergedStaticTable,
                             mergedKeyframesTable,
@@ -850,6 +923,9 @@ const transformSource = async (env) => {
                             mergedCreateTable,
                             mergedCreateStaticHashTable,
                             scannedTables.createStaticObjectTable,
+                            undefined,
+                            mergedVarTypeTable,
+                            mergedPositionTryTable,
                         ], localConstNodes, getSource));
                         const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                         scannedTables.keyframesObjectTable[hash] = obj;
@@ -863,7 +939,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, mergedPositionTryTable);
                     (0, unresolvableValue_1.assertNoDroppedValues)(args[0].expression, obj, spreadValues([
                         mergedStaticTable,
                         mergedKeyframesTable,
@@ -873,6 +949,9 @@ const transformSource = async (env) => {
                         mergedCreateTable,
                         mergedCreateStaticHashTable,
                         scannedTables.createStaticObjectTable,
+                        undefined,
+                        mergedVarTypeTable,
+                        mergedPositionTryTable,
                     ], localConstNodes, getSource));
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     scannedTables.viewTransitionObjectTable[hash] = obj;
@@ -882,6 +961,31 @@ const transformSource = async (env) => {
                         content: JSON.stringify(`vt-${hash}`),
                     });
                 }
+                else if (propName === 'positionTry' &&
+                    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, undefined, mergedVarTypeTable, mergedPositionTryTable);
+                    (0, unresolvableValue_1.assertNoDroppedValues)(args[0].expression, obj, spreadValues([
+                        mergedStaticTable,
+                        mergedKeyframesTable,
+                        mergedViewTransitionTable,
+                        mergedCreateThemeHashTable,
+                        scannedTables.createThemeObjectTable,
+                        mergedCreateTable,
+                        mergedCreateStaticHashTable,
+                        scannedTables.createStaticObjectTable,
+                        undefined,
+                        mergedVarTypeTable,
+                        mergedPositionTryTable,
+                    ], localConstNodes, getSource));
+                    const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
+                    (scannedTables.positionTryObjectTable ??= {})[hash] = obj;
+                    replacements.push({
+                        start: node.span.start - baseByteOffset,
+                        end: node.span.end - baseByteOffset,
+                        content: JSON.stringify(`--pt-${hash}`),
+                    });
+                }
                 else if (propName === 'createTheme' &&
                     args.length >= 2 &&
                     parser_1.t.isObjectExpression(args[1].expression)) {
@@ -892,9 +996,9 @@ const transformSource = async (env) => {
                             `Pass a string literal such as ".dark", or a name this file declares as one.`, selectorExpr);
                     }
                     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);
+                        throwCompilationError(`[plumeria] Unsupported at-rule: "${selector}". createTheme only supports nesting at-rules such as @media, @container, and @supports.`, 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, mergedPositionTryTable);
                     (0, unresolvableValue_1.assertNoDroppedValues)(args[1].expression, obj, spreadValues([
                         mergedStaticTable,
                         mergedKeyframesTable,
@@ -904,6 +1008,9 @@ const transformSource = async (env) => {
                         mergedCreateTable,
                         mergedCreateStaticHashTable,
                         scannedTables.createStaticObjectTable,
+                        undefined,
+                        mergedVarTypeTable,
+                        mergedPositionTryTable,
                     ], localConstNodes, getSource));
                     const hash = (0, createTheme_1.themeHashOf)(selector, obj);
                     scannedTables.createThemeObjectTable[hash] = obj;
@@ -914,7 +1021,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, mergedPositionTryTable);
                     (0, unresolvableValue_1.assertNoDroppedValues)(args[0].expression, obj, spreadValues([
                         mergedStaticTable,
                         mergedKeyframesTable,
@@ -924,6 +1031,9 @@ const transformSource = async (env) => {
                         mergedCreateTable,
                         mergedCreateStaticHashTable,
                         scannedTables.createStaticObjectTable,
+                        undefined,
+                        mergedVarTypeTable,
+                        mergedPositionTryTable,
                     ], localConstNodes, getSource));
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     scannedTables.createStaticObjectTable[hash] = obj;
@@ -931,7 +1041,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, mergedPositionTryTable);
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     scannedTables.createObjectTable[hash] = obj;
                 }
@@ -1031,7 +1141,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, mergedPositionTryTable);
         }
         else if (parser_1.t.isMemberExpression(expr) &&
             parser_1.t.isIdentifier(expr.object) &&
@@ -1130,7 +1240,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, mergedPositionTryTable);
         if (func.named) {
             const argExpr = callArgs[0]?.expression;
             if (callArgs.length > 1 ||

package/dist/types.d.ts

@@ -9,6 +9,8 @@ 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 PositionTryHashTable = Record<string, string>;
 export type ViewTransitionObjectTable = Record<string, CSSObject>;
 export type CreateThemeObjectTable = Record<string, CSSObject>;
 export type CreateHashTable = Record<string, string>;
@@ -38,6 +40,10 @@ export interface Tables {
     keyframesObjectTable: KeyframesObjectTable;
     viewTransitionHashTable: ViewTransitionHashTable;
     viewTransitionObjectTable: ViewTransitionObjectTable;
+    varTypeHashTable?: VarTypeHashTable;
+    varTypeObjectTable?: Record<string, CSSObject>;
+    positionTryHashTable?: PositionTryHashTable;
+    positionTryObjectTable?: 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.4",
+  "version": "20.0.0",
   "description": "Plumeria Utils",
   "author": "Refirst 11",
   "license": "MIT",
@@ -24,7 +24,7 @@
     "@swc/core": "1.15.47",
     "lightningcss": "^1.32.0",
     "postcss": "8.5.26",
-    "zss-engine": "2.10.0"
+    "zss-engine": "3.0.1"
   },
   "publishConfig": {
     "access": "public",