@plumeria/compiler 10.0.7 → 10.0.8
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 +211 -49
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -267,51 +267,103 @@ function compileCSS(options) {
|
|
|
267
267
|
};
|
|
268
268
|
const extractAndProcessConditionals = (args, isStyleName = false) => {
|
|
269
269
|
const conditionals = [];
|
|
270
|
+
let groupIdCounter = 0;
|
|
270
271
|
let baseStyle = {};
|
|
271
|
-
const resolveStyleObject = (
|
|
272
|
-
|
|
273
|
-
|
|
272
|
+
const resolveStyleObject = (expr) => {
|
|
273
|
+
if (utils_1.t.isObjectExpression(expr)) {
|
|
274
|
+
return (0, utils_1.objectExpressionToObject)(expr, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, ctx.mergedVariantsTable);
|
|
275
|
+
}
|
|
276
|
+
else if (utils_1.t.isMemberExpression(expr) &&
|
|
277
|
+
utils_1.t.isIdentifier(expr.object) &&
|
|
278
|
+
utils_1.t.isIdentifier(expr.property)) {
|
|
279
|
+
const varName = expr.object.value;
|
|
280
|
+
const propName = expr.property.value;
|
|
281
|
+
const styleInfo = ctx.localCreateStyles[varName];
|
|
282
|
+
if (styleInfo && styleInfo.type === 'create') {
|
|
283
|
+
const style = styleInfo.obj[propName];
|
|
284
|
+
if (typeof style === 'object' && style !== null) {
|
|
285
|
+
return style;
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
const hash = ctx.mergedCreateTable[varName];
|
|
289
|
+
if (hash) {
|
|
290
|
+
const obj = ctx.scannedTables.createObjectTable[hash];
|
|
291
|
+
if (obj && obj[propName] && typeof obj[propName] === 'object') {
|
|
292
|
+
return obj[propName];
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
else if (utils_1.t.isIdentifier(expr)) {
|
|
297
|
+
const varName = expr.value;
|
|
298
|
+
const styleInfo = ctx.localCreateStyles[varName];
|
|
299
|
+
if (styleInfo && styleInfo.type === 'create') {
|
|
300
|
+
return styleInfo.obj;
|
|
301
|
+
}
|
|
302
|
+
const hash = ctx.mergedCreateTable[varName];
|
|
303
|
+
if (hash) {
|
|
304
|
+
const obj = ctx.scannedTables.createObjectTable[hash];
|
|
305
|
+
if (obj && typeof obj === 'object') {
|
|
306
|
+
return obj;
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
return null;
|
|
274
311
|
};
|
|
275
312
|
const getSource = (node) => ctx.sourceBuffer
|
|
276
313
|
.subarray(node.span.start - ctx.baseByteOffset, node.span.end - ctx.baseByteOffset)
|
|
277
314
|
.toString('utf-8');
|
|
278
|
-
const collectConditions = (node,
|
|
279
|
-
const staticStyle = resolveStyleObject(node);
|
|
280
|
-
if (staticStyle) {
|
|
281
|
-
if (testStrings.length === 0) {
|
|
282
|
-
baseStyle = (0, utils_1.deepMerge)(baseStyle, staticStyle);
|
|
283
|
-
}
|
|
284
|
-
else {
|
|
285
|
-
conditionals.push({
|
|
286
|
-
test: node,
|
|
287
|
-
testString: testStrings.join(' && '),
|
|
288
|
-
truthy: staticStyle,
|
|
289
|
-
falsy: {},
|
|
290
|
-
});
|
|
291
|
-
}
|
|
292
|
-
return true;
|
|
293
|
-
}
|
|
315
|
+
const collectConditions = (node, currentTestStrings = []) => {
|
|
294
316
|
if (node.type === 'ConditionalExpression') {
|
|
295
317
|
const testSource = getSource(node.test);
|
|
318
|
+
if (currentTestStrings.length === 0) {
|
|
319
|
+
const trueStyle = resolveStyleObject(node.consequent);
|
|
320
|
+
const falseStyle = resolveStyleObject(node.alternate);
|
|
321
|
+
if (trueStyle && falseStyle) {
|
|
322
|
+
conditionals.push({
|
|
323
|
+
test: node,
|
|
324
|
+
testString: testSource,
|
|
325
|
+
truthy: trueStyle,
|
|
326
|
+
falsy: falseStyle,
|
|
327
|
+
varName: undefined,
|
|
328
|
+
});
|
|
329
|
+
return true;
|
|
330
|
+
}
|
|
331
|
+
}
|
|
296
332
|
collectConditions(node.consequent, [
|
|
297
|
-
...
|
|
333
|
+
...currentTestStrings,
|
|
298
334
|
`(${testSource})`,
|
|
299
335
|
]);
|
|
300
336
|
collectConditions(node.alternate, [
|
|
301
|
-
...
|
|
337
|
+
...currentTestStrings,
|
|
302
338
|
`!(${testSource})`,
|
|
303
339
|
]);
|
|
304
340
|
return true;
|
|
305
341
|
}
|
|
306
342
|
else if (node.type === 'BinaryExpression' && node.operator === '&&') {
|
|
307
343
|
collectConditions(node.right, [
|
|
308
|
-
...
|
|
344
|
+
...currentTestStrings,
|
|
309
345
|
`(${getSource(node.left)})`,
|
|
310
346
|
]);
|
|
311
347
|
return true;
|
|
312
348
|
}
|
|
313
349
|
else if (node.type === 'ParenthesisExpression') {
|
|
314
|
-
return collectConditions(node.expression,
|
|
350
|
+
return collectConditions(node.expression, currentTestStrings);
|
|
351
|
+
}
|
|
352
|
+
const staticStyle = resolveStyleObject(node);
|
|
353
|
+
if (staticStyle) {
|
|
354
|
+
if (currentTestStrings.length === 0) {
|
|
355
|
+
baseStyle = (0, utils_1.deepMerge)(baseStyle, staticStyle);
|
|
356
|
+
}
|
|
357
|
+
else {
|
|
358
|
+
conditionals.push({
|
|
359
|
+
test: node,
|
|
360
|
+
testString: currentTestStrings.join(' && '),
|
|
361
|
+
truthy: staticStyle,
|
|
362
|
+
falsy: {},
|
|
363
|
+
varName: undefined,
|
|
364
|
+
});
|
|
365
|
+
}
|
|
366
|
+
return true;
|
|
315
367
|
}
|
|
316
368
|
return false;
|
|
317
369
|
};
|
|
@@ -353,6 +405,116 @@ function compileCSS(options) {
|
|
|
353
405
|
};
|
|
354
406
|
for (const arg of args) {
|
|
355
407
|
checkFunctionKey(arg.expression);
|
|
408
|
+
const expr = arg.expression;
|
|
409
|
+
if (utils_1.t.isCallExpression(expr)) {
|
|
410
|
+
if (utils_1.t.isIdentifier(expr.callee)) {
|
|
411
|
+
const varName = expr.callee.value;
|
|
412
|
+
const styleInfo = ctx.localCreateStyles[varName];
|
|
413
|
+
if (styleInfo && styleInfo.type === 'variant') {
|
|
414
|
+
const variantObj = styleInfo.obj;
|
|
415
|
+
const callArgs = expr.arguments;
|
|
416
|
+
if (callArgs.length === 1 && !callArgs[0].spread) {
|
|
417
|
+
const argExpr = callArgs[0].expression;
|
|
418
|
+
if (argExpr.type === 'ObjectExpression') {
|
|
419
|
+
for (const prop of argExpr.properties) {
|
|
420
|
+
let groupName;
|
|
421
|
+
let valExpr;
|
|
422
|
+
if (prop.type === 'KeyValueProperty' &&
|
|
423
|
+
prop.key.type === 'Identifier') {
|
|
424
|
+
groupName = prop.key.value;
|
|
425
|
+
valExpr = prop.value;
|
|
426
|
+
}
|
|
427
|
+
else if (prop.type === 'Identifier') {
|
|
428
|
+
groupName = prop.value;
|
|
429
|
+
valExpr = prop;
|
|
430
|
+
}
|
|
431
|
+
if (groupName && valExpr) {
|
|
432
|
+
const groupVariants = variantObj[groupName];
|
|
433
|
+
if (!groupVariants)
|
|
434
|
+
continue;
|
|
435
|
+
const currentGroupId = ++groupIdCounter;
|
|
436
|
+
const valSource = getSource(valExpr);
|
|
437
|
+
if (valExpr.type === 'StringLiteral') {
|
|
438
|
+
const groupVariantsAsObj = groupVariants;
|
|
439
|
+
if (groupVariantsAsObj[valExpr.value])
|
|
440
|
+
baseStyle = (0, utils_1.deepMerge)(baseStyle, groupVariantsAsObj[valExpr.value]);
|
|
441
|
+
continue;
|
|
442
|
+
}
|
|
443
|
+
Object.entries(groupVariants).forEach(([optionName, style]) => {
|
|
444
|
+
conditionals.push({
|
|
445
|
+
test: valExpr,
|
|
446
|
+
testLHS: valSource,
|
|
447
|
+
testString: `${valSource} === '${optionName}'`,
|
|
448
|
+
truthy: style,
|
|
449
|
+
falsy: {},
|
|
450
|
+
groupId: currentGroupId,
|
|
451
|
+
groupName,
|
|
452
|
+
valueName: optionName,
|
|
453
|
+
varName,
|
|
454
|
+
});
|
|
455
|
+
});
|
|
456
|
+
}
|
|
457
|
+
}
|
|
458
|
+
continue;
|
|
459
|
+
}
|
|
460
|
+
const argSource = getSource(argExpr);
|
|
461
|
+
if (utils_1.t.isStringLiteral(argExpr)) {
|
|
462
|
+
if (variantObj[argExpr.value])
|
|
463
|
+
baseStyle = (0, utils_1.deepMerge)(baseStyle, variantObj[argExpr.value]);
|
|
464
|
+
continue;
|
|
465
|
+
}
|
|
466
|
+
const currentGroupId = ++groupIdCounter;
|
|
467
|
+
Object.entries(variantObj).forEach(([key, style]) => {
|
|
468
|
+
conditionals.push({
|
|
469
|
+
test: argExpr,
|
|
470
|
+
testLHS: argSource,
|
|
471
|
+
testString: `${argSource} === '${key}'`,
|
|
472
|
+
truthy: style,
|
|
473
|
+
falsy: {},
|
|
474
|
+
groupId: currentGroupId,
|
|
475
|
+
groupName: undefined,
|
|
476
|
+
valueName: key,
|
|
477
|
+
varName,
|
|
478
|
+
});
|
|
479
|
+
});
|
|
480
|
+
continue;
|
|
481
|
+
}
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
else if (utils_1.t.isMemberExpression(expr.callee)) {
|
|
485
|
+
const callee = expr.callee;
|
|
486
|
+
if (utils_1.t.isIdentifier(callee.object) &&
|
|
487
|
+
utils_1.t.isIdentifier(callee.property)) {
|
|
488
|
+
const varName = callee.object.value;
|
|
489
|
+
const propName = callee.property.value;
|
|
490
|
+
const styleInfo = ctx.localCreateStyles[varName];
|
|
491
|
+
if (styleInfo && styleInfo.functions?.[propName]) {
|
|
492
|
+
const func = styleInfo.functions[propName];
|
|
493
|
+
const callArgs = expr.arguments;
|
|
494
|
+
if (callArgs.length === 1 && !callArgs[0].spread) {
|
|
495
|
+
const argExpr = callArgs[0].expression;
|
|
496
|
+
const tempStaticTable = { ...ctx.mergedStaticTable };
|
|
497
|
+
if (argExpr.type === 'ObjectExpression') {
|
|
498
|
+
const argObj = (0, utils_1.objectExpressionToObject)(argExpr, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, ctx.mergedVariantsTable);
|
|
499
|
+
func.params.forEach((p) => {
|
|
500
|
+
if (argObj[p] !== undefined)
|
|
501
|
+
tempStaticTable[p] = argObj[p];
|
|
502
|
+
});
|
|
503
|
+
}
|
|
504
|
+
else {
|
|
505
|
+
func.params.forEach((p) => {
|
|
506
|
+
tempStaticTable[p] = `var(--${propName}-${p})`;
|
|
507
|
+
});
|
|
508
|
+
}
|
|
509
|
+
const resolved = (0, utils_1.objectExpressionToObject)(func.body, tempStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, ctx.mergedVariantsTable);
|
|
510
|
+
if (resolved)
|
|
511
|
+
baseStyle = (0, utils_1.deepMerge)(baseStyle, resolved);
|
|
512
|
+
continue;
|
|
513
|
+
}
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
}
|
|
356
518
|
if (collectConditions(arg.expression))
|
|
357
519
|
continue;
|
|
358
520
|
const extractedStyles = extractStylesFromExpression(arg.expression, ctx);
|
|
@@ -451,21 +613,11 @@ function compileCSS(options) {
|
|
|
451
613
|
if (pName === 'create') {
|
|
452
614
|
const obj = (0, utils_1.objectExpressionToObject)(arg, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, ctx.mergedVariantsTable, resolveVariable);
|
|
453
615
|
if (obj) {
|
|
454
|
-
|
|
455
|
-
Object.entries(obj).forEach(([_, style]) => {
|
|
456
|
-
if (typeof style !== 'object' || style === null)
|
|
457
|
-
return;
|
|
458
|
-
(0, utils_1.getStyleRecords)(style).forEach((r) => extractedSheets.push(r.sheet));
|
|
459
|
-
});
|
|
616
|
+
const styleFunctions = {};
|
|
460
617
|
arg.properties.forEach((prop) => {
|
|
461
618
|
if (prop.type !== 'KeyValueProperty' ||
|
|
462
619
|
prop.key.type !== 'Identifier')
|
|
463
620
|
return;
|
|
464
|
-
const isArrow = prop.value.type === 'ArrowFunctionExpression';
|
|
465
|
-
const isFunc = prop.value.type === 'FunctionExpression';
|
|
466
|
-
if (!isArrow && !isFunc)
|
|
467
|
-
return;
|
|
468
|
-
const key = prop.key.value;
|
|
469
621
|
const func = prop.value;
|
|
470
622
|
if (func.type !== 'ArrowFunctionExpression' &&
|
|
471
623
|
func.type !== 'FunctionExpression')
|
|
@@ -480,10 +632,6 @@ function compileCSS(options) {
|
|
|
480
632
|
return p.pat.value;
|
|
481
633
|
return 'arg';
|
|
482
634
|
});
|
|
483
|
-
const tempStaticTable = { ...ctx.mergedStaticTable };
|
|
484
|
-
params.forEach((paramName) => {
|
|
485
|
-
tempStaticTable[paramName] = `var(--${key}-${paramName})`;
|
|
486
|
-
});
|
|
487
635
|
let actualBody = func.body;
|
|
488
636
|
if (actualBody?.type === 'ParenthesisExpression')
|
|
489
637
|
actualBody = actualBody.expression;
|
|
@@ -494,19 +642,30 @@ function compileCSS(options) {
|
|
|
494
642
|
if (actualBody?.type === 'ParenthesisExpression')
|
|
495
643
|
actualBody = actualBody.expression;
|
|
496
644
|
}
|
|
497
|
-
if (
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
645
|
+
if (actualBody && actualBody.type === 'ObjectExpression') {
|
|
646
|
+
styleFunctions[prop.key.value] = {
|
|
647
|
+
params,
|
|
648
|
+
body: actualBody,
|
|
649
|
+
};
|
|
650
|
+
}
|
|
503
651
|
});
|
|
652
|
+
ctx.localCreateStyles[node.id.value] = {
|
|
653
|
+
type: 'create',
|
|
654
|
+
obj,
|
|
655
|
+
functions: styleFunctions,
|
|
656
|
+
};
|
|
504
657
|
}
|
|
505
658
|
}
|
|
506
659
|
else if (pName === 'variants') {
|
|
507
660
|
const obj = (0, utils_1.objectExpressionToObject)(arg, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, ctx.mergedVariantsTable, resolveVariable);
|
|
508
|
-
if (obj)
|
|
509
|
-
|
|
661
|
+
if (obj) {
|
|
662
|
+
const { hashMap } = (0, utils_1.processVariants)(obj);
|
|
663
|
+
ctx.localCreateStyles[node.id.value] = {
|
|
664
|
+
type: 'variant',
|
|
665
|
+
obj,
|
|
666
|
+
hashMap,
|
|
667
|
+
};
|
|
668
|
+
}
|
|
510
669
|
}
|
|
511
670
|
else if (pName === 'createTheme') {
|
|
512
671
|
const obj = (0, utils_1.objectExpressionToObject)(arg, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, ctx.mergedVariantsTable);
|
|
@@ -521,9 +680,12 @@ function compileCSS(options) {
|
|
|
521
680
|
}
|
|
522
681
|
}
|
|
523
682
|
}
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
683
|
+
},
|
|
684
|
+
});
|
|
685
|
+
(0, utils_1.traverse)(ast, {
|
|
686
|
+
VariableDeclarator({ node }) {
|
|
687
|
+
if (utils_1.t.isIdentifier(node.id) && node.init) {
|
|
688
|
+
traverseInternal(node.init);
|
|
527
689
|
}
|
|
528
690
|
},
|
|
529
691
|
FunctionDeclaration({ node }) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plumeria/compiler",
|
|
3
|
-
"version": "10.0.
|
|
3
|
+
"version": "10.0.8",
|
|
4
4
|
"description": "Plumeria swc based compiler for statically extracting css",
|
|
5
5
|
"author": "Refirst 11",
|
|
6
6
|
"license": "MIT",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"dist/"
|
|
22
22
|
],
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@plumeria/utils": "^10.0.
|
|
24
|
+
"@plumeria/utils": "^10.0.8"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@rust-gear/glob": "1.0.0",
|