@plumeria/vite-plugin 10.0.1 → 10.0.2

package/dist/index.js

@@ -534,6 +534,448 @@ export function plumeria(options = {}) {
                 },
             });
             const jsxOpeningElementMap = new Map();
+            const getSource = (node) => {
+                const start = node.span.start - baseByteOffset;
+                const end = node.span.end - baseByteOffset;
+                return sourceBuffer.subarray(start, end).toString('utf-8');
+            };
+            const resolveStyleObject = (expr) => {
+                if (t.isObjectExpression(expr)) {
+                    return objectExpressionToObject(expr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
+                }
+                else if (t.isMemberExpression(expr) &&
+                    t.isIdentifier(expr.object) &&
+                    (t.isIdentifier(expr.property) ||
+                        expr.property.type === 'Computed')) {
+                    if (expr.property.type === 'Computed')
+                        return {};
+                    const varName = expr.object.value;
+                    const 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 (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;
+                    const vHash = mergedVariantsTable[varName];
+                    if (vHash)
+                        return scannedTables.variantsObjectTable[vHash];
+                }
+                return null;
+            };
+            const buildClassParts = (args, dynamicClassParts = [], existingClass = '') => {
+                const conditionals = [];
+                let groupIdCounter = 0;
+                let baseStyle = {};
+                let isOptimizable = true;
+                const collectConditions = (node, currentTestStrings = []) => {
+                    const staticStyle = resolveStyleObject(node);
+                    if (staticStyle) {
+                        if (currentTestStrings.length === 0) {
+                            baseStyle = deepMerge(baseStyle, staticStyle);
+                        }
+                        else {
+                            conditionals.push({
+                                test: node,
+                                testString: currentTestStrings.join(' && '),
+                                truthy: staticStyle,
+                                falsy: {},
+                                varName: undefined,
+                            });
+                        }
+                        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,
+                                });
+                                return true;
+                            }
+                        }
+                        collectConditions(node.consequent, [
+                            ...currentTestStrings,
+                            `(${testSource})`,
+                        ]);
+                        collectConditions(node.alternate, [
+                            ...currentTestStrings,
+                            `!(${testSource})`,
+                        ]);
+                        return true;
+                    }
+                    else if (node.type === 'BinaryExpression' &&
+                        node.operator === '&&') {
+                        collectConditions(node.right, [
+                            ...currentTestStrings,
+                            `(${getSource(node.left)})`,
+                        ]);
+                        return true;
+                    }
+                    else if (node.type === 'ParenthesisExpression') {
+                        return collectConditions(node.expression, currentTestStrings);
+                    }
+                    return false;
+                };
+                for (const arg of args) {
+                    const expr = arg.expression;
+                    if (t.isCallExpression(expr) && t.isIdentifier(expr.callee)) {
+                        const varName = expr.callee.value;
+                        const uniqueKey = `${resourcePath}-${varName}`;
+                        let variantObj;
+                        let hash = scannedTables.variantsHashTable[uniqueKey];
+                        if (!hash)
+                            hash = mergedVariantsTable[varName];
+                        if (hash && scannedTables.variantsObjectTable[hash])
+                            variantObj = scannedTables.variantsObjectTable[hash];
+                        if (!variantObj && localCreateStyles[varName]?.obj)
+                            variantObj = localCreateStyles[varName].obj;
+                        if (variantObj) {
+                            const callArgs = expr.arguments;
+                            if (callArgs.length === 1 && !callArgs[0].spread) {
+                                const arg = callArgs[0].expression;
+                                if (arg.type === 'ObjectExpression') {
+                                    for (const prop of arg.properties) {
+                                        let groupName;
+                                        let valExpr;
+                                        if (prop.type === 'KeyValueProperty' &&
+                                            prop.key.type === 'Identifier') {
+                                            groupName = prop.key.value;
+                                            valExpr = prop.value;
+                                        }
+                                        else if (prop.type === 'Identifier') {
+                                            groupName = prop.value;
+                                            valExpr = prop;
+                                        }
+                                        if (groupName && valExpr) {
+                                            const groupVariants = variantObj[groupName];
+                                            if (!groupVariants)
+                                                continue;
+                                            const currentGroupId = ++groupIdCounter;
+                                            const valSource = getSource(valExpr);
+                                            if (valExpr.type === 'StringLiteral') {
+                                                if (groupVariants[valExpr.value])
+                                                    baseStyle = deepMerge(baseStyle, groupVariants[valExpr.value]);
+                                                continue;
+                                            }
+                                            Object.entries(groupVariants).forEach(([optionName, style]) => {
+                                                conditionals.push({
+                                                    test: valExpr,
+                                                    testLHS: valSource,
+                                                    testString: `${valSource} === '${optionName}'`,
+                                                    truthy: style,
+                                                    falsy: {},
+                                                    groupId: currentGroupId,
+                                                    groupName,
+                                                    valueName: optionName,
+                                                    varName,
+                                                });
+                                            });
+                                        }
+                                    }
+                                    continue;
+                                }
+                                const argSource = getSource(arg);
+                                if (t.isStringLiteral(arg)) {
+                                    if (variantObj[arg.value])
+                                        baseStyle = deepMerge(baseStyle, variantObj[arg.value]);
+                                    continue;
+                                }
+                                const currentGroupId = ++groupIdCounter;
+                                Object.entries(variantObj).forEach(([key, style]) => {
+                                    conditionals.push({
+                                        test: arg,
+                                        testLHS: argSource,
+                                        testString: `${argSource} === '${key}'`,
+                                        truthy: style,
+                                        falsy: {},
+                                        groupId: currentGroupId,
+                                        groupName: undefined,
+                                        valueName: key,
+                                        varName,
+                                    });
+                                });
+                                continue;
+                            }
+                            isOptimizable = false;
+                            break;
+                        }
+                    }
+                    else if (t.isIdentifier(expr)) {
+                        const varName = expr.value;
+                        const uniqueKey = `${resourcePath}-${varName}`;
+                        let variantObj;
+                        let hash = scannedTables.variantsHashTable[uniqueKey];
+                        if (!hash)
+                            hash = mergedVariantsTable[varName];
+                        if (hash && scannedTables.variantsObjectTable[hash])
+                            variantObj = scannedTables.variantsObjectTable[hash];
+                        if (!variantObj && localCreateStyles[varName]?.obj)
+                            variantObj = localCreateStyles[varName].obj;
+                        if (variantObj) {
+                            Object.entries(variantObj).forEach(([groupName, groupVariants]) => {
+                                if (!groupVariants)
+                                    return;
+                                const currentGroupId = ++groupIdCounter;
+                                Object.entries(groupVariants).forEach(([optionName, style]) => {
+                                    conditionals.push({
+                                        test: expr,
+                                        testLHS: `props["${groupName}"]`,
+                                        testString: `props["${groupName}"] === '${optionName}'`,
+                                        truthy: style,
+                                        falsy: {},
+                                        groupId: currentGroupId,
+                                        groupName,
+                                        valueName: optionName,
+                                        varName,
+                                    });
+                                });
+                            });
+                            continue;
+                        }
+                    }
+                    const handled = collectConditions(expr);
+                    if (handled)
+                        continue;
+                    isOptimizable = false;
+                    break;
+                }
+                if (!isOptimizable ||
+                    (args.length === 0 && Object.keys(baseStyle).length === 0)) {
+                    return {
+                        classParts: [...dynamicClassParts],
+                        isOptimizable,
+                        baseStyle,
+                    };
+                }
+                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(JSON.stringify(existingClass));
+                if (Object.keys(baseIndependent).length > 0) {
+                    const className = getStyleRecords(baseIndependent)
+                        .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(getStyleRecords(style)
+                            .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 && opt.truthy) {
+                            const className = getStyleRecords(opt.truthy)
+                                .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]) => `"${k}":"${v}"`)
+                            .join(',');
+                        classParts.push(`({${entries}}[${commonTestExpr}] || "")`);
+                    }
+                });
+                if (Object.keys(baseConflict).length > 0 ||
+                    conflictConditionals.length > 0) {
+                    const dimensions = [];
+                    conflictConditionals
+                        .filter((c) => c.groupId === undefined)
+                        .forEach((c) => {
+                        dimensions.push({
+                            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.entries(conflictVarGroups).forEach(([, opts]) => {
+                        dimensions.push({
+                            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',
+                            })),
+                        });
+                    });
+                    const results = {};
+                    const recurse = (dimIndex, currentStyle, keyParts) => {
+                        if (dimIndex >= dimensions.length) {
+                            const className = getStyleRecords(currentStyle)
+                                .map((r) => r.hash)
+                                .join(' ');
+                            if (className)
+                                results[keyParts.join('__')] = className;
+                            return;
+                        }
+                        dimensions[dimIndex].options.forEach((opt) => recurse(dimIndex + 1, deepMerge(currentStyle, opt.style), [
+                            ...keyParts,
+                            String(opt.value),
+                        ]));
+                    };
+                    recurse(0, baseConflict, []);
+                    const baseConflictClass = Object.keys(baseConflict).length > 0
+                        ? getStyleRecords(baseConflict)
+                            .map((r) => r.hash)
+                            .join(' ')
+                        : '';
+                    const masterKeyExpr = dimensions
+                        .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 };
+            };
             traverse(ast, {
                 JSXOpeningElement({ node }) {
                     jsxOpeningElementMap.set(node.span.start, node.attributes);
@@ -664,7 +1106,7 @@ export function plumeria(options = {}) {
                     if (!node.value || node.value.type !== 'JSXExpressionContainer')
                         return;
                     const expr = node.value.expression;
-                    const args = expr.type === 'ArrayExpression'
+                    let args = expr.type === 'ArrayExpression'
                         ? expr.elements
                             .filter(Boolean)
                             .map((el) => ({ expression: el.expression ?? el }))
@@ -708,668 +1150,105 @@ export function plumeria(options = {}) {
                                 dynamicStyleParts.push(stripped);
                         }
                     }
-                    const resolveStyleObject = (expr) => {
-                        if (t.isObjectExpression(expr)) {
-                            return objectExpressionToObject(expr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
-                        }
-                        else if (t.isMemberExpression(expr) &&
-                            t.isIdentifier(expr.object) &&
-                            (t.isIdentifier(expr.property) ||
-                                expr.property.type === 'Computed')) {
-                            if (expr.property.type === 'Computed') {
-                                return {};
-                            }
-                            const varName = expr.object.value;
-                            const propName = expr.property.value;
-                            const styleInfo = localCreateStyles[varName];
-                            if (styleInfo && 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 && obj[propName]) {
-                                    const style = obj[propName];
-                                    if (typeof style === 'object' && style !== null) {
-                                        return style;
-                                    }
-                                }
-                            }
-                        }
-                        else if (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 && styleInfo.obj) {
-                                return styleInfo.obj;
-                            }
-                            if (localCreateStyles[varName]) {
-                                return localCreateStyles[varName].obj;
-                            }
-                            const vHash = mergedVariantsTable[varName];
-                            if (vHash) {
-                                return scannedTables.variantsObjectTable[vHash];
-                            }
-                        }
-                        return null;
-                    };
-                    const conditionals = [];
-                    let groupIdCounter = 0;
-                    let baseStyle = {};
-                    let isOptimizable = true;
-                    for (const arg of args) {
+                    args = args.filter((arg) => {
                         const expr = arg.expression;
-                        if (t.isCallExpression(expr) &&
-                            t.isMemberExpression(expr.callee)) {
-                            const callee = expr.callee;
-                            if (t.isIdentifier(callee.object) &&
-                                t.isIdentifier(callee.property)) {
-                                const varName = callee.object.value;
-                                const propKey = callee.property.value;
-                                const styleInfo = localCreateStyles[varName];
-                                const atomMap = styleInfo?.hashMap?.[propKey];
-                                if (atomMap?.['__cssVars__']) {
-                                    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 args = expr.arguments;
-                                    Object.entries(cssVarInfo).forEach(([_, { cssVar, propKey: targetProp }], i) => {
-                                        const callArg = args[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;
-                                        try {
-                                            const maybeNumber = Number(argSource);
-                                            if (!isNaN(maybeNumber) &&
-                                                argSource.trim() === String(maybeNumber)) {
-                                                const processed = applyCssValue(maybeNumber, targetProp);
-                                                valueExpr = JSON.stringify(processed);
-                                            }
-                                            else if (argSource.startsWith('"') &&
-                                                argSource.endsWith('"')) {
-                                                const processed = applyCssValue(argSource.slice(1, -1), targetProp);
-                                                valueExpr = JSON.stringify(processed);
-                                            }
-                                            else {
-                                                const exception = [
-                                                    'animationIterationCount',
-                                                    'aspectRatio',
-                                                    'columnCount',
-                                                    'columns',
-                                                    'fillOpacity',
-                                                    'flex',
-                                                    'flexGrow',
-                                                    'flexShrink',
-                                                    'floodOpacity',
-                                                    'fontSizeAdjust',
-                                                    'fontWeight',
-                                                    'gridColumn',
-                                                    'gridColumnEnd',
-                                                    'gridColumnStart',
-                                                    'gridRow',
-                                                    'gridRowEnd',
-                                                    'gridRowStart',
-                                                    'hyphenateLimitChars',
-                                                    'initialLetter',
-                                                    'lineHeight',
-                                                    'mathDepth',
-                                                    'opacity',
-                                                    'order',
-                                                    'orphans',
-                                                    'scale',
-                                                    'shapeImageThreshold',
-                                                    'stopOpacity',
-                                                    'strokeMiterlimit',
-                                                    'strokeOpacity',
-                                                    'tabSize',
-                                                    'widows',
-                                                    'zIndex',
-                                                    'zoom',
-                                                ];
-                                                if (!exception.includes(targetProp)) {
-                                                    valueExpr = `(typeof ${argSource} === 'number' ? ${argSource} + 'px' : ${argSource})`;
-                                                }
-                                                else {
-                                                    valueExpr = argSource;
-                                                }
-                                            }
-                                        }
-                                        catch {
-                                            valueExpr = argSource;
-                                        }
-                                        dynamicStyleParts.push(`"${cssVar}": ${valueExpr}`);
-                                    });
-                                    continue;
-                                }
-                            }
-                        }
-                        if (t.isCallExpression(expr) && t.isIdentifier(expr.callee)) {
-                            const varName = expr.callee.value;
-                            let variantObj;
-                            const uniqueKey = `${resourcePath}-${varName}`;
-                            let hash = scannedTables.variantsHashTable[uniqueKey];
-                            if (!hash) {
-                                hash = mergedVariantsTable[varName];
-                            }
-                            if (hash && scannedTables.variantsObjectTable[hash]) {
-                                variantObj = scannedTables.variantsObjectTable[hash];
-                            }
-                            if (!variantObj) {
-                                if (localCreateStyles[varName] &&
-                                    localCreateStyles[varName].obj) {
-                                    variantObj = localCreateStyles[varName].obj;
-                                }
-                            }
-                            if (variantObj) {
-                                const callArgs = expr.arguments;
-                                if (callArgs.length === 1 && !callArgs[0].spread) {
-                                    const arg = callArgs[0].expression;
-                                    if (arg.type === 'ObjectExpression') {
-                                        for (const prop of arg.properties) {
-                                            let groupName;
-                                            let valExpr;
-                                            if (prop.type === 'KeyValueProperty' &&
-                                                prop.key.type === 'Identifier') {
-                                                groupName = prop.key.value;
-                                                valExpr = prop.value;
-                                            }
-                                            else if (prop.type === 'Identifier') {
-                                                groupName = prop.value;
-                                                valExpr = prop;
-                                            }
-                                            if (groupName && valExpr) {
-                                                const groupVariants = variantObj[groupName];
-                                                if (!groupVariants)
-                                                    continue;
-                                                const currentGroupId = ++groupIdCounter;
-                                                const valStart = valExpr.span.start - baseByteOffset;
-                                                const valEnd = valExpr.span.end - baseByteOffset;
-                                                const valSource = sourceBuffer
-                                                    .subarray(valStart, valEnd)
-                                                    .toString('utf-8');
-                                                if (valExpr.type === 'StringLiteral') {
-                                                    if (groupVariants[valExpr.value]) {
-                                                        baseStyle = deepMerge(baseStyle, groupVariants[valExpr.value]);
-                                                    }
-                                                    continue;
-                                                }
-                                                Object.entries(groupVariants).forEach(([optionName, style]) => {
-                                                    conditionals.push({
-                                                        test: valExpr,
-                                                        testLHS: valSource,
-                                                        testString: `${valSource} === '${optionName}'`,
-                                                        truthy: style,
-                                                        falsy: {},
-                                                        groupId: currentGroupId,
-                                                        groupName,
-                                                        valueName: optionName,
-                                                        varName,
-                                                    });
-                                                });
-                                            }
-                                        }
-                                        continue;
-                                    }
-                                    const argStart = arg.span.start - baseByteOffset;
-                                    const argEnd = arg.span.end - baseByteOffset;
-                                    const argSource = sourceBuffer
-                                        .subarray(argStart, argEnd)
-                                        .toString('utf-8');
-                                    if (t.isStringLiteral(arg)) {
-                                        if (variantObj[arg.value]) {
-                                            baseStyle = deepMerge(baseStyle, variantObj[arg.value]);
-                                        }
-                                        continue;
-                                    }
-                                    const currentGroupId = ++groupIdCounter;
-                                    Object.entries(variantObj).forEach(([key, style]) => {
-                                        conditionals.push({
-                                            test: arg,
-                                            testLHS: argSource,
-                                            testString: `${argSource} === '${key}'`,
-                                            truthy: style,
-                                            falsy: {},
-                                            groupId: currentGroupId,
-                                            groupName: undefined,
-                                            valueName: key,
-                                            varName,
-                                        });
-                                    });
-                                    continue;
-                                }
-                                isOptimizable = false;
-                                break;
-                            }
-                        }
-                        else if (t.isIdentifier(expr)) {
-                            const varName = expr.value;
-                            let variantObj;
-                            const uniqueKey = `${resourcePath}-${varName}`;
-                            let hash = scannedTables.variantsHashTable[uniqueKey];
-                            if (!hash) {
-                                hash = mergedVariantsTable[varName];
-                            }
-                            if (hash && scannedTables.variantsObjectTable[hash]) {
-                                variantObj = scannedTables.variantsObjectTable[hash];
-                            }
-                            if (!variantObj) {
-                                if (localCreateStyles[varName] &&
-                                    localCreateStyles[varName].obj) {
-                                    variantObj = localCreateStyles[varName].obj;
-                                }
-                            }
-                            if (variantObj) {
-                                Object.entries(variantObj).forEach(([groupName, groupVariants]) => {
-                                    if (!groupVariants)
-                                        return;
-                                    const currentGroupId = ++groupIdCounter;
-                                    Object.entries(groupVariants).forEach(([optionName, style]) => {
-                                        conditionals.push({
-                                            test: expr,
-                                            testLHS: `props["${groupName}"]`,
-                                            testString: `props["${groupName}"] === '${optionName}'`,
-                                            truthy: style,
-                                            falsy: {},
-                                            groupId: currentGroupId,
-                                            groupName: groupName,
-                                            valueName: optionName,
-                                            varName: varName,
-                                        });
-                                    });
-                                });
-                                continue;
-                            }
-                        }
-                        const getSource = (node) => {
-                            const start = node.span.start - baseByteOffset;
-                            const end = node.span.end - baseByteOffset;
-                            return sourceBuffer.subarray(start, end).toString('utf-8');
-                        };
-                        const collectConditions = (node, currentTestStrings = []) => {
-                            const staticStyle = resolveStyleObject(node);
-                            if (staticStyle) {
-                                if (currentTestStrings.length === 0) {
-                                    baseStyle = deepMerge(baseStyle, staticStyle);
-                                }
-                                else {
-                                    const combinedTest = currentTestStrings.join(' && ');
-                                    conditionals.push({
-                                        test: node,
-                                        testString: combinedTest,
-                                        truthy: staticStyle,
-                                        falsy: {},
-                                        varName: undefined,
-                                    });
-                                }
-                                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,
-                                        });
-                                        return true;
-                                    }
-                                }
-                                collectConditions(node.consequent, [
-                                    ...currentTestStrings,
-                                    `(${testSource})`,
-                                ]);
-                                collectConditions(node.alternate, [
-                                    ...currentTestStrings,
-                                    `!(${testSource})`,
-                                ]);
-                                return true;
+                        if (!t.isCallExpression(expr) || !t.isMemberExpression(expr.callee))
+                            return true;
+                        const callee = expr.callee;
+                        if (!t.isIdentifier(callee.object) ||
+                            !t.isIdentifier(callee.property))
+                            return true;
+                        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(applyCssValue(maybeNumber, targetProp));
                             }
-                            else if (node.type === 'BinaryExpression' &&
-                                node.operator === '&&') {
-                                const leftSource = getSource(node.left);
-                                collectConditions(node.right, [
-                                    ...currentTestStrings,
-                                    `(${leftSource})`,
-                                ]);
-                                return true;
+                            else if (argSource.startsWith('"') &&
+                                argSource.endsWith('"')) {
+                                valueExpr = JSON.stringify(applyCssValue(argSource.slice(1, -1), targetProp));
                             }
-                            else if (node.type === 'ParenthesisExpression') {
-                                return collectConditions(node.expression, currentTestStrings);
+                            else {
+                                const exception = [
+                                    'animationIterationCount',
+                                    'aspectRatio',
+                                    'columnCount',
+                                    'columns',
+                                    'fillOpacity',
+                                    'flex',
+                                    'flexGrow',
+                                    'flexShrink',
+                                    'floodOpacity',
+                                    'fontSizeAdjust',
+                                    'fontWeight',
+                                    'gridColumn',
+                                    'gridColumnEnd',
+                                    'gridColumnStart',
+                                    'gridRow',
+                                    'gridRowEnd',
+                                    'gridRowStart',
+                                    'hyphenateLimitChars',
+                                    'initialLetter',
+                                    'lineHeight',
+                                    'mathDepth',
+                                    'opacity',
+                                    'order',
+                                    'orphans',
+                                    'scale',
+                                    'shapeImageThreshold',
+                                    'stopOpacity',
+                                    'strokeMiterlimit',
+                                    'strokeOpacity',
+                                    'tabSize',
+                                    'widows',
+                                    'zIndex',
+                                    'zoom',
+                                ];
+                                valueExpr = exception.includes(targetProp)
+                                    ? argSource
+                                    : `(typeof ${argSource} === 'number' ? ${argSource} + 'px' : ${argSource})`;
                             }
-                            return false;
-                        };
-                        const handled = collectConditions(expr);
-                        if (handled)
-                            continue;
-                        isOptimizable = false;
-                        break;
-                    }
+                            dynamicStyleParts.push(`"${cssVar}": ${valueExpr}`);
+                        });
+                        return false;
+                    });
                     const styleAttr = dynamicStyleParts.length > 0
                         ? ` style={{${dynamicStyleParts.join(', ')}}}`
                         : '';
