@plumeria/utils 19.1.0 → 19.1.1

package/dist/transform.js

@@ -0,0 +1,2286 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformSource = void 0;
+const core_1 = require("@swc/core");
+const path = __importStar(require("path"));
+const zss_engine_1 = require("zss-engine");
+const parser_1 = require("./parser");
+const create_1 = require("./create");
+const dynamicKey_1 = require("./dynamicKey");
+const escalation_1 = require("./escalation");
+const createTheme_1 = require("./createTheme");
+const resolver_1 = require("./resolver");
+const ast_1 = require("./ast");
+const references_1 = require("./references");
+const propertyPolicy_1 = require("./propertyPolicy");
+const unwrapExport = (node) => {
+    if (node?.type === 'ExportDeclaration')
+        return node.declaration;
+    if (node?.type === 'ExportDefaultDeclaration')
+        return node.decl;
+    if (node?.type === 'ExportDefaultExpression')
+        return node.expression;
+    return node;
+};
+const isFunctionNode = (node) => node?.type === 'FunctionDeclaration' ||
+    node?.type === 'FunctionExpression' ||
+    node?.type === 'ArrowFunctionExpression';
+const componentFunctionOf = (node) => {
+    if (isFunctionNode(node))
+        return node;
+    if (node?.type === 'CallExpression') {
+        for (const arg of node.arguments ?? []) {
+            const fn = componentFunctionOf(arg.expression);
+            if (fn)
+                return fn;
+        }
+    }
+    return undefined;
+};
+const unwrapPatternDefault = (pattern) => pattern?.type === 'AssignmentPattern' ? pattern.left : pattern;
+const destructuredPropAliases = (fn) => {
+    const aliases = new Map();
+    const first = fn.params[0];
+    const pattern = unwrapPatternDefault(first?.pat ?? first);
+    if (pattern?.type !== 'ObjectPattern')
+        return aliases;
+    for (const item of pattern.properties ?? []) {
+        if (item.type !== 'KeyValuePatternProperty')
+            continue;
+        const local = unwrapPatternDefault(item.value);
+        const key = item.key;
+        if (!parser_1.t.isIdentifier(local))
+            continue;
+        if (!parser_1.t.isIdentifier(key) && !parser_1.t.isStringLiteral(key))
+            continue;
+        const name = String(key.value);
+        if (name !== local.value)
+            aliases.set(local.value, name);
+    }
+    return aliases;
+};
+const propDefaultMessage = (source) => `Plumeria: A style prop default must be a defined style: "${source}". ` +
+    `Apply a conditional or dynamic style where the element is styled.`;
+const spreadStyleMessage = (source) => `Plumeria: Spread elements in a style array are not supported: "...${source}". ` +
+    `List each style explicitly.`;
+const resolveLocalStyleAlias = (aliases, expression) => {
+    let current = expression;
+    const seen = new Set();
+    while (parser_1.t.isIdentifier(current)) {
+        const name = current.value;
+        if (seen.has(name))
+            break;
+        seen.add(name);
+        const candidates = aliases[name];
+        if (!candidates || candidates.length === 0)
+            break;
+        const candidate = candidates.find((candidate) => candidate.context === current.ctxt);
+        if (!candidate)
+            break;
+        current = candidate.expression;
+    }
+    return current;
+};
+const isStaticArgValue = (node) => node.type === 'StringLiteral' ||
+    node.type === 'NumericLiteral' ||
+    node.type === 'BooleanLiteral' ||
+    (node.type === 'TemplateLiteral' && node.expressions.length === 0) ||
+    parser_1.t.isIdentifier(node) ||
+    parser_1.t.isMemberExpression(node);
+const isNoOpStyle = (node) => parser_1.t.isNullLiteral(node) ||
+    (parser_1.t.isBooleanLiteral(node) && node.value === false) ||
+    (parser_1.t.isIdentifier(node) && node.value === 'undefined');
+const foldDynamicVars = (vars) => {
+    const grouped = new Map();
+    [...vars]
+        .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+        .forEach((entry) => {
+        const list = grouped.get(entry.cssVar);
+        if (list)
+            list.push(entry);
+        else
+            grouped.set(entry.cssVar, [entry]);
+    });
+    return [...grouped].map(([cssVar, entries]) => {
+        let value = 'undefined';
+        entries.forEach((entry) => {
+            value = entry.test
+                ? `((${entry.test}) ? ${entry.valueExpr} : ${value})`
+                : entry.valueExpr;
+        });
+        return `"${cssVar}": ${value}`;
+    });
+};
+const transformSource = async (env) => {
+    const { source, root, styleProp, propertyPolicy, isDev, collectOndemandSheets, addDependency, } = env;
+    const id = env.moduleId;
+    const resourcePath = env.moduleId;
+    const baseId = env.filePath;
+    const ast = (0, core_1.parseSync)(source, {
+        syntax: 'typescript',
+        tsx: true,
+        target: 'es2022',
+    });
+    (0, propertyPolicy_1.assertPropertyPolicy)(ast, propertyPolicy, id);
+    const leadingLen = (0, ast_1.getLeadingCommentLength)(source);
+    const sourceBuffer = Buffer.from(source, 'utf-8');
+    const leadingBytes = Buffer.byteLength(source.slice(0, leadingLen), 'utf-8');
+    const baseByteOffset = ast.span.start - leadingBytes;
+    const throwCompilationError = (message, node) => {
+        let suffix = '';
+        if (node) {
+            const offset = node.span.start - baseByteOffset;
+            let line = 1;
+            let colStart = 0;
+            for (let i = 0; i < offset && i < sourceBuffer.length; i++) {
+                if (sourceBuffer[i] === 10) {
+                    line++;
+                    colStart = i + 1;
+                }
+            }
+            const col = offset - colStart + 1;
+            suffix = ` (${path.basename(resourcePath)}:${line}:${col})`;
+        }
+        const err = new Error(`${message}${suffix}`);
+        err.stack = err.message;
+        throw err;
+    };
+    const assertResolvable = (node) => {
+        if (parser_1.t.isIdentifier(node) && node.value === 'undefined')
+            return;
+        if (parser_1.t.isMemberExpression(node) ||
+            parser_1.t.isIdentifier(node) ||
+            parser_1.t.isCallExpression(node) ||
+            parser_1.t.isArrowFunctionExpression(node) ||
+            parser_1.t.isFunctionExpression(node)) {
+            const rootId = (0, parser_1.getRootIdentifier)(node);
+            const isPlumeriaStyle = rootId &&
+                isVisibleReference(node) &&
+                ((localCreateStyles[rootId] !== undefined &&
+                    localCreateStyles[rootId].type !== 'constant') ||
+                    mergedCreateTable[rootId] !== undefined);
+            if (!isPlumeriaStyle) {
+                const origin = rootId ? localImports[rootId] : undefined;
+                const failure = origin
+                    ? (0, parser_1.resolveFileError)(origin.actualPath, origin.importedName)
+                    : undefined;
+                if (failure) {
+                    throwCompilationError(`Plumeria: ${failure.message} (${path.basename(failure.filePath)})`);
+                }
+                throwCompilationError(`Plumeria: Dynamic or unresolvable style object "${getSource(node)}" is not supported.`, node);
+            }
+        }
+    };
+    const scannedTables = (0, parser_1.scanAll)();
+    const ownFailure = (0, parser_1.resolveFileError)(baseId, '');
+    if (ownFailure)
+        throwCompilationError(`Plumeria: ${ownFailure.message}`);
+    for (const node of ast.body) {
+        if (node.type === 'ImportDeclaration') {
+            const sourcePath = node.source.value;
+            const actualPath = (0, resolver_1.resolveImportPath)(sourcePath, id);
+            if (actualPath) {
+                addDependency(actualPath);
+                const transDeps = (0, parser_1.getFileDependencies)(actualPath);
+                for (const dep of transDeps) {
+                    addDependency(dep);
+                }
+            }
+        }
+    }
+    if (scannedTables.componentPropsTable) {
+        const parentFiles = new Set();
+        for (const compKey of Object.keys(scannedTables.componentPropsTable)) {
+            if (!compKey.startsWith(`${id}-`))
+                continue;
+            const props = scannedTables.componentPropsTable[compKey];
+            for (const propName of Object.keys(props)) {
+                for (const entry of props[propName]) {
+                    if (entry.filePath !== id) {
+                        parentFiles.add(entry.filePath);
+                    }
+                }
+            }
+        }
+        for (const parentFile of parentFiles) {
+            addDependency(parentFile);
+        }
+    }
+    const components = [];
+    const propAliases = new Map();
+    const propDefaults = new Map();
+    const declaredProps = new Map();
+    const addComponent = (name, fn) => {
+        components.push({ name, node: fn });
+        const first = fn.params[0];
+        const pattern = unwrapPatternDefault(first?.pat ?? first);
+        const defaults = new Map();
+        for (const item of pattern?.properties ?? []) {
+            if (item.type === 'AssignmentPatternProperty' && item.value)
+                defaults.set(item.key.value, item.value);
+            if (item.type === 'KeyValuePatternProperty' &&
+                item.value?.type === 'AssignmentPattern')
+                defaults.set(item.key.value, item.value.right);
+        }
+        propDefaults.set(name, defaults);
+        const aliases = destructuredPropAliases(fn);
+        if (aliases.size > 0)
+            propAliases.set(name, aliases);
+        const declared = new Set();
+        for (const item of pattern?.properties ?? []) {
+            const key = item.key;
+            if (parser_1.t.isIdentifier(key) || parser_1.t.isStringLiteral(key))
+                declared.add(String(key.value));
+        }
+        if (declared.size > 0)
+            declaredProps.set(name, declared);
+    };
+    for (const node of ast.body) {
+        const statement = unwrapExport(node);
+        if (isFunctionNode(statement)) {
+            addComponent(statement.identifier?.value ?? 'default', statement);
+        }
+        else if (statement?.type === 'CallExpression') {
+            const fn = componentFunctionOf(statement);
+            if (fn)
+                addComponent('default', fn);
+        }
+        else if (parser_1.t.isVariableDeclaration(statement)) {
+            for (const decl of statement.declarations) {
+                if (!parser_1.t.isIdentifier(decl.id))
+                    continue;
+                const fn = componentFunctionOf(decl.init);
+                if (fn)
+                    addComponent(decl.id.value, fn);
+            }
+        }
+    }
+    const appliedStyleProps = new Set();
+    const ownerComponentOf = (at) => components.find((c) => at.span.start >= c.node.span.start && at.span.start <= c.node.span.end)?.name;
+    const markStylePropApplied = (name, at) => {
+        const owner = ownerComponentOf(at);
+        if (owner) {
+            appliedStyleProps.add(`${owner}:${name}`);
+        }
+    };
+    const extractedSheets = [];
+    const addSheet = (sheet) => {
+        if (!extractedSheets.includes(sheet)) {
+            extractedSheets.push(sheet);
+        }
+    };
+    const processStyleRecords = (style, weights) => {
+        const records = (0, create_1.getStyleRecords)(style, weights);
+        if (collectOndemandSheets) {
+            (0, parser_1.extractOndemandStyles)(style, extractedSheets, scannedTables);
+            records.forEach((r) => {
+                addSheet(r.sheet);
+            });
+        }
+        return records;
+    };
+    const localConsts = (0, parser_1.collectLocalConsts)(ast);
+    const importMap = {};
+    const keyframesImportMap = {};
+    const viewTransitionImportMap = {};
+    const createImportMap = {};
+    const createFunctionImportMap = {};
+    const createThemeImportMap = {};
+    const createStaticImportMap = {};
+    const plumeriaAliases = {};
+    const localImports = {};
+    (0, parser_1.traverse)(ast, {
+        ImportDeclaration({ node }) {
+            const sourcePath = node.source.value;
+            if (sourcePath === '@plumeria/core') {
+                node.specifiers.forEach((specifier) => {
+                    if (specifier.type === 'ImportNamespaceSpecifier') {
+                        plumeriaAliases[specifier.local.value] = 'NAMESPACE';
+                    }
+                    else if (specifier.type === 'ImportDefaultSpecifier') {
+                        plumeriaAliases[specifier.local.value] = 'NAMESPACE';
+                    }
+                    else if (specifier.type === 'ImportSpecifier') {
+                        const importedName = specifier.imported
+                            ? specifier.imported.value
+                            : specifier.local.value;
+                        plumeriaAliases[specifier.local.value] = importedName;
+                    }
+                });
+            }
+            const actualPath = (0, resolver_1.resolveImportPath)(sourcePath, resourcePath);
+            if (actualPath) {
+                node.specifiers.forEach((specifier) => {
+                    if (specifier.type === 'ImportNamespaceSpecifier') {
+                        localImports[specifier.local.value] = {
+                            actualPath,
+                            importedName: '*',
+                        };
+                        return;
+                    }
+                    if (specifier.type === 'ImportSpecifier' ||
+                        specifier.type === 'ImportDefaultSpecifier') {
+                        const importedName = specifier.type === 'ImportDefaultSpecifier'
+                            ? 'default'
+                            : specifier.imported
+                                ? specifier.imported.value
+                                : specifier.local.value;
+                        const localName = specifier.local.value;
+                        let resolvedKey = `${actualPath}-${importedName}`;
+                        const resolved = (0, parser_1.resolveExport)(actualPath, importedName);
+                        if (resolved) {
+                            resolvedKey = `${resolved.filePath}-${resolved.localName}`;
+                        }
+                        const uniqueKey = resolvedKey;
+                        localImports[localName] = { actualPath, importedName };
+                        if (scannedTables.staticTable[uniqueKey]) {
+                            importMap[localName] = scannedTables.staticTable[uniqueKey];
+                        }
+                        if (scannedTables.keyframesHashTable[uniqueKey]) {
+                            keyframesImportMap[localName] =
+                                scannedTables.keyframesHashTable[uniqueKey];
+                        }
+                        if (scannedTables.viewTransitionHashTable[uniqueKey]) {
+                            viewTransitionImportMap[localName] =
+                                scannedTables.viewTransitionHashTable[uniqueKey];
+                        }
+                        if (scannedTables.createHashTable[uniqueKey]) {
+                            createImportMap[localName] =
+                                scannedTables.createHashTable[uniqueKey];
+                        }
+                        if (scannedTables.createFunctionTable[uniqueKey]) {
+                            createFunctionImportMap[localName] = (0, dynamicKey_1.styleFunctionsOf)(scannedTables.createFunctionTable[uniqueKey]);
+                        }
+                        if (scannedTables.createThemeHashTable[uniqueKey]) {
+                            createThemeImportMap[localName] =
+                                scannedTables.createThemeHashTable[uniqueKey];
+                        }
+                        if (scannedTables.createStaticHashTable[uniqueKey]) {
+                            createStaticImportMap[localName] =
+                                scannedTables.createStaticHashTable[uniqueKey];
+                        }
+                    }
+                });
+            }
+        },
+    });
+    const mergedStaticTable = {};
+    for (const key of Object.keys(scannedTables.staticTable)) {
+        mergedStaticTable[key] = scannedTables.staticTable[key];
+    }
+    for (const key of Object.keys(localConsts)) {
+        mergedStaticTable[key] = localConsts[key];
+    }
+    for (const key of Object.keys(importMap)) {
+        mergedStaticTable[key] = importMap[key];
+    }
+    const mergedKeyframesTable = {};
+    for (const key of Object.keys(scannedTables.keyframesHashTable)) {
+        mergedKeyframesTable[key] = scannedTables.keyframesHashTable[key];
+        if (key.startsWith(`${resourcePath}-`)) {
+            const varName = key.slice(resourcePath.length + 1);
+            mergedKeyframesTable[varName] = scannedTables.keyframesHashTable[key];
+        }
+    }
+    for (const key of Object.keys(keyframesImportMap)) {
+        mergedKeyframesTable[key] = keyframesImportMap[key];
+    }
+    const mergedViewTransitionTable = {};
+    for (const key of Object.keys(scannedTables.viewTransitionHashTable)) {
+        mergedViewTransitionTable[key] = scannedTables.viewTransitionHashTable[key];
+        if (key.startsWith(`${resourcePath}-`)) {
+            const varName = key.slice(resourcePath.length + 1);
+            mergedViewTransitionTable[varName] =
+                scannedTables.viewTransitionHashTable[key];
+        }
+    }
+    for (const key of Object.keys(viewTransitionImportMap)) {
+        mergedViewTransitionTable[key] = viewTransitionImportMap[key];
+    }
+    const mergedCreateTable = {};
+    for (const key of Object.keys(scannedTables.createHashTable)) {
+        mergedCreateTable[key] = scannedTables.createHashTable[key];
+        if (key.startsWith(`${resourcePath}-`)) {
+            const varName = key.slice(resourcePath.length + 1);
+            mergedCreateTable[varName] = scannedTables.createHashTable[key];
+        }
+    }
+    for (const key of Object.keys(createImportMap)) {
+        mergedCreateTable[key] = createImportMap[key];
+    }
+    const mergedCreateThemeHashTable = {};
+    for (const key of Object.keys(scannedTables.createThemeHashTable)) {
+        mergedCreateThemeHashTable[key] = scannedTables.createThemeHashTable[key];
+        if (key.startsWith(`${resourcePath}-`)) {
+            const varName = key.slice(resourcePath.length + 1);
+            mergedCreateThemeHashTable[varName] =
+                scannedTables.createThemeHashTable[key];
+        }
+    }
+    for (const key of Object.keys(createThemeImportMap)) {
+        mergedCreateThemeHashTable[key] = createThemeImportMap[key];
+    }
+    const mergedCreateStaticHashTable = {};
+    for (const key of Object.keys(scannedTables.createStaticHashTable)) {
+        mergedCreateStaticHashTable[key] = scannedTables.createStaticHashTable[key];
+        if (key.startsWith(`${resourcePath}-`)) {
+            const varName = key.slice(resourcePath.length + 1);
+            mergedCreateStaticHashTable[varName] =
+                scannedTables.createStaticHashTable[key];
+        }
+    }
+    for (const key of Object.keys(createStaticImportMap)) {
+        mergedCreateStaticHashTable[key] = createStaticImportMap[key];
+    }
+    const dynamicStyleTables = {
+        keyframesHashTable: mergedKeyframesTable,
+        viewTransitionHashTable: mergedViewTransitionTable,
+        createThemeHashTable: mergedCreateThemeHashTable,
+        createThemeObjectTable: scannedTables.createThemeObjectTable,
+        createHashTable: mergedCreateTable,
+        createStaticHashTable: mergedCreateStaticHashTable,
+        createStaticObjectTable: scannedTables.createStaticObjectTable,
+    };
+    const localCreateStyles = {};
+    const localStyleAliases = {};
+    const checkStyleAliasAssignment = (decl) => {
+        if (!parser_1.t.isIdentifier(decl.id) || !decl.init)
+            return;
+        const init = (0, parser_1.unwrapExpression)(decl.init);
+        if (parser_1.t.isMemberExpression(init) && parser_1.t.isIdentifier(init.object)) {
+            const objName = init.object.value;
+            if (localCreateStyles[objName] !== undefined ||
+                mergedCreateTable[objName] !== undefined) {
+                (localStyleAliases[decl.id.value] ??= []).push({
+                    expression: init,
+                    context: decl.id.ctxt,
+                });
+            }
+        }
+    };
+    const replacements = [];
+    const deferredSources = [];
+    const deferRange = (start, end) => {
+        const token = `__plumeria_preserved_${deferredSources.length}__`;
+        deferredSources.push({ token, start, end });
+        return token;
+    };
+    const deferSource = (node) => deferRange(node.span.start - baseByteOffset, node.span.end - baseByteOffset);
+    const deferProperty = (property) => {
+        const node = property;
+        const range = node.spread && node.arguments
+            ? { start: node.spread.start, end: node.arguments.span.end }
+            : node.span
+                ? { start: node.span.start, end: node.span.end }
+                : node.key && node.value
+                    ? { start: node.key.span.start, end: node.value.span.end }
+                    : null;
+        return range
+            ? deferRange(range.start - baseByteOffset, range.end - baseByteOffset)
+            : null;
+    };
+    const dynamicFnCalls = [];
+    const processedDecls = new Set();
+    const separatelyExported = new Set();
+    for (const statement of ast.body) {
+        if (statement.type !== 'ExportNamedDeclaration' || statement.source)
+            continue;
+        for (const specifier of statement.specifiers) {
+            if (specifier.type === 'ExportSpecifier' &&
+                parser_1.t.isIdentifier(specifier.orig)) {
+                separatelyExported.add(specifier.orig.value);
+            }
+        }
+    }
+    const idSpans = new Set();
+    const excludedSpans = new Set();
+    const referenceIdents = (0, references_1.collectReferenceIdentifiers)(ast);
+    const topLevelDeclarators = new Set();
+    for (const statement of ast.body) {
+        const declaration = unwrapExport(statement);
+        if (parser_1.t.isVariableDeclaration(declaration)) {
+            declaration.declarations.forEach((decl) => topLevelDeclarators.add(decl));
+        }
+    }
+    const unwrapStyleExpression = (node) => {
+        while (node &&
+            [
+                'ParenthesisExpression',
+                'TsAsExpression',
+                'TsSatisfiesExpression',
+                'TsNonNullExpression',
+                'TsConstAssertion',
+                'TsTypeAssertion',
+            ].includes(node.type))
+            node = node.expression;
+        return node;
+    };
+    const literalObjectArgument = (node, seen = new Set()) => {
+        node = unwrapStyleExpression(node);
+        if (parser_1.t.isObjectExpression(node))
+            return node;
+        if (!parser_1.t.isIdentifier(node) || seen.has(node.value))
+            return null;
+        seen.add(node.value);
+        const declaration = [...topLevelDeclarators].find((decl) => parser_1.t.isIdentifier(decl.id) && decl.id.value === node.value);
+        return declaration?.init
+            ? literalObjectArgument(declaration.init, seen)
+            : null;
+    };
+    const registeredStyleCalls = new Set();
+    const registerStyle = (node, declSpan, isExported) => {
+        let propName;
+        const init = unwrapStyleExpression(node.init);
+        if (parser_1.t.isIdentifier(node.id) &&
+            init &&
+            parser_1.t.isCallExpression(init) &&
+            init.arguments.length >= 1) {
+            const callee = init.callee;
+            if (parser_1.t.isMemberExpression(callee) &&
+                parser_1.t.isIdentifier(callee.object) &&
+                parser_1.t.isIdentifier(callee.property)) {
+                const objectName = callee.object.value;
+                const propertyName = callee.property.value;
+                const alias = plumeriaAliases[objectName];
+                if (alias === 'NAMESPACE') {
+                    propName = propertyName;
+                }
+            }
+            else if (parser_1.t.isIdentifier(callee)) {
+                const calleeName = callee.value;
+                const originalName = plumeriaAliases[calleeName];
+                if (originalName) {
+                    propName = originalName;
+                }
+            }
+        }
+        if (propName && init && parser_1.t.isCallExpression(init)) {
+            if (['create', 'createTheme', 'createStatic'].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)) {
+                const argumentIndex = propName === 'createTheme' ? 1 : 0;
+                const argument = init.arguments[argumentIndex];
+                const object = argument && literalObjectArgument(argument.expression);
+                if (!object)
+                    throwCompilationError(`Plumeria: css.${propName} needs a style object it can read at build time. Pass an object literal or a top-level constant containing one.`, init);
+                argument.expression = object;
+                registeredStyleCalls.add(init.span.start);
+            }
+            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);
+                if (obj) {
+                    const hashMap = {};
+                    Object.entries(obj).forEach(([key, style]) => {
+                        if (typeof style !== 'object' || style === null)
+                            return;
+                        const records = (0, create_1.getStyleRecords)(style);
+                        const atomMap = {};
+                        records.forEach((r) => (atomMap[r.key] = r.hash));
+                        hashMap[key] = atomMap;
+                    });
+                    const styleFunctions = (0, dynamicKey_1.styleFunctionsOf)(init.arguments[0].expression);
+                    if (parser_1.t.isIdentifier(node.id)) {
+                        idSpans.add(node.id.span.start);
+                    }
+                    if (parser_1.t.isIdentifier(node.id)) {
+                        localCreateStyles[node.id.value] = {
+                            name: node.id.value,
+                            type: 'create',
+                            obj,
+                            hashMap,
+                            isExported,
+                            initSpan: {
+                                start: init.span.start - baseByteOffset,
+                                end: init.span.end - baseByteOffset,
+                            },
+                            declSpan: {
+                                start: declSpan.start - baseByteOffset,
+                                end: declSpan.end - baseByteOffset,
+                            },
+                            functions: styleFunctions,
+                        };
+                    }
+                }
+            }
+            else if (propName === 'createTheme' &&
+                init.arguments.length >= 2 &&
+                parser_1.t.isObjectExpression(init.arguments[1].expression)) {
+                if (parser_1.t.isIdentifier(node.id)) {
+                    idSpans.add(node.id.span.start);
+                }
+                const selectorExpr = init.arguments[0].expression;
+                const selector = (0, parser_1.resolveThemeSelector)(selectorExpr, mergedStaticTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable);
+                if (!selector) {
+                    throwCompilationError(`Plumeria: createTheme needs a selector it can read at build time. ` +
+                        `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);
+                }
+                const obj = (0, parser_1.objectExpressionToObject)(init.arguments[1].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable);
+                const hash = (0, createTheme_1.themeHashOf)(selector, obj);
+                if (parser_1.t.isIdentifier(node.id)) {
+                    const uniqueKey = `${resourcePath}-${node.id.value}`;
+                    scannedTables.createThemeHashTable[uniqueKey] = hash;
+                    scannedTables.createThemeObjectTable[hash] = obj;
+                    if (scannedTables.createThemeSelectorTable) {
+                        scannedTables.createThemeSelectorTable[hash] = selector;
+                    }
+                    mergedCreateThemeHashTable[node.id.value] = hash;
+                    const themeHashMap = {};
+                    for (const [key, value] of Object.entries(obj)) {
+                        const cssVarName = (0, zss_engine_1.camelToKebabCase)(key);
+                        const atomicHash = (0, zss_engine_1.genBase36Hash)({ _theme: hash, [key]: value }, 1, 8);
+                        themeHashMap[key] = `var(--${atomicHash}-${cssVarName})`;
+                    }
+                    localCreateStyles[node.id.value] = {
+                        name: node.id.value,
+                        type: 'constant',
+                        obj,
+                        hashMap: themeHashMap,
+                        isExported,
+                        initSpan: {
+                            start: init.span.start - baseByteOffset,
+                            end: init.span.end - baseByteOffset,
+                        },
+                        declSpan: {
+                            start: declSpan.start - baseByteOffset,
+                            end: declSpan.end - baseByteOffset,
+                        },
+                    };
+                }
+            }
+            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 hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
+                if (parser_1.t.isIdentifier(node.id)) {
+                    const uniqueKey = `${resourcePath}-${node.id.value}`;
+                    scannedTables.createStaticHashTable[uniqueKey] = hash;
+                    scannedTables.createStaticObjectTable[hash] = obj;
+                    mergedCreateStaticHashTable[node.id.value] = hash;
+                    localCreateStyles[node.id.value] = {
+                        name: node.id.value,
+                        type: 'constant',
+                        obj,
+                        hashMap: obj,
+                        isExported,
+                        initSpan: {
+                            start: init.span.start - baseByteOffset,
+                            end: init.span.end - baseByteOffset,
+                        },
+                        declSpan: {
+                            start: declSpan.start - baseByteOffset,
+                            end: declSpan.end - baseByteOffset,
+                        },
+                    };
+                }
+            }
+        }
+    };
+    (0, parser_1.traverse)(ast, {
+        ImportDeclaration({ node }) {
+            if (node.source.value === '@plumeria/core') {
+                if (node.typeOnly)
+                    return;
+                const typeOnlySpecs = node.specifiers.filter((s) => s.type === 'ImportSpecifier' && s.isTypeOnly);
+                if (typeOnlySpecs.length > 0) {
+                    const names = typeOnlySpecs
+                        .map((s) => {
+                        if (s.type !== 'ImportSpecifier')
+                            return;
+                        const imported = s.imported ? s.imported.value : s.local.value;
+                        const local = s.local.value;
+                        return imported === local ? imported : `${imported} as ${local}`;
+                    })
+                        .join(', ');
+                    replacements.push({
+                        start: node.span.start - baseByteOffset,
+                        end: node.span.end - baseByteOffset,
+                        content: `import type { ${names} } from '@plumeria/core'`,
+                    });
+                }
+                else {
+                    replacements.push({
+                        start: node.span.start - baseByteOffset,
+                        end: node.span.end - baseByteOffset,
+                        content: '',
+                    });
+                }
+            }
+            node.specifiers.forEach((specifier) => {
+                if (specifier.local) {
+                    excludedSpans.add(specifier.local.span.start);
+                }
+                if (specifier.type === 'ImportSpecifier' && specifier.imported) {
+                    excludedSpans.add(specifier.imported.span.start);
+                }
+            });
+        },
+        ExportDeclaration({ node }) {
+            if (parser_1.t.isVariableDeclaration(node.declaration)) {
+                processedDecls.add(node.declaration);
+                node.declaration.declarations.forEach((decl) => {
+                    registerStyle(decl, node.span, true);
+                    checkStyleAliasAssignment(decl);
+                });
+            }
+        },
+        VariableDeclaration({ node }) {
+            if (processedDecls.has(node))
+                return;
+            node.declarations.forEach((decl) => {
+                registerStyle(decl, node.span, node.declarations.length > 1 ||
+                    (parser_1.t.isIdentifier(decl.id) && separatelyExported.has(decl.id.value)));
+                checkStyleAliasAssignment(decl);
+            });
+        },
+        CallExpression({ node }) {
+            const callee = node.callee;
+            let propName;
+            if (parser_1.t.isMemberExpression(callee) &&
+                parser_1.t.isIdentifier(callee.object) &&
+                parser_1.t.isIdentifier(callee.property)) {
+                const objectName = callee.object.value;
+                const propertyName = callee.property.value;
+                const alias = plumeriaAliases[objectName];
+                if (alias === 'NAMESPACE') {
+                    propName = propertyName;
+                }
+            }
+            else if (parser_1.t.isIdentifier(callee)) {
+                const calleeName = callee.value;
+                const originalName = plumeriaAliases[calleeName];
+                if (originalName) {
+                    propName = originalName;
+                }
+            }
+            if (propName) {
+                if (['create', 'createTheme', 'createStatic'].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);
+                }
+                const args = node.arguments;
+                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 hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
+                        scannedTables.keyframesObjectTable[hash] = obj;
+                        replacements.push({
+                            start: node.span.start - baseByteOffset,
+                            end: node.span.end - baseByteOffset,
+                            content: JSON.stringify(`kf-${hash}`),
+                        });
+                    }
+                }
+                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 hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
+                    scannedTables.viewTransitionObjectTable[hash] = obj;
+                    replacements.push({
+                        start: node.span.start - baseByteOffset,
+                        end: node.span.end - baseByteOffset,
+                        content: JSON.stringify(`vt-${hash}`),
+                    });
+                }
+                else if (propName === 'createTheme' &&
+                    args.length >= 2 &&
+                    parser_1.t.isObjectExpression(args[1].expression)) {
+                    const selectorExpr = args[0].expression;
+                    const selector = (0, parser_1.resolveThemeSelector)(selectorExpr, mergedStaticTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable);
+                    if (!selector) {
+                        throwCompilationError(`Plumeria: createTheme needs a selector it can read at build time. ` +
+                            `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);
+                    }
+                    const obj = (0, parser_1.objectExpressionToObject)(args[1].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable);
+                    const hash = (0, createTheme_1.themeHashOf)(selector, obj);
+                    scannedTables.createThemeObjectTable[hash] = obj;
+                    if (scannedTables.createThemeSelectorTable) {
+                        scannedTables.createThemeSelectorTable[hash] = selector;
+                    }
+                }
+                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 hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
+                    scannedTables.createStaticObjectTable[hash] = obj;
+                }
+                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 hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
+                    scannedTables.createObjectTable[hash] = obj;
+                }
+            }
+        },
+    });
+    const jsxOpeningElementMap = new Map();
+    const componentParamNames = new Set();
+    const addFirstParamName = (fn) => {
+        const first = fn.params[0];
+        const p = unwrapPatternDefault(first?.pat ?? first);
+        if (parser_1.t.isIdentifier(p)) {
+            componentParamNames.add(p.value);
+        }
+        else if (p?.type === 'ObjectPattern') {
+            for (const item of p.properties) {
+                if (item.type === 'RestElement' && parser_1.t.isIdentifier(item.argument)) {
+                    componentParamNames.add(item.argument.value);
+                }
+            }
+        }
+    };
+    for (const node of ast.body) {
+        const statement = unwrapExport(node);
+        if (isFunctionNode(statement)) {
+            addFirstParamName(statement);
+        }
+        else if (statement?.type === 'CallExpression') {
+            const fn = componentFunctionOf(statement);
+            if (fn)
+                addFirstParamName(fn);
+        }
+        else if (parser_1.t.isVariableDeclaration(statement)) {
+            for (const decl of statement.declarations) {
+                if (!parser_1.t.isIdentifier(decl.id) || !decl.init)
+                    continue;
+                const fn = componentFunctionOf(decl.init);
+                if (fn)
+                    addFirstParamName(fn);
+            }
+        }
+    }
+    const excludeSubtreeSpans = (n) => {
+        if (!n || typeof n !== 'object')
+            return;
+        if (n.span) {
+            excludedSpans.add(n.span.start);
+        }
+        Object.values(n).forEach((val) => excludeSubtreeSpans(val));
+    };
+    const getSource = (node) => {
+        const start = node.span.start - baseByteOffset;
+        const end = node.span.end - baseByteOffset;
+        return sourceBuffer.subarray(start, end).toString('utf-8');
+    };
+    const isVisibleReference = (expr) => {
+        if (parser_1.t.isIdentifier(expr))
+            return referenceIdents.references.has(expr.span.start);
+        if (parser_1.t.isMemberExpression(expr))
+            return isVisibleReference(expr.object);
+        if (parser_1.t.isCallExpression(expr) &&
+            expr.callee.type !== 'Super' &&
+            expr.callee.type !== 'Import')
+            return isVisibleReference(expr.callee);
+        return true;
+    };
+    const resolveStyleObject = (expr) => {
+        expr = (0, parser_1.unwrapExpression)(expr);
+        expr = resolveLocalStyleAlias(localStyleAliases, expr);
+        if (!isVisibleReference(expr))
+            return null;
+        if (expr.type === 'ArrayExpression') {
+            let merged = {};
+            for (const element of expr.elements ?? []) {
+                if (!element)
+                    continue;
+                if (element.spread)
+                    throwCompilationError(spreadStyleMessage(getSource(element.expression)), element.expression);
+                const style = resolveStyleObject(element.expression);
+                if (!style)
+                    return null;
+                merged = (0, parser_1.deepMerge)(merged, style);
+            }
+            return merged;
+        }
+        if (parser_1.t.isObjectExpression(expr)) {
+            return (0, parser_1.objectExpressionToObject)(expr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable);
+        }
+        else if (parser_1.t.isMemberExpression(expr) &&
+            parser_1.t.isIdentifier(expr.object) &&
+            (parser_1.t.isIdentifier(expr.property) || expr.property.type === 'Computed')) {
+            const varName = expr.object.value;
+            let propName;
+            if (expr.property.type === 'Computed') {
+                const keyExpr = expr.property.expression;
+                if (!parser_1.t.isStringLiteral(keyExpr))
+                    return null;
+                propName = keyExpr.value;
+            }
+            else {
+                propName = expr.property.value;
+            }
+            const styleInfo = localCreateStyles[varName];
+            if (styleInfo?.obj[propName]) {
+                const style = styleInfo.obj[propName];
+                if (typeof style === 'object' && style !== null)
+                    return style;
+            }
+            const hash = mergedCreateTable[varName];
+            if (hash) {
+                const obj = scannedTables.createObjectTable[hash];
+                if (obj?.[propName] && typeof obj[propName] === 'object')
+                    return obj[propName];
+            }
+        }
+        else if (parser_1.t.isIdentifier(expr)) {
+            const varName = expr.value;
+            const uniqueKey = `${resourcePath}-${varName}`;
+            let hash = scannedTables.createHashTable[uniqueKey];
+            if (!hash)
+                hash = mergedCreateTable[varName];
+            if (hash) {
+                const obj = scannedTables.createObjectTable[hash];
+                if (obj && typeof obj === 'object')
+                    return obj;
+            }
+            const styleInfo = localCreateStyles[varName];
+            if (styleInfo?.obj)
+                return styleInfo.obj;
+        }
+        return null;
+    };
+    const isStyleFunctionCall = (expr) => {
+        if (!parser_1.t.isCallExpression(expr) || !parser_1.t.isMemberExpression(expr.callee))
+            return false;
+        const callee = expr.callee;
+        if (!parser_1.t.isIdentifier(callee.object) || !parser_1.t.isIdentifier(callee.property))
+            return false;
+        return Boolean(localCreateStyles[callee.object.value]?.functions?.[callee.property.value] ??
+            createFunctionImportMap[callee.object.value]?.[callee.property.value]);
+    };
+    const carriesStyleReference = (expression) => {
+        const node = (0, parser_1.unwrapExpression)(expression);
+        if (node.type === 'ArrayExpression')
+            return node.elements.some((element) => !!element && carriesStyleReference(element.expression));
+        if (isStyleFunctionCall(node))
+            return true;
+        if (parser_1.t.isObjectExpression(node))
+            return false;
+        return resolveStyleObject(node) !== null;
+    };
+    const assertNoStyleArraySpread = (expression) => {
+        const node = (0, parser_1.unwrapExpression)(expression);
+        if (node.type !== 'ArrayExpression')
+            return;
+        const spread = node.elements.find((element) => element?.spread);
+        if (!spread)
+            return;
+        if (carriesStyleReference(node))
+            throwCompilationError(spreadStyleMessage(getSource(spread.expression)), spread.expression);
+    };
+    const resolveDynamicCall = (expr, forceRuntime = false) => {
+        if (!parser_1.t.isCallExpression(expr) || !parser_1.t.isMemberExpression(expr.callee))
+            return null;
+        const callee = expr.callee;
+        if (!parser_1.t.isIdentifier(callee.object) || !parser_1.t.isIdentifier(callee.property))
+            return null;
+        if (!isVisibleReference(callee.object))
+            return null;
+        const styleInfo = localCreateStyles[callee.object.value];
+        const func = styleInfo?.functions?.[callee.property.value] ??
+            createFunctionImportMap[callee.object.value]?.[callee.property.value];
+        if (!func)
+            return null;
+        const callArgs = expr.arguments;
+        if (callArgs.some((a) => a.spread))
+            return null;
+        const tempStaticTable = { ...mergedStaticTable };
+        const providedParams = new Set();
+        const runtime = [];
+        const resolveObjectArg = (argExpr) => (0, parser_1.objectExpressionToObject)({
+            ...argExpr,
+            properties: argExpr.properties.filter((prop) => prop.type === 'Identifier' ||
+                (prop.type === 'KeyValueProperty' &&
+                    isStaticArgValue(prop.value))),
+        }, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable);
+        if (func.named) {
+            const argExpr = callArgs[0]?.expression;
+            if (callArgs.length > 1 ||
+                (argExpr && argExpr.type !== 'ObjectExpression')) {
+                throwCompilationError(`Plumeria: ${getSource(expr)} takes one object argument, because ${callee.property.value} destructures its parameter.`, expr);
+            }
+            const given = new Map();
+            (argExpr?.properties ?? []).forEach((prop) => {
+                if (prop.type === 'Identifier') {
+                    given.set(prop.value, prop);
+                }
+                else if (prop.type === 'KeyValueProperty' &&
+                    (parser_1.t.isIdentifier(prop.key) || parser_1.t.isStringLiteral(prop.key))) {
+                    given.set(String(prop.key.value), prop.value);
+                }
+            });
+            const argObj = argExpr
+                ? (resolveObjectArg(argExpr) ?? {})
+                : {};
+            func.named.forEach(({ key, local }) => {
+                const source = given.get(key);
+                if (!source) {
+                    if (func.defaults?.[local])
+                        return;
+                    return throwCompilationError(`Plumeria: ${getSource(expr)} leaves "${key}" unset, and a dynamic style function has no value to fall back on.`, expr);
+                }
+                if (!forceRuntime &&
+                    isStaticArgValue(source) &&
+                    argObj[key] !== undefined) {
+                    tempStaticTable[local] = argObj[key];
+                    providedParams.add(local);
+                }
+                else
+                    runtime.push({ param: local, source });
+            });
+        }
+        else if (callArgs.length === 1 &&
+            callArgs[0].expression.type === 'ObjectExpression') {
+            if (forceRuntime)
+                return null;
+            const argObj = resolveObjectArg(callArgs[0].expression) ?? {};
+            func.params.forEach((p) => {
+                if (argObj[p] !== undefined) {
+                    tempStaticTable[p] = argObj[p];
+                    providedParams.add(p);
+                }
+            });
+        }
+        else {
+            callArgs.forEach((callArg, i) => {
+                const p = func.params[i];
+                if (!p)
+                    return;
+                runtime.push({ param: p, source: callArg.expression });
+            });
+        }
+        const resolved = (0, dynamicKey_1.resolveDynamicStyle)(func, runtime.map(({ param }) => param), tempStaticTable, dynamicStyleTables, providedParams);
+        const { style, varGroups } = resolved;
+        const vars = [];
+        runtime.forEach(({ param, source }) => {
+            const groups = varGroups.get(param);
+            if (!groups?.length)
+                return;
+            const argStart = source.span.start - baseByteOffset;
+            const argEnd = source.span.end - baseByteOffset;
+            const argSource = sourceBuffer
+                .subarray(argStart, argEnd)
+                .toString('utf-8');
+            const maybeNumber = Number(argSource);
+            groups.forEach(({ cssVar, prop }) => {
+                let valueExpr;
+                const kebabProp = (0, zss_engine_1.camelToKebabCase)(prop);
+                if (!isNaN(maybeNumber) && argSource.trim() === String(maybeNumber)) {
+                    valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(maybeNumber, kebabProp));
+                }
+                else if ((argSource.startsWith('"') && argSource.endsWith('"')) ||
+                    (argSource.startsWith("'") && argSource.endsWith("'"))) {
+                    valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(argSource.slice(1, -1), kebabProp));
+                }
+                else {
+                    valueExpr = (0, dynamicKey_1.isUnitlessProp)(prop)
+                        ? argSource
+                        : `(typeof (${argSource}) === 'number' ? (${argSource}) + 'px' : (${argSource}))`;
+                }
+                vars.push({ cssVar, valueExpr });
+            });
+        });
+        return { style, vars };
+    };
+    const buildClassParts = (args, dynamicClassParts = [], existingClass = '', isStyleProp = false) => {
+        args.forEach((arg) => {
+            arg.expression = resolveLocalStyleAlias(localStyleAliases, arg.expression);
+        });
+        const conditionals = [];
+        const dynamicVars = [];
+        const propVarSpreads = [];
+        let groupIdCounter = 0;
+        let sourceOrder = 0;
+        const baseChunks = [];
+        let baseStyle = {};
+        let isOptimizable = true;
+        const resolveCreateObject = (varName) => {
+            const localStyle = localCreateStyles[varName];
+            if (localStyle?.type === 'create')
+                return localStyle.obj;
+            let hash = scannedTables.createHashTable[`${resourcePath}-${varName}`];
+            if (!hash)
+                hash = mergedCreateTable[varName];
+            if (hash && scannedTables.createObjectTable[hash])
+                return scannedTables.createObjectTable[hash];
+            return null;
+        };
+        const resolveBracketGroup = (node) => {
+            if (!parser_1.t.isMemberExpression(node) ||
+                !parser_1.t.isIdentifier(node.object) ||
+                node.property.type !== 'Computed' ||
+                parser_1.t.isStringLiteral(node.property.expression)) {
+                return null;
+            }
+            if (!isVisibleReference(node.object))
+                return null;
+            const varName = node.object.value;
+            const obj = resolveCreateObject(varName);
+            return obj ? { varName, keyExpr: node.property.expression, obj } : null;
+        };
+        const buildDecision = (node, prefix, off, counter, scoped) => {
+            if (node.type === 'ParenthesisExpression') {
+                return buildDecision(node.expression, prefix, off, counter, scoped);
+            }
+            if (node.type === 'ConditionalExpression') {
+                const a = buildDecision(node.consequent, prefix, off, counter, scoped);
+                if (!a)
+                    return null;
+                const b = buildDecision(node.alternate, prefix, off, counter, scoped);
+                if (!b)
+                    return null;
+                return {
+                    keyExpr: `((${getSource(node.test)}) ? ${a.keyExpr} : ${b.keyExpr})`,
+                    options: [...a.options, ...b.options],
+                    leaves: a.leaves + b.leaves,
+                    hasGroup: a.hasGroup || b.hasGroup,
+                };
+            }
+            if (node.type === 'BinaryExpression' && node.operator === '&&') {
+                const right = buildDecision(node.right, prefix, off, counter, scoped);
+                if (!right)
+                    return null;
+                return {
+                    keyExpr: `((${getSource(node.left)}) ? ${right.keyExpr} : ${JSON.stringify(off)})`,
+                    options: right.options,
+                    leaves: right.leaves,
+                    hasGroup: right.hasGroup,
+                };
+            }
+            const group = resolveBracketGroup(node);
+            if (group) {
+                const tag = scoped ? `${counter.n++}:` : '';
+                const keySource = getSource(group.keyExpr);
+                return {
+                    keyExpr: tag ? `(${JSON.stringify(tag)} + ${keySource})` : keySource,
+                    options: Object.entries(group.obj).map(([value, style]) => ({
+                        value: `${tag}${value}`,
+                        style: style,
+                    })),
+                    leaves: 1,
+                    hasGroup: true,
+                };
+            }
+            const style = resolveStyleObject(node);
+            if (!style)
+                return null;
+            const value = `${prefix}${counter.n++}`;
+            return {
+                keyExpr: JSON.stringify(value),
+                options: [{ value, style }],
+                leaves: 1,
+                hasGroup: false,
+            };
+        };
+        const collectGroupKeys = (node, acc) => {
+            if (node.type === 'ParenthesisExpression') {
+                collectGroupKeys(node.expression, acc);
+            }
+            else if (node.type === 'ConditionalExpression') {
+                collectGroupKeys(node.consequent, acc);
+                collectGroupKeys(node.alternate, acc);
+            }
+            else if (node.type === 'BinaryExpression' && node.operator === '&&') {
+                collectGroupKeys(node.right, acc);
+            }
+            else {
+                const group = resolveBracketGroup(node);
+                if (group)
+                    Object.entries(group.obj).forEach(([key, style]) => {
+                        let styles = acc.get(key);
+                        if (!styles)
+                            acc.set(key, (styles = new Set()));
+                        styles.add(style);
+                    });
+            }
+        };
+        const resolveDecision = (node) => {
+            const groupKeys = new Map();
+            collectGroupKeys(node, groupKeys);
+            let prefix = '#';
+            while ([...groupKeys.keys()].some((k) => k.startsWith(prefix)))
+                prefix += '#';
+            const scoped = [...groupKeys.values()].some((styles) => styles.size > 1);
+            const off = !scoped && groupKeys.has('') ? `${prefix}off` : '';
+            return buildDecision(node, prefix, off, { n: 0 }, scoped);
+        };
+        const collectConditions = (node, currentTestStrings = [], argOrder) => {
+            node = (0, parser_1.unwrapExpression)(node);
+            node = resolveLocalStyleAlias(localStyleAliases, node);
+            if (isNoOpStyle(node))
+                return true;
+            if (node.type === 'ArrayExpression') {
+                return node.elements.every((element) => {
+                    if (!element)
+                        return true;
+                    if (element.spread)
+                        throwCompilationError(spreadStyleMessage(getSource(element.expression)), element.expression);
+                    return collectConditions(element.expression, currentTestStrings, argOrder);
+                });
+            }
+            let branchStyle = resolveStyleObject(node);
+            if (!branchStyle) {
+                const dynamic = resolveDynamicCall(node);
+                if (dynamic) {
+                    if (!isStyleProp) {
+                        throwCompilationError(`Plumeria: css.use(${getSource(node)}) does not support dynamic function keys.`, node);
+                    }
+                    branchStyle = dynamic.style;
+                    dynamic.vars.forEach((v) => dynamicVars.push({
+                        ...v,
+                        test: currentTestStrings.length
+                            ? currentTestStrings.join(' && ')
+                            : undefined,
+                        order: argOrder,
+                    }));
+                }
+            }
+            if (branchStyle) {
+                const staticStyle = branchStyle;
+                if (currentTestStrings.length === 0) {
+                    baseStyle = (0, parser_1.deepMerge)(baseStyle, staticStyle);
+                    baseChunks.push({ order: sourceOrder++, style: staticStyle });
+                }
+                else {
+                    conditionals.push({
+                        test: node,
+                        testString: currentTestStrings.join(' && '),
+                        truthy: staticStyle,
+                        falsy: {},
+                        varName: undefined,
+                        order: sourceOrder++,
+                    });
+                }
+                return true;
+            }
+            if (node.type === 'ConditionalExpression') {
+                const testSource = getSource(node.test);
+                if (currentTestStrings.length === 0) {
+                    const trueStyle = resolveStyleObject(node.consequent);
+                    const falseStyle = resolveStyleObject(node.alternate);
+                    if (trueStyle && falseStyle) {
+                        conditionals.push({
+                            test: node,
+                            testString: testSource,
+                            truthy: trueStyle,
+                            falsy: falseStyle,
+                            varName: undefined,
+                            order: sourceOrder++,
+                        });
+                        return true;
+                    }
+                }
+                const consequentHandled = collectConditions(node.consequent, [...currentTestStrings, `(${testSource})`], argOrder);
+                const alternateHandled = collectConditions(node.alternate, [...currentTestStrings, `!(${testSource})`], argOrder);
+                return consequentHandled && alternateHandled;
+            }
+            else if (node.type === 'BinaryExpression' && node.operator === '&&') {
+                return collectConditions(node.right, [...currentTestStrings, `(${getSource(node.left)})`], argOrder);
+            }
+            else if (node.type === 'ParenthesisExpression') {
+                return collectConditions(node.expression, currentTestStrings, argOrder);
+            }
+            if (pushPropPossibilities(node, currentTestStrings))
+                return true;
+            assertResolvable(node);
+            return false;
+        };
+        const pushPropPossibilities = (expr, gates) => {
+            const isParamMember = parser_1.t.isMemberExpression(expr) &&
+                parser_1.t.isIdentifier(expr.object) &&
+                componentParamNames.has(expr.object.value) &&
+                parser_1.t.isIdentifier(expr.property);
+            if (!parser_1.t.isIdentifier(expr) && !isParamMember)
+                return false;
+            const paramObject = isParamMember
+                ? expr.object.value
+                : undefined;
+            const isPropsMember = Boolean(paramObject &&
+                localCreateStyles[paramObject] === undefined &&
+                mergedCreateTable[paramObject] === undefined);
+            const varName = parser_1.t.isIdentifier(expr)
+                ? expr.value
+                : expr.property.value;
+            const source = parser_1.t.isIdentifier(expr) ? varName : getSource(expr);
+            const owner = ownerComponentOf(expr);
+            const propName = (parser_1.t.isIdentifier(expr) && owner
+                ? propAliases.get(owner)?.get(varName)
+                : undefined) ?? varName;
+            markStylePropApplied(propName, expr);
+            let possibilities = owner
+                ? scannedTables.componentPropsTable?.[`${resourcePath}-${owner}`]?.[propName]
+                : undefined;
+            if (!possibilities) {
+                const candidates = [];
+                for (const key of Object.keys(scannedTables.componentPropsTable || {})) {
+                    if (!key.startsWith(`${resourcePath}-`))
+                        continue;
+                    const entries = scannedTables.componentPropsTable?.[key]?.[propName];
+                    if (entries)
+                        candidates.push(...entries);
+                }
+                if (candidates.length > 0)
+                    possibilities = candidates;
+            }
+            const fallback = owner && propDefaults.get(owner)?.get(propName);
+            if (fallback && !isNoOpStyle((0, parser_1.unwrapExpression)(fallback))) {
+                const style = resolveStyleObject(fallback);
+                if (!style)
+                    throwCompilationError(propDefaultMessage(getSource(fallback)), fallback);
+                const atoms = {};
+                (0, create_1.getStyleRecords)(style).forEach((record) => {
+                    atoms[record.key] = record.hash;
+                });
+                const key = (0, zss_engine_1.genBase36Hash)(Object.values(atoms).join(' '), 1, 8);
+                possibilities = [...(possibilities ?? []), { key, styleObj: style }];
+                const span = fallback.span;
+                for (let index = replacements.length - 1; index >= 0; index--) {
+                    const replacement = replacements[index];
+                    if (replacement.start >= span.start - baseByteOffset &&
+                        replacement.end <= span.end - baseByteOffset)
+                        replacements.splice(index, 1);
+                }
+                excludeSubtreeSpans(fallback);
+                replacements.push({
+                    start: span.start - baseByteOffset,
+                    end: span.end - baseByteOffset,
+                    content: JSON.stringify(key),
+                });
+            }
+            if (!possibilities || possibilities.length === 0) {
+                return Boolean(isPropsMember || (owner && declaredProps.get(owner)?.has(propName)));
+            }
+            const carriesVars = possibilities.some((entry) => entry.hasVars);
+            if (carriesVars && !isStyleProp) {
+                throwCompilationError(`Plumeria: "${varName}" carries a dynamic function key, and css.use() returns only a class name. ` +
+                    `Apply it to ${styleProp} on the element instead.`, expr);
+            }
+            const gate = gates.length ? `(${gates.join(' && ')}) && ` : '';
+            if (carriesVars) {
+                const spread = `...(${gate}${source} && ${source}.vars)`;
+                if (!propVarSpreads.includes(spread))
+                    propVarSpreads.push(spread);
+            }
+            const token = carriesVars
+                ? `((${source} && ${source}.key) || ${source})`
+                : source;
+            const testLHS = gates.length
+                ? `((${gates.join(' && ')}) ? ${token} : "")`
+                : token;
+            const currentGroupId = ++groupIdCounter;
+            const currentOrder = sourceOrder++;
+            const seen = new Set();
+            const pushOption = (valueName, style) => {
+                conditionals.push({
+                    test: expr,
+                    testLHS,
+                    testString: `${testLHS} === ${JSON.stringify(valueName)}`,
+                    truthy: style,
+                    falsy: {},
+                    groupId: currentGroupId,
+                    order: currentOrder,
+                    groupName: undefined,
+                    valueName,
+                    varName,
+                });
+            };
+            possibilities.forEach((entry) => {
+                if (seen.has(entry.key))
+                    return;
+                seen.add(entry.key);
+                pushOption(entry.key, entry.styleObj);
+            });
+            if (gates.length)
+                pushOption('', {});
+            return true;
+        };
+        for (const arg of args) {
+            const expr = arg.expression;
+            if (isNoOpStyle(expr))
+                continue;
+            if (pushPropPossibilities(expr, []))
+                continue;
+            if (parser_1.t.isMemberExpression(expr) &&
+                parser_1.t.isIdentifier(expr.object) &&
+                expr.property.type === 'Computed') {
+                const varName = expr.object.value;
+                const styleObj = isVisibleReference(expr)
+                    ? resolveCreateObject(varName)
+                    : null;
+                if (styleObj) {
+                    const dynExpr = expr.property.expression;
+                    const dynSource = getSource(dynExpr);
+                    const currentGroupId = ++groupIdCounter;
+                    const currentOrder = sourceOrder++;
+                    Object.entries(styleObj).forEach(([optionName, style]) => {
+                        conditionals.push({
+                            test: dynExpr,
+                            testLHS: dynSource,
+                            testString: `${dynSource} === '${optionName}'`,
+                            truthy: style,
+                            falsy: {},
+                            groupId: currentGroupId,
+                            order: currentOrder,
+                            groupName: undefined,
+                            valueName: optionName,
+                            varName,
+                            ownKeys: true,
+                        });
+                    });
+                    continue;
+                }
+            }
+            const decision = resolveDecision(expr);
+            if (decision && (decision.hasGroup || decision.leaves > 2)) {
+                const groupId = ++groupIdCounter;
+                const currentOrder = sourceOrder++;
+                decision.options.forEach(({ value, style }) => conditionals.push({
+                    test: expr,
+                    testLHS: decision.keyExpr,
+                    testString: `${decision.keyExpr} === '${value}'`,
+                    truthy: style,
+                    falsy: {},
+                    groupId,
+                    order: currentOrder,
+                    groupName: undefined,
+                    valueName: value,
+                    varName: undefined,
+                    ownKeys: true,
+                }));
+                continue;
+            }
+            const handled = collectConditions(expr, [], arg.order);
+            if (handled)
+                continue;
+            assertResolvable(expr);
+            isOptimizable = false;
+            break;
+        }
+        if (!isOptimizable ||
+            (args.length === 0 && Object.keys(baseStyle).length === 0)) {
+            return {
+                classParts: [...dynamicClassParts],
+                isOptimizable,
+                baseStyle,
+                dynamicVars,
+                propVarSpreads,
+            };
+        }
+        const stateSources = baseChunks.map(({ order, style }) => ({
+            order,
+            style: style,
+        }));
+        conditionals.forEach((c) => {
+            const order = c.order ?? 0;
+            stateSources.push({ order, style: c.truthy });
+            stateSources.push({ order, style: c.falsy });
+        });
+        const stateWeights = (0, escalation_1.getStateWeights)(stateSources);
+        const participation = {};
+        const registerParticipation = (style, sourceId) => {
+            Object.keys(style).forEach((key) => {
+                if (!participation[key])
+                    participation[key] = new Set();
+                participation[key].add(sourceId);
+            });
+        };
+        registerParticipation(baseStyle, 'base');
+        conditionals
+            .filter((c) => c.groupId === undefined)
+            .forEach((c, idx) => {
+            registerParticipation(c.truthy, `std_${idx}`);
+            registerParticipation(c.falsy, `std_${idx}`);
+        });
+        const variantGroups = {};
+        conditionals.forEach((c) => {
+            if (c.groupId !== undefined) {
+                if (!variantGroups[c.groupId])
+                    variantGroups[c.groupId] = [];
+                variantGroups[c.groupId].push(c);
+            }
+        });
+        Object.entries(variantGroups).forEach(([groupId, opts]) => {
+            opts.forEach((opt) => registerParticipation(opt.truthy, `var_${groupId}`));
+        });
+        const conflictingKeys = new Set();
+        Object.entries(participation).forEach(([key, sources]) => {
+            if (sources.size > 1)
+                conflictingKeys.add(key);
+        });
+        const baseIndependent = {};
+        const baseConflict = {};
+        Object.entries(baseStyle).forEach(([key, val]) => {
+            if (conflictingKeys.has(key))
+                baseConflict[key] = val;
+            else
+                baseIndependent[key] = val;
+        });
+        const indepConditionals = [];
+        const conflictConditionals = [];
+        conditionals.forEach((c) => {
+            const truthyIndep = {};
+            const truthyConf = {};
+            const falsyIndep = {};
+            const falsyConf = {};
+            let hasIndep = false;
+            let hasConf = false;
+            Object.entries(c.truthy).forEach(([k, v]) => {
+                if (conflictingKeys.has(k)) {
+                    truthyConf[k] = v;
+                    hasConf = true;
+                }
+                else {
+                    truthyIndep[k] = v;
+                    hasIndep = true;
+                }
+            });
+            Object.entries(c.falsy).forEach(([k, v]) => {
+                if (conflictingKeys.has(k)) {
+                    falsyConf[k] = v;
+                    hasConf = true;
+                }
+                else {
+                    falsyIndep[k] = v;
+                    hasIndep = true;
+                }
+            });
+            if (hasIndep)
+                indepConditionals.push({
+                    ...c,
+                    truthy: truthyIndep,
+                    falsy: falsyIndep,
+                });
+            if (hasConf)
+                conflictConditionals.push({
+                    ...c,
+                    truthy: truthyConf,
+                    falsy: falsyConf,
+                });
+        });
+        const classParts = [];
+        if (existingClass)
+            classParts.push(existingClass);
+        if (Object.keys(baseIndependent).length > 0) {
+            const className = processStyleRecords(baseIndependent, stateWeights)
+                .map((r) => r.hash)
+                .join(' ');
+            if (className)
+                classParts.push(JSON.stringify(className));
+        }
+        indepConditionals
+            .filter((c) => c.groupId === undefined)
+            .forEach((c) => {
+            const processBranch = (style) => {
+                if (Object.keys(style).length === 0)
+                    return '""';
+                return JSON.stringify(processStyleRecords(style, stateWeights)
+                    .map((r) => r.hash)
+                    .join(' '));
+            };
+            const testStr = c.testString ?? getSource(c.test);
+            classParts.push(`(${testStr} ? ${processBranch(c.truthy)} : ${processBranch(c.falsy)})`);
+        });
+        const indepVarGroups = {};
+        indepConditionals.forEach((c) => {
+            if (c.groupId !== undefined) {
+                if (!indepVarGroups[c.groupId])
+                    indepVarGroups[c.groupId] = [];
+                indepVarGroups[c.groupId].push(c);
+            }
+        });
+        Object.values(indepVarGroups).forEach((options) => {
+            const commonTestExpr = options[0].testLHS ??
+                options[0].testString ??
+                getSource(options[0].test);
+            const lookupMap = {};
+            options.forEach((opt) => {
+                if (opt.valueName !== undefined && opt.truthy) {
+                    const className = processStyleRecords(opt.truthy, stateWeights)
+                        .map((r) => r.hash)
+                        .join(' ');
+                    if (className)
+                        lookupMap[opt.valueName] = className;
+                }
+            });
+            if (Object.keys(lookupMap).length > 0) {
+                const entries = Object.entries(lookupMap)
+                    .map(([k, v]) => `${JSON.stringify(k)}:${JSON.stringify(v)}`)
+                    .join(',');
+                classParts.push(`({${entries}}[${commonTestExpr}] || "")`);
+            }
+        });
+        if (Object.keys(baseConflict).length > 0 ||
+            conflictConditionals.length > 0) {
+            const ordered = [];
+            baseChunks.forEach(({ order, style }) => {
+                const conflicting = {};
+                Object.entries(style).forEach(([key, value]) => {
+                    if (conflictingKeys.has(key))
+                        conflicting[key] = value;
+                });
+                if (Object.keys(conflicting).length === 0)
+                    return;
+                ordered.push({
+                    order,
+                    dimension: {
+                        type: 'const',
+                        options: [{ value: undefined, style: conflicting, label: 'base' }],
+                    },
+                });
+            });
+            conflictConditionals
+                .filter((c) => c.groupId === undefined)
+                .forEach((c) => {
+                ordered.push({
+                    order: c.order ?? 0,
+                    dimension: {
+                        type: 'std',
+                        testExpr: c.testString ?? getSource(c.test),
+                        options: [
+                            { value: 0, style: c.falsy, label: 'false' },
+                            { value: 1, style: c.truthy, label: 'true' },
+                        ],
+                    },
+                });
+            });
+            const conflictVarGroups = {};
+            conflictConditionals.forEach((c) => {
+                if (c.groupId !== undefined) {
+                    if (!conflictVarGroups[c.groupId])
+                        conflictVarGroups[c.groupId] = [];
+                    conflictVarGroups[c.groupId].push(c);
+                }
+            });
+            Object.keys(conflictVarGroups).forEach((id) => {
+                const groupId = Number(id);
+                const opts = conflictVarGroups[groupId];
+                if (opts.some((c) => c.valueName === ''))
+                    return;
+                const off = conditionals.find((c) => c.groupId === groupId && c.valueName === '');
+                if (off)
+                    opts.push({ ...off, truthy: {}, falsy: {} });
+            });
+            Object.entries(conflictVarGroups).forEach(([, opts]) => {
+                ordered.push({
+                    order: opts[0].order ?? 0,
+                    dimension: {
+                        type: 'var',
+                        testExpr: opts[0].testLHS ?? opts[0].testString ?? getSource(opts[0].test),
+                        options: opts.map((opt) => ({
+                            value: opt.valueName,
+                            style: opt.truthy,
+                            label: opt.valueName || 'default',
+                        })),
+                        ownKeys: opts[0].ownKeys,
+                    },
+                });
+            });
+            ordered.sort((a, b) => a.order - b.order);
+            const dimensions = ordered.map((o) => o.dimension);
+            const joined = dimensions.filter((dim) => dim.type !== 'const').length > 1;
+            dimensions.forEach((dim) => {
+                if (!joined || dim.type !== 'var' || !dim.ownKeys)
+                    return;
+                const numbers = {};
+                dim.options.forEach((opt, index) => {
+                    numbers[String(opt.value)] = String(index);
+                    opt.value = String(index);
+                });
+                dim.testExpr = `(${JSON.stringify(numbers)}[${dim.testExpr}] || "")`;
+            });
+            const results = {};
+            const recurse = (dimIndex, currentStyle, keyParts) => {
+                if (dimIndex >= dimensions.length) {
+                    const className = processStyleRecords(currentStyle, stateWeights)
+                        .map((r) => r.hash)
+                        .join(' ');
+                    if (className)
+                        results[keyParts.join('__')] = className;
+                    return;
+                }
+                const dimension = dimensions[dimIndex];
+                dimension.options.forEach((opt) => recurse(dimIndex + 1, (0, parser_1.deepMerge)(currentStyle, opt.style), dimension.type === 'const'
+                    ? keyParts
+                    : [...keyParts, String(opt.value)]));
+            };
+            recurse(0, {}, []);
+            const baseConflictClass = Object.keys(baseConflict).length > 0
+                ? processStyleRecords(baseConflict, stateWeights)
+                    .map((r) => r.hash)
+                    .join(' ')
+                : '';
+            const masterKeyExpr = dimensions
+                .filter((dim) => dim.type !== 'const')
+                .map((dim) => dim.type === 'std'
+                ? `(${dim.testExpr} ? "1" : "0")`
+                : dim.testExpr || '""')
+                .join(' + "__" + ');
+            classParts.push(`(${JSON.stringify(results)}[${masterKeyExpr || '""'}] || ${baseConflictClass ? JSON.stringify(baseConflictClass) : '""'})`);
+        }
+        classParts.push(...dynamicClassParts);
+        return {
+            classParts,
+            isOptimizable,
+            baseStyle,
+            dynamicVars,
+            propVarSpreads,
+        };
+    };
+    (0, parser_1.traverse)(ast, {
+        JSXOpeningElement({ node }) {
+            jsxOpeningElementMap.set(node.span.start, {
+                compKey: (0, parser_1.resolveComponentKey)(node.name, resourcePath, localImports),
+                attributes: node.attributes,
+            });
+        },
+        MemberExpression({ node }) {
+            if (!isVisibleReference(node))
+                return;
+            if (parser_1.t.isIdentifier(node.object) &&
+                (parser_1.t.isIdentifier(node.property) || node.property.type === 'Computed')) {
+                const varName = node.object.value;
+                const uniqueKey = `${resourcePath}-${varName}`;
+                if (node.property.type === 'Computed') {
+                    const dynExpr = node.property.expression;
+                    const dynSource = getSource(dynExpr);
+                    const localStyle = localCreateStyles[varName];
+                    let hashMap;
+                    if (localStyle) {
+                        hashMap = localStyle.hashMap;
+                    }
+                    else {
+                        let hash = scannedTables.createHashTable[uniqueKey];
+                        if (!hash) {
+                            hash = mergedCreateTable[varName];
+                        }
+                        if (hash) {
+                            const obj = scannedTables.createObjectTable[hash];
+                            const atomicMap = scannedTables.createAtomicMapTable[hash];
+                            if (obj && atomicMap) {
+                                hashMap = {};
+                                Object.keys(obj).forEach((key) => {
+                                    if (atomicMap[key]) {
+                                        hashMap[key] = atomicMap[key];
+                                    }
+                                });
+                            }
+                        }
+                    }
+                    if (hashMap) {
+                        replacements.push({
+                            start: node.span.start - baseByteOffset,
+                            end: node.span.end - baseByteOffset,
+                            content: `((${JSON.stringify(hashMap)})[${dynSource}] || {})`,
+                        });
+                    }
+                    return;
+                }
+                const propName = node.property.value;
+                const localStyle = localCreateStyles[varName];
+                if (localStyle && localStyle.type === 'create') {
+                    const atomMap = localStyle.hashMap[propName];
+                    if (atomMap) {
+                        replacements.push({
+                            start: node.span.start - baseByteOffset,
+                            end: node.span.end - baseByteOffset,
+                            content: `(${JSON.stringify(atomMap)})`,
+                        });
+                        return;
+                    }
+                }
+                let hash = scannedTables.createHashTable[uniqueKey];
+                if (!hash) {
+                    hash = mergedCreateTable[varName];
+                }
+                if (hash) {
+                    let atomMap;
+                    if (scannedTables.createAtomicMapTable[hash]) {
+                        atomMap = scannedTables.createAtomicMapTable[hash][propName];
+                    }
+                    if (atomMap) {
+                        replacements.push({
+                            start: node.span.start - baseByteOffset,
+                            end: node.span.end - baseByteOffset,
+                            content: `(${JSON.stringify(atomMap)})`,
+                        });
+                    }
+                }
+                let themeHash = mergedCreateThemeHashTable[varName];
+                if (!themeHash) {
+                    themeHash = scannedTables.createThemeHashTable[uniqueKey];
+                }
+                if (themeHash) {
+                    const atomicMap = scannedTables.createAtomicMapTable[themeHash];
+                    if (atomicMap && atomicMap[propName]) {
+                        replacements.push({
+                            start: node.span.start - baseByteOffset,
+                            end: node.span.end - baseByteOffset,
+                            content: `(${JSON.stringify(atomicMap[propName])})`,
+                        });
+                    }
+                    else {
+                        const cssVarName = (0, zss_engine_1.camelToKebabCase)(propName);
+                        replacements.push({
+                            start: node.span.start - baseByteOffset,
+                            end: node.span.end - baseByteOffset,
+                            content: `(${JSON.stringify(`var(--${themeHash}-${cssVarName})`)})`,
+                        });
+                    }
+                }
+                let staticHash = mergedCreateStaticHashTable[varName];
+                if (!staticHash) {
+                    staticHash = scannedTables.createStaticHashTable[uniqueKey];
+                }
+                if (staticHash) {
+                    const staticObj = scannedTables.createStaticObjectTable[staticHash];
+                    if (staticObj && staticObj[propName] !== undefined) {
+                        replacements.push({
+                            start: node.span.start - baseByteOffset,
+                            end: node.span.end - baseByteOffset,
+                            content: `(${JSON.stringify(staticObj[propName])})`,
+                        });
+                    }
+                }
+            }
+        },
+        Identifier({ node }) {
+            if (excludedSpans.has(node.span.start))
+                return;
+            if (idSpans.has(node.span.start))
+                return;
+            if (!referenceIdents.references.has(node.span.start))
+                return;
+            const prefix = referenceIdents.shorthands.has(node.span.start)
+                ? `${node.value}: `
+                : '';
+            const pushReplacement = (content) => {
+                replacements.push({
+                    start: node.span.start - baseByteOffset,
+                    end: node.span.end - baseByteOffset,
+                    content: `${prefix}${content}`,
+                });
+            };
+            const styleInfo = localCreateStyles[node.value];
+            if (styleInfo) {
+                pushReplacement(`(${JSON.stringify(styleInfo.hashMap)})`);
+                return;
+            }
+            const varName = node.value;
+            const uniqueKey = `${resourcePath}-${varName}`;
+            let hash = mergedCreateTable[varName];
+            if (!hash) {
+                hash = scannedTables.createHashTable[uniqueKey];
+            }
+            if (hash) {
+                const obj = scannedTables.createObjectTable[hash];
+                const atomicMap = scannedTables.createAtomicMapTable[hash];
+                if (obj && atomicMap) {
+                    const hashMap = {};
+                    Object.keys(obj).forEach((key) => {
+                        if (atomicMap[key]) {
+                            hashMap[key] = atomicMap[key];
+                        }
+                    });
+                    pushReplacement(`(${JSON.stringify(hashMap)})`);
+                }
+            }
+            let themeHash = mergedCreateThemeHashTable[varName];
+            if (!themeHash) {
+                themeHash = scannedTables.createThemeHashTable[uniqueKey];
+            }
+            if (themeHash) {
+                const atomicMap = scannedTables.createAtomicMapTable[themeHash];
+                if (atomicMap) {
+                    pushReplacement(`(${JSON.stringify(atomicMap)})`);
+                    return;
+                }
+            }
+            let staticHash = mergedCreateStaticHashTable[varName];
+            if (!staticHash) {
+                staticHash = scannedTables.createStaticHashTable[uniqueKey];
+            }
+            if (staticHash) {
+                const staticObj = scannedTables.createStaticObjectTable[staticHash];
+                if (staticObj) {
+                    pushReplacement(`(${JSON.stringify(staticObj)})`);
+                }
+            }
+        },
+        JSXAttribute({ node }) {
+            if (node.name.type !== 'Identifier')
+                return;
+            const attrName = node.name.value;
+            if (attrName !== styleProp) {
+                let compKey = null;
+                for (const [, val] of jsxOpeningElementMap) {
+                    const found = val.attributes
+                        .filter((a) => a.type === 'JSXAttribute')
+                        .find((a) => a.span.start === node.span.start);
+                    if (found) {
+                        compKey = val.compKey;
+                        break;
+                    }
+                }
+                if (compKey) {
+                    if (node.value?.type === 'JSXExpressionContainer')
+                        assertNoStyleArraySpread(node.value.expression);
+                    const list = scannedTables.componentPropsTable?.[compKey]?.[attrName];
+                    if (list &&
+                        node.value &&
+                        node.value.type === 'JSXExpressionContainer') {
+                        const expr = node.value.expression;
+                        const carrierFor = (subNode, calls) => {
+                            const vars = [];
+                            let unresolved = false;
+                            for (const expression of calls ?? [subNode])
+                                (0, parser_1.traverse)(expression, {
+                                    CallExpression({ node: call }) {
+                                        if (!isStyleFunctionCall(call))
+                                            return;
+                                        const resolved = resolveDynamicCall(call, true);
+                                        if (!resolved) {
+                                            unresolved = true;
+                                            return;
+                                        }
+                                        vars.push(...resolved.vars);
+                                    },
+                                });
+                            if (unresolved)
+                                return null;
+                            return `{ ${foldDynamicVars(vars).join(', ')} }`;
+                        };
+                        const replaceWithKey = (subNode) => {
+                            const entries = list.filter((entry) => entry.spanStart === subNode.span.start &&
+                                entry.filePath === resourcePath);
+                            if (!entries.length)
+                                return false;
+                            let content = '""';
+                            for (const entry of [...entries].reverse()) {
+                                let value = JSON.stringify(entry.key);
+                                if (entry.hasVars) {
+                                    const carrier = carrierFor(subNode, entry.dynamicCalls);
+                                    if (!carrier)
+                                        return false;
+                                    value = `{ key: ${value}, vars: ${carrier} }`;
+                                }
+                                const condition = entry.conditions
+                                    ?.map(({ test, truthy }) => `${truthy ? '' : '!'}(${getSource(test)})`)
+                                    .join(' && ');
+                                content = condition
+                                    ? `((${condition}) ? ${value} : ${content})`
+                                    : value;
+                                processStyleRecords(entry.styleObj);
+                            }
+                            replacements.push({
+                                start: subNode.span.start - baseByteOffset,
+                                end: subNode.span.end - baseByteOffset,
+                                content,
+                            });
+                            return true;
+                        };
+                        (0, parser_1.traverse)(expr, {
+                            MemberExpression({ node: subNode }) {
+                                if (replaceWithKey(subNode)) {
+                                    excludeSubtreeSpans(subNode);
+                                }
+                            },
+                            ArrayExpression({ node: subNode }) {
+                                if (replaceWithKey(subNode)) {
+                                    excludeSubtreeSpans(subNode);
+                                }
+                            },
+                            CallExpression({ node: subNode }) {
+                                if (replaceWithKey(subNode)) {
+                                    excludeSubtreeSpans(subNode);
+                                }
+                            },
+                        });
+                    }
+                }
+                return;
+            }
+            if (!node.value || node.value.type !== 'JSXExpressionContainer')
+                return;
+            const expr = node.value.expression;
+            const args = expr.type === 'ArrayExpression'
+                ? expr.elements
+                    .filter((el) => el != null)
+                    .map((el) => {
+                    if (el.spread)
+                        throwCompilationError(spreadStyleMessage(getSource(el.expression)), el.expression);
+                    return { expression: el.expression };
+                })
+                : [{ expression: expr }];
+            const dynamicClassParts = [];
+            const existingStyleParts = [];
+            let attributes = [];
+            for (const [, val] of jsxOpeningElementMap) {
+                const found = val.attributes
+                    .filter((a) => a.type === 'JSXAttribute')
+                    .find((a) => a.span.start === node.span.start);
+                if (found) {
+                    attributes = val.attributes;
+                    break;
+                }
+            }
+            const classNameAttr = attributes.find((attr) => attr.type === 'JSXAttribute' &&
+                attr.name.type === 'Identifier' &&
+                attr.name.value === 'className');
+            let existingClassExpr = '';
+            if (classNameAttr) {
+                replacements.push({
+                    start: classNameAttr.span.start - baseByteOffset,
+                    end: classNameAttr.span.end - baseByteOffset,
+                    content: '',
+                });
+                if (classNameAttr.value?.type === 'StringLiteral') {
+                    existingClassExpr = JSON.stringify(classNameAttr.value.value);
+                }
+                else if (classNameAttr.value?.type === 'JSXExpressionContainer') {
+                    existingClassExpr = `(${deferSource(classNameAttr.value.expression)})`;
+                }
+            }
+            const styleAttrExisting = attributes.find((attr) => attr.type === 'JSXAttribute' &&
+                attr.name.type === 'Identifier' &&
+                attr.name.value === 'style');
+            let existingStyleExpr = '';
+            if (styleAttrExisting) {
+                replacements.push({
+                    start: styleAttrExisting.span.start - baseByteOffset,
+                    end: styleAttrExisting.span.end - baseByteOffset,
+                    content: '',
+                });
+                if (styleAttrExisting.value?.type === 'JSXExpressionContainer') {
+                    const innerExpr = styleAttrExisting.value?.expression;
+                    if (innerExpr.type === 'ObjectExpression') {
+                        for (const property of innerExpr.properties) {
+                            const token = deferProperty(property);
+                            if (token)
+                                existingStyleParts.push(token);
+                        }
+                    }
+                    else {
+                        existingStyleExpr = `...(${deferSource(innerExpr)})`;
+                    }
+                }
+            }
+            const { classParts, isOptimizable, baseStyle, dynamicVars, propVarSpreads, } = buildClassParts(args, dynamicClassParts, existingClassExpr, true);
+            if (!isOptimizable) {
+                throwCompilationError(`Plumeria: Dynamic or unresolvable style object "${getSource(expr)}" is not supported.`, expr);
+            }
+            const styleParts = [
+                ...existingStyleParts,
+                ...foldDynamicVars(dynamicVars),
+                ...propVarSpreads,
+            ];
+            const styleAttr = styleParts.length > 0 || existingStyleExpr
+                ? ` style={{ ${[existingStyleExpr, ...styleParts].filter(Boolean).join(', ')} }}`
+                : '';
+            if (isOptimizable &&
+                (args.length > 0 ||
+                    Object.keys(baseStyle).length > 0 ||
+                    dynamicClassParts.length > 0)) {
+                const replacement = classParts.length > 0 ? classParts.join(' + " " + ') : '""';
+                replacements.push({
+                    start: node.span.start - baseByteOffset,
+                    end: node.span.end - baseByteOffset,
+                    content: `className={${replacement}}${styleAttr}`,
+                });
+            }
+            else {
+                const keptClass = existingClassExpr
+                    ? `className={${existingClassExpr}}`
+                    : '';
+                replacements.push({
+                    start: node.span.start - baseByteOffset,
+                    end: node.span.end - baseByteOffset,
+                    content: `${keptClass}${styleAttr}`,
+                });
+            }
+        },
+        CallExpression({ node }) {
+            const callee = node.callee;
+            let isUseCall = false;
+            if (parser_1.t.isMemberExpression(callee) &&
+                parser_1.t.isIdentifier(callee.object) &&
+                parser_1.t.isIdentifier(callee.property)) {
+                const objectName = callee.object.value;
+                const propertyName = callee.property.value;
+                if (localCreateStyles[objectName]?.functions?.[propertyName] ||
+                    createFunctionImportMap[objectName]?.[propertyName]) {
+                    dynamicFnCalls.push(node);
+                }
+                const alias = plumeriaAliases[objectName];
+                if (alias === 'NAMESPACE' && propertyName === 'use') {
+                    isUseCall = true;
+                }
+            }
+            else if (parser_1.t.isIdentifier(callee)) {
+                const calleeName = callee.value;
+                const originalName = plumeriaAliases[calleeName];
+                if (originalName === 'use') {
+                    isUseCall = true;
+                }
+            }
+            if (!isUseCall)
+                return;
+            const args = node.arguments;
+            for (const arg of args) {
+                const expr = arg.expression;
+                if (!parser_1.t.isCallExpression(expr) || !parser_1.t.isMemberExpression(expr.callee))
+                    continue;
+                const callee = expr.callee;
+                if (!parser_1.t.isIdentifier(callee.object) || !parser_1.t.isIdentifier(callee.property))
+                    continue;
+                const varName = callee.object.value;
+                const propKey = callee.property.value;
+                const styleInfo = localCreateStyles[varName];
+                if (styleInfo?.functions?.[propKey]) {
+                    throwCompilationError(`Plumeria: css.use(${getSource(expr)}) does not support dynamic function keys.`, expr);
+                }
+            }
+            const { classParts, isOptimizable } = buildClassParts(args);
+            if (isOptimizable) {
+                const replacement = classParts.length > 0 ? classParts.join(' + " " + ') : '""';
+                replacements.push({
+                    start: node.span.start - baseByteOffset,
+                    end: node.span.end - baseByteOffset,
+                    content: replacement,
+                });
+            }
+            else {
+                throwCompilationError(`Plumeria: Dynamic or unresolvable style object "${getSource(node)}" is not supported.`, node);
+            }
+        },
+    });
+    for (const { name, node } of components) {
+        const props = scannedTables.componentPropsTable?.[`${resourcePath}-${name}`];
+        for (const propName of Object.keys(props ?? {})) {
+            if (appliedStyleProps.has(`${name}:${propName}`)) {
+                continue;
+            }
+            throwCompilationError(`Plumeria: "${propName}" is a style received through a prop but is never applied ` +
+                `to ${styleProp} or css.use() here. Apply it on an element this component renders; ` +
+                `a style prop cannot be passed on to another component.`, node);
+        }
+    }
+    const buildExportedInit = (info) => {
+        const keys = Object.keys(info.obj);
+        if (!isDev || keys.length === 0) {
+            return JSON.stringify('');
+        }
+        const head = JSON.stringify(`Plumeria: "${info.name}.`);
+        const tail = JSON.stringify(`" was read at runtime. The file that read it was not compiled ` +
+            `because it does not reference "@plumeria/core" — add ` +
+            `import '@plumeria/core'; to it (see the stack below). Defined in ` +
+            `${path.relative(root, baseId)}.`);
+        return (`(()=>{const k=new Set(${JSON.stringify(keys)});` +
+            `return new Proxy({},{get(t,p){` +
+            `if(typeof p==="string"&&k.has(p))throw new Error(${head}+p+${tail});` +
+            `return t[p];}});})()`);
+    };
+    Object.values(localCreateStyles).forEach((info) => {
+        if (info.isExported) {
+            replacements.push({
+                start: info.initSpan.start,
+                end: info.initSpan.end,
+                content: buildExportedInit(info),
+            });
+        }
+        else {
+            replacements.push({
+                start: info.declSpan.start,
+                end: info.declSpan.end,
+                content: '',
+            });
+        }
+    });
+    dynamicFnCalls.forEach((call) => {
+        const start = call.span.start - baseByteOffset;
+        const end = call.span.end - baseByteOffset;
+        const isResolved = replacements.some((r) => r.start <= start && r.end >= end);
+        if (!isResolved) {
+            throwCompilationError(`Plumeria: ${getSource(call)} is only supported in the ${styleProp} prop. ` +
+                `A dynamic style function resolves to a class name and a CSS variable on the element itself, ` +
+                `so it cannot be passed through another prop or read as a value.`, call);
+        }
+    });
+    for (const deferred of deferredSources) {
+        let cursor = deferred.start;
+        const pieces = [];
+        for (const replacement of [...replacements].sort((a, b) => a.start - b.start || b.end - a.end)) {
+            if (replacement.start < cursor || replacement.end > deferred.end)
+                continue;
+            pieces.push(sourceBuffer.subarray(cursor, replacement.start).toString('utf-8'), replacement.content);
+            cursor = replacement.end;
+        }
+        pieces.push(sourceBuffer.subarray(cursor, deferred.end).toString('utf-8'));
+        const content = pieces.join('');
+        for (const replacement of replacements)
+            replacement.content = replacement.content.replaceAll(deferred.token, content);
+    }
+    const buffer = Buffer.from(source);
+    let offset = 0;
+    const parts = [];
+    replacements
+        .sort((a, b) => a.start - b.start || b.end - a.end)
+        .forEach((r) => {
+        if (r.start < offset)
+            return;
+        parts.push(buffer.subarray(offset, r.start));
+        parts.push(Buffer.from(r.content));
+        offset = r.end;
+    });
+    parts.push(buffer.subarray(offset));
+    const transformedSource = Buffer.concat(parts).toString();
+    return { code: transformedSource, sheets: extractedSheets };
+};
+exports.transformSource = transformSource;