@plumeria/turbopack-loader 10.0.6 → 10.0.8

package/dist/index.js

@@ -75,6 +75,16 @@ async function loader(source) {
             extractedSheets.push(sheet);
         }
     };
+    const processStyleRecords = (style) => {
+        const records = (0, utils_1.getStyleRecords)(style);
+        if (!isProduction) {
+            (0, utils_1.extractOndemandStyles)(style, extractedSheets, scannedTables);
+            records.forEach((r) => {
+                addSheet(r.sheet);
+            });
+        }
+        return records;
+    };
     const localConsts = (0, utils_1.collectLocalConsts)(ast);
     const importMap = {};
     const createThemeImportMap = {};
@@ -153,28 +163,40 @@ async function loader(source) {
         mergedKeyframesTable[key] = scannedTables.keyframesHashTable[key];
     }
     for (const key of Object.keys(importMap)) {
-        mergedKeyframesTable[key] = importMap[key];
+        const val = importMap[key];
+        if (typeof val === 'string') {
+            mergedKeyframesTable[key] = val;
+        }
     }
     const mergedViewTransitionTable = {};
     for (const key of Object.keys(scannedTables.viewTransitionHashTable)) {
         mergedViewTransitionTable[key] = scannedTables.viewTransitionHashTable[key];
     }
     for (const key of Object.keys(importMap)) {
-        mergedViewTransitionTable[key] = importMap[key];
+        const val = importMap[key];
+        if (typeof val === 'string') {
+            mergedViewTransitionTable[key] = val;
+        }
     }
     const mergedCreateTable = {};
     for (const key of Object.keys(scannedTables.createHashTable)) {
         mergedCreateTable[key] = scannedTables.createHashTable[key];
     }
     for (const key of Object.keys(importMap)) {
-        mergedCreateTable[key] = importMap[key];
+        const val = importMap[key];
+        if (typeof val === 'string') {
+            mergedCreateTable[key] = val;
+        }
     }
     const mergedVariantsTable = {};
     for (const key of Object.keys(scannedTables.variantsHashTable)) {
         mergedVariantsTable[key] = scannedTables.variantsHashTable[key];
     }
     for (const key of Object.keys(importMap)) {
-        mergedVariantsTable[key] = importMap[key];
+        const val = importMap[key];
+        if (typeof val === 'string') {
+            mergedVariantsTable[key] = val;
+        }
     }
     const mergedCreateThemeHashTable = {};
     for (const key of Object.keys(scannedTables.createThemeHashTable)) {
@@ -206,10 +228,9 @@ async function loader(source) {
     const idSpans = new Set();
     const excludedSpans = new Set();
     const checkVariantAssignment = (decl) => {
-        if (decl.init &&
-            utils_1.t.isCallExpression(decl.init) &&
-            utils_1.t.isIdentifier(decl.init.callee)) {
-            const varName = decl.init.callee.value;
+        const init = decl.init;
+        if (init && utils_1.t.isCallExpression(init) && utils_1.t.isIdentifier(init.callee)) {
+            const varName = init.callee.value;
             if ((localCreateStyles[varName] &&
                 localCreateStyles[varName].type === 'variant') ||
                 mergedVariantsTable[varName]) {
@@ -219,11 +240,12 @@ async function loader(source) {
     };
     const registerStyle = (node, declSpan, isExported) => {
         let propName;
+        const init = node.init;
         if (utils_1.t.isIdentifier(node.id) &&
-            node.init &&
-            utils_1.t.isCallExpression(node.init) &&
-            node.init.arguments.length >= 1) {
-            const callee = node.init.callee;
+            init &&
+            utils_1.t.isCallExpression(init) &&
+            init.arguments.length >= 1) {
+            const callee = init.callee;
             if (utils_1.t.isMemberExpression(callee) &&
                 utils_1.t.isIdentifier(callee.object) &&
                 utils_1.t.isIdentifier(callee.property)) {
@@ -242,48 +264,41 @@ async function loader(source) {
                 }
             }
         }
-        if (propName) {
+        if (propName && init && utils_1.t.isCallExpression(init)) {
             if (propName === 'create' &&
-                utils_1.t.isObjectExpression(node.init.arguments[0].expression)) {
-                const obj = (0, utils_1.objectExpressionToObject)(node.init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
+                utils_1.t.isObjectExpression(init.arguments[0].expression)) {
+                const obj = (0, utils_1.objectExpressionToObject)(init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
                 if (obj) {
                     const hashMap = {};
                     Object.entries(obj).forEach(([key, style]) => {
                         if (typeof style !== 'object' || style === null)
                             return;
                         const records = (0, utils_1.getStyleRecords)(style);
-                        if (!isProduction) {
-                            (0, utils_1.extractOndemandStyles)(style, extractedSheets, scannedTables);
-                            records.forEach((r) => {
-                                addSheet(r.sheet);
-                            });
-                        }
                         const atomMap = {};
                         records.forEach((r) => (atomMap[r.key] = r.hash));
                         hashMap[key] = atomMap;
                     });
-                    const objExpr = node.init.arguments[0].expression;
+                    const styleFunctions = {};
+                    const objExpr = init.arguments[0].expression;
                     objExpr.properties.forEach((prop) => {
                         if (prop.type !== 'KeyValueProperty' ||
                             prop.key.type !== 'Identifier')
                             return;
-                        const isArrow = prop.value.type === 'ArrowFunctionExpression';
-                        const isFunc = prop.value.type === 'FunctionExpression';
-                        if (!isArrow && !isFunc)
+                        const func = prop.value;
+                        if (func.type !== 'ArrowFunctionExpression' &&
+                            func.type !== 'FunctionExpression')
                             return;
-                        const key = prop.key.value;
-                        const params = prop.value.params.map((p) => p.type === 'Identifier' ? p.value : (p.pat?.value ?? 'arg'));
-                        const cssVarInfo = {};
-                        const tempStaticTable = { ...mergedStaticTable };
-                        const substitutedArgs = params.map((paramName) => {
-                            const cssVar = `--${key}-${paramName}`;
-                            cssVarInfo[paramName] = { cssVar, propKey: '' };
-                            return `var(${cssVar})`;
-                        });
-                        params.forEach((paramName, i) => {
-                            tempStaticTable[paramName] = substitutedArgs[i];
+                        const params = func.params.map((p) => {
+                            if (utils_1.t.isIdentifier(p))
+                                return p.value;
+                            if (typeof p === 'object' &&
+                                p !== null &&
+                                'pat' in p &&
+                                utils_1.t.isIdentifier(p.pat))
+                                return p.pat.value;
+                            return 'arg';
                         });
-                        let actualBody = prop.value.body;
+                        let actualBody = func.body;
                         if (actualBody?.type === 'ParenthesisExpression')
                             actualBody = actualBody.expression;
                         if (actualBody?.type === 'BlockStatement') {
@@ -293,52 +308,42 @@ async function loader(source) {
                             if (actualBody?.type === 'ParenthesisExpression')
                                 actualBody = actualBody.expression;
                         }
-                        if (!actualBody || actualBody.type !== 'ObjectExpression')
-                            return;
-                        const substituted = (0, utils_1.objectExpressionToObject)(actualBody, tempStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
-                        if (!substituted)
-                            return;
-                        for (const [, info] of Object.entries(cssVarInfo)) {
-                            const cssVar = info.cssVar;
-                            const propKey = Object.keys(substituted).find((k) => typeof substituted[k] === 'string' &&
-                                substituted[k].includes(cssVar));
-                            if (propKey) {
-                                info.propKey = propKey;
-                            }
+                        if (actualBody && actualBody.type === 'ObjectExpression') {
+                            styleFunctions[prop.key.value] = {
+                                params,
+                                body: actualBody,
+                            };
                         }
-                        const records = (0, utils_1.getStyleRecords)(substituted);
-                        records.forEach((r) => addSheet(r.sheet));
-                        const atomMap = {};
-                        records.forEach((r) => (atomMap[r.key] = r.hash));
-                        atomMap['__cssVars__'] = JSON.stringify(cssVarInfo);
-                        hashMap[key] = atomMap;
                     });
                     if (utils_1.t.isIdentifier(node.id)) {
                         idSpans.add(node.id.span.start);
                     }
-                    localCreateStyles[node.id.value] = {
-                        name: node.id.value,
-                        type: 'create',
-                        obj,
-                        hashMap,
-                        isExported,
-                        initSpan: {
-                            start: node.init.span.start - baseByteOffset,
-                            end: node.init.span.end - baseByteOffset,
-                        },
-                        declSpan: {
-                            start: declSpan.start - baseByteOffset,
-                            end: declSpan.end - baseByteOffset,
-                        },
-                    };
+                    if (utils_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 === 'variants' &&
-                utils_1.t.isObjectExpression(node.init.arguments[0].expression)) {
+                utils_1.t.isObjectExpression(init.arguments[0].expression)) {
                 if (utils_1.t.isIdentifier(node.id)) {
                     idSpans.add(node.id.span.start);
                 }
-                const obj = (0, utils_1.objectExpressionToObject)(node.init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable, (name) => {
+                const obj = (0, utils_1.objectExpressionToObject)(init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable, (name) => {
                     if (localCreateStyles[name]) {
                         return localCreateStyles[name].obj;
                     }
@@ -351,47 +356,51 @@ async function loader(source) {
                     return undefined;
                 });
                 const { hashMap } = (0, utils_1.processVariants)(obj);
-                localCreateStyles[node.id.value] = {
-                    name: node.id.value,
-                    type: 'variant',
-                    obj,
-                    hashMap,
-                    isExported,
-                    initSpan: {
-                        start: node.init.span.start - baseByteOffset,
-                        end: node.init.span.end - baseByteOffset,
-                    },
-                    declSpan: {
-                        start: declSpan.start - baseByteOffset,
-                        end: declSpan.end - baseByteOffset,
-                    },
-                };
+                if (utils_1.t.isIdentifier(node.id)) {
+                    localCreateStyles[node.id.value] = {
+                        name: node.id.value,
+                        type: 'variant',
+                        obj,
+                        hashMap,
+                        isExported,
+                        initSpan: {
+                            start: init.span.start - baseByteOffset,
+                            end: init.span.end - baseByteOffset,
+                        },
+                        declSpan: {
+                            start: declSpan.start - baseByteOffset,
+                            end: declSpan.end - baseByteOffset,
+                        },
+                    };
+                }
             }
             else if (propName === 'createTheme' &&
-                utils_1.t.isObjectExpression(node.init.arguments[0].expression)) {
+                utils_1.t.isObjectExpression(init.arguments[0].expression)) {
                 if (utils_1.t.isIdentifier(node.id)) {
                     idSpans.add(node.id.span.start);
                 }
-                const obj = (0, utils_1.objectExpressionToObject)(node.init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
+                const obj = (0, utils_1.objectExpressionToObject)(init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
                 const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
-                const uniqueKey = `${resourcePath}-${node.id.value}`;
-                scannedTables.createThemeHashTable[uniqueKey] = hash;
-                scannedTables.createThemeObjectTable[hash] = obj;
-                localCreateStyles[node.id.value] = {
-                    name: node.id.value,
-                    type: 'constant',
-                    obj,
-                    hashMap: scannedTables.createAtomicMapTable[hash],
-                    isExported,
-                    initSpan: {
-                        start: node.init.span.start - baseByteOffset,
-                        end: node.init.span.end - baseByteOffset,
-                    },
-                    declSpan: {
-                        start: declSpan.start - baseByteOffset,
-                        end: declSpan.end - baseByteOffset,
-                    },
-                };
+                if (utils_1.t.isIdentifier(node.id)) {
+                    const uniqueKey = `${resourcePath}-${node.id.value}`;
+                    scannedTables.createThemeHashTable[uniqueKey] = hash;
+                    scannedTables.createThemeObjectTable[hash] = obj;
+                    localCreateStyles[node.id.value] = {
+                        name: node.id.value,
+                        type: 'constant',
+                        obj,
+                        hashMap: scannedTables.createAtomicMapTable[hash],
+                        isExported,
+                        initSpan: {
+                            start: init.span.start - baseByteOffset,
+                            end: init.span.end - baseByteOffset,
+                        },
+                        declSpan: {
+                            start: declSpan.start - baseByteOffset,
+                            end: declSpan.end - baseByteOffset,
+                        },
+                    };
+                }
             }
         }
     };
@@ -402,7 +411,7 @@ async function loader(source) {
                     if (specifier.local) {
                         excludedSpans.add(specifier.local.span.start);
                     }
-                    if (specifier.imported) {
+                    if (specifier.type === 'ImportSpecifier' && specifier.imported) {
                         excludedSpans.add(specifier.imported.span.start);
                     }
                 });
@@ -447,17 +456,18 @@ async function loader(source) {
             }
             if (propName) {
                 const args = node.arguments;
-                if (propName === 'keyframes' &&
-                    args.length > 0 &&
-                    utils_1.t.isObjectExpression(args[0].expression)) {
-                    const obj = (0, utils_1.objectExpressionToObject)(args[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
-                    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}`),
-                    });
+                if (propName === 'keyframes') {
+                    const expr = args[0].expression;
+                    if (utils_1.t.isObjectExpression(expr)) {
+                        const obj = (0, utils_1.objectExpressionToObject)(expr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
+                        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 &&
@@ -511,8 +521,7 @@ async function loader(source) {
         }
         else if (utils_1.t.isMemberExpression(expr) &&
             utils_1.t.isIdentifier(expr.object) &&
-            (utils_1.t.isIdentifier(expr.property) ||
-                expr.property.type === 'Computed')) {
+            (utils_1.t.isIdentifier(expr.property) || expr.property.type === 'Computed')) {
             if (expr.property.type === 'Computed')
                 return {};
             const varName = expr.object.value;
@@ -647,8 +656,9 @@ async function loader(source) {
                                     const currentGroupId = ++groupIdCounter;
                                     const valSource = getSource(valExpr);
                                     if (valExpr.type === 'StringLiteral') {
-                                        if (groupVariants[valExpr.value])
-                                            baseStyle = (0, utils_1.deepMerge)(baseStyle, groupVariants[valExpr.value]);
+                                        const groupVariantsAsObj = groupVariants;
+                                        if (groupVariantsAsObj[valExpr.value])
+                                            baseStyle = (0, utils_1.deepMerge)(baseStyle, groupVariantsAsObj[valExpr.value]);
                                         continue;
                                     }
                                     Object.entries(groupVariants).forEach(([optionName, style]) => {
@@ -822,7 +832,7 @@ async function loader(source) {
         if (existingClass)
             classParts.push(JSON.stringify(existingClass));
         if (Object.keys(baseIndependent).length > 0) {
-            const className = (0, utils_1.getStyleRecords)(baseIndependent)
+            const className = processStyleRecords(baseIndependent)
                 .map((r) => r.hash)
                 .join(' ');
             if (className)
@@ -834,7 +844,7 @@ async function loader(source) {
             const processBranch = (style) => {
                 if (Object.keys(style).length === 0)
                     return '""';
-                return JSON.stringify((0, utils_1.getStyleRecords)(style)
+                return JSON.stringify(processStyleRecords(style)
                     .map((r) => r.hash)
                     .join(' '));
             };
@@ -856,7 +866,7 @@ async function loader(source) {
             const lookupMap = {};
             options.forEach((opt) => {
                 if (opt.valueName && opt.truthy) {
-                    const className = (0, utils_1.getStyleRecords)(opt.truthy)
+                    const className = processStyleRecords(opt.truthy)
                         .map((r) => r.hash)
                         .join(' ');
                     if (className)
@@ -907,7 +917,7 @@ async function loader(source) {
             const results = {};
             const recurse = (dimIndex, currentStyle, keyParts) => {
                 if (dimIndex >= dimensions.length) {
-                    const className = (0, utils_1.getStyleRecords)(currentStyle)
+                    const className = processStyleRecords(currentStyle)
                         .map((r) => r.hash)
                         .join(' ');
                     if (className)
@@ -921,7 +931,7 @@ async function loader(source) {
             };
             recurse(0, baseConflict, []);
             const baseConflictClass = Object.keys(baseConflict).length > 0
-                ? (0, utils_1.getStyleRecords)(baseConflict)
+                ? processStyleRecords(baseConflict)
                     .map((r) => r.hash)
                     .join(' ')
                 : '';
@@ -1066,20 +1076,24 @@ async function loader(source) {
             const expr = node.value.expression;
             let args = expr.type === 'ArrayExpression'
                 ? expr.elements
-                    .filter(Boolean)
-                    .map((el) => ({ expression: el.expression ?? el }))
+                    .filter((el) => el !== undefined)
+                    .map((el) => ({ expression: el.expression }))
                 : [{ expression: expr }];
             const dynamicClassParts = [];
             const dynamicStyleParts = [];
             let attributes = [];
             for (const [, attrs] of jsxOpeningElementMap) {
-                const found = attrs.find((a) => a.span?.start === node.span.start);
+                const found = attrs
+                    .filter((a) => a.type === 'JSXAttribute')
+                    .find((a) => a.span.start === node.span.start);
                 if (found) {
                     attributes = attrs;
                     break;
                 }
             }
-            const classNameAttr = attributes.find((attr) => attr.name?.value === 'className');
+            const classNameAttr = attributes.find((attr) => attr.type === 'JSXAttribute' &&
+                attr.name.type === 'Identifier' &&
+                attr.name.value === 'className');
             let existingClass = '';
             if (classNameAttr?.value?.type === 'StringLiteral') {
                 existingClass = classNameAttr.value.value;
@@ -1089,23 +1103,27 @@ async function loader(source) {
                     content: '',
                 });
             }
-            const styleAttrExisting = attributes.find((attr) => attr.name?.value === 'style');
+            const styleAttrExisting = attributes.find((attr) => attr.type === 'JSXAttribute' &&
+                attr.name.type === 'Identifier' &&
+                attr.name.value === 'style');
             if (styleAttrExisting) {
                 replacements.push({
                     start: styleAttrExisting.span.start - baseByteOffset,
                     end: styleAttrExisting.span.end - baseByteOffset,
                     content: '',
                 });
-                const innerExpr = styleAttrExisting.value?.expression;
-                if (innerExpr?.type === 'ObjectExpression') {
-                    const start = innerExpr.span.start - baseByteOffset;
-                    const end = innerExpr.span.end - baseByteOffset;
-                    const innerSource = sourceBuffer
-                        .subarray(start, end)
-                        .toString('utf-8');
-                    const stripped = innerSource.slice(1, -1).trim();
-                    if (stripped)
-                        dynamicStyleParts.push(stripped);
+                if (styleAttrExisting.value?.type === 'JSXExpressionContainer') {
+                    const innerExpr = styleAttrExisting.value?.expression;
+                    if (innerExpr?.type === 'ObjectExpression') {
+                        const start = innerExpr.span.start - baseByteOffset;
+                        const end = innerExpr.span.end - baseByteOffset;
+                        const innerSource = sourceBuffer
+                            .subarray(start, end)
+                            .toString('utf-8');
+                        const stripped = innerSource.slice(1, -1).trim();
+                        if (stripped)
+                            dynamicStyleParts.push(stripped);
+                    }
                 }
             }
             args = args.filter((arg) => {
@@ -1118,44 +1136,67 @@ async function loader(source) {
                 const varName = callee.object.value;
                 const propKey = callee.property.value;
                 const styleInfo = localCreateStyles[varName];
-                const atomMap = styleInfo?.hashMap?.[propKey];
-                if (!atomMap?.['__cssVars__'])
-                    return true;
-                const cssVarInfo = JSON.parse(atomMap['__cssVars__']);
-                const hashes = Object.entries(atomMap)
-                    .filter(([k]) => k !== '__cssVars__')
-                    .map(([, v]) => v)
-                    .join(' ');
-                if (hashes)
-                    dynamicClassParts.push(JSON.stringify(hashes));
-                const callArgs = expr.arguments;
-                Object.entries(cssVarInfo).forEach(([_, { cssVar, propKey: targetProp }], i) => {
-                    const callArg = callArgs[i];
-                    if (!callArg)
-                        return;
-                    const argStart = callArg.expression.span.start - baseByteOffset;
-                    const argEnd = callArg.expression.span.end - baseByteOffset;
-                    const argSource = sourceBuffer
-                        .subarray(argStart, argEnd)
-                        .toString('utf-8');
-                    let valueExpr;
-                    const maybeNumber = Number(argSource);
-                    if (!isNaN(maybeNumber) &&
-                        argSource.trim() === String(maybeNumber)) {
-                        valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(maybeNumber, targetProp));
-                    }
-                    else if ((argSource.startsWith('"') && argSource.endsWith('"')) ||
-                        (argSource.startsWith("'") && argSource.endsWith("'"))) {
-                        valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(argSource.slice(1, -1), targetProp));
-                    }
-                    else {
-                        valueExpr = zss_engine_1.exceptionCamelCase.includes(targetProp)
-                            ? argSource
-                            : `(typeof ${argSource} === 'number' ? ${argSource} + 'px' : ${argSource})`;
+                if (styleInfo?.functions?.[propKey]) {
+                    const func = styleInfo.functions[propKey];
+                    const callArgs = expr.arguments;
+                    const tempStaticTable = { ...mergedStaticTable };
+                    if (callArgs.length === 1 && !callArgs[0].spread) {
+                        const argExpr = callArgs[0].expression;
+                        const cssVarInfo = {};
+                        if (argExpr.type === 'ObjectExpression') {
+                            const argObj = (0, utils_1.objectExpressionToObject)(argExpr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
+                            func.params.forEach((p) => {
+                                if (argObj[p] !== undefined)
+                                    tempStaticTable[p] = argObj[p];
+                            });
+                        }
+                        else {
+                            func.params.forEach((p) => {
+                                const cssVar = `--${propKey}-${p}`;
+                                tempStaticTable[p] = `var(${cssVar})`;
+                                cssVarInfo[p] = { cssVar, propKey: '' };
+                            });
+                        }
+                        const substituted = (0, utils_1.objectExpressionToObject)(func.body, tempStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
+                        if (substituted) {
+                            const records = processStyleRecords(substituted);
+                            const hashes = records.map((r) => r.hash).join(' ');
+                            if (hashes)
+                                dynamicClassParts.push(JSON.stringify(hashes));
+                            if (Object.keys(cssVarInfo).length > 0) {
+                                Object.entries(cssVarInfo).forEach(([_, info]) => {
+                                    const targetProp = Object.keys(substituted).find((k) => typeof substituted[k] === 'string' &&
+                                        substituted[k].includes(info.cssVar));
+                                    if (targetProp) {
+                                        const argStart = argExpr.span.start - baseByteOffset;
+                                        const argEnd = argExpr.span.end - baseByteOffset;
+                                        const argSource = sourceBuffer
+                                            .subarray(argStart, argEnd)
+                                            .toString('utf-8');
+                                        let valueExpr;
+                                        const maybeNumber = Number(argSource);
+                                        if (!isNaN(maybeNumber) &&
+                                            argSource.trim() === String(maybeNumber)) {
+                                            valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(maybeNumber, targetProp));
+                                        }
+                                        else if ((argSource.startsWith('"') && argSource.endsWith('"')) ||
+                                            (argSource.startsWith("'") && argSource.endsWith("'"))) {
+                                            valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(argSource.slice(1, -1), targetProp));
+                                        }
+                                        else {
+                                            valueExpr = zss_engine_1.exceptionCamelCase.includes(targetProp)
+                                                ? argSource
+                                                : `(typeof ${argSource} === 'number' ? ${argSource} + 'px' : ${argSource})`;
+                                        }
+                                        dynamicStyleParts.push(`"${info.cssVar}": ${valueExpr}`);
+                                    }
+                                });
+                            }
+                            return false;
+                        }
                     }
-                    dynamicStyleParts.push(`"${cssVar}": ${valueExpr}`);
-                });
-                return false;
+                }
+                return true;
             });
             const styleAttr = dynamicStyleParts.length > 0
                 ? ` style={{${dynamicStyleParts.join(', ')}}}`
@@ -1213,8 +1254,7 @@ async function loader(source) {
                 const varName = callee.object.value;
                 const propKey = callee.property.value;
                 const styleInfo = localCreateStyles[varName];
-                const atomMap = styleInfo?.hashMap?.[propKey];
-                if (atomMap?.['__cssVars__']) {
+                if (styleInfo?.functions?.[propKey]) {
                     throw new Error(`Plumeria: css.use(${getSource(expr)}) does not support dynamic function keys.\n`);
                 }
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/turbopack-loader",
-  "version": "10.0.6",
+  "version": "10.0.8",
   "description": "Plumeria Turbopack-loader",
   "author": "Refirst 11",
   "license": "MIT",
@@ -22,7 +22,7 @@
     "zero-virtual.css"
   ],
   "dependencies": {
-    "@plumeria/utils": "^10.0.6"
+    "@plumeria/utils": "^10.0.8"
   },
   "devDependencies": {
     "@swc/core": "1.15.21",