+                    const { classParts, isOptimizable, baseStyle } = buildClassParts(args, dynamicClassParts, existingClass);
                     if (isOptimizable &&
-                        (args.length > 0 || Object.keys(baseStyle).length > 0)) {
-                        if (conditionals.length === 0) {
-                            const records = getStyleRecords(baseStyle);
-                            const staticClass = records
-                                .map((r) => r.hash)
-                                .join(' ');
-                            const allParts = [
-                                ...(existingClass ? [JSON.stringify(existingClass)] : []),
-                                ...(staticClass ? [JSON.stringify(staticClass)] : []),
-                                ...dynamicClassParts,
-                            ].join(' + " " + ');
-                            replacements.push({
-                                start: node.span.start - baseByteOffset,
-                                end: node.span.end - baseByteOffset,
-                                content: `className={${allParts || '""'}}${styleAttr}`,
-                            });
-                        }
-                        else {
-                            const propertyCounts = {};
-                            const addCounts = (style) => {
-                                Object.keys(style).forEach((key) => {
-                                    propertyCounts[key] = (propertyCounts[key] || 0) + 1;
-                                });
-                            };
-                            addCounts(baseStyle);
-                            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) => {
-                                const sourceId = `std_${idx}`;
-                                registerParticipation(c.truthy, sourceId);
-                                registerParticipation(c.falsy, sourceId);
-                            });
-                            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]) => {
-                                const sourceId = `var_${groupId}`;
-                                opts.forEach((opt) => {
-                                    registerParticipation(opt.truthy, sourceId);
-                                    registerParticipation(opt.falsy, sourceId);
-                                });
-                            });
-                            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 = [];
-                            const splitConditional = (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,
-                                    });
-                                }
-                            };
-                            conditionals.forEach(splitConditional);
-                            const classParts = [];
-                            if (existingClass)
-                                classParts.push(JSON.stringify(existingClass));
-                            if (Object.keys(baseIndependent).length > 0) {
-                                const records = getStyleRecords(baseIndependent);
-                                const className = records.map((r) => r.hash).join(' ');
-                                if (className)
-                                    classParts.push(JSON.stringify(className));
-                            }
-                            const indepStd = indepConditionals.filter((c) => c.groupId === undefined);
-                            indepStd.forEach((c) => {
-                                const processBranch = (style) => {
-                                    if (Object.keys(style).length === 0)
-                                        return '""';
-                                    const records = getStyleRecords(style);
-                                    return JSON.stringify(records.map((r) => r.hash).join(' '));
-                                };
-                                const tClass = processBranch(c.truthy);
-                                const fClass = processBranch(c.falsy);
-                                let testStr = c.testString;
-                                if (!testStr && c.test) {
-                                    const start = c.test.span.start - baseByteOffset;
-                                    const end = c.test.span.end - baseByteOffset;
-                                    testStr = sourceBuffer.subarray(start, end).toString('utf-8');
-                                }
-                                classParts.push(`(${testStr} ? ${tClass} : ${fClass})`);
-                            });
-                            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) => {
-                                let commonTestExpr = null;
-                                const lookupMap = {};
-                                if (options.length > 0) {
-                                    if (options[0].testLHS) {
-                                        commonTestExpr = options[0].testLHS;
-                                    }
-                                    else if (options[0].testString) {
-                                        commonTestExpr = options[0].testString;
-                                    }
-                                    else {
-                                        const firstTest = options[0].test;
-                                        const firstStart = firstTest.span.start - baseByteOffset;
-                                        const firstEnd = firstTest.span.end - baseByteOffset;
-                                        commonTestExpr = sourceBuffer
-                                            .subarray(firstStart, firstEnd)
-                                            .toString('utf-8');
-                                    }
-                                    options.forEach((opt) => {
-                                        if (opt.valueName && opt.truthy) {
-                                            const records = getStyleRecords(opt.truthy);
-                                            const className = records.map((r) => r.hash).join(' ');
-                                            if (className) {
-                                                lookupMap[opt.valueName] = className;
-                                            }
-                                        }
-                                    });
-                                }
-                                if (commonTestExpr && Object.keys(lookupMap).length > 0) {
-                                    const entries = Object.entries(lookupMap)
-                                        .map(([key, val]) => `"${key}":"${val}"`)
-                                        .join(',');
-                                    classParts.push(`({${entries}}[${commonTestExpr}] || "")`);
-                                }
-                            });
-                            if (Object.keys(baseConflict).length > 0 ||
-                                conflictConditionals.length > 0) {
-                                const conflictStd = conflictConditionals.filter((c) => c.groupId === undefined);
-                                const conflictVarGroups = {};
-                                conflictConditionals.forEach((c) => {
-                                    if (c.groupId !== undefined) {
-                                        if (!conflictVarGroups[c.groupId])
-                                            conflictVarGroups[c.groupId] = [];
-                                        conflictVarGroups[c.groupId].push(c);
-                                    }
-                                });
-                                const dimensions = [];
-                                conflictStd.forEach((c) => {
-                                    let testStr = c.testString;
-                                    if (!testStr && c.test) {
-                                        const start = c.test.span.start - baseByteOffset;
-                                        const end = c.test.span.end - baseByteOffset;
-                                        testStr = sourceBuffer
-                                            .subarray(start, end)
-                                            .toString('utf-8');
-                                    }
-                                    dimensions.push({
-                                        type: 'std',
-                                        testExpr: testStr,
-                                        options: [
-                                            { value: 0, style: c.falsy, label: 'false' },
-                                            { value: 1, style: c.truthy, label: 'true' },
-                                        ],
-                                    });
-                                });
-                                Object.entries(conflictVarGroups).forEach(([_groupId, opts]) => {
-                                    let commonTestExpr = null;
-                                    if (opts.length > 0) {
-                                        if (opts[0].testLHS) {
-                                            commonTestExpr = opts[0].testLHS;
-                                        }
-                                        else if (opts[0].testString) {
-                                            commonTestExpr = opts[0].testString;
-                                        }
-                                        else {
-                                            const firstTest = opts[0].test;
-                                            const firstStart = firstTest.span.start - baseByteOffset;
-                                            const firstEnd = firstTest.span.end - baseByteOffset;
-                                            commonTestExpr = sourceBuffer
-                                                .subarray(firstStart, firstEnd)
-                                                .toString('utf-8');
-                                        }
-                                    }
-                                    const options = opts.map((opt) => ({
-                                        value: opt.valueName,
-                                        style: opt.truthy,
-                                        label: opt.valueName || 'default',
-                                    }));
-                                    dimensions.push({
-                                        type: 'var',
-                                        testExpr: commonTestExpr || '""',
-                                        options: options,
-                                    });
-                                });
-                                const results = {};
-                                const recurse = (dimIndex, currentStyle, keyParts) => {
-                                    if (dimIndex >= dimensions.length) {
-                                        const records = getStyleRecords(currentStyle);
-                                        const className = records.map((r) => r.hash).join(' ');
-                                        const finalKey = keyParts.join('__');
-                                        if (className)
-                                            results[finalKey] = className;
-                                        return;
-                                    }
-                                    const dim = dimensions[dimIndex];
-                                    dim.options.forEach((opt) => {
-                                        const nextStyle = deepMerge(currentStyle, opt.style);
-                                        recurse(dimIndex + 1, nextStyle, [
-                                            ...keyParts,
-                                            String(opt.value),
-                                        ]);
-                                    });
-                                };
-                                recurse(0, baseConflict, []);
-                                let baseConflictClass = '';
-                                if (Object.keys(baseConflict).length > 0) {
-                                    const records = getStyleRecords(baseConflict);
-                                    baseConflictClass = records.map((r) => r.hash).join(' ');
-                                }
-                                const keyExprs = [];
-                                dimensions.forEach((dim) => {
-                                    if (dim.type === 'std') {
-                                        keyExprs.push(`(${dim.testExpr} ? "1" : "0")`);
-                                    }
-                                    else {
-                                        keyExprs.push(dim.testExpr || '""');
-                                    }
-                                });
-                                const masterKeyExpr = keyExprs.length > 0 ? keyExprs.join(' + "__" + ') : '""';
-                                const tableJson = JSON.stringify(results);
-                                const fallback = baseConflictClass
-                                    ? JSON.stringify(baseConflictClass)
-                                    : '""';
-                                classParts.push(`(${tableJson}[${masterKeyExpr}] || ${fallback})`);
-                            }
-                            classParts.push(...dynamicClassParts);
-                            const replacement = classParts.length > 0 ? classParts.join(' + " " + ') : '""';
-                            replacements.push({
-                                start: node.span.start - baseByteOffset,
-                                end: node.span.end - baseByteOffset,
-                                content: `className={${replacement}}${styleAttr}`,
-                            });
-                        }
+                        (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 {
                         replacements.push({
@@ -1379,6 +1258,56 @@ export function plumeria(options = {}) {
                         });
                     }
                 },
+                CallExpression({ node }) {
+                    const callee = node.callee;
+                    let isUseCall = false;
+                    if (t.isMemberExpression(callee) &&
+                        t.isIdentifier(callee.object) &&
+                        t.isIdentifier(callee.property)) {
+                        const objectName = callee.object.value;
+                        const propertyName = callee.property.value;
+                        const alias = plumeriaAliases[objectName];
+                        if (alias === 'NAMESPACE' && propertyName === 'use') {
+                            isUseCall = true;
+                        }
+                    }
+                    else if (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 (!t.isCallExpression(expr) || !t.isMemberExpression(expr.callee))
+                            continue;
+                        const callee = expr.callee;
+                        if (!t.isIdentifier(callee.object) ||
+                            !t.isIdentifier(callee.property))
+                            continue;
+                        const varName = callee.object.value;
+                        const propKey = callee.property.value;
+                        const styleInfo = localCreateStyles[varName];
+                        const atomMap = styleInfo?.hashMap?.[propKey];
+                        if (atomMap?.['__cssVars__']) {
+                            throw new Error(`Plumeria: css.use(${getSource(expr)}) does not support dynamic function keys.\n`);
+                        }
+                    }
+                    const { classParts, isOptimizable, baseStyle } = buildClassParts(args);
+                    if (isOptimizable &&
+                        (args.length > 0 || Object.keys(baseStyle).length > 0)) {
+                        const replacement = classParts.length > 0 ? classParts.join(' + " " + ') : '""';
+                        replacements.push({
+                            start: node.span.start - baseByteOffset,
+                            end: node.span.end - baseByteOffset,
+                            content: replacement,
+                        });
+                    }
+                },
             });
             Object.values(localCreateStyles).forEach((info) => {
                 if (info.type === 'constant') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/vite-plugin",
-  "version": "10.0.1",
+  "version": "10.0.2",
   "type": "module",
   "description": "Plumeria Vite plugin",
   "author": "Refirst 11",
@@ -22,7 +22,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@plumeria/utils": "^10.0.1"
+    "@plumeria/utils": "^10.0.2"
   },
   "devDependencies": {
     "@swc/core": "1.15.18",