@plumeria/vite-plugin 9.1.2 → 10.0.1
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 +708 -513
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createFilter } from 'vite';
|
|
2
2
|
import { parseSync } from '@swc/core';
|
|
3
3
|
import * as path from 'path';
|
|
4
|
-
import { genBase36Hash } from 'zss-engine';
|
|
4
|
+
import { applyCssValue, genBase36Hash } from 'zss-engine';
|
|
5
5
|
import { traverse, getStyleRecords, collectLocalConsts, objectExpressionToObject, t, extractOndemandStyles, deepMerge, scanAll, resolveImportPath, optimizer, processVariants, } from '@plumeria/utils';
|
|
6
6
|
import { getLeadingCommentLength } from '@plumeria/utils';
|
|
7
7
|
const TARGET_EXTENSIONS = ['ts', 'tsx', 'js', 'jsx'];
|
|
@@ -284,6 +284,8 @@ export function plumeria(options = {}) {
|
|
|
284
284
|
if (obj) {
|
|
285
285
|
const hashMap = {};
|
|
286
286
|
Object.entries(obj).forEach(([key, style]) => {
|
|
287
|
+
if (typeof style !== 'object' || style === null)
|
|
288
|
+
return;
|
|
287
289
|
const records = getStyleRecords(style);
|
|
288
290
|
extractOndemandStyles(style, extractedSheets, scannedTables);
|
|
289
291
|
records.forEach((r) => {
|
|
@@ -293,6 +295,58 @@ export function plumeria(options = {}) {
|
|
|
293
295
|
records.forEach((r) => (atomMap[r.key] = r.hash));
|
|
294
296
|
hashMap[key] = atomMap;
|
|
295
297
|
});
|
|
298
|
+
const objExpr = node.init.arguments[0]
|
|
299
|
+
.expression;
|
|
300
|
+
objExpr.properties.forEach((prop) => {
|
|
301
|
+
if (prop.type !== 'KeyValueProperty' ||
|
|
302
|
+
prop.key.type !== 'Identifier')
|
|
303
|
+
return;
|
|
304
|
+
const isArrow = prop.value.type === 'ArrowFunctionExpression';
|
|
305
|
+
const isFunc = prop.value.type === 'FunctionExpression';
|
|
306
|
+
if (!isArrow && !isFunc)
|
|
307
|
+
return;
|
|
308
|
+
const key = prop.key.value;
|
|
309
|
+
const params = prop.value.params.map((p) => p.type === 'Identifier' ? p.value : (p.pat?.value ?? 'arg'));
|
|
310
|
+
const cssVarInfo = {};
|
|
311
|
+
const tempStaticTable = { ...mergedStaticTable };
|
|
312
|
+
const substitutedArgs = params.map((paramName) => {
|
|
313
|
+
const cssVar = `--${key}-${paramName}`;
|
|
314
|
+
cssVarInfo[paramName] = { cssVar, propKey: '' };
|
|
315
|
+
return `var(${cssVar})`;
|
|
316
|
+
});
|
|
317
|
+
params.forEach((paramName, i) => {
|
|
318
|
+
tempStaticTable[paramName] = substitutedArgs[i];
|
|
319
|
+
});
|
|
320
|
+
let actualBody = prop.value.body;
|
|
321
|
+
if (actualBody?.type === 'ParenthesisExpression')
|
|
322
|
+
actualBody = actualBody.expression;
|
|
323
|
+
if (actualBody?.type === 'BlockStatement') {
|
|
324
|
+
const first = actualBody.stmts?.[0];
|
|
325
|
+
if (first?.type === 'ReturnStatement')
|
|
326
|
+
actualBody = first.argument;
|
|
327
|
+
if (actualBody?.type === 'ParenthesisExpression')
|
|
328
|
+
actualBody = actualBody.expression;
|
|
329
|
+
}
|
|
330
|
+
if (!actualBody || actualBody.type !== 'ObjectExpression')
|
|
331
|
+
return;
|
|
332
|
+
const substituted = objectExpressionToObject(actualBody, tempStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
|
|
333
|
+
if (!substituted)
|
|
334
|
+
return;
|
|
335
|
+
for (const [, info] of Object.entries(cssVarInfo)) {
|
|
336
|
+
const cssVar = info.cssVar;
|
|
337
|
+
const propKey = Object.keys(substituted).find((k) => typeof substituted[k] === 'string' &&
|
|
338
|
+
substituted[k].includes(cssVar));
|
|
339
|
+
if (propKey) {
|
|
340
|
+
info.propKey = propKey;
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
const records = getStyleRecords(substituted);
|
|
344
|
+
records.forEach((r) => addSheet(r.sheet));
|
|
345
|
+
const atomMap = {};
|
|
346
|
+
records.forEach((r) => (atomMap[r.key] = r.hash));
|
|
347
|
+
atomMap['__cssVars__'] = JSON.stringify(cssVarInfo);
|
|
348
|
+
hashMap[key] = atomMap;
|
|
349
|
+
});
|
|
296
350
|
if (t.isIdentifier(node.id)) {
|
|
297
351
|
idSpans.add(node.id.span.start);
|
|
298
352
|
}
|
|
@@ -479,7 +533,11 @@ export function plumeria(options = {}) {
|
|
|
479
533
|
}
|
|
480
534
|
},
|
|
481
535
|
});
|
|
536
|
+
const jsxOpeningElementMap = new Map();
|
|
482
537
|
traverse(ast, {
|
|
538
|
+
JSXOpeningElement({ node }) {
|
|
539
|
+
jsxOpeningElementMap.set(node.span.start, node.attributes);
|
|
540
|
+
},
|
|
483
541
|
MemberExpression({ node }) {
|
|
484
542
|
if (t.isIdentifier(node.object) && t.isIdentifier(node.property)) {
|
|
485
543
|
const varName = node.object.value;
|
|
@@ -498,7 +556,7 @@ export function plumeria(options = {}) {
|
|
|
498
556
|
replacements.push({
|
|
499
557
|
start: node.span.start - baseByteOffset,
|
|
500
558
|
end: node.span.end - baseByteOffset,
|
|
501
|
-
content: JSON.stringify(atomMap)
|
|
559
|
+
content: `(${JSON.stringify(atomMap)})`,
|
|
502
560
|
});
|
|
503
561
|
}
|
|
504
562
|
}
|
|
@@ -512,7 +570,7 @@ export function plumeria(options = {}) {
|
|
|
512
570
|
replacements.push({
|
|
513
571
|
start: node.span.start - baseByteOffset,
|
|
514
572
|
end: node.span.end - baseByteOffset,
|
|
515
|
-
content: JSON.stringify(atomicMap[propName])
|
|
573
|
+
content: `(${JSON.stringify(atomicMap[propName])})`,
|
|
516
574
|
});
|
|
517
575
|
}
|
|
518
576
|
}
|
|
@@ -526,7 +584,7 @@ export function plumeria(options = {}) {
|
|
|
526
584
|
replacements.push({
|
|
527
585
|
start: node.span.start - baseByteOffset,
|
|
528
586
|
end: node.span.end - baseByteOffset,
|
|
529
|
-
content: JSON.stringify(staticObj[propName])
|
|
587
|
+
content: `(${JSON.stringify(staticObj[propName])})`,
|
|
530
588
|
});
|
|
531
589
|
}
|
|
532
590
|
}
|
|
@@ -542,7 +600,7 @@ export function plumeria(options = {}) {
|
|
|
542
600
|
replacements.push({
|
|
543
601
|
start: node.span.start - baseByteOffset,
|
|
544
602
|
end: node.span.end - baseByteOffset,
|
|
545
|
-
content: JSON.stringify(styleInfo.hashMap)
|
|
603
|
+
content: `(${JSON.stringify(styleInfo.hashMap)})`,
|
|
546
604
|
});
|
|
547
605
|
return;
|
|
548
606
|
}
|
|
@@ -565,7 +623,7 @@ export function plumeria(options = {}) {
|
|
|
565
623
|
replacements.push({
|
|
566
624
|
start: node.span.start - baseByteOffset,
|
|
567
625
|
end: node.span.end - baseByteOffset,
|
|
568
|
-
content: JSON.stringify(hashMap)
|
|
626
|
+
content: `(${JSON.stringify(hashMap)})`,
|
|
569
627
|
});
|
|
570
628
|
}
|
|
571
629
|
}
|
|
@@ -579,7 +637,7 @@ export function plumeria(options = {}) {
|
|
|
579
637
|
replacements.push({
|
|
580
638
|
start: node.span.start - baseByteOffset,
|
|
581
639
|
end: node.span.end - baseByteOffset,
|
|
582
|
-
content: JSON.stringify(atomicMap)
|
|
640
|
+
content: `(${JSON.stringify(atomicMap)})`,
|
|
583
641
|
});
|
|
584
642
|
return;
|
|
585
643
|
}
|
|
@@ -594,433 +652,629 @@ export function plumeria(options = {}) {
|
|
|
594
652
|
replacements.push({
|
|
595
653
|
start: node.span.start - baseByteOffset,
|
|
596
654
|
end: node.span.end - baseByteOffset,
|
|
597
|
-
content: JSON.stringify(staticObj)
|
|
655
|
+
content: `(${JSON.stringify(staticObj)})`,
|
|
598
656
|
});
|
|
599
657
|
}
|
|
600
658
|
}
|
|
601
659
|
},
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
660
|
+
JSXAttribute({ node }) {
|
|
661
|
+
if (node.name.type !== 'Identifier' ||
|
|
662
|
+
node.name.value !== 'styleName')
|
|
663
|
+
return;
|
|
664
|
+
if (!node.value || node.value.type !== 'JSXExpressionContainer')
|
|
665
|
+
return;
|
|
666
|
+
const expr = node.value.expression;
|
|
667
|
+
const args = expr.type === 'ArrayExpression'
|
|
668
|
+
? expr.elements
|
|
669
|
+
.filter(Boolean)
|
|
670
|
+
.map((el) => ({ expression: el.expression ?? el }))
|
|
671
|
+
: [{ expression: expr }];
|
|
672
|
+
const dynamicClassParts = [];
|
|
673
|
+
const dynamicStyleParts = [];
|
|
674
|
+
let attributes = [];
|
|
675
|
+
for (const [, attrs] of jsxOpeningElementMap) {
|
|
676
|
+
const found = attrs.find((a) => a.span?.start === node.span.start);
|
|
677
|
+
if (found) {
|
|
678
|
+
attributes = attrs;
|
|
679
|
+
break;
|
|
613
680
|
}
|
|
614
681
|
}
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
682
|
+
const classNameAttr = attributes.find((attr) => attr.name?.value === 'className');
|
|
683
|
+
let existingClass = '';
|
|
684
|
+
if (classNameAttr?.value?.type === 'StringLiteral') {
|
|
685
|
+
existingClass = classNameAttr.value.value;
|
|
686
|
+
replacements.push({
|
|
687
|
+
start: classNameAttr.span.start - baseByteOffset,
|
|
688
|
+
end: classNameAttr.span.end - baseByteOffset,
|
|
689
|
+
content: '',
|
|
690
|
+
});
|
|
691
|
+
}
|
|
692
|
+
const styleAttrExisting = attributes.find((attr) => attr.name?.value === 'style');
|
|
693
|
+
if (styleAttrExisting) {
|
|
694
|
+
replacements.push({
|
|
695
|
+
start: styleAttrExisting.span.start - baseByteOffset,
|
|
696
|
+
end: styleAttrExisting.span.end - baseByteOffset,
|
|
697
|
+
content: '',
|
|
698
|
+
});
|
|
699
|
+
const innerExpr = styleAttrExisting.value?.expression;
|
|
700
|
+
if (innerExpr?.type === 'ObjectExpression') {
|
|
701
|
+
const start = innerExpr.span.start - baseByteOffset;
|
|
702
|
+
const end = innerExpr.span.end - baseByteOffset;
|
|
703
|
+
const innerSource = sourceBuffer
|
|
704
|
+
.subarray(start, end)
|
|
705
|
+
.toString('utf-8');
|
|
706
|
+
const stripped = innerSource.slice(1, -1).trim();
|
|
707
|
+
if (stripped)
|
|
708
|
+
dynamicStyleParts.push(stripped);
|
|
620
709
|
}
|
|
621
710
|
}
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
711
|
+
const resolveStyleObject = (expr) => {
|
|
712
|
+
if (t.isObjectExpression(expr)) {
|
|
713
|
+
return objectExpressionToObject(expr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
|
|
714
|
+
}
|
|
715
|
+
else if (t.isMemberExpression(expr) &&
|
|
716
|
+
t.isIdentifier(expr.object) &&
|
|
717
|
+
(t.isIdentifier(expr.property) ||
|
|
718
|
+
expr.property.type === 'Computed')) {
|
|
719
|
+
if (expr.property.type === 'Computed') {
|
|
720
|
+
return {};
|
|
627
721
|
}
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
722
|
+
const varName = expr.object.value;
|
|
723
|
+
const propName = expr.property.value;
|
|
724
|
+
const styleInfo = localCreateStyles[varName];
|
|
725
|
+
if (styleInfo && styleInfo.obj[propName]) {
|
|
726
|
+
const style = styleInfo.obj[propName];
|
|
727
|
+
if (typeof style === 'object' && style !== null) {
|
|
728
|
+
return style;
|
|
634
729
|
}
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
730
|
+
}
|
|
731
|
+
const hash = mergedCreateTable[varName];
|
|
732
|
+
if (hash) {
|
|
733
|
+
const obj = scannedTables.createObjectTable[hash];
|
|
734
|
+
if (obj && obj[propName]) {
|
|
735
|
+
const style = obj[propName];
|
|
640
736
|
if (typeof style === 'object' && style !== null) {
|
|
641
737
|
return style;
|
|
642
738
|
}
|
|
643
739
|
}
|
|
644
|
-
const hash = mergedCreateTable[varName];
|
|
645
|
-
if (hash) {
|
|
646
|
-
const obj = scannedTables.createObjectTable[hash];
|
|
647
|
-
if (obj && obj[propName]) {
|
|
648
|
-
const style = obj[propName];
|
|
649
|
-
if (typeof style === 'object' && style !== null) {
|
|
650
|
-
return style;
|
|
651
|
-
}
|
|
652
|
-
}
|
|
653
|
-
}
|
|
654
740
|
}
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
741
|
+
}
|
|
742
|
+
else if (t.isIdentifier(expr)) {
|
|
743
|
+
const varName = expr.value;
|
|
744
|
+
const uniqueKey = `${resourcePath}-${varName}`;
|
|
745
|
+
let hash = scannedTables.createHashTable[uniqueKey];
|
|
746
|
+
if (!hash) {
|
|
747
|
+
hash = mergedCreateTable[varName];
|
|
748
|
+
}
|
|
749
|
+
if (hash) {
|
|
750
|
+
const obj = scannedTables.createObjectTable[hash];
|
|
751
|
+
if (obj && typeof obj === 'object') {
|
|
752
|
+
return obj;
|
|
667
753
|
}
|
|
754
|
+
}
|
|
755
|
+
const styleInfo = localCreateStyles[varName];
|
|
756
|
+
if (styleInfo && styleInfo.obj) {
|
|
757
|
+
return styleInfo.obj;
|
|
758
|
+
}
|
|
759
|
+
if (localCreateStyles[varName]) {
|
|
760
|
+
return localCreateStyles[varName].obj;
|
|
761
|
+
}
|
|
762
|
+
const vHash = mergedVariantsTable[varName];
|
|
763
|
+
if (vHash) {
|
|
764
|
+
return scannedTables.variantsObjectTable[vHash];
|
|
765
|
+
}
|
|
766
|
+
}
|
|
767
|
+
return null;
|
|
768
|
+
};
|
|
769
|
+
const conditionals = [];
|
|
770
|
+
let groupIdCounter = 0;
|
|
771
|
+
let baseStyle = {};
|
|
772
|
+
let isOptimizable = true;
|
|
773
|
+
for (const arg of args) {
|
|
774
|
+
const expr = arg.expression;
|
|
775
|
+
if (t.isCallExpression(expr) &&
|
|
776
|
+
t.isMemberExpression(expr.callee)) {
|
|
777
|
+
const callee = expr.callee;
|
|
778
|
+
if (t.isIdentifier(callee.object) &&
|
|
779
|
+
t.isIdentifier(callee.property)) {
|
|
780
|
+
const varName = callee.object.value;
|
|
781
|
+
const propKey = callee.property.value;
|
|
668
782
|
const styleInfo = localCreateStyles[varName];
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
783
|
+
const atomMap = styleInfo?.hashMap?.[propKey];
|
|
784
|
+
if (atomMap?.['__cssVars__']) {
|
|
785
|
+
const cssVarInfo = JSON.parse(atomMap['__cssVars__']);
|
|
786
|
+
const hashes = Object.entries(atomMap)
|
|
787
|
+
.filter(([k]) => k !== '__cssVars__')
|
|
788
|
+
.map(([, v]) => v)
|
|
789
|
+
.join(' ');
|
|
790
|
+
if (hashes)
|
|
791
|
+
dynamicClassParts.push(JSON.stringify(hashes));
|
|
792
|
+
const args = expr.arguments;
|
|
793
|
+
Object.entries(cssVarInfo).forEach(([_, { cssVar, propKey: targetProp }], i) => {
|
|
794
|
+
const callArg = args[i];
|
|
795
|
+
if (!callArg)
|
|
796
|
+
return;
|
|
797
|
+
const argStart = callArg.expression.span.start - baseByteOffset;
|
|
798
|
+
const argEnd = callArg.expression.span.end - baseByteOffset;
|
|
799
|
+
const argSource = sourceBuffer
|
|
800
|
+
.subarray(argStart, argEnd)
|
|
801
|
+
.toString('utf-8');
|
|
802
|
+
let valueExpr;
|
|
803
|
+
try {
|
|
804
|
+
const maybeNumber = Number(argSource);
|
|
805
|
+
if (!isNaN(maybeNumber) &&
|
|
806
|
+
argSource.trim() === String(maybeNumber)) {
|
|
807
|
+
const processed = applyCssValue(maybeNumber, targetProp);
|
|
808
|
+
valueExpr = JSON.stringify(processed);
|
|
809
|
+
}
|
|
810
|
+
else if (argSource.startsWith('"') &&
|
|
811
|
+
argSource.endsWith('"')) {
|
|
812
|
+
const processed = applyCssValue(argSource.slice(1, -1), targetProp);
|
|
813
|
+
valueExpr = JSON.stringify(processed);
|
|
814
|
+
}
|
|
815
|
+
else {
|
|
816
|
+
const exception = [
|
|
817
|
+
'animationIterationCount',
|
|
818
|
+
'aspectRatio',
|
|
819
|
+
'columnCount',
|
|
820
|
+
'columns',
|
|
821
|
+
'fillOpacity',
|
|
822
|
+
'flex',
|
|
823
|
+
'flexGrow',
|
|
824
|
+
'flexShrink',
|
|
825
|
+
'floodOpacity',
|
|
826
|
+
'fontSizeAdjust',
|
|
827
|
+
'fontWeight',
|
|
828
|
+
'gridColumn',
|
|
829
|
+
'gridColumnEnd',
|
|
830
|
+
'gridColumnStart',
|
|
831
|
+
'gridRow',
|
|
832
|
+
'gridRowEnd',
|
|
833
|
+
'gridRowStart',
|
|
834
|
+
'hyphenateLimitChars',
|
|
835
|
+
'initialLetter',
|
|
836
|
+
'lineHeight',
|
|
837
|
+
'mathDepth',
|
|
838
|
+
'opacity',
|
|
839
|
+
'order',
|
|
840
|
+
'orphans',
|
|
841
|
+
'scale',
|
|
842
|
+
'shapeImageThreshold',
|
|
843
|
+
'stopOpacity',
|
|
844
|
+
'strokeMiterlimit',
|
|
845
|
+
'strokeOpacity',
|
|
846
|
+
'tabSize',
|
|
847
|
+
'widows',
|
|
848
|
+
'zIndex',
|
|
849
|
+
'zoom',
|
|
850
|
+
];
|
|
851
|
+
if (!exception.includes(targetProp)) {
|
|
852
|
+
valueExpr = `(typeof ${argSource} === 'number' ? ${argSource} + 'px' : ${argSource})`;
|
|
853
|
+
}
|
|
854
|
+
else {
|
|
855
|
+
valueExpr = argSource;
|
|
856
|
+
}
|
|
857
|
+
}
|
|
858
|
+
}
|
|
859
|
+
catch {
|
|
860
|
+
valueExpr = argSource;
|
|
861
|
+
}
|
|
862
|
+
dynamicStyleParts.push(`"${cssVar}": ${valueExpr}`);
|
|
863
|
+
});
|
|
864
|
+
continue;
|
|
678
865
|
}
|
|
679
866
|
}
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
if (
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
if (hash && scannedTables.variantsObjectTable[hash]) {
|
|
697
|
-
variantObj = scannedTables.variantsObjectTable[hash];
|
|
698
|
-
}
|
|
699
|
-
if (!variantObj) {
|
|
700
|
-
if (localCreateStyles[varName] &&
|
|
701
|
-
localCreateStyles[varName].obj) {
|
|
702
|
-
variantObj = localCreateStyles[varName].obj;
|
|
703
|
-
}
|
|
867
|
+
}
|
|
868
|
+
if (t.isCallExpression(expr) && t.isIdentifier(expr.callee)) {
|
|
869
|
+
const varName = expr.callee.value;
|
|
870
|
+
let variantObj;
|
|
871
|
+
const uniqueKey = `${resourcePath}-${varName}`;
|
|
872
|
+
let hash = scannedTables.variantsHashTable[uniqueKey];
|
|
873
|
+
if (!hash) {
|
|
874
|
+
hash = mergedVariantsTable[varName];
|
|
875
|
+
}
|
|
876
|
+
if (hash && scannedTables.variantsObjectTable[hash]) {
|
|
877
|
+
variantObj = scannedTables.variantsObjectTable[hash];
|
|
878
|
+
}
|
|
879
|
+
if (!variantObj) {
|
|
880
|
+
if (localCreateStyles[varName] &&
|
|
881
|
+
localCreateStyles[varName].obj) {
|
|
882
|
+
variantObj = localCreateStyles[varName].obj;
|
|
704
883
|
}
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
continue;
|
|
884
|
+
}
|
|
885
|
+
if (variantObj) {
|
|
886
|
+
const callArgs = expr.arguments;
|
|
887
|
+
if (callArgs.length === 1 && !callArgs[0].spread) {
|
|
888
|
+
const arg = callArgs[0].expression;
|
|
889
|
+
if (arg.type === 'ObjectExpression') {
|
|
890
|
+
for (const prop of arg.properties) {
|
|
891
|
+
let groupName;
|
|
892
|
+
let valExpr;
|
|
893
|
+
if (prop.type === 'KeyValueProperty' &&
|
|
894
|
+
prop.key.type === 'Identifier') {
|
|
895
|
+
groupName = prop.key.value;
|
|
896
|
+
valExpr = prop.value;
|
|
897
|
+
}
|
|
898
|
+
else if (prop.type === 'Identifier') {
|
|
899
|
+
groupName = prop.value;
|
|
900
|
+
valExpr = prop;
|
|
901
|
+
}
|
|
902
|
+
if (groupName && valExpr) {
|
|
903
|
+
const groupVariants = variantObj[groupName];
|
|
904
|
+
if (!groupVariants)
|
|
905
|
+
continue;
|
|
906
|
+
const currentGroupId = ++groupIdCounter;
|
|
907
|
+
const valStart = valExpr.span.start - baseByteOffset;
|
|
908
|
+
const valEnd = valExpr.span.end - baseByteOffset;
|
|
909
|
+
const valSource = sourceBuffer
|
|
910
|
+
.subarray(valStart, valEnd)
|
|
911
|
+
.toString('utf-8');
|
|
912
|
+
if (valExpr.type === 'StringLiteral') {
|
|
913
|
+
if (groupVariants[valExpr.value]) {
|
|
914
|
+
baseStyle = deepMerge(baseStyle, groupVariants[valExpr.value]);
|
|
737
915
|
}
|
|
738
|
-
|
|
739
|
-
conditionals.push({
|
|
740
|
-
test: valExpr,
|
|
741
|
-
testLHS: valSource,
|
|
742
|
-
testString: `${valSource} === '${optionName}'`,
|
|
743
|
-
truthy: style,
|
|
744
|
-
falsy: {},
|
|
745
|
-
groupId: currentGroupId,
|
|
746
|
-
groupName,
|
|
747
|
-
valueName: optionName,
|
|
748
|
-
varName,
|
|
749
|
-
});
|
|
750
|
-
});
|
|
916
|
+
continue;
|
|
751
917
|
}
|
|
918
|
+
Object.entries(groupVariants).forEach(([optionName, style]) => {
|
|
919
|
+
conditionals.push({
|
|
920
|
+
test: valExpr,
|
|
921
|
+
testLHS: valSource,
|
|
922
|
+
testString: `${valSource} === '${optionName}'`,
|
|
923
|
+
truthy: style,
|
|
924
|
+
falsy: {},
|
|
925
|
+
groupId: currentGroupId,
|
|
926
|
+
groupName,
|
|
927
|
+
valueName: optionName,
|
|
928
|
+
varName,
|
|
929
|
+
});
|
|
930
|
+
});
|
|
752
931
|
}
|
|
753
|
-
continue;
|
|
754
932
|
}
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
933
|
+
continue;
|
|
934
|
+
}
|
|
935
|
+
const argStart = arg.span.start - baseByteOffset;
|
|
936
|
+
const argEnd = arg.span.end - baseByteOffset;
|
|
937
|
+
const argSource = sourceBuffer
|
|
938
|
+
.subarray(argStart, argEnd)
|
|
939
|
+
.toString('utf-8');
|
|
940
|
+
if (t.isStringLiteral(arg)) {
|
|
941
|
+
if (variantObj[arg.value]) {
|
|
942
|
+
baseStyle = deepMerge(baseStyle, variantObj[arg.value]);
|
|
765
943
|
}
|
|
766
|
-
const currentGroupId = ++groupIdCounter;
|
|
767
|
-
Object.entries(variantObj).forEach(([key, style]) => {
|
|
768
|
-
conditionals.push({
|
|
769
|
-
test: arg,
|
|
770
|
-
testLHS: argSource,
|
|
771
|
-
testString: `${argSource} === '${key}'`,
|
|
772
|
-
truthy: style,
|
|
773
|
-
falsy: {},
|
|
774
|
-
groupId: currentGroupId,
|
|
775
|
-
groupName: undefined,
|
|
776
|
-
valueName: key,
|
|
777
|
-
varName,
|
|
778
|
-
});
|
|
779
|
-
});
|
|
780
944
|
continue;
|
|
781
945
|
}
|
|
782
|
-
|
|
783
|
-
|
|
946
|
+
const currentGroupId = ++groupIdCounter;
|
|
947
|
+
Object.entries(variantObj).forEach(([key, style]) => {
|
|
948
|
+
conditionals.push({
|
|
949
|
+
test: arg,
|
|
950
|
+
testLHS: argSource,
|
|
951
|
+
testString: `${argSource} === '${key}'`,
|
|
952
|
+
truthy: style,
|
|
953
|
+
falsy: {},
|
|
954
|
+
groupId: currentGroupId,
|
|
955
|
+
groupName: undefined,
|
|
956
|
+
valueName: key,
|
|
957
|
+
varName,
|
|
958
|
+
});
|
|
959
|
+
});
|
|
960
|
+
continue;
|
|
784
961
|
}
|
|
962
|
+
isOptimizable = false;
|
|
963
|
+
break;
|
|
785
964
|
}
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
965
|
+
}
|
|
966
|
+
else if (t.isIdentifier(expr)) {
|
|
967
|
+
const varName = expr.value;
|
|
968
|
+
let variantObj;
|
|
969
|
+
const uniqueKey = `${resourcePath}-${varName}`;
|
|
970
|
+
let hash = scannedTables.variantsHashTable[uniqueKey];
|
|
971
|
+
if (!hash) {
|
|
972
|
+
hash = mergedVariantsTable[varName];
|
|
973
|
+
}
|
|
974
|
+
if (hash && scannedTables.variantsObjectTable[hash]) {
|
|
975
|
+
variantObj = scannedTables.variantsObjectTable[hash];
|
|
976
|
+
}
|
|
977
|
+
if (!variantObj) {
|
|
978
|
+
if (localCreateStyles[varName] &&
|
|
979
|
+
localCreateStyles[varName].obj) {
|
|
980
|
+
variantObj = localCreateStyles[varName].obj;
|
|
802
981
|
}
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
982
|
+
}
|
|
983
|
+
if (variantObj) {
|
|
984
|
+
Object.entries(variantObj).forEach(([groupName, groupVariants]) => {
|
|
985
|
+
if (!groupVariants)
|
|
986
|
+
return;
|
|
987
|
+
const currentGroupId = ++groupIdCounter;
|
|
988
|
+
Object.entries(groupVariants).forEach(([optionName, style]) => {
|
|
989
|
+
conditionals.push({
|
|
990
|
+
test: expr,
|
|
991
|
+
testLHS: `props["${groupName}"]`,
|
|
992
|
+
testString: `props["${groupName}"] === '${optionName}'`,
|
|
993
|
+
truthy: style,
|
|
994
|
+
falsy: {},
|
|
995
|
+
groupId: currentGroupId,
|
|
996
|
+
groupName: groupName,
|
|
997
|
+
valueName: optionName,
|
|
998
|
+
varName: varName,
|
|
820
999
|
});
|
|
821
1000
|
});
|
|
822
|
-
|
|
1001
|
+
});
|
|
1002
|
+
continue;
|
|
1003
|
+
}
|
|
1004
|
+
}
|
|
1005
|
+
const getSource = (node) => {
|
|
1006
|
+
const start = node.span.start - baseByteOffset;
|
|
1007
|
+
const end = node.span.end - baseByteOffset;
|
|
1008
|
+
return sourceBuffer.subarray(start, end).toString('utf-8');
|
|
1009
|
+
};
|
|
1010
|
+
const collectConditions = (node, currentTestStrings = []) => {
|
|
1011
|
+
const staticStyle = resolveStyleObject(node);
|
|
1012
|
+
if (staticStyle) {
|
|
1013
|
+
if (currentTestStrings.length === 0) {
|
|
1014
|
+
baseStyle = deepMerge(baseStyle, staticStyle);
|
|
823
1015
|
}
|
|
1016
|
+
else {
|
|
1017
|
+
const combinedTest = currentTestStrings.join(' && ');
|
|
1018
|
+
conditionals.push({
|
|
1019
|
+
test: node,
|
|
1020
|
+
testString: combinedTest,
|
|
1021
|
+
truthy: staticStyle,
|
|
1022
|
+
falsy: {},
|
|
1023
|
+
varName: undefined,
|
|
1024
|
+
});
|
|
1025
|
+
}
|
|
1026
|
+
return true;
|
|
824
1027
|
}
|
|
825
|
-
|
|
826
|
-
const
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
const staticStyle = resolveStyleObject(node);
|
|
832
|
-
if (staticStyle) {
|
|
833
|
-
if (currentTestStrings.length === 0) {
|
|
834
|
-
baseStyle = deepMerge(baseStyle, staticStyle);
|
|
835
|
-
}
|
|
836
|
-
else {
|
|
837
|
-
const combinedTest = currentTestStrings.join(' && ');
|
|
1028
|
+
if (node.type === 'ConditionalExpression') {
|
|
1029
|
+
const testSource = getSource(node.test);
|
|
1030
|
+
if (currentTestStrings.length === 0) {
|
|
1031
|
+
const trueStyle = resolveStyleObject(node.consequent);
|
|
1032
|
+
const falseStyle = resolveStyleObject(node.alternate);
|
|
1033
|
+
if (trueStyle && falseStyle) {
|
|
838
1034
|
conditionals.push({
|
|
839
1035
|
test: node,
|
|
840
|
-
testString:
|
|
841
|
-
truthy:
|
|
842
|
-
falsy:
|
|
1036
|
+
testString: testSource,
|
|
1037
|
+
truthy: trueStyle,
|
|
1038
|
+
falsy: falseStyle,
|
|
843
1039
|
varName: undefined,
|
|
844
1040
|
});
|
|
1041
|
+
return true;
|
|
845
1042
|
}
|
|
846
|
-
return true;
|
|
847
|
-
}
|
|
848
|
-
if (node.type === 'ConditionalExpression') {
|
|
849
|
-
const testSource = getSource(node.test);
|
|
850
|
-
if (currentTestStrings.length === 0) {
|
|
851
|
-
const trueStyle = resolveStyleObject(node.consequent);
|
|
852
|
-
const falseStyle = resolveStyleObject(node.alternate);
|
|
853
|
-
if (trueStyle && falseStyle) {
|
|
854
|
-
conditionals.push({
|
|
855
|
-
test: node,
|
|
856
|
-
testString: testSource,
|
|
857
|
-
truthy: trueStyle,
|
|
858
|
-
falsy: falseStyle,
|
|
859
|
-
varName: undefined,
|
|
860
|
-
});
|
|
861
|
-
return true;
|
|
862
|
-
}
|
|
863
|
-
}
|
|
864
|
-
collectConditions(node.consequent, [
|
|
865
|
-
...currentTestStrings,
|
|
866
|
-
`(${testSource})`,
|
|
867
|
-
]);
|
|
868
|
-
collectConditions(node.alternate, [
|
|
869
|
-
...currentTestStrings,
|
|
870
|
-
`!(${testSource})`,
|
|
871
|
-
]);
|
|
872
|
-
return true;
|
|
873
|
-
}
|
|
874
|
-
else if (node.type === 'BinaryExpression' &&
|
|
875
|
-
node.operator === '&&') {
|
|
876
|
-
const leftSource = getSource(node.left);
|
|
877
|
-
collectConditions(node.right, [
|
|
878
|
-
...currentTestStrings,
|
|
879
|
-
`(${leftSource})`,
|
|
880
|
-
]);
|
|
881
|
-
return true;
|
|
882
|
-
}
|
|
883
|
-
else if (node.type === 'ParenthesisExpression') {
|
|
884
|
-
return collectConditions(node.expression, currentTestStrings);
|
|
885
1043
|
}
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
(args.length > 0 || Object.keys(baseStyle).length > 0)) {
|
|
896
|
-
if (conditionals.length === 0) {
|
|
897
|
-
const records = getStyleRecords(baseStyle);
|
|
898
|
-
const className = records
|
|
899
|
-
.map((r) => r.hash)
|
|
900
|
-
.join(' ');
|
|
901
|
-
replacements.push({
|
|
902
|
-
start: node.span.start - baseByteOffset,
|
|
903
|
-
end: node.span.end - baseByteOffset,
|
|
904
|
-
content: JSON.stringify(className),
|
|
905
|
-
});
|
|
1044
|
+
collectConditions(node.consequent, [
|
|
1045
|
+
...currentTestStrings,
|
|
1046
|
+
`(${testSource})`,
|
|
1047
|
+
]);
|
|
1048
|
+
collectConditions(node.alternate, [
|
|
1049
|
+
...currentTestStrings,
|
|
1050
|
+
`!(${testSource})`,
|
|
1051
|
+
]);
|
|
1052
|
+
return true;
|
|
906
1053
|
}
|
|
907
|
-
else
|
|
908
|
-
|
|
909
|
-
const
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
})
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
1054
|
+
else if (node.type === 'BinaryExpression' &&
|
|
1055
|
+
node.operator === '&&') {
|
|
1056
|
+
const leftSource = getSource(node.left);
|
|
1057
|
+
collectConditions(node.right, [
|
|
1058
|
+
...currentTestStrings,
|
|
1059
|
+
`(${leftSource})`,
|
|
1060
|
+
]);
|
|
1061
|
+
return true;
|
|
1062
|
+
}
|
|
1063
|
+
else if (node.type === 'ParenthesisExpression') {
|
|
1064
|
+
return collectConditions(node.expression, currentTestStrings);
|
|
1065
|
+
}
|
|
1066
|
+
return false;
|
|
1067
|
+
};
|
|
1068
|
+
const handled = collectConditions(expr);
|
|
1069
|
+
if (handled)
|
|
1070
|
+
continue;
|
|
1071
|
+
isOptimizable = false;
|
|
1072
|
+
break;
|
|
1073
|
+
}
|
|
1074
|
+
const styleAttr = dynamicStyleParts.length > 0
|
|
1075
|
+
? ` style={{${dynamicStyleParts.join(', ')}}}`
|
|
1076
|
+
: '';
|
|
1077
|
+
if (isOptimizable &&
|
|
1078
|
+
(args.length > 0 || Object.keys(baseStyle).length > 0)) {
|
|
1079
|
+
if (conditionals.length === 0) {
|
|
1080
|
+
const records = getStyleRecords(baseStyle);
|
|
1081
|
+
const staticClass = records
|
|
1082
|
+
.map((r) => r.hash)
|
|
1083
|
+
.join(' ');
|
|
1084
|
+
const allParts = [
|
|
1085
|
+
...(existingClass ? [JSON.stringify(existingClass)] : []),
|
|
1086
|
+
...(staticClass ? [JSON.stringify(staticClass)] : []),
|
|
1087
|
+
...dynamicClassParts,
|
|
1088
|
+
].join(' + " " + ');
|
|
1089
|
+
replacements.push({
|
|
1090
|
+
start: node.span.start - baseByteOffset,
|
|
1091
|
+
end: node.span.end - baseByteOffset,
|
|
1092
|
+
content: `className={${allParts || '""'}}${styleAttr}`,
|
|
1093
|
+
});
|
|
1094
|
+
}
|
|
1095
|
+
else {
|
|
1096
|
+
const propertyCounts = {};
|
|
1097
|
+
const addCounts = (style) => {
|
|
1098
|
+
Object.keys(style).forEach((key) => {
|
|
1099
|
+
propertyCounts[key] = (propertyCounts[key] || 0) + 1;
|
|
930
1100
|
});
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
1101
|
+
};
|
|
1102
|
+
addCounts(baseStyle);
|
|
1103
|
+
const participation = {};
|
|
1104
|
+
const registerParticipation = (style, sourceId) => {
|
|
1105
|
+
Object.keys(style).forEach((key) => {
|
|
1106
|
+
if (!participation[key])
|
|
1107
|
+
participation[key] = new Set();
|
|
1108
|
+
participation[key].add(sourceId);
|
|
938
1109
|
});
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
1110
|
+
};
|
|
1111
|
+
registerParticipation(baseStyle, 'base');
|
|
1112
|
+
conditionals
|
|
1113
|
+
.filter((c) => c.groupId === undefined)
|
|
1114
|
+
.forEach((c, idx) => {
|
|
1115
|
+
const sourceId = `std_${idx}`;
|
|
1116
|
+
registerParticipation(c.truthy, sourceId);
|
|
1117
|
+
registerParticipation(c.falsy, sourceId);
|
|
1118
|
+
});
|
|
1119
|
+
const variantGroups = {};
|
|
1120
|
+
conditionals.forEach((c) => {
|
|
1121
|
+
if (c.groupId !== undefined) {
|
|
1122
|
+
if (!variantGroups[c.groupId])
|
|
1123
|
+
variantGroups[c.groupId] = [];
|
|
1124
|
+
variantGroups[c.groupId].push(c);
|
|
1125
|
+
}
|
|
1126
|
+
});
|
|
1127
|
+
Object.entries(variantGroups).forEach(([groupId, opts]) => {
|
|
1128
|
+
const sourceId = `var_${groupId}`;
|
|
1129
|
+
opts.forEach((opt) => {
|
|
1130
|
+
registerParticipation(opt.truthy, sourceId);
|
|
1131
|
+
registerParticipation(opt.falsy, sourceId);
|
|
945
1132
|
});
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
1133
|
+
});
|
|
1134
|
+
const conflictingKeys = new Set();
|
|
1135
|
+
Object.entries(participation).forEach(([key, sources]) => {
|
|
1136
|
+
if (sources.size > 1) {
|
|
1137
|
+
conflictingKeys.add(key);
|
|
1138
|
+
}
|
|
1139
|
+
});
|
|
1140
|
+
const baseIndependent = {};
|
|
1141
|
+
const baseConflict = {};
|
|
1142
|
+
Object.entries(baseStyle).forEach(([key, val]) => {
|
|
1143
|
+
if (conflictingKeys.has(key)) {
|
|
1144
|
+
baseConflict[key] = val;
|
|
1145
|
+
}
|
|
1146
|
+
else {
|
|
1147
|
+
baseIndependent[key] = val;
|
|
1148
|
+
}
|
|
1149
|
+
});
|
|
1150
|
+
const indepConditionals = [];
|
|
1151
|
+
const conflictConditionals = [];
|
|
1152
|
+
const splitConditional = (c) => {
|
|
1153
|
+
const truthyIndep = {};
|
|
1154
|
+
const truthyConf = {};
|
|
1155
|
+
const falsyIndep = {};
|
|
1156
|
+
const falsyConf = {};
|
|
1157
|
+
let hasIndep = false;
|
|
1158
|
+
let hasConf = false;
|
|
1159
|
+
Object.entries(c.truthy).forEach(([k, v]) => {
|
|
1160
|
+
if (conflictingKeys.has(k)) {
|
|
1161
|
+
truthyConf[k] = v;
|
|
1162
|
+
hasConf = true;
|
|
1163
|
+
}
|
|
1164
|
+
else {
|
|
1165
|
+
truthyIndep[k] = v;
|
|
1166
|
+
hasIndep = true;
|
|
950
1167
|
}
|
|
951
1168
|
});
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
baseConflict[key] = val;
|
|
1169
|
+
Object.entries(c.falsy).forEach(([k, v]) => {
|
|
1170
|
+
if (conflictingKeys.has(k)) {
|
|
1171
|
+
falsyConf[k] = v;
|
|
1172
|
+
hasConf = true;
|
|
957
1173
|
}
|
|
958
1174
|
else {
|
|
959
|
-
|
|
1175
|
+
falsyIndep[k] = v;
|
|
1176
|
+
hasIndep = true;
|
|
960
1177
|
}
|
|
961
1178
|
});
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
const falsyIndep = {};
|
|
968
|
-
const falsyConf = {};
|
|
969
|
-
let hasIndep = false;
|
|
970
|
-
let hasConf = false;
|
|
971
|
-
Object.entries(c.truthy).forEach(([k, v]) => {
|
|
972
|
-
if (conflictingKeys.has(k)) {
|
|
973
|
-
truthyConf[k] = v;
|
|
974
|
-
hasConf = true;
|
|
975
|
-
}
|
|
976
|
-
else {
|
|
977
|
-
truthyIndep[k] = v;
|
|
978
|
-
hasIndep = true;
|
|
979
|
-
}
|
|
1179
|
+
if (hasIndep) {
|
|
1180
|
+
indepConditionals.push({
|
|
1181
|
+
...c,
|
|
1182
|
+
truthy: truthyIndep,
|
|
1183
|
+
falsy: falsyIndep,
|
|
980
1184
|
});
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
falsyIndep[k] = v;
|
|
988
|
-
hasIndep = true;
|
|
989
|
-
}
|
|
1185
|
+
}
|
|
1186
|
+
if (hasConf) {
|
|
1187
|
+
conflictConditionals.push({
|
|
1188
|
+
...c,
|
|
1189
|
+
truthy: truthyConf,
|
|
1190
|
+
falsy: falsyConf,
|
|
990
1191
|
});
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
1192
|
+
}
|
|
1193
|
+
};
|
|
1194
|
+
conditionals.forEach(splitConditional);
|
|
1195
|
+
const classParts = [];
|
|
1196
|
+
if (existingClass)
|
|
1197
|
+
classParts.push(JSON.stringify(existingClass));
|
|
1198
|
+
if (Object.keys(baseIndependent).length > 0) {
|
|
1199
|
+
const records = getStyleRecords(baseIndependent);
|
|
1200
|
+
const className = records.map((r) => r.hash).join(' ');
|
|
1201
|
+
if (className)
|
|
1202
|
+
classParts.push(JSON.stringify(className));
|
|
1203
|
+
}
|
|
1204
|
+
const indepStd = indepConditionals.filter((c) => c.groupId === undefined);
|
|
1205
|
+
indepStd.forEach((c) => {
|
|
1206
|
+
const processBranch = (style) => {
|
|
1207
|
+
if (Object.keys(style).length === 0)
|
|
1208
|
+
return '""';
|
|
1209
|
+
const records = getStyleRecords(style);
|
|
1210
|
+
return JSON.stringify(records.map((r) => r.hash).join(' '));
|
|
1211
|
+
};
|
|
1212
|
+
const tClass = processBranch(c.truthy);
|
|
1213
|
+
const fClass = processBranch(c.falsy);
|
|
1214
|
+
let testStr = c.testString;
|
|
1215
|
+
if (!testStr && c.test) {
|
|
1216
|
+
const start = c.test.span.start - baseByteOffset;
|
|
1217
|
+
const end = c.test.span.end - baseByteOffset;
|
|
1218
|
+
testStr = sourceBuffer.subarray(start, end).toString('utf-8');
|
|
1219
|
+
}
|
|
1220
|
+
classParts.push(`(${testStr} ? ${tClass} : ${fClass})`);
|
|
1221
|
+
});
|
|
1222
|
+
const indepVarGroups = {};
|
|
1223
|
+
indepConditionals.forEach((c) => {
|
|
1224
|
+
if (c.groupId !== undefined) {
|
|
1225
|
+
if (!indepVarGroups[c.groupId])
|
|
1226
|
+
indepVarGroups[c.groupId] = [];
|
|
1227
|
+
indepVarGroups[c.groupId].push(c);
|
|
1228
|
+
}
|
|
1229
|
+
});
|
|
1230
|
+
Object.values(indepVarGroups).forEach((options) => {
|
|
1231
|
+
let commonTestExpr = null;
|
|
1232
|
+
const lookupMap = {};
|
|
1233
|
+
if (options.length > 0) {
|
|
1234
|
+
if (options[0].testLHS) {
|
|
1235
|
+
commonTestExpr = options[0].testLHS;
|
|
997
1236
|
}
|
|
998
|
-
if (
|
|
999
|
-
|
|
1000
|
-
...c,
|
|
1001
|
-
truthy: truthyConf,
|
|
1002
|
-
falsy: falsyConf,
|
|
1003
|
-
});
|
|
1237
|
+
else if (options[0].testString) {
|
|
1238
|
+
commonTestExpr = options[0].testString;
|
|
1004
1239
|
}
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1240
|
+
else {
|
|
1241
|
+
const firstTest = options[0].test;
|
|
1242
|
+
const firstStart = firstTest.span.start - baseByteOffset;
|
|
1243
|
+
const firstEnd = firstTest.span.end - baseByteOffset;
|
|
1244
|
+
commonTestExpr = sourceBuffer
|
|
1245
|
+
.subarray(firstStart, firstEnd)
|
|
1246
|
+
.toString('utf-8');
|
|
1247
|
+
}
|
|
1248
|
+
options.forEach((opt) => {
|
|
1249
|
+
if (opt.valueName && opt.truthy) {
|
|
1250
|
+
const records = getStyleRecords(opt.truthy);
|
|
1251
|
+
const className = records.map((r) => r.hash).join(' ');
|
|
1252
|
+
if (className) {
|
|
1253
|
+
lookupMap[opt.valueName] = className;
|
|
1254
|
+
}
|
|
1255
|
+
}
|
|
1256
|
+
});
|
|
1013
1257
|
}
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1258
|
+
if (commonTestExpr && Object.keys(lookupMap).length > 0) {
|
|
1259
|
+
const entries = Object.entries(lookupMap)
|
|
1260
|
+
.map(([key, val]) => `"${key}":"${val}"`)
|
|
1261
|
+
.join(',');
|
|
1262
|
+
classParts.push(`({${entries}}[${commonTestExpr}] || "")`);
|
|
1263
|
+
}
|
|
1264
|
+
});
|
|
1265
|
+
if (Object.keys(baseConflict).length > 0 ||
|
|
1266
|
+
conflictConditionals.length > 0) {
|
|
1267
|
+
const conflictStd = conflictConditionals.filter((c) => c.groupId === undefined);
|
|
1268
|
+
const conflictVarGroups = {};
|
|
1269
|
+
conflictConditionals.forEach((c) => {
|
|
1270
|
+
if (c.groupId !== undefined) {
|
|
1271
|
+
if (!conflictVarGroups[c.groupId])
|
|
1272
|
+
conflictVarGroups[c.groupId] = [];
|
|
1273
|
+
conflictVarGroups[c.groupId].push(c);
|
|
1274
|
+
}
|
|
1275
|
+
});
|
|
1276
|
+
const dimensions = [];
|
|
1277
|
+
conflictStd.forEach((c) => {
|
|
1024
1278
|
let testStr = c.testString;
|
|
1025
1279
|
if (!testStr && c.test) {
|
|
1026
1280
|
const start = c.test.span.start - baseByteOffset;
|
|
@@ -1029,160 +1283,101 @@ export function plumeria(options = {}) {
|
|
|
1029
1283
|
.subarray(start, end)
|
|
1030
1284
|
.toString('utf-8');
|
|
1031
1285
|
}
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
}
|
|
1286
|
+
dimensions.push({
|
|
1287
|
+
type: 'std',
|
|
1288
|
+
testExpr: testStr,
|
|
1289
|
+
options: [
|
|
1290
|
+
{ value: 0, style: c.falsy, label: 'false' },
|
|
1291
|
+
{ value: 1, style: c.truthy, label: 'true' },
|
|
1292
|
+
],
|
|
1293
|
+
});
|
|
1041
1294
|
});
|
|
1042
|
-
Object.
|
|
1295
|
+
Object.entries(conflictVarGroups).forEach(([_groupId, opts]) => {
|
|
1043
1296
|
let commonTestExpr = null;
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
commonTestExpr = options[0].testLHS;
|
|
1297
|
+
if (opts.length > 0) {
|
|
1298
|
+
if (opts[0].testLHS) {
|
|
1299
|
+
commonTestExpr = opts[0].testLHS;
|
|
1048
1300
|
}
|
|
1049
|
-
else if (
|
|
1050
|
-
commonTestExpr =
|
|
1301
|
+
else if (opts[0].testString) {
|
|
1302
|
+
commonTestExpr = opts[0].testString;
|
|
1051
1303
|
}
|
|
1052
1304
|
else {
|
|
1053
|
-
const firstTest =
|
|
1305
|
+
const firstTest = opts[0].test;
|
|
1054
1306
|
const firstStart = firstTest.span.start - baseByteOffset;
|
|
1055
1307
|
const firstEnd = firstTest.span.end - baseByteOffset;
|
|
1056
1308
|
commonTestExpr = sourceBuffer
|
|
1057
1309
|
.subarray(firstStart, firstEnd)
|
|
1058
1310
|
.toString('utf-8');
|
|
1059
1311
|
}
|
|
1060
|
-
options.forEach((opt) => {
|
|
1061
|
-
if (opt.valueName && opt.truthy) {
|
|
1062
|
-
const records = getStyleRecords(opt.truthy);
|
|
1063
|
-
const className = records.map((r) => r.hash).join(' ');
|
|
1064
|
-
if (className) {
|
|
1065
|
-
lookupMap[opt.valueName] = className;
|
|
1066
|
-
}
|
|
1067
|
-
}
|
|
1068
|
-
});
|
|
1069
|
-
}
|
|
1070
|
-
if (commonTestExpr && Object.keys(lookupMap).length > 0) {
|
|
1071
|
-
const entries = Object.entries(lookupMap)
|
|
1072
|
-
.map(([key, val]) => `"${key}":"${val}"`)
|
|
1073
|
-
.join(',');
|
|
1074
|
-
classParts.push(`({${entries}}[${commonTestExpr}] || "")`);
|
|
1075
1312
|
}
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
conflictVarGroups[c.groupId].push(c);
|
|
1086
|
-
}
|
|
1087
|
-
});
|
|
1088
|
-
const dimensions = [];
|
|
1089
|
-
conflictStd.forEach((c) => {
|
|
1090
|
-
let testStr = c.testString;
|
|
1091
|
-
if (!testStr && c.test) {
|
|
1092
|
-
const start = c.test.span.start - baseByteOffset;
|
|
1093
|
-
const end = c.test.span.end - baseByteOffset;
|
|
1094
|
-
testStr = sourceBuffer
|
|
1095
|
-
.subarray(start, end)
|
|
1096
|
-
.toString('utf-8');
|
|
1097
|
-
}
|
|
1098
|
-
dimensions.push({
|
|
1099
|
-
type: 'std',
|
|
1100
|
-
testExpr: testStr,
|
|
1101
|
-
options: [
|
|
1102
|
-
{ value: 0, style: c.falsy, label: 'false' },
|
|
1103
|
-
{ value: 1, style: c.truthy, label: 'true' },
|
|
1104
|
-
],
|
|
1105
|
-
});
|
|
1313
|
+
const options = opts.map((opt) => ({
|
|
1314
|
+
value: opt.valueName,
|
|
1315
|
+
style: opt.truthy,
|
|
1316
|
+
label: opt.valueName || 'default',
|
|
1317
|
+
}));
|
|
1318
|
+
dimensions.push({
|
|
1319
|
+
type: 'var',
|
|
1320
|
+
testExpr: commonTestExpr || '""',
|
|
1321
|
+
options: options,
|
|
1106
1322
|
});
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
const firstTest = opts[0].test;
|
|
1118
|
-
const firstStart = firstTest.span.start - baseByteOffset;
|
|
1119
|
-
const firstEnd = firstTest.span.end - baseByteOffset;
|
|
1120
|
-
commonTestExpr = sourceBuffer
|
|
1121
|
-
.subarray(firstStart, firstEnd)
|
|
1122
|
-
.toString('utf-8');
|
|
1123
|
-
}
|
|
1124
|
-
}
|
|
1125
|
-
const options = opts.map((opt) => ({
|
|
1126
|
-
value: opt.valueName,
|
|
1127
|
-
style: opt.truthy,
|
|
1128
|
-
label: opt.valueName || 'default',
|
|
1129
|
-
}));
|
|
1130
|
-
dimensions.push({
|
|
1131
|
-
type: 'var',
|
|
1132
|
-
testExpr: commonTestExpr || '""',
|
|
1133
|
-
options: options,
|
|
1134
|
-
});
|
|
1135
|
-
});
|
|
1136
|
-
const results = {};
|
|
1137
|
-
const recurse = (dimIndex, currentStyle, keyParts) => {
|
|
1138
|
-
if (dimIndex >= dimensions.length) {
|
|
1139
|
-
const records = getStyleRecords(currentStyle);
|
|
1140
|
-
const className = records.map((r) => r.hash).join(' ');
|
|
1141
|
-
const finalKey = keyParts.join('__');
|
|
1142
|
-
if (className)
|
|
1143
|
-
results[finalKey] = className;
|
|
1144
|
-
return;
|
|
1145
|
-
}
|
|
1146
|
-
const dim = dimensions[dimIndex];
|
|
1147
|
-
dim.options.forEach((opt) => {
|
|
1148
|
-
const nextStyle = deepMerge(currentStyle, opt.style);
|
|
1149
|
-
recurse(dimIndex + 1, nextStyle, [
|
|
1150
|
-
...keyParts,
|
|
1151
|
-
String(opt.value),
|
|
1152
|
-
]);
|
|
1153
|
-
});
|
|
1154
|
-
};
|
|
1155
|
-
recurse(0, baseConflict, []);
|
|
1156
|
-
let baseConflictClass = '';
|
|
1157
|
-
if (Object.keys(baseConflict).length > 0) {
|
|
1158
|
-
const records = getStyleRecords(baseConflict);
|
|
1159
|
-
baseConflictClass = records.map((r) => r.hash).join(' ');
|
|
1323
|
+
});
|
|
1324
|
+
const results = {};
|
|
1325
|
+
const recurse = (dimIndex, currentStyle, keyParts) => {
|
|
1326
|
+
if (dimIndex >= dimensions.length) {
|
|
1327
|
+
const records = getStyleRecords(currentStyle);
|
|
1328
|
+
const className = records.map((r) => r.hash).join(' ');
|
|
1329
|
+
const finalKey = keyParts.join('__');
|
|
1330
|
+
if (className)
|
|
1331
|
+
results[finalKey] = className;
|
|
1332
|
+
return;
|
|
1160
1333
|
}
|
|
1161
|
-
const
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
}
|
|
1334
|
+
const dim = dimensions[dimIndex];
|
|
1335
|
+
dim.options.forEach((opt) => {
|
|
1336
|
+
const nextStyle = deepMerge(currentStyle, opt.style);
|
|
1337
|
+
recurse(dimIndex + 1, nextStyle, [
|
|
1338
|
+
...keyParts,
|
|
1339
|
+
String(opt.value),
|
|
1340
|
+
]);
|
|
1169
1341
|
});
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1342
|
+
};
|
|
1343
|
+
recurse(0, baseConflict, []);
|
|
1344
|
+
let baseConflictClass = '';
|
|
1345
|
+
if (Object.keys(baseConflict).length > 0) {
|
|
1346
|
+
const records = getStyleRecords(baseConflict);
|
|
1347
|
+
baseConflictClass = records.map((r) => r.hash).join(' ');
|
|
1176
1348
|
}
|
|
1177
|
-
const
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1349
|
+
const keyExprs = [];
|
|
1350
|
+
dimensions.forEach((dim) => {
|
|
1351
|
+
if (dim.type === 'std') {
|
|
1352
|
+
keyExprs.push(`(${dim.testExpr} ? "1" : "0")`);
|
|
1353
|
+
}
|
|
1354
|
+
else {
|
|
1355
|
+
keyExprs.push(dim.testExpr || '""');
|
|
1356
|
+
}
|
|
1182
1357
|
});
|
|
1358
|
+
const masterKeyExpr = keyExprs.length > 0 ? keyExprs.join(' + "__" + ') : '""';
|
|
1359
|
+
const tableJson = JSON.stringify(results);
|
|
1360
|
+
const fallback = baseConflictClass
|
|
1361
|
+
? JSON.stringify(baseConflictClass)
|
|
1362
|
+
: '""';
|
|
1363
|
+
classParts.push(`(${tableJson}[${masterKeyExpr}] || ${fallback})`);
|
|
1183
1364
|
}
|
|
1365
|
+
classParts.push(...dynamicClassParts);
|
|
1366
|
+
const replacement = classParts.length > 0 ? classParts.join(' + " " + ') : '""';
|
|
1367
|
+
replacements.push({
|
|
1368
|
+
start: node.span.start - baseByteOffset,
|
|
1369
|
+
end: node.span.end - baseByteOffset,
|
|
1370
|
+
content: `className={${replacement}}${styleAttr}`,
|
|
1371
|
+
});
|
|
1184
1372
|
}
|
|
1185
1373
|
}
|
|
1374
|
+
else {
|
|
1375
|
+
replacements.push({
|
|
1376
|
+
start: node.span.start - baseByteOffset,
|
|
1377
|
+
end: node.span.end - baseByteOffset,
|
|
1378
|
+
content: styleAttr || '',
|
|
1379
|
+
});
|
|
1380
|
+
}
|
|
1186
1381
|
},
|
|
1187
1382
|
});
|
|
1188
1383
|
Object.values(localCreateStyles).forEach((info) => {
|