@plumeria/turbopack-loader 7.0.2 → 7.1.0

package/dist/index.js

@@ -269,11 +269,15 @@ async function loader(source) {
                     }
                     return undefined;
                 });
+                const { hashMap, sheets } = (0, utils_1.processVariants)(obj);
+                if (!isProduction) {
+                    sheets.forEach(addSheet);
+                }
                 localCreateStyles[node.id.value] = {
                     name: node.id.value,
                     type: 'variant',
                     obj,
-                    hashMap: {},
+                    hashMap,
                     isExported,
                     initSpan: {
                         start: node.init.span.start - ast.span.start,
@@ -492,11 +496,63 @@ async function loader(source) {
                 return;
             const styleInfo = localCreateStyles[node.value];
             if (styleInfo) {
-                replacements.push({
-                    start: node.span.start - ast.span.start,
-                    end: node.span.end - ast.span.start,
-                    content: JSON.stringify(styleInfo.hashMap),
-                });
+                if (styleInfo.type === 'variant') {
+                    const hashMap = styleInfo.hashMap;
+                    const independentKeys = Object.keys(hashMap).filter((k) => k !== '_compound');
+                    const compoundGroups = hashMap._compound || [];
+                    const independentChecks = independentKeys
+                        .map((key) => {
+                        const mapObj = hashMap[key];
+                        if (typeof mapObj === 'string') {
+                            return `classes.push("${mapObj}");`;
+                        }
+                        const mapStr = JSON.stringify(mapObj);
+                        return `
+              var v${key} = ${mapStr};
+              if (props["${key}"] && v${key}[props["${key}"]]) {
+                classes.push(v${key}[props["${key}"]]);
+              } else if (v${key}["default"]) {
+                classes.push(v${key}["default"]);
+              }
+            `;
+                    })
+                        .join('\n');
+                    const compoundChecks = compoundGroups
+                        .map((group) => {
+                        const keys = group.keys;
+                        const mapObj = group.map;
+                        const mapStr = JSON.stringify(mapObj);
+                        const keyExpr = keys
+                            .map((k) => `(props["${k}"] || "default")`)
+                            .join(' + ":" + ');
+                        return `
+              var c${keys.join('_')} = ${mapStr};
+              var k = ${keyExpr};
+              if (c${keys.join('_')}[k]) {
+                classes.push(c${keys.join('_')}[k]);
+              }
+            `;
+                    })
+                        .join('\n');
+                    const runtimeFn = `(props) => {
+             var classes = [];
+             ${independentChecks}
+             ${compoundChecks}
+             return classes.join(" ");
+           }`;
+                    replacements.push({
+                        start: node.span.start - ast.span.start,
+                        end: node.span.end - ast.span.start,
+                        content: runtimeFn,
+                    });
+                }
+                else {
+                    replacements.push({
+                        start: node.span.start - ast.span.start,
+                        end: node.span.end - ast.span.start,
+                        content: JSON.stringify(styleInfo.hashMap),
+                    });
+                }
                 return;
             }
             const varName = node.value;
@@ -690,10 +746,14 @@ async function loader(source) {
                                             Object.entries(groupVariants).forEach(([optionName, style]) => {
                                                 conditionals.push({
                                                     test: valExpr,
+                                                    testLHS: valSource,
                                                     testString: `${valSource} === '${optionName}'`,
                                                     truthy: style,
                                                     falsy: {},
                                                     groupId: currentGroupId,
+                                                    groupName,
+                                                    valueName: optionName,
+                                                    varName,
                                                 });
                                             });
                                         }
@@ -713,10 +773,14 @@ async function loader(source) {
                                 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;
@@ -725,43 +789,111 @@ async function loader(source) {
                             break;
                         }
                     }
-                    const staticStyle = resolveStyleObject(expr);
-                    if (staticStyle) {
-                        baseStyle = (0, utils_1.deepMerge)(baseStyle, staticStyle);
-                        continue;
-                    }
-                    else if (expr.type === 'ConditionalExpression') {
-                        const truthyStyle = resolveStyleObject(expr.consequent);
-                        const falsyStyle = resolveStyleObject(expr.alternate);
-                        if (truthyStyle !== null && falsyStyle !== null) {
-                            conditionals.push({
-                                test: expr.test,
-                                truthy: truthyStyle,
-                                falsy: falsyStyle,
-                            });
-                            continue;
+                    else if (utils_1.t.isIdentifier(expr)) {
+                        const varName = expr.value;
+                        let variantObj;
+                        const uniqueKey = `${this.resourcePath}-${varName}`;
+                        let hash = scannedTables.variantsHashTable[uniqueKey];
+                        if (!hash) {
+                            hash = mergedVariantsTable[varName];
                         }
-                    }
-                    else if (expr.type === 'BinaryExpression' &&
-                        expr.operator === '&&') {
-                        const truthyStyle = resolveStyleObject(expr.right);
-                        if (truthyStyle !== null) {
-                            conditionals.push({
-                                test: expr.left,
-                                truthy: truthyStyle,
-                                falsy: {},
+                        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;
                         }
                     }
-                    else if (expr.type === 'ParenthesisExpression') {
-                        const inner = expr.expression;
-                        const innerStatic = resolveStyleObject(inner);
-                        if (innerStatic) {
-                            baseStyle = (0, utils_1.deepMerge)(baseStyle, innerStatic);
-                            continue;
+                    const getSource = (node) => {
+                        const start = node.span.start - ast.span.start;
+                        const end = node.span.end - ast.span.start;
+                        return source.substring(start, end);
+                    };
+                    const collectConditions = (node, currentTestStrings = []) => {
+                        const staticStyle = resolveStyleObject(node);
+                        if (staticStyle) {
+                            if (currentTestStrings.length === 0) {
+                                baseStyle = (0, utils_1.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;
+                        }
+                        else if (node.type === 'BinaryExpression' &&
+                            node.operator === '&&') {
+                            const leftSource = getSource(node.left);
+                            collectConditions(node.right, [
+                                ...currentTestStrings,
+                                `(${leftSource})`,
+                            ]);
+                            return true;
+                        }
+                        else if (node.type === 'ParenthesisExpression') {
+                            return collectConditions(node.expression, currentTestStrings);
+                        }
+                        return false;
+                    };
+                    const handled = collectConditions(expr);
+                    if (handled)
+                        continue;
                     isOptimizable = false;
                     break;
                 }
@@ -783,103 +915,290 @@ async function loader(source) {
                         });
                     }
                     else {
-                        const table = {};
-                        const groups = {};
-                        let strayIdCounter = groupIdCounter + 1;
+                        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) => {
-                            const gid = c.groupId !== undefined ? c.groupId : strayIdCounter++;
-                            if (!groups[gid]) {
-                                groups[gid] = [];
+                            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);
                             }
-                            groups[gid].push(c);
                         });
-                        const sortedGroupIds = Object.keys(groups)
-                            .map(Number)
-                            .sort((a, b) => a - b);
-                        let totalCombinations = 1;
-                        const groupMeta = sortedGroupIds.map((gid) => {
-                            const options = groups[gid];
-                            const isVariantGroup = options[0].groupId !== undefined;
-                            const size = isVariantGroup ? options.length : 2;
-                            const stride = totalCombinations;
-                            totalCombinations *= size;
-                            return { gid, options, size, stride, isVariantGroup };
+                        const baseIndependent = {};
+                        const baseConflict = {};
+                        Object.entries(baseStyle).forEach(([key, val]) => {
+                            if (conflictingKeys.has(key)) {
+                                baseConflict[key] = val;
+                            }
+                            else {
+                                baseIndependent[key] = val;
+                            }
                         });
-                        for (let i = 0; i < totalCombinations; i++) {
-                            let currentStyle = { ...baseStyle };
-                            for (const meta of groupMeta) {
-                                const localIndex = Math.floor(i / meta.stride) % meta.size;
-                                if (meta.isVariantGroup) {
-                                    currentStyle = (0, utils_1.deepMerge)(currentStyle, meta.options[localIndex].truthy);
+                        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 {
-                                    const cond = meta.options[0];
-                                    if (localIndex === 1) {
-                                        currentStyle = (0, utils_1.deepMerge)(currentStyle, cond.truthy);
-                                    }
-                                    else {
-                                        currentStyle = (0, utils_1.deepMerge)(currentStyle, cond.falsy);
-                                    }
+                                    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 (Object.keys(baseIndependent).length > 0) {
+                            if (!isProduction) {
+                                (0, utils_1.extractOndemandStyles)(baseIndependent, extractedSheets, scannedTables);
+                            }
+                            const records = (0, utils_1.getStyleRecords)(baseIndependent);
+                            if (!isProduction) {
+                                records.forEach((r) => addSheet(r.sheet));
                             }
-                            if (process.env.NODE_ENV !== 'production') {
-                                (0, utils_1.extractOndemandStyles)(currentStyle, extractedSheets, scannedTables);
+                            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 '""';
+                                if (!isProduction)
+                                    (0, utils_1.extractOndemandStyles)(style, extractedSheets, scannedTables);
+                                const records = (0, utils_1.getStyleRecords)(style);
+                                if (!isProduction)
+                                    records.forEach((r) => addSheet(r.sheet));
+                                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 - ast.span.start;
+                                const end = c.test.span.end - ast.span.start;
+                                testStr = source.substring(start, end);
+                            }
+                            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 - ast.span.start;
+                                    const firstEnd = firstTest.span.end - ast.span.start;
+                                    commonTestExpr = source.substring(firstStart, firstEnd);
+                                }
+                                options.forEach((opt) => {
+                                    if (opt.valueName && opt.truthy) {
+                                        if (!isProduction)
+                                            (0, utils_1.extractOndemandStyles)(opt.truthy, extractedSheets, scannedTables);
+                                        const records = (0, utils_1.getStyleRecords)(opt.truthy);
+                                        if (!isProduction)
+                                            records.forEach((r) => addSheet(r.sheet));
+                                        const className = records.map((r) => r.hash).join(' ');
+                                        if (className) {
+                                            lookupMap[opt.valueName] = className;
+                                        }
+                                    }
+                                });
                             }
-                            const records = (0, utils_1.getStyleRecords)(currentStyle);
-                            if (process.env.NODE_ENV !== 'production') {
-                                records.forEach((r) => extractedSheets.push(r.sheet));
+                            if (commonTestExpr && Object.keys(lookupMap).length > 0) {
+                                const entries = Object.entries(lookupMap)
+                                    .map(([key, val]) => `"${key}":"${val}"`)
+                                    .join(',');
+                                classParts.push(`({${entries}}[${commonTestExpr}] || "")`);
                             }
-                            const className = records
-                                .map((r) => r.hash)
-                                .join(' ');
-                            table[i] = className;
-                        }
-                        const indexParts = [];
-                        for (const meta of groupMeta) {
-                            if (meta.isVariantGroup) {
-                                const exprs = meta.options
-                                    .map((opt, idx) => {
-                                    if (idx === 0)
-                                        return null;
-                                    let testStr = opt.testString;
-                                    if (!testStr && opt.test) {
-                                        const start = opt.test.span.start - ast.span.start;
-                                        const end = opt.test.span.end - ast.span.start;
-                                        testStr = source.substring(start, end);
+                        });
+                        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 - ast.span.start;
+                                    const end = c.test.span.end - ast.span.start;
+                                    testStr = source.substring(start, end);
+                                }
+                                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;
                                     }
-                                    return `(!!(${testStr}) * ${idx})`;
-                                })
-                                    .filter(Boolean);
-                                if (exprs.length > 0) {
-                                    const groupSum = `(${exprs.join(' + ')})`;
-                                    if (meta.stride > 1) {
-                                        indexParts.push(`(${groupSum} * ${meta.stride})`);
+                                    else if (opts[0].testString) {
+                                        commonTestExpr = opts[0].testString;
                                     }
                                     else {
-                                        indexParts.push(groupSum);
+                                        const firstTest = opts[0].test;
+                                        const firstStart = firstTest.span.start - ast.span.start;
+                                        const firstEnd = firstTest.span.end - ast.span.start;
+                                        commonTestExpr = source.substring(firstStart, firstEnd);
                                     }
                                 }
-                            }
-                            else {
-                                const cond = meta.options[0];
-                                let testStr = cond.testString;
-                                if (!testStr && cond.test) {
-                                    const start = cond.test.span.start - ast.span.start;
-                                    const end = cond.test.span.end - ast.span.start;
-                                    testStr = source.substring(start, end);
+                                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) {
+                                    if (!isProduction)
+                                        (0, utils_1.extractOndemandStyles)(currentStyle, extractedSheets, scannedTables);
+                                    const records = (0, utils_1.getStyleRecords)(currentStyle);
+                                    if (!isProduction)
+                                        records.forEach((r) => addSheet(r.sheet));
+                                    const className = records.map((r) => r.hash).join(' ');
+                                    const finalKey = keyParts.join('__');
+                                    if (className)
+                                        results[finalKey] = className;
+                                    return;
                                 }
-                                const expr = `(!!(${testStr}))`;
-                                if (meta.stride > 1) {
-                                    indexParts.push(`(${expr} * ${meta.stride})`);
+                                const dim = dimensions[dimIndex];
+                                dim.options.forEach((opt) => {
+                                    const nextStyle = (0, utils_1.deepMerge)(currentStyle, opt.style);
+                                    recurse(dimIndex + 1, nextStyle, [
+                                        ...keyParts,
+                                        String(opt.value),
+                                    ]);
+                                });
+                            };
+                            recurse(0, baseConflict, []);
+                            let baseConflictClass = '';
+                            if (Object.keys(baseConflict).length > 0) {
+                                if (!isProduction)
+                                    (0, utils_1.extractOndemandStyles)(baseConflict, extractedSheets, scannedTables);
+                                const records = (0, utils_1.getStyleRecords)(baseConflict);
+                                if (!isProduction)
+                                    records.forEach((r) => addSheet(r.sheet));
+                                baseConflictClass = records.map((r) => r.hash).join(' ');
+                            }
+                            const keyExprs = [];
+                            dimensions.forEach((dim) => {
+                                if (dim.type === 'std') {
+                                    keyExprs.push(`(${dim.testExpr} ? "1" : "0")`);
                                 }
                                 else {
-                                    indexParts.push(`(${expr} * 1)`);
+                                    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})`);
                         }
-                        const indexExpr = indexParts.join(' + ') || '0';
-                        const tableStr = JSON.stringify(table);
-                        const replacement = `${tableStr}[${indexExpr}]`;
+                        const replacement = classParts.length > 0 ? classParts.join(' + " " + ') : '""';
                         replacements.push({
                             start: node.span.start - ast.span.start,
                             end: node.span.end - ast.span.start,

package/package.json

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