@plumeria/turbopack-loader 10.0.1 → 10.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +579 -654
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -41,14 +41,15 @@ const zss_engine_1 = require("zss-engine");
|
|
|
41
41
|
const utils_1 = require("@plumeria/utils");
|
|
42
42
|
async function loader(source) {
|
|
43
43
|
const callback = this.async();
|
|
44
|
+
const resourcePath = this.resourcePath;
|
|
44
45
|
const isProduction = process.env.NODE_ENV === 'production';
|
|
45
46
|
const VIRTUAL_FILE_PATH = path.resolve(__dirname, '..', 'zero-virtual.css');
|
|
46
|
-
if (
|
|
47
|
+
if (resourcePath.includes('node_modules') ||
|
|
47
48
|
!source.includes('@plumeria/core')) {
|
|
48
49
|
return callback(null, source);
|
|
49
50
|
}
|
|
50
51
|
this.clearDependencies();
|
|
51
|
-
this.addDependency(
|
|
52
|
+
this.addDependency(resourcePath);
|
|
52
53
|
const ast = (0, core_1.parseSync)(source, {
|
|
53
54
|
syntax: 'typescript',
|
|
54
55
|
tsx: true,
|
|
@@ -61,7 +62,7 @@ async function loader(source) {
|
|
|
61
62
|
for (const node of ast.body) {
|
|
62
63
|
if (node.type === 'ImportDeclaration') {
|
|
63
64
|
const sourcePath = node.source.value;
|
|
64
|
-
const actualPath = (0, utils_1.resolveImportPath)(sourcePath,
|
|
65
|
+
const actualPath = (0, utils_1.resolveImportPath)(sourcePath, resourcePath);
|
|
65
66
|
if (actualPath) {
|
|
66
67
|
this.addDependency(actualPath);
|
|
67
68
|
}
|
|
@@ -79,7 +80,6 @@ async function loader(source) {
|
|
|
79
80
|
const createThemeImportMap = {};
|
|
80
81
|
const createStaticImportMap = {};
|
|
81
82
|
const plumeriaAliases = {};
|
|
82
|
-
const resourcePath = this.resourcePath;
|
|
83
83
|
(0, utils_1.traverse)(ast, {
|
|
84
84
|
ImportDeclaration({ node }) {
|
|
85
85
|
const sourcePath = node.source.value;
|
|
@@ -500,6 +500,441 @@ async function loader(source) {
|
|
|
500
500
|
},
|
|
501
501
|
});
|
|
502
502
|
const jsxOpeningElementMap = new Map();
|
|
503
|
+
const getSource = (node) => {
|
|
504
|
+
const start = node.span.start - baseByteOffset;
|
|
505
|
+
const end = node.span.end - baseByteOffset;
|
|
506
|
+
return sourceBuffer.subarray(start, end).toString('utf-8');
|
|
507
|
+
};
|
|
508
|
+
const resolveStyleObject = (expr) => {
|
|
509
|
+
if (utils_1.t.isObjectExpression(expr)) {
|
|
510
|
+
return (0, utils_1.objectExpressionToObject)(expr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
|
|
511
|
+
}
|
|
512
|
+
else if (utils_1.t.isMemberExpression(expr) &&
|
|
513
|
+
utils_1.t.isIdentifier(expr.object) &&
|
|
514
|
+
(utils_1.t.isIdentifier(expr.property) ||
|
|
515
|
+
expr.property.type === 'Computed')) {
|
|
516
|
+
if (expr.property.type === 'Computed')
|
|
517
|
+
return {};
|
|
518
|
+
const varName = expr.object.value;
|
|
519
|
+
const propName = expr.property.value;
|
|
520
|
+
const styleInfo = localCreateStyles[varName];
|
|
521
|
+
if (styleInfo?.obj[propName]) {
|
|
522
|
+
const style = styleInfo.obj[propName];
|
|
523
|
+
if (typeof style === 'object' && style !== null)
|
|
524
|
+
return style;
|
|
525
|
+
}
|
|
526
|
+
const hash = mergedCreateTable[varName];
|
|
527
|
+
if (hash) {
|
|
528
|
+
const obj = scannedTables.createObjectTable[hash];
|
|
529
|
+
if (obj?.[propName] && typeof obj[propName] === 'object')
|
|
530
|
+
return obj[propName];
|
|
531
|
+
}
|
|
532
|
+
}
|
|
533
|
+
else if (utils_1.t.isIdentifier(expr)) {
|
|
534
|
+
const varName = expr.value;
|
|
535
|
+
const uniqueKey = `${resourcePath}-${varName}`;
|
|
536
|
+
let hash = scannedTables.createHashTable[uniqueKey];
|
|
537
|
+
if (!hash)
|
|
538
|
+
hash = mergedCreateTable[varName];
|
|
539
|
+
if (hash) {
|
|
540
|
+
const obj = scannedTables.createObjectTable[hash];
|
|
541
|
+
if (obj && typeof obj === 'object')
|
|
542
|
+
return obj;
|
|
543
|
+
}
|
|
544
|
+
const styleInfo = localCreateStyles[varName];
|
|
545
|
+
if (styleInfo?.obj)
|
|
546
|
+
return styleInfo.obj;
|
|
547
|
+
const vHash = mergedVariantsTable[varName];
|
|
548
|
+
if (vHash)
|
|
549
|
+
return scannedTables.variantsObjectTable[vHash];
|
|
550
|
+
}
|
|
551
|
+
return null;
|
|
552
|
+
};
|
|
553
|
+
const buildClassParts = (args, dynamicClassParts = [], existingClass = '') => {
|
|
554
|
+
const conditionals = [];
|
|
555
|
+
let groupIdCounter = 0;
|
|
556
|
+
let baseStyle = {};
|
|
557
|
+
let isOptimizable = true;
|
|
558
|
+
const collectConditions = (node, currentTestStrings = []) => {
|
|
559
|
+
const staticStyle = resolveStyleObject(node);
|
|
560
|
+
if (staticStyle) {
|
|
561
|
+
if (currentTestStrings.length === 0) {
|
|
562
|
+
baseStyle = (0, utils_1.deepMerge)(baseStyle, staticStyle);
|
|
563
|
+
}
|
|
564
|
+
else {
|
|
565
|
+
conditionals.push({
|
|
566
|
+
test: node,
|
|
567
|
+
testString: currentTestStrings.join(' && '),
|
|
568
|
+
truthy: staticStyle,
|
|
569
|
+
falsy: {},
|
|
570
|
+
varName: undefined,
|
|
571
|
+
});
|
|
572
|
+
}
|
|
573
|
+
return true;
|
|
574
|
+
}
|
|
575
|
+
if (node.type === 'ConditionalExpression') {
|
|
576
|
+
const testSource = getSource(node.test);
|
|
577
|
+
if (currentTestStrings.length === 0) {
|
|
578
|
+
const trueStyle = resolveStyleObject(node.consequent);
|
|
579
|
+
const falseStyle = resolveStyleObject(node.alternate);
|
|
580
|
+
if (trueStyle && falseStyle) {
|
|
581
|
+
conditionals.push({
|
|
582
|
+
test: node,
|
|
583
|
+
testString: testSource,
|
|
584
|
+
truthy: trueStyle,
|
|
585
|
+
falsy: falseStyle,
|
|
586
|
+
varName: undefined,
|
|
587
|
+
});
|
|
588
|
+
return true;
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
collectConditions(node.consequent, [
|
|
592
|
+
...currentTestStrings,
|
|
593
|
+
`(${testSource})`,
|
|
594
|
+
]);
|
|
595
|
+
collectConditions(node.alternate, [
|
|
596
|
+
...currentTestStrings,
|
|
597
|
+
`!(${testSource})`,
|
|
598
|
+
]);
|
|
599
|
+
return true;
|
|
600
|
+
}
|
|
601
|
+
else if (node.type === 'BinaryExpression' && node.operator === '&&') {
|
|
602
|
+
collectConditions(node.right, [
|
|
603
|
+
...currentTestStrings,
|
|
604
|
+
`(${getSource(node.left)})`,
|
|
605
|
+
]);
|
|
606
|
+
return true;
|
|
607
|
+
}
|
|
608
|
+
else if (node.type === 'ParenthesisExpression') {
|
|
609
|
+
return collectConditions(node.expression, currentTestStrings);
|
|
610
|
+
}
|
|
611
|
+
return false;
|
|
612
|
+
};
|
|
613
|
+
for (const arg of args) {
|
|
614
|
+
const expr = arg.expression;
|
|
615
|
+
if (utils_1.t.isCallExpression(expr) && utils_1.t.isIdentifier(expr.callee)) {
|
|
616
|
+
const varName = expr.callee.value;
|
|
617
|
+
const uniqueKey = `${resourcePath}-${varName}`;
|
|
618
|
+
let variantObj;
|
|
619
|
+
let hash = scannedTables.variantsHashTable[uniqueKey];
|
|
620
|
+
if (!hash)
|
|
621
|
+
hash = mergedVariantsTable[varName];
|
|
622
|
+
if (hash && scannedTables.variantsObjectTable[hash])
|
|
623
|
+
variantObj = scannedTables.variantsObjectTable[hash];
|
|
624
|
+
if (!variantObj && localCreateStyles[varName]?.obj)
|
|
625
|
+
variantObj = localCreateStyles[varName].obj;
|
|
626
|
+
if (variantObj) {
|
|
627
|
+
const callArgs = expr.arguments;
|
|
628
|
+
if (callArgs.length === 1 && !callArgs[0].spread) {
|
|
629
|
+
const arg = callArgs[0].expression;
|
|
630
|
+
if (arg.type === 'ObjectExpression') {
|
|
631
|
+
for (const prop of arg.properties) {
|
|
632
|
+
let groupName;
|
|
633
|
+
let valExpr;
|
|
634
|
+
if (prop.type === 'KeyValueProperty' &&
|
|
635
|
+
prop.key.type === 'Identifier') {
|
|
636
|
+
groupName = prop.key.value;
|
|
637
|
+
valExpr = prop.value;
|
|
638
|
+
}
|
|
639
|
+
else if (prop.type === 'Identifier') {
|
|
640
|
+
groupName = prop.value;
|
|
641
|
+
valExpr = prop;
|
|
642
|
+
}
|
|
643
|
+
if (groupName && valExpr) {
|
|
644
|
+
const groupVariants = variantObj[groupName];
|
|
645
|
+
if (!groupVariants)
|
|
646
|
+
continue;
|
|
647
|
+
const currentGroupId = ++groupIdCounter;
|
|
648
|
+
const valSource = getSource(valExpr);
|
|
649
|
+
if (valExpr.type === 'StringLiteral') {
|
|
650
|
+
if (groupVariants[valExpr.value])
|
|
651
|
+
baseStyle = (0, utils_1.deepMerge)(baseStyle, groupVariants[valExpr.value]);
|
|
652
|
+
continue;
|
|
653
|
+
}
|
|
654
|
+
Object.entries(groupVariants).forEach(([optionName, style]) => {
|
|
655
|
+
conditionals.push({
|
|
656
|
+
test: valExpr,
|
|
657
|
+
testLHS: valSource,
|
|
658
|
+
testString: `${valSource} === '${optionName}'`,
|
|
659
|
+
truthy: style,
|
|
660
|
+
falsy: {},
|
|
661
|
+
groupId: currentGroupId,
|
|
662
|
+
groupName,
|
|
663
|
+
valueName: optionName,
|
|
664
|
+
varName,
|
|
665
|
+
});
|
|
666
|
+
});
|
|
667
|
+
}
|
|
668
|
+
}
|
|
669
|
+
continue;
|
|
670
|
+
}
|
|
671
|
+
const argSource = getSource(arg);
|
|
672
|
+
if (utils_1.t.isStringLiteral(arg)) {
|
|
673
|
+
if (variantObj[arg.value])
|
|
674
|
+
baseStyle = (0, utils_1.deepMerge)(baseStyle, variantObj[arg.value]);
|
|
675
|
+
continue;
|
|
676
|
+
}
|
|
677
|
+
const currentGroupId = ++groupIdCounter;
|
|
678
|
+
Object.entries(variantObj).forEach(([key, style]) => {
|
|
679
|
+
conditionals.push({
|
|
680
|
+
test: arg,
|
|
681
|
+
testLHS: argSource,
|
|
682
|
+
testString: `${argSource} === '${key}'`,
|
|
683
|
+
truthy: style,
|
|
684
|
+
falsy: {},
|
|
685
|
+
groupId: currentGroupId,
|
|
686
|
+
groupName: undefined,
|
|
687
|
+
valueName: key,
|
|
688
|
+
varName,
|
|
689
|
+
});
|
|
690
|
+
});
|
|
691
|
+
continue;
|
|
692
|
+
}
|
|
693
|
+
isOptimizable = false;
|
|
694
|
+
break;
|
|
695
|
+
}
|
|
696
|
+
}
|
|
697
|
+
else if (utils_1.t.isIdentifier(expr)) {
|
|
698
|
+
const varName = expr.value;
|
|
699
|
+
const uniqueKey = `${resourcePath}-${varName}`;
|
|
700
|
+
let variantObj;
|
|
701
|
+
let hash = scannedTables.variantsHashTable[uniqueKey];
|
|
702
|
+
if (!hash)
|
|
703
|
+
hash = mergedVariantsTable[varName];
|
|
704
|
+
if (hash && scannedTables.variantsObjectTable[hash])
|
|
705
|
+
variantObj = scannedTables.variantsObjectTable[hash];
|
|
706
|
+
if (!variantObj && localCreateStyles[varName]?.obj)
|
|
707
|
+
variantObj = localCreateStyles[varName].obj;
|
|
708
|
+
if (variantObj) {
|
|
709
|
+
Object.entries(variantObj).forEach(([groupName, groupVariants]) => {
|
|
710
|
+
if (!groupVariants)
|
|
711
|
+
return;
|
|
712
|
+
const currentGroupId = ++groupIdCounter;
|
|
713
|
+
Object.entries(groupVariants).forEach(([optionName, style]) => {
|
|
714
|
+
conditionals.push({
|
|
715
|
+
test: expr,
|
|
716
|
+
testLHS: `props["${groupName}"]`,
|
|
717
|
+
testString: `props["${groupName}"] === '${optionName}'`,
|
|
718
|
+
truthy: style,
|
|
719
|
+
falsy: {},
|
|
720
|
+
groupId: currentGroupId,
|
|
721
|
+
groupName,
|
|
722
|
+
valueName: optionName,
|
|
723
|
+
varName,
|
|
724
|
+
});
|
|
725
|
+
});
|
|
726
|
+
});
|
|
727
|
+
continue;
|
|
728
|
+
}
|
|
729
|
+
}
|
|
730
|
+
const handled = collectConditions(expr);
|
|
731
|
+
if (handled)
|
|
732
|
+
continue;
|
|
733
|
+
isOptimizable = false;
|
|
734
|
+
break;
|
|
735
|
+
}
|
|
736
|
+
if (!isOptimizable ||
|
|
737
|
+
(args.length === 0 && Object.keys(baseStyle).length === 0)) {
|
|
738
|
+
return { classParts: [...dynamicClassParts], isOptimizable, baseStyle };
|
|
739
|
+
}
|
|
740
|
+
const participation = {};
|
|
741
|
+
const registerParticipation = (style, sourceId) => {
|
|
742
|
+
Object.keys(style).forEach((key) => {
|
|
743
|
+
if (!participation[key])
|
|
744
|
+
participation[key] = new Set();
|
|
745
|
+
participation[key].add(sourceId);
|
|
746
|
+
});
|
|
747
|
+
};
|
|
748
|
+
registerParticipation(baseStyle, 'base');
|
|
749
|
+
conditionals
|
|
750
|
+
.filter((c) => c.groupId === undefined)
|
|
751
|
+
.forEach((c, idx) => {
|
|
752
|
+
registerParticipation(c.truthy, `std_${idx}`);
|
|
753
|
+
registerParticipation(c.falsy, `std_${idx}`);
|
|
754
|
+
});
|
|
755
|
+
const variantGroups = {};
|
|
756
|
+
conditionals.forEach((c) => {
|
|
757
|
+
if (c.groupId !== undefined) {
|
|
758
|
+
if (!variantGroups[c.groupId])
|
|
759
|
+
variantGroups[c.groupId] = [];
|
|
760
|
+
variantGroups[c.groupId].push(c);
|
|
761
|
+
}
|
|
762
|
+
});
|
|
763
|
+
Object.entries(variantGroups).forEach(([groupId, opts]) => {
|
|
764
|
+
opts.forEach((opt) => registerParticipation(opt.truthy, `var_${groupId}`));
|
|
765
|
+
});
|
|
766
|
+
const conflictingKeys = new Set();
|
|
767
|
+
Object.entries(participation).forEach(([key, sources]) => {
|
|
768
|
+
if (sources.size > 1)
|
|
769
|
+
conflictingKeys.add(key);
|
|
770
|
+
});
|
|
771
|
+
const baseIndependent = {};
|
|
772
|
+
const baseConflict = {};
|
|
773
|
+
Object.entries(baseStyle).forEach(([key, val]) => {
|
|
774
|
+
if (conflictingKeys.has(key))
|
|
775
|
+
baseConflict[key] = val;
|
|
776
|
+
else
|
|
777
|
+
baseIndependent[key] = val;
|
|
778
|
+
});
|
|
779
|
+
const indepConditionals = [];
|
|
780
|
+
const conflictConditionals = [];
|
|
781
|
+
conditionals.forEach((c) => {
|
|
782
|
+
const truthyIndep = {};
|
|
783
|
+
const truthyConf = {};
|
|
784
|
+
const falsyIndep = {};
|
|
785
|
+
const falsyConf = {};
|
|
786
|
+
let hasIndep = false;
|
|
787
|
+
let hasConf = false;
|
|
788
|
+
Object.entries(c.truthy).forEach(([k, v]) => {
|
|
789
|
+
if (conflictingKeys.has(k)) {
|
|
790
|
+
truthyConf[k] = v;
|
|
791
|
+
hasConf = true;
|
|
792
|
+
}
|
|
793
|
+
else {
|
|
794
|
+
truthyIndep[k] = v;
|
|
795
|
+
hasIndep = true;
|
|
796
|
+
}
|
|
797
|
+
});
|
|
798
|
+
Object.entries(c.falsy).forEach(([k, v]) => {
|
|
799
|
+
if (conflictingKeys.has(k)) {
|
|
800
|
+
falsyConf[k] = v;
|
|
801
|
+
hasConf = true;
|
|
802
|
+
}
|
|
803
|
+
else {
|
|
804
|
+
falsyIndep[k] = v;
|
|
805
|
+
hasIndep = true;
|
|
806
|
+
}
|
|
807
|
+
});
|
|
808
|
+
if (hasIndep)
|
|
809
|
+
indepConditionals.push({
|
|
810
|
+
...c,
|
|
811
|
+
truthy: truthyIndep,
|
|
812
|
+
falsy: falsyIndep,
|
|
813
|
+
});
|
|
814
|
+
if (hasConf)
|
|
815
|
+
conflictConditionals.push({
|
|
816
|
+
...c,
|
|
817
|
+
truthy: truthyConf,
|
|
818
|
+
falsy: falsyConf,
|
|
819
|
+
});
|
|
820
|
+
});
|
|
821
|
+
const classParts = [];
|
|
822
|
+
if (existingClass)
|
|
823
|
+
classParts.push(JSON.stringify(existingClass));
|
|
824
|
+
if (Object.keys(baseIndependent).length > 0) {
|
|
825
|
+
const className = (0, utils_1.getStyleRecords)(baseIndependent)
|
|
826
|
+
.map((r) => r.hash)
|
|
827
|
+
.join(' ');
|
|
828
|
+
if (className)
|
|
829
|
+
classParts.push(JSON.stringify(className));
|
|
830
|
+
}
|
|
831
|
+
indepConditionals
|
|
832
|
+
.filter((c) => c.groupId === undefined)
|
|
833
|
+
.forEach((c) => {
|
|
834
|
+
const processBranch = (style) => {
|
|
835
|
+
if (Object.keys(style).length === 0)
|
|
836
|
+
return '""';
|
|
837
|
+
return JSON.stringify((0, utils_1.getStyleRecords)(style)
|
|
838
|
+
.map((r) => r.hash)
|
|
839
|
+
.join(' '));
|
|
840
|
+
};
|
|
841
|
+
const testStr = c.testString ?? getSource(c.test);
|
|
842
|
+
classParts.push(`(${testStr} ? ${processBranch(c.truthy)} : ${processBranch(c.falsy)})`);
|
|
843
|
+
});
|
|
844
|
+
const indepVarGroups = {};
|
|
845
|
+
indepConditionals.forEach((c) => {
|
|
846
|
+
if (c.groupId !== undefined) {
|
|
847
|
+
if (!indepVarGroups[c.groupId])
|
|
848
|
+
indepVarGroups[c.groupId] = [];
|
|
849
|
+
indepVarGroups[c.groupId].push(c);
|
|
850
|
+
}
|
|
851
|
+
});
|
|
852
|
+
Object.values(indepVarGroups).forEach((options) => {
|
|
853
|
+
const commonTestExpr = options[0].testLHS ??
|
|
854
|
+
options[0].testString ??
|
|
855
|
+
getSource(options[0].test);
|
|
856
|
+
const lookupMap = {};
|
|
857
|
+
options.forEach((opt) => {
|
|
858
|
+
if (opt.valueName && opt.truthy) {
|
|
859
|
+
const className = (0, utils_1.getStyleRecords)(opt.truthy)
|
|
860
|
+
.map((r) => r.hash)
|
|
861
|
+
.join(' ');
|
|
862
|
+
if (className)
|
|
863
|
+
lookupMap[opt.valueName] = className;
|
|
864
|
+
}
|
|
865
|
+
});
|
|
866
|
+
if (Object.keys(lookupMap).length > 0) {
|
|
867
|
+
const entries = Object.entries(lookupMap)
|
|
868
|
+
.map(([k, v]) => `"${k}":"${v}"`)
|
|
869
|
+
.join(',');
|
|
870
|
+
classParts.push(`({${entries}}[${commonTestExpr}] || "")`);
|
|
871
|
+
}
|
|
872
|
+
});
|
|
873
|
+
if (Object.keys(baseConflict).length > 0 ||
|
|
874
|
+
conflictConditionals.length > 0) {
|
|
875
|
+
const dimensions = [];
|
|
876
|
+
conflictConditionals
|
|
877
|
+
.filter((c) => c.groupId === undefined)
|
|
878
|
+
.forEach((c) => {
|
|
879
|
+
dimensions.push({
|
|
880
|
+
type: 'std',
|
|
881
|
+
testExpr: c.testString ?? getSource(c.test),
|
|
882
|
+
options: [
|
|
883
|
+
{ value: 0, style: c.falsy, label: 'false' },
|
|
884
|
+
{ value: 1, style: c.truthy, label: 'true' },
|
|
885
|
+
],
|
|
886
|
+
});
|
|
887
|
+
});
|
|
888
|
+
const conflictVarGroups = {};
|
|
889
|
+
conflictConditionals.forEach((c) => {
|
|
890
|
+
if (c.groupId !== undefined) {
|
|
891
|
+
if (!conflictVarGroups[c.groupId])
|
|
892
|
+
conflictVarGroups[c.groupId] = [];
|
|
893
|
+
conflictVarGroups[c.groupId].push(c);
|
|
894
|
+
}
|
|
895
|
+
});
|
|
896
|
+
Object.entries(conflictVarGroups).forEach(([, opts]) => {
|
|
897
|
+
dimensions.push({
|
|
898
|
+
type: 'var',
|
|
899
|
+
testExpr: opts[0].testLHS ?? opts[0].testString ?? getSource(opts[0].test),
|
|
900
|
+
options: opts.map((opt) => ({
|
|
901
|
+
value: opt.valueName,
|
|
902
|
+
style: opt.truthy,
|
|
903
|
+
label: opt.valueName || 'default',
|
|
904
|
+
})),
|
|
905
|
+
});
|
|
906
|
+
});
|
|
907
|
+
const results = {};
|
|
908
|
+
const recurse = (dimIndex, currentStyle, keyParts) => {
|
|
909
|
+
if (dimIndex >= dimensions.length) {
|
|
910
|
+
const className = (0, utils_1.getStyleRecords)(currentStyle)
|
|
911
|
+
.map((r) => r.hash)
|
|
912
|
+
.join(' ');
|
|
913
|
+
if (className)
|
|
914
|
+
results[keyParts.join('__')] = className;
|
|
915
|
+
return;
|
|
916
|
+
}
|
|
917
|
+
dimensions[dimIndex].options.forEach((opt) => recurse(dimIndex + 1, (0, utils_1.deepMerge)(currentStyle, opt.style), [
|
|
918
|
+
...keyParts,
|
|
919
|
+
String(opt.value),
|
|
920
|
+
]));
|
|
921
|
+
};
|
|
922
|
+
recurse(0, baseConflict, []);
|
|
923
|
+
const baseConflictClass = Object.keys(baseConflict).length > 0
|
|
924
|
+
? (0, utils_1.getStyleRecords)(baseConflict)
|
|
925
|
+
.map((r) => r.hash)
|
|
926
|
+
.join(' ')
|
|
927
|
+
: '';
|
|
928
|
+
const masterKeyExpr = dimensions
|
|
929
|
+
.map((dim) => dim.type === 'std'
|
|
930
|
+
? `(${dim.testExpr} ? "1" : "0")`
|
|
931
|
+
: dim.testExpr || '""')
|
|
932
|
+
.join(' + "__" + ');
|
|
933
|
+
classParts.push(`(${JSON.stringify(results)}[${masterKeyExpr || '""'}] || ${baseConflictClass ? JSON.stringify(baseConflictClass) : '""'})`);
|
|
934
|
+
}
|
|
935
|
+
classParts.push(...dynamicClassParts);
|
|
936
|
+
return { classParts, isOptimizable, baseStyle };
|
|
937
|
+
};
|
|
503
938
|
(0, utils_1.traverse)(ast, {
|
|
504
939
|
JSXOpeningElement({ node }) {
|
|
505
940
|
jsxOpeningElementMap.set(node.span.start, node.attributes);
|
|
@@ -629,7 +1064,7 @@ async function loader(source) {
|
|
|
629
1064
|
if (!node.value || node.value.type !== 'JSXExpressionContainer')
|
|
630
1065
|
return;
|
|
631
1066
|
const expr = node.value.expression;
|
|
632
|
-
|
|
1067
|
+
let args = expr.type === 'ArrayExpression'
|
|
633
1068
|
? expr.elements
|
|
634
1069
|
.filter(Boolean)
|
|
635
1070
|
.map((el) => ({ expression: el.expression ?? el }))
|
|
@@ -673,662 +1108,103 @@ async function loader(source) {
|
|
|
673
1108
|
dynamicStyleParts.push(stripped);
|
|
674
1109
|
}
|
|
675
1110
|
}
|
|
676
|
-
|
|
677
|
-
if (utils_1.t.isObjectExpression(expr)) {
|
|
678
|
-
return (0, utils_1.objectExpressionToObject)(expr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
|
|
679
|
-
}
|
|
680
|
-
else if (utils_1.t.isMemberExpression(expr) &&
|
|
681
|
-
utils_1.t.isIdentifier(expr.object) &&
|
|
682
|
-
(utils_1.t.isIdentifier(expr.property) ||
|
|
683
|
-
expr.property.type === 'Computed')) {
|
|
684
|
-
if (expr.property.type === 'Computed') {
|
|
685
|
-
return {};
|
|
686
|
-
}
|
|
687
|
-
const varName = expr.object.value;
|
|
688
|
-
const propName = expr.property.value;
|
|
689
|
-
const styleInfo = localCreateStyles[varName];
|
|
690
|
-
if (styleInfo && styleInfo.obj[propName]) {
|
|
691
|
-
const style = styleInfo.obj[propName];
|
|
692
|
-
if (typeof style === 'object' && style !== null) {
|
|
693
|
-
return style;
|
|
694
|
-
}
|
|
695
|
-
}
|
|
696
|
-
const hash = mergedCreateTable[varName];
|
|
697
|
-
if (hash) {
|
|
698
|
-
const obj = scannedTables.createObjectTable[hash];
|
|
699
|
-
if (obj && obj[propName]) {
|
|
700
|
-
const style = obj[propName];
|
|
701
|
-
if (typeof style === 'object' && style !== null) {
|
|
702
|
-
return style;
|
|
703
|
-
}
|
|
704
|
-
}
|
|
705
|
-
}
|
|
706
|
-
}
|
|
707
|
-
else if (utils_1.t.isIdentifier(expr)) {
|
|
708
|
-
const varName = expr.value;
|
|
709
|
-
const uniqueKey = `${resourcePath}-${varName}`;
|
|
710
|
-
let hash = scannedTables.createHashTable[uniqueKey];
|
|
711
|
-
if (!hash) {
|
|
712
|
-
hash = mergedCreateTable[varName];
|
|
713
|
-
}
|
|
714
|
-
if (hash) {
|
|
715
|
-
const obj = scannedTables.createObjectTable[hash];
|
|
716
|
-
if (obj && typeof obj === 'object') {
|
|
717
|
-
return obj;
|
|
718
|
-
}
|
|
719
|
-
}
|
|
720
|
-
const styleInfo = localCreateStyles[varName];
|
|
721
|
-
if (styleInfo && styleInfo.obj) {
|
|
722
|
-
return styleInfo.obj;
|
|
723
|
-
}
|
|
724
|
-
if (localCreateStyles[varName]) {
|
|
725
|
-
return localCreateStyles[varName].obj;
|
|
726
|
-
}
|
|
727
|
-
const vHash = mergedVariantsTable[varName];
|
|
728
|
-
if (vHash) {
|
|
729
|
-
return scannedTables.variantsObjectTable[vHash];
|
|
730
|
-
}
|
|
731
|
-
}
|
|
732
|
-
return null;
|
|
733
|
-
};
|
|
734
|
-
const conditionals = [];
|
|
735
|
-
let groupIdCounter = 0;
|
|
736
|
-
let baseStyle = {};
|
|
737
|
-
let isOptimizable = true;
|
|
738
|
-
for (const arg of args) {
|
|
1111
|
+
args = args.filter((arg) => {
|
|
739
1112
|
const expr = arg.expression;
|
|
740
|
-
if (utils_1.t.isCallExpression(expr)
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
valueExpr = JSON.stringify(processed);
|
|
774
|
-
}
|
|
775
|
-
else if (argSource.startsWith('"') &&
|
|
776
|
-
argSource.endsWith('"')) {
|
|
777
|
-
const processed = (0, zss_engine_1.applyCssValue)(argSource.slice(1, -1), targetProp);
|
|
778
|
-
valueExpr = JSON.stringify(processed);
|
|
779
|
-
}
|
|
780
|
-
else {
|
|
781
|
-
const exception = [
|
|
782
|
-
'animationIterationCount',
|
|
783
|
-
'aspectRatio',
|
|
784
|
-
'columnCount',
|
|
785
|
-
'columns',
|
|
786
|
-
'fillOpacity',
|
|
787
|
-
'flex',
|
|
788
|
-
'flexGrow',
|
|
789
|
-
'flexShrink',
|
|
790
|
-
'floodOpacity',
|
|
791
|
-
'fontSizeAdjust',
|
|
792
|
-
'fontWeight',
|
|
793
|
-
'gridColumn',
|
|
794
|
-
'gridColumnEnd',
|
|
795
|
-
'gridColumnStart',
|
|
796
|
-
'gridRow',
|
|
797
|
-
'gridRowEnd',
|
|
798
|
-
'gridRowStart',
|
|
799
|
-
'hyphenateLimitChars',
|
|
800
|
-
'initialLetter',
|
|
801
|
-
'lineHeight',
|
|
802
|
-
'mathDepth',
|
|
803
|
-
'opacity',
|
|
804
|
-
'order',
|
|
805
|
-
'orphans',
|
|
806
|
-
'scale',
|
|
807
|
-
'shapeImageThreshold',
|
|
808
|
-
'stopOpacity',
|
|
809
|
-
'strokeMiterlimit',
|
|
810
|
-
'strokeOpacity',
|
|
811
|
-
'tabSize',
|
|
812
|
-
'widows',
|
|
813
|
-
'zIndex',
|
|
814
|
-
'zoom',
|
|
815
|
-
];
|
|
816
|
-
if (!exception.includes(targetProp)) {
|
|
817
|
-
valueExpr = `(typeof ${argSource} === 'number' ? ${argSource} + 'px' : ${argSource})`;
|
|
818
|
-
}
|
|
819
|
-
else {
|
|
820
|
-
valueExpr = argSource;
|
|
821
|
-
}
|
|
822
|
-
}
|
|
823
|
-
}
|
|
824
|
-
catch {
|
|
825
|
-
valueExpr = argSource;
|
|
826
|
-
}
|
|
827
|
-
dynamicStyleParts.push(`"${cssVar}": ${valueExpr}`);
|
|
828
|
-
});
|
|
829
|
-
continue;
|
|
830
|
-
}
|
|
831
|
-
}
|
|
832
|
-
}
|
|
833
|
-
if (utils_1.t.isCallExpression(expr) && utils_1.t.isIdentifier(expr.callee)) {
|
|
834
|
-
const varName = expr.callee.value;
|
|
835
|
-
let variantObj;
|
|
836
|
-
const uniqueKey = `${resourcePath}-${varName}`;
|
|
837
|
-
let hash = scannedTables.variantsHashTable[uniqueKey];
|
|
838
|
-
if (!hash) {
|
|
839
|
-
hash = mergedVariantsTable[varName];
|
|
840
|
-
}
|
|
841
|
-
if (hash && scannedTables.variantsObjectTable[hash]) {
|
|
842
|
-
variantObj = scannedTables.variantsObjectTable[hash];
|
|
843
|
-
}
|
|
844
|
-
if (!variantObj) {
|
|
845
|
-
if (localCreateStyles[varName] && localCreateStyles[varName].obj) {
|
|
846
|
-
variantObj = localCreateStyles[varName].obj;
|
|
847
|
-
}
|
|
848
|
-
}
|
|
849
|
-
if (variantObj) {
|
|
850
|
-
const callArgs = expr.arguments;
|
|
851
|
-
if (callArgs.length === 1 && !callArgs[0].spread) {
|
|
852
|
-
const arg = callArgs[0].expression;
|
|
853
|
-
if (arg.type === 'ObjectExpression') {
|
|
854
|
-
for (const prop of arg.properties) {
|
|
855
|
-
let groupName;
|
|
856
|
-
let valExpr;
|
|
857
|
-
if (prop.type === 'KeyValueProperty' &&
|
|
858
|
-
prop.key.type === 'Identifier') {
|
|
859
|
-
groupName = prop.key.value;
|
|
860
|
-
valExpr = prop.value;
|
|
861
|
-
}
|
|
862
|
-
else if (prop.type === 'Identifier') {
|
|
863
|
-
groupName = prop.value;
|
|
864
|
-
valExpr = prop;
|
|
865
|
-
}
|
|
866
|
-
if (groupName && valExpr) {
|
|
867
|
-
const groupVariants = variantObj[groupName];
|
|
868
|
-
if (!groupVariants)
|
|
869
|
-
continue;
|
|
870
|
-
const currentGroupId = ++groupIdCounter;
|
|
871
|
-
const valStart = valExpr.span.start - baseByteOffset;
|
|
872
|
-
const valEnd = valExpr.span.end - baseByteOffset;
|
|
873
|
-
const valSource = sourceBuffer
|
|
874
|
-
.subarray(valStart, valEnd)
|
|
875
|
-
.toString('utf-8');
|
|
876
|
-
if (valExpr.type === 'StringLiteral') {
|
|
877
|
-
if (groupVariants[valExpr.value]) {
|
|
878
|
-
baseStyle = (0, utils_1.deepMerge)(baseStyle, groupVariants[valExpr.value]);
|
|
879
|
-
}
|
|
880
|
-
continue;
|
|
881
|
-
}
|
|
882
|
-
Object.entries(groupVariants).forEach(([optionName, style]) => {
|
|
883
|
-
conditionals.push({
|
|
884
|
-
test: valExpr,
|
|
885
|
-
testLHS: valSource,
|
|
886
|
-
testString: `${valSource} === '${optionName}'`,
|
|
887
|
-
truthy: style,
|
|
888
|
-
falsy: {},
|
|
889
|
-
groupId: currentGroupId,
|
|
890
|
-
groupName,
|
|
891
|
-
valueName: optionName,
|
|
892
|
-
varName,
|
|
893
|
-
});
|
|
894
|
-
});
|
|
895
|
-
}
|
|
896
|
-
}
|
|
897
|
-
continue;
|
|
898
|
-
}
|
|
899
|
-
const argStart = arg.span.start - baseByteOffset;
|
|
900
|
-
const argEnd = arg.span.end - baseByteOffset;
|
|
901
|
-
const argSource = sourceBuffer
|
|
902
|
-
.subarray(argStart, argEnd)
|
|
903
|
-
.toString('utf-8');
|
|
904
|
-
if (utils_1.t.isStringLiteral(arg)) {
|
|
905
|
-
if (variantObj[arg.value]) {
|
|
906
|
-
baseStyle = (0, utils_1.deepMerge)(baseStyle, variantObj[arg.value]);
|
|
907
|
-
}
|
|
908
|
-
continue;
|
|
909
|
-
}
|
|
910
|
-
const currentGroupId = ++groupIdCounter;
|
|
911
|
-
Object.entries(variantObj).forEach(([key, style]) => {
|
|
912
|
-
conditionals.push({
|
|
913
|
-
test: arg,
|
|
914
|
-
testLHS: argSource,
|
|
915
|
-
testString: `${argSource} === '${key}'`,
|
|
916
|
-
truthy: style,
|
|
917
|
-
falsy: {},
|
|
918
|
-
groupId: currentGroupId,
|
|
919
|
-
groupName: undefined,
|
|
920
|
-
valueName: key,
|
|
921
|
-
varName,
|
|
922
|
-
});
|
|
923
|
-
});
|
|
924
|
-
continue;
|
|
925
|
-
}
|
|
926
|
-
isOptimizable = false;
|
|
927
|
-
break;
|
|
928
|
-
}
|
|
929
|
-
}
|
|
930
|
-
else if (utils_1.t.isIdentifier(expr)) {
|
|
931
|
-
const varName = expr.value;
|
|
932
|
-
let variantObj;
|
|
933
|
-
const uniqueKey = `${resourcePath}-${varName}`;
|
|
934
|
-
let hash = scannedTables.variantsHashTable[uniqueKey];
|
|
935
|
-
if (!hash) {
|
|
936
|
-
hash = mergedVariantsTable[varName];
|
|
937
|
-
}
|
|
938
|
-
if (hash && scannedTables.variantsObjectTable[hash]) {
|
|
939
|
-
variantObj = scannedTables.variantsObjectTable[hash];
|
|
940
|
-
}
|
|
941
|
-
if (!variantObj) {
|
|
942
|
-
if (localCreateStyles[varName] && localCreateStyles[varName].obj) {
|
|
943
|
-
variantObj = localCreateStyles[varName].obj;
|
|
944
|
-
}
|
|
945
|
-
}
|
|
946
|
-
if (variantObj) {
|
|
947
|
-
Object.entries(variantObj).forEach(([groupName, groupVariants]) => {
|
|
948
|
-
if (!groupVariants)
|
|
949
|
-
return;
|
|
950
|
-
const currentGroupId = ++groupIdCounter;
|
|
951
|
-
Object.entries(groupVariants).forEach(([optionName, style]) => {
|
|
952
|
-
conditionals.push({
|
|
953
|
-
test: expr,
|
|
954
|
-
testLHS: `props["${groupName}"]`,
|
|
955
|
-
testString: `props["${groupName}"] === '${optionName}'`,
|
|
956
|
-
truthy: style,
|
|
957
|
-
falsy: {},
|
|
958
|
-
groupId: currentGroupId,
|
|
959
|
-
groupName: groupName,
|
|
960
|
-
valueName: optionName,
|
|
961
|
-
varName: varName,
|
|
962
|
-
});
|
|
963
|
-
});
|
|
964
|
-
});
|
|
965
|
-
continue;
|
|
966
|
-
}
|
|
967
|
-
}
|
|
968
|
-
const getSource = (node) => {
|
|
969
|
-
const start = node.span.start - baseByteOffset;
|
|
970
|
-
const end = node.span.end - baseByteOffset;
|
|
971
|
-
return sourceBuffer.subarray(start, end).toString('utf-8');
|
|
972
|
-
};
|
|
973
|
-
const collectConditions = (node, currentTestStrings = []) => {
|
|
974
|
-
const staticStyle = resolveStyleObject(node);
|
|
975
|
-
if (staticStyle) {
|
|
976
|
-
if (currentTestStrings.length === 0) {
|
|
977
|
-
baseStyle = (0, utils_1.deepMerge)(baseStyle, staticStyle);
|
|
978
|
-
}
|
|
979
|
-
else {
|
|
980
|
-
const combinedTest = currentTestStrings.join(' && ');
|
|
981
|
-
conditionals.push({
|
|
982
|
-
test: node,
|
|
983
|
-
testString: combinedTest,
|
|
984
|
-
truthy: staticStyle,
|
|
985
|
-
falsy: {},
|
|
986
|
-
varName: undefined,
|
|
987
|
-
});
|
|
988
|
-
}
|
|
989
|
-
return true;
|
|
990
|
-
}
|
|
991
|
-
if (node.type === 'ConditionalExpression') {
|
|
992
|
-
const testSource = getSource(node.test);
|
|
993
|
-
if (currentTestStrings.length === 0) {
|
|
994
|
-
const trueStyle = resolveStyleObject(node.consequent);
|
|
995
|
-
const falseStyle = resolveStyleObject(node.alternate);
|
|
996
|
-
if (trueStyle && falseStyle) {
|
|
997
|
-
conditionals.push({
|
|
998
|
-
test: node,
|
|
999
|
-
testString: testSource,
|
|
1000
|
-
truthy: trueStyle,
|
|
1001
|
-
falsy: falseStyle,
|
|
1002
|
-
varName: undefined,
|
|
1003
|
-
});
|
|
1004
|
-
return true;
|
|
1005
|
-
}
|
|
1006
|
-
}
|
|
1007
|
-
collectConditions(node.consequent, [
|
|
1008
|
-
...currentTestStrings,
|
|
1009
|
-
`(${testSource})`,
|
|
1010
|
-
]);
|
|
1011
|
-
collectConditions(node.alternate, [
|
|
1012
|
-
...currentTestStrings,
|
|
1013
|
-
`!(${testSource})`,
|
|
1014
|
-
]);
|
|
1015
|
-
return true;
|
|
1113
|
+
if (!utils_1.t.isCallExpression(expr) || !utils_1.t.isMemberExpression(expr.callee))
|
|
1114
|
+
return true;
|
|
1115
|
+
const callee = expr.callee;
|
|
1116
|
+
if (!utils_1.t.isIdentifier(callee.object) || !utils_1.t.isIdentifier(callee.property))
|
|
1117
|
+
return true;
|
|
1118
|
+
const varName = callee.object.value;
|
|
1119
|
+
const propKey = callee.property.value;
|
|
1120
|
+
const styleInfo = localCreateStyles[varName];
|
|
1121
|
+
const atomMap = styleInfo?.hashMap?.[propKey];
|
|
1122
|
+
if (!atomMap?.['__cssVars__'])
|
|
1123
|
+
return true;
|
|
1124
|
+
const cssVarInfo = JSON.parse(atomMap['__cssVars__']);
|
|
1125
|
+
const hashes = Object.entries(atomMap)
|
|
1126
|
+
.filter(([k]) => k !== '__cssVars__')
|
|
1127
|
+
.map(([, v]) => v)
|
|
1128
|
+
.join(' ');
|
|
1129
|
+
if (hashes)
|
|
1130
|
+
dynamicClassParts.push(JSON.stringify(hashes));
|
|
1131
|
+
const callArgs = expr.arguments;
|
|
1132
|
+
Object.entries(cssVarInfo).forEach(([_, { cssVar, propKey: targetProp }], i) => {
|
|
1133
|
+
const callArg = callArgs[i];
|
|
1134
|
+
if (!callArg)
|
|
1135
|
+
return;
|
|
1136
|
+
const argStart = callArg.expression.span.start - baseByteOffset;
|
|
1137
|
+
const argEnd = callArg.expression.span.end - baseByteOffset;
|
|
1138
|
+
const argSource = sourceBuffer
|
|
1139
|
+
.subarray(argStart, argEnd)
|
|
1140
|
+
.toString('utf-8');
|
|
1141
|
+
let valueExpr;
|
|
1142
|
+
const maybeNumber = Number(argSource);
|
|
1143
|
+
if (!isNaN(maybeNumber) &&
|
|
1144
|
+
argSource.trim() === String(maybeNumber)) {
|
|
1145
|
+
valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(maybeNumber, targetProp));
|
|
1016
1146
|
}
|
|
1017
|
-
else if (
|
|
1018
|
-
|
|
1019
|
-
const leftSource = getSource(node.left);
|
|
1020
|
-
collectConditions(node.right, [
|
|
1021
|
-
...currentTestStrings,
|
|
1022
|
-
`(${leftSource})`,
|
|
1023
|
-
]);
|
|
1024
|
-
return true;
|
|
1147
|
+
else if (argSource.startsWith('"') && argSource.endsWith('"')) {
|
|
1148
|
+
valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(argSource.slice(1, -1), targetProp));
|
|
1025
1149
|
}
|
|
1026
|
-
else
|
|
1027
|
-
|
|
1150
|
+
else {
|
|
1151
|
+
const exception = [
|
|
1152
|
+
'animationIterationCount',
|
|
1153
|
+
'aspectRatio',
|
|
1154
|
+
'columnCount',
|
|
1155
|
+
'columns',
|
|
1156
|
+
'fillOpacity',
|
|
1157
|
+
'flex',
|
|
1158
|
+
'flexGrow',
|
|
1159
|
+
'flexShrink',
|
|
1160
|
+
'floodOpacity',
|
|
1161
|
+
'fontSizeAdjust',
|
|
1162
|
+
'fontWeight',
|
|
1163
|
+
'gridColumn',
|
|
1164
|
+
'gridColumnEnd',
|
|
1165
|
+
'gridColumnStart',
|
|
1166
|
+
'gridRow',
|
|
1167
|
+
'gridRowEnd',
|
|
1168
|
+
'gridRowStart',
|
|
1169
|
+
'hyphenateLimitChars',
|
|
1170
|
+
'initialLetter',
|
|
1171
|
+
'lineHeight',
|
|
1172
|
+
'mathDepth',
|
|
1173
|
+
'opacity',
|
|
1174
|
+
'order',
|
|
1175
|
+
'orphans',
|
|
1176
|
+
'scale',
|
|
1177
|
+
'shapeImageThreshold',
|
|
1178
|
+
'stopOpacity',
|
|
1179
|
+
'strokeMiterlimit',
|
|
1180
|
+
'strokeOpacity',
|
|
1181
|
+
'tabSize',
|
|
1182
|
+
'widows',
|
|
1183
|
+
'zIndex',
|
|
1184
|
+
'zoom',
|
|
1185
|
+
];
|
|
1186
|
+
valueExpr = exception.includes(targetProp)
|
|
1187
|
+
? argSource
|
|
1188
|
+
: `(typeof ${argSource} === 'number' ? ${argSource} + 'px' : ${argSource})`;
|
|
1028
1189
|
}
|
|
1029
|
-
|
|
1030
|
-
};
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
continue;
|
|
1034
|
-
isOptimizable = false;
|
|
1035
|
-
break;
|
|
1036
|
-
}
|
|
1190
|
+
dynamicStyleParts.push(`"${cssVar}": ${valueExpr}`);
|
|
1191
|
+
});
|
|
1192
|
+
return false;
|
|
1193
|
+
});
|
|
1037
1194
|
const styleAttr = dynamicStyleParts.length > 0
|
|
1038
1195
|
? ` style={{${dynamicStyleParts.join(', ')}}}`
|
|
1039
1196
|
: '';
|
|
1197
|
+
const { classParts, isOptimizable, baseStyle } = buildClassParts(args, dynamicClassParts, existingClass);
|
|
1040
1198
|
if (isOptimizable &&
|
|
1041
|
-
(args.length > 0 ||
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
replacements.push({
|
|
1051
|
-
start: node.span.start - baseByteOffset,
|
|
1052
|
-
end: node.span.end - baseByteOffset,
|
|
1053
|
-
content: `className={${allParts || '""'}}${styleAttr}`,
|
|
1054
|
-
});
|
|
1055
|
-
}
|
|
1056
|
-
else {
|
|
1057
|
-
const propertyCounts = {};
|
|
1058
|
-
const addCounts = (style) => {
|
|
1059
|
-
Object.keys(style).forEach((key) => {
|
|
1060
|
-
propertyCounts[key] = (propertyCounts[key] || 0) + 1;
|
|
1061
|
-
});
|
|
1062
|
-
};
|
|
1063
|
-
addCounts(baseStyle);
|
|
1064
|
-
const participation = {};
|
|
1065
|
-
const registerParticipation = (style, sourceId) => {
|
|
1066
|
-
Object.keys(style).forEach((key) => {
|
|
1067
|
-
if (!participation[key])
|
|
1068
|
-
participation[key] = new Set();
|
|
1069
|
-
participation[key].add(sourceId);
|
|
1070
|
-
});
|
|
1071
|
-
};
|
|
1072
|
-
registerParticipation(baseStyle, 'base');
|
|
1073
|
-
conditionals
|
|
1074
|
-
.filter((c) => c.groupId === undefined)
|
|
1075
|
-
.forEach((c, idx) => {
|
|
1076
|
-
const sourceId = `std_${idx}`;
|
|
1077
|
-
registerParticipation(c.truthy, sourceId);
|
|
1078
|
-
registerParticipation(c.falsy, sourceId);
|
|
1079
|
-
});
|
|
1080
|
-
const variantGroups = {};
|
|
1081
|
-
conditionals.forEach((c) => {
|
|
1082
|
-
if (c.groupId !== undefined) {
|
|
1083
|
-
if (!variantGroups[c.groupId])
|
|
1084
|
-
variantGroups[c.groupId] = [];
|
|
1085
|
-
variantGroups[c.groupId].push(c);
|
|
1086
|
-
}
|
|
1087
|
-
});
|
|
1088
|
-
Object.entries(variantGroups).forEach(([groupId, opts]) => {
|
|
1089
|
-
const sourceId = `var_${groupId}`;
|
|
1090
|
-
opts.forEach((opt) => {
|
|
1091
|
-
registerParticipation(opt.truthy, sourceId);
|
|
1092
|
-
registerParticipation(opt.falsy, sourceId);
|
|
1093
|
-
});
|
|
1094
|
-
});
|
|
1095
|
-
const conflictingKeys = new Set();
|
|
1096
|
-
Object.entries(participation).forEach(([key, sources]) => {
|
|
1097
|
-
if (sources.size > 1) {
|
|
1098
|
-
conflictingKeys.add(key);
|
|
1099
|
-
}
|
|
1100
|
-
});
|
|
1101
|
-
const baseIndependent = {};
|
|
1102
|
-
const baseConflict = {};
|
|
1103
|
-
Object.entries(baseStyle).forEach(([key, val]) => {
|
|
1104
|
-
if (conflictingKeys.has(key)) {
|
|
1105
|
-
baseConflict[key] = val;
|
|
1106
|
-
}
|
|
1107
|
-
else {
|
|
1108
|
-
baseIndependent[key] = val;
|
|
1109
|
-
}
|
|
1110
|
-
});
|
|
1111
|
-
const indepConditionals = [];
|
|
1112
|
-
const conflictConditionals = [];
|
|
1113
|
-
const splitConditional = (c) => {
|
|
1114
|
-
const truthyIndep = {};
|
|
1115
|
-
const truthyConf = {};
|
|
1116
|
-
const falsyIndep = {};
|
|
1117
|
-
const falsyConf = {};
|
|
1118
|
-
let hasIndep = false;
|
|
1119
|
-
let hasConf = false;
|
|
1120
|
-
Object.entries(c.truthy).forEach(([k, v]) => {
|
|
1121
|
-
if (conflictingKeys.has(k)) {
|
|
1122
|
-
truthyConf[k] = v;
|
|
1123
|
-
hasConf = true;
|
|
1124
|
-
}
|
|
1125
|
-
else {
|
|
1126
|
-
truthyIndep[k] = v;
|
|
1127
|
-
hasIndep = true;
|
|
1128
|
-
}
|
|
1129
|
-
});
|
|
1130
|
-
Object.entries(c.falsy).forEach(([k, v]) => {
|
|
1131
|
-
if (conflictingKeys.has(k)) {
|
|
1132
|
-
falsyConf[k] = v;
|
|
1133
|
-
hasConf = true;
|
|
1134
|
-
}
|
|
1135
|
-
else {
|
|
1136
|
-
falsyIndep[k] = v;
|
|
1137
|
-
hasIndep = true;
|
|
1138
|
-
}
|
|
1139
|
-
});
|
|
1140
|
-
if (hasIndep) {
|
|
1141
|
-
indepConditionals.push({
|
|
1142
|
-
...c,
|
|
1143
|
-
truthy: truthyIndep,
|
|
1144
|
-
falsy: falsyIndep,
|
|
1145
|
-
});
|
|
1146
|
-
}
|
|
1147
|
-
if (hasConf) {
|
|
1148
|
-
conflictConditionals.push({
|
|
1149
|
-
...c,
|
|
1150
|
-
truthy: truthyConf,
|
|
1151
|
-
falsy: falsyConf,
|
|
1152
|
-
});
|
|
1153
|
-
}
|
|
1154
|
-
};
|
|
1155
|
-
conditionals.forEach(splitConditional);
|
|
1156
|
-
const classParts = [];
|
|
1157
|
-
if (existingClass)
|
|
1158
|
-
classParts.push(JSON.stringify(existingClass));
|
|
1159
|
-
if (Object.keys(baseIndependent).length > 0) {
|
|
1160
|
-
const records = (0, utils_1.getStyleRecords)(baseIndependent);
|
|
1161
|
-
const className = records.map((r) => r.hash).join(' ');
|
|
1162
|
-
if (className)
|
|
1163
|
-
classParts.push(JSON.stringify(className));
|
|
1164
|
-
}
|
|
1165
|
-
const indepStd = indepConditionals.filter((c) => c.groupId === undefined);
|
|
1166
|
-
indepStd.forEach((c) => {
|
|
1167
|
-
const processBranch = (style) => {
|
|
1168
|
-
if (Object.keys(style).length === 0)
|
|
1169
|
-
return '""';
|
|
1170
|
-
const records = (0, utils_1.getStyleRecords)(style);
|
|
1171
|
-
return JSON.stringify(records.map((r) => r.hash).join(' '));
|
|
1172
|
-
};
|
|
1173
|
-
const tClass = processBranch(c.truthy);
|
|
1174
|
-
const fClass = processBranch(c.falsy);
|
|
1175
|
-
let testStr = c.testString;
|
|
1176
|
-
if (!testStr && c.test) {
|
|
1177
|
-
const start = c.test.span.start - baseByteOffset;
|
|
1178
|
-
const end = c.test.span.end - baseByteOffset;
|
|
1179
|
-
testStr = sourceBuffer.subarray(start, end).toString('utf-8');
|
|
1180
|
-
}
|
|
1181
|
-
classParts.push(`(${testStr} ? ${tClass} : ${fClass})`);
|
|
1182
|
-
});
|
|
1183
|
-
const indepVarGroups = {};
|
|
1184
|
-
indepConditionals.forEach((c) => {
|
|
1185
|
-
if (c.groupId !== undefined) {
|
|
1186
|
-
if (!indepVarGroups[c.groupId])
|
|
1187
|
-
indepVarGroups[c.groupId] = [];
|
|
1188
|
-
indepVarGroups[c.groupId].push(c);
|
|
1189
|
-
}
|
|
1190
|
-
});
|
|
1191
|
-
Object.values(indepVarGroups).forEach((options) => {
|
|
1192
|
-
let commonTestExpr = null;
|
|
1193
|
-
const lookupMap = {};
|
|
1194
|
-
if (options.length > 0) {
|
|
1195
|
-
if (options[0].testLHS) {
|
|
1196
|
-
commonTestExpr = options[0].testLHS;
|
|
1197
|
-
}
|
|
1198
|
-
else if (options[0].testString) {
|
|
1199
|
-
commonTestExpr = options[0].testString;
|
|
1200
|
-
}
|
|
1201
|
-
else {
|
|
1202
|
-
const firstTest = options[0].test;
|
|
1203
|
-
const firstStart = firstTest.span.start - baseByteOffset;
|
|
1204
|
-
const firstEnd = firstTest.span.end - baseByteOffset;
|
|
1205
|
-
commonTestExpr = sourceBuffer
|
|
1206
|
-
.subarray(firstStart, firstEnd)
|
|
1207
|
-
.toString('utf-8');
|
|
1208
|
-
}
|
|
1209
|
-
options.forEach((opt) => {
|
|
1210
|
-
if (opt.valueName && opt.truthy) {
|
|
1211
|
-
const records = (0, utils_1.getStyleRecords)(opt.truthy);
|
|
1212
|
-
const className = records.map((r) => r.hash).join(' ');
|
|
1213
|
-
if (className) {
|
|
1214
|
-
lookupMap[opt.valueName] = className;
|
|
1215
|
-
}
|
|
1216
|
-
}
|
|
1217
|
-
});
|
|
1218
|
-
}
|
|
1219
|
-
if (commonTestExpr && Object.keys(lookupMap).length > 0) {
|
|
1220
|
-
const entries = Object.entries(lookupMap)
|
|
1221
|
-
.map(([key, val]) => `"${key}":"${val}"`)
|
|
1222
|
-
.join(',');
|
|
1223
|
-
classParts.push(`({${entries}}[${commonTestExpr}] || "")`);
|
|
1224
|
-
}
|
|
1225
|
-
});
|
|
1226
|
-
if (Object.keys(baseConflict).length > 0 ||
|
|
1227
|
-
conflictConditionals.length > 0) {
|
|
1228
|
-
const conflictStd = conflictConditionals.filter((c) => c.groupId === undefined);
|
|
1229
|
-
const conflictVarGroups = {};
|
|
1230
|
-
conflictConditionals.forEach((c) => {
|
|
1231
|
-
if (c.groupId !== undefined) {
|
|
1232
|
-
if (!conflictVarGroups[c.groupId])
|
|
1233
|
-
conflictVarGroups[c.groupId] = [];
|
|
1234
|
-
conflictVarGroups[c.groupId].push(c);
|
|
1235
|
-
}
|
|
1236
|
-
});
|
|
1237
|
-
const dimensions = [];
|
|
1238
|
-
conflictStd.forEach((c) => {
|
|
1239
|
-
let testStr = c.testString;
|
|
1240
|
-
if (!testStr && c.test) {
|
|
1241
|
-
const start = c.test.span.start - baseByteOffset;
|
|
1242
|
-
const end = c.test.span.end - baseByteOffset;
|
|
1243
|
-
testStr = sourceBuffer.subarray(start, end).toString('utf-8');
|
|
1244
|
-
}
|
|
1245
|
-
dimensions.push({
|
|
1246
|
-
type: 'std',
|
|
1247
|
-
testExpr: testStr,
|
|
1248
|
-
options: [
|
|
1249
|
-
{ value: 0, style: c.falsy, label: 'false' },
|
|
1250
|
-
{ value: 1, style: c.truthy, label: 'true' },
|
|
1251
|
-
],
|
|
1252
|
-
});
|
|
1253
|
-
});
|
|
1254
|
-
Object.entries(conflictVarGroups).forEach(([_groupId, opts]) => {
|
|
1255
|
-
let commonTestExpr = null;
|
|
1256
|
-
if (opts.length > 0) {
|
|
1257
|
-
if (opts[0].testLHS) {
|
|
1258
|
-
commonTestExpr = opts[0].testLHS;
|
|
1259
|
-
}
|
|
1260
|
-
else if (opts[0].testString) {
|
|
1261
|
-
commonTestExpr = opts[0].testString;
|
|
1262
|
-
}
|
|
1263
|
-
else {
|
|
1264
|
-
const firstTest = opts[0].test;
|
|
1265
|
-
const firstStart = firstTest.span.start - baseByteOffset;
|
|
1266
|
-
const firstEnd = firstTest.span.end - baseByteOffset;
|
|
1267
|
-
commonTestExpr = sourceBuffer
|
|
1268
|
-
.subarray(firstStart, firstEnd)
|
|
1269
|
-
.toString('utf-8');
|
|
1270
|
-
}
|
|
1271
|
-
}
|
|
1272
|
-
const options = opts.map((opt) => ({
|
|
1273
|
-
value: opt.valueName,
|
|
1274
|
-
style: opt.truthy,
|
|
1275
|
-
label: opt.valueName || 'default',
|
|
1276
|
-
}));
|
|
1277
|
-
dimensions.push({
|
|
1278
|
-
type: 'var',
|
|
1279
|
-
testExpr: commonTestExpr || '""',
|
|
1280
|
-
options: options,
|
|
1281
|
-
});
|
|
1282
|
-
});
|
|
1283
|
-
const results = {};
|
|
1284
|
-
const recurse = (dimIndex, currentStyle, keyParts) => {
|
|
1285
|
-
if (dimIndex >= dimensions.length) {
|
|
1286
|
-
const records = (0, utils_1.getStyleRecords)(currentStyle);
|
|
1287
|
-
const className = records.map((r) => r.hash).join(' ');
|
|
1288
|
-
const finalKey = keyParts.join('__');
|
|
1289
|
-
if (className)
|
|
1290
|
-
results[finalKey] = className;
|
|
1291
|
-
return;
|
|
1292
|
-
}
|
|
1293
|
-
const dim = dimensions[dimIndex];
|
|
1294
|
-
dim.options.forEach((opt) => {
|
|
1295
|
-
const nextStyle = (0, utils_1.deepMerge)(currentStyle, opt.style);
|
|
1296
|
-
recurse(dimIndex + 1, nextStyle, [
|
|
1297
|
-
...keyParts,
|
|
1298
|
-
String(opt.value),
|
|
1299
|
-
]);
|
|
1300
|
-
});
|
|
1301
|
-
};
|
|
1302
|
-
recurse(0, baseConflict, []);
|
|
1303
|
-
let baseConflictClass = '';
|
|
1304
|
-
if (Object.keys(baseConflict).length > 0) {
|
|
1305
|
-
const records = (0, utils_1.getStyleRecords)(baseConflict);
|
|
1306
|
-
baseConflictClass = records.map((r) => r.hash).join(' ');
|
|
1307
|
-
}
|
|
1308
|
-
const keyExprs = [];
|
|
1309
|
-
dimensions.forEach((dim) => {
|
|
1310
|
-
if (dim.type === 'std') {
|
|
1311
|
-
keyExprs.push(`(${dim.testExpr} ? "1" : "0")`);
|
|
1312
|
-
}
|
|
1313
|
-
else {
|
|
1314
|
-
keyExprs.push(dim.testExpr || '""');
|
|
1315
|
-
}
|
|
1316
|
-
});
|
|
1317
|
-
const masterKeyExpr = keyExprs.length > 0 ? keyExprs.join(' + "__" + ') : '""';
|
|
1318
|
-
const tableJson = JSON.stringify(results);
|
|
1319
|
-
const fallback = baseConflictClass
|
|
1320
|
-
? JSON.stringify(baseConflictClass)
|
|
1321
|
-
: '""';
|
|
1322
|
-
classParts.push(`(${tableJson}[${masterKeyExpr}] || ${fallback})`);
|
|
1323
|
-
}
|
|
1324
|
-
classParts.push(...dynamicClassParts);
|
|
1325
|
-
const replacement = classParts.length > 0 ? classParts.join(' + " " + ') : '""';
|
|
1326
|
-
replacements.push({
|
|
1327
|
-
start: node.span.start - baseByteOffset,
|
|
1328
|
-
end: node.span.end - baseByteOffset,
|
|
1329
|
-
content: `className={${replacement}}${styleAttr}`,
|
|
1330
|
-
});
|
|
1331
|
-
}
|
|
1199
|
+
(args.length > 0 ||
|
|
1200
|
+
Object.keys(baseStyle).length > 0 ||
|
|
1201
|
+
dynamicClassParts.length > 0)) {
|
|
1202
|
+
const replacement = classParts.length > 0 ? classParts.join(' + " " + ') : '""';
|
|
1203
|
+
replacements.push({
|
|
1204
|
+
start: node.span.start - baseByteOffset,
|
|
1205
|
+
end: node.span.end - baseByteOffset,
|
|
1206
|
+
content: `className={${replacement}}${styleAttr}`,
|
|
1207
|
+
});
|
|
1332
1208
|
}
|
|
1333
1209
|
else {
|
|
1334
1210
|
replacements.push({
|
|
@@ -1338,6 +1214,55 @@ async function loader(source) {
|
|
|
1338
1214
|
});
|
|
1339
1215
|
}
|
|
1340
1216
|
},
|
|
1217
|
+
CallExpression({ node }) {
|
|
1218
|
+
const callee = node.callee;
|
|
1219
|
+
let isUseCall = false;
|
|
1220
|
+
if (utils_1.t.isMemberExpression(callee) &&
|
|
1221
|
+
utils_1.t.isIdentifier(callee.object) &&
|
|
1222
|
+
utils_1.t.isIdentifier(callee.property)) {
|
|
1223
|
+
const objectName = callee.object.value;
|
|
1224
|
+
const propertyName = callee.property.value;
|
|
1225
|
+
const alias = plumeriaAliases[objectName];
|
|
1226
|
+
if (alias === 'NAMESPACE' && propertyName === 'use') {
|
|
1227
|
+
isUseCall = true;
|
|
1228
|
+
}
|
|
1229
|
+
}
|
|
1230
|
+
else if (utils_1.t.isIdentifier(callee)) {
|
|
1231
|
+
const calleeName = callee.value;
|
|
1232
|
+
const originalName = plumeriaAliases[calleeName];
|
|
1233
|
+
if (originalName === 'use') {
|
|
1234
|
+
isUseCall = true;
|
|
1235
|
+
}
|
|
1236
|
+
}
|
|
1237
|
+
if (!isUseCall)
|
|
1238
|
+
return;
|
|
1239
|
+
const args = node.arguments;
|
|
1240
|
+
for (const arg of args) {
|
|
1241
|
+
const expr = arg.expression;
|
|
1242
|
+
if (!utils_1.t.isCallExpression(expr) || !utils_1.t.isMemberExpression(expr.callee))
|
|
1243
|
+
continue;
|
|
1244
|
+
const callee = expr.callee;
|
|
1245
|
+
if (!utils_1.t.isIdentifier(callee.object) || !utils_1.t.isIdentifier(callee.property))
|
|
1246
|
+
continue;
|
|
1247
|
+
const varName = callee.object.value;
|
|
1248
|
+
const propKey = callee.property.value;
|
|
1249
|
+
const styleInfo = localCreateStyles[varName];
|
|
1250
|
+
const atomMap = styleInfo?.hashMap?.[propKey];
|
|
1251
|
+
if (atomMap?.['__cssVars__']) {
|
|
1252
|
+
throw new Error(`Plumeria: css.use(${getSource(expr)}) does not support dynamic function keys.\n`);
|
|
1253
|
+
}
|
|
1254
|
+
}
|
|
1255
|
+
const { classParts, isOptimizable, baseStyle } = buildClassParts(args);
|
|
1256
|
+
if (isOptimizable &&
|
|
1257
|
+
(args.length > 0 || Object.keys(baseStyle).length > 0)) {
|
|
1258
|
+
const replacement = classParts.length > 0 ? classParts.join(' + " " + ') : '""';
|
|
1259
|
+
replacements.push({
|
|
1260
|
+
start: node.span.start - baseByteOffset,
|
|
1261
|
+
end: node.span.end - baseByteOffset,
|
|
1262
|
+
content: replacement,
|
|
1263
|
+
});
|
|
1264
|
+
}
|
|
1265
|
+
},
|
|
1341
1266
|
});
|
|
1342
1267
|
Object.values(localCreateStyles).forEach((info) => {
|
|
1343
1268
|
if (info.type === 'constant') {
|
|
@@ -1382,7 +1307,7 @@ async function loader(source) {
|
|
|
1382
1307
|
: './' + relativePath;
|
|
1383
1308
|
return JSON.stringify(requestPath);
|
|
1384
1309
|
}
|
|
1385
|
-
const virtualCssImportPath = path.posix.join(path.posix.relative(path.dirname(
|
|
1310
|
+
const virtualCssImportPath = path.posix.join(path.posix.relative(path.dirname(resourcePath), path.resolve(__dirname, '..', VIRTUAL_CSS_PATH)));
|
|
1386
1311
|
let importPath = virtualCssImportPath;
|
|
1387
1312
|
if (!importPath.startsWith('.')) {
|
|
1388
1313
|
importPath = './' + importPath;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plumeria/turbopack-loader",
|
|
3
|
-
"version": "10.0.
|
|
3
|
+
"version": "10.0.2",
|
|
4
4
|
"description": "Plumeria Turbopack-loader",
|
|
5
5
|
"author": "Refirst 11",
|
|
6
6
|
"license": "MIT",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"zero-virtual.css"
|
|
23
23
|
],
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@plumeria/utils": "^10.0.
|
|
25
|
+
"@plumeria/utils": "^10.0.2"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@swc/core": "1.15.18",
|