@plumeria/compiler 16.2.3 → 16.2.5

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.
Files changed (2) hide show
  1. package/dist/index.js +198 -140
  2. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -42,35 +42,72 @@ const rs = __importStar(require("@rust-gear/glob"));
42
42
  const utils_1 = require("@plumeria/utils");
43
43
  const utils_2 = require("@plumeria/utils");
44
44
  function extractStylesFromExpression(expression, ctx) {
45
+ let expr = expression;
46
+ if (ctx.localStyleAliases &&
47
+ utils_1.t.isIdentifier(expr) &&
48
+ ctx.localStyleAliases[expr.value]) {
49
+ expr = ctx.localStyleAliases[expr.value];
50
+ }
45
51
  const results = [];
46
- if (utils_1.t.isObjectExpression(expression)) {
47
- const object = (0, utils_1.objectExpressionToObject)(expression, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, ctx.mergedVariantsTable);
52
+ if (utils_1.t.isObjectExpression(expr)) {
53
+ const object = (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);
48
54
  if (object)
49
55
  results.push(object);
50
56
  }
51
- else if (utils_1.t.isMemberExpression(expression)) {
52
- const memberExpr = expression;
53
- if (utils_1.t.isIdentifier(memberExpr.object) &&
54
- utils_1.t.isIdentifier(memberExpr.property)) {
57
+ else if (utils_1.t.isMemberExpression(expr)) {
58
+ const memberExpr = expr;
59
+ if (utils_1.t.isIdentifier(memberExpr.object)) {
55
60
  const variableName = memberExpr.object.value;
56
- const propertyName = memberExpr.property.value;
57
- const styleSet = ctx.localCreateStyles[variableName];
58
- if (styleSet && styleSet.obj[propertyName]) {
59
- results.push(styleSet.obj[propertyName]);
61
+ if (utils_1.t.isIdentifier(memberExpr.property)) {
62
+ const propertyName = memberExpr.property.value;
63
+ const styleSet = ctx.localCreateStyles[variableName];
64
+ if (styleSet && styleSet.obj[propertyName]) {
65
+ results.push(styleSet.obj[propertyName]);
66
+ }
67
+ else {
68
+ const hash = ctx.mergedCreateTable[variableName];
69
+ if (hash) {
70
+ const object = ctx.scannedTables.createObjectTable[hash];
71
+ if (object && object[propertyName]) {
72
+ results.push(object[propertyName]);
73
+ }
74
+ }
75
+ }
60
76
  }
61
- else {
62
- const hash = ctx.mergedCreateTable[variableName];
63
- if (hash) {
64
- const object = ctx.scannedTables.createObjectTable[hash];
65
- if (object && object[propertyName]) {
66
- results.push(object[propertyName]);
77
+ else if (memberExpr.property.type === 'Computed') {
78
+ const computedProp = memberExpr.property;
79
+ const innerExpr = computedProp.expression;
80
+ let styleObj;
81
+ const styleSet = ctx.localCreateStyles[variableName];
82
+ if (styleSet) {
83
+ styleObj = styleSet.obj;
84
+ }
85
+ else {
86
+ const hash = ctx.mergedCreateTable[variableName];
87
+ if (hash) {
88
+ styleObj = ctx.scannedTables.createObjectTable[hash];
89
+ }
90
+ }
91
+ if (styleObj) {
92
+ if (utils_1.t.isStringLiteral(innerExpr)) {
93
+ const key = innerExpr.value;
94
+ if (styleObj[key]) {
95
+ results.push(styleObj[key]);
96
+ }
97
+ }
98
+ else {
99
+ Object.values(styleObj).forEach((style) => {
100
+ if (style && typeof style === 'object') {
101
+ results.push(style);
102
+ }
103
+ });
67
104
  }
68
105
  }
69
106
  }
70
107
  }
71
108
  }
72
- else if (utils_1.t.isIdentifier(expression)) {
73
- const identifier = expression;
109
+ else if (utils_1.t.isIdentifier(expr)) {
110
+ const identifier = expr;
74
111
  const object = ctx.localCreateStyles[identifier.value];
75
112
  if (object)
76
113
  results.push(object.obj);
@@ -83,19 +120,19 @@ function extractStylesFromExpression(expression, ctx) {
83
120
  }
84
121
  }
85
122
  }
86
- else if (utils_1.t.isConditionalExpression(expression)) {
87
- const condExpr = expression;
123
+ else if (utils_1.t.isConditionalExpression(expr)) {
124
+ const condExpr = expr;
88
125
  results.push(...extractStylesFromExpression(condExpr.consequent, ctx));
89
126
  results.push(...extractStylesFromExpression(condExpr.alternate, ctx));
90
127
  }
91
- else if (utils_1.t.isBinaryExpression(expression) &&
92
- ['&&', '||', '??'].includes(expression.operator)) {
93
- const binaryExpr = expression;
128
+ else if (utils_1.t.isBinaryExpression(expr) &&
129
+ ['&&', '||', '??'].includes(expr.operator)) {
130
+ const binaryExpr = expr;
94
131
  results.push(...extractStylesFromExpression(binaryExpr.left, ctx));
95
132
  results.push(...extractStylesFromExpression(binaryExpr.right, ctx));
96
133
  }
97
- else if (expression.type === 'ParenthesisExpression') {
98
- const parenExpr = expression;
134
+ else if (expr.type === 'ParenthesisExpression') {
135
+ const parenExpr = expr;
99
136
  results.push(...extractStylesFromExpression(parenExpr.expression, ctx));
100
137
  }
101
138
  return results;
@@ -131,6 +168,7 @@ function compileCSS(options) {
131
168
  const createStaticImportMap = {};
132
169
  const plumeriaAliases = {};
133
170
  const localImports = {};
171
+ const localStyleAliases = {};
134
172
  (0, utils_1.traverse)(ast, {
135
173
  ImportDeclaration({ node }) {
136
174
  const sourcePath = node.source.value;
@@ -286,6 +324,7 @@ function compileCSS(options) {
286
324
  localCreateStyles: {},
287
325
  sourceBuffer,
288
326
  baseByteOffset,
327
+ localStyleAliases,
289
328
  };
290
329
  const componentParamNames = new Set();
291
330
  for (const node of ast.body) {
@@ -324,6 +363,12 @@ function compileCSS(options) {
324
363
  records.forEach((r) => extractedSheets.push(r.sheet));
325
364
  };
326
365
  const extractAndProcessConditionals = (args, isStyleName = false) => {
366
+ args.forEach((arg) => {
367
+ if (utils_1.t.isIdentifier(arg.expression) &&
368
+ localStyleAliases[arg.expression.value]) {
369
+ arg.expression = localStyleAliases[arg.expression.value];
370
+ }
371
+ });
327
372
  const conditionals = [];
328
373
  let groupIdCounter = 0;
329
374
  let baseStyle = {};
@@ -698,128 +743,138 @@ function compileCSS(options) {
698
743
  };
699
744
  (0, utils_1.traverse)(ast, {
700
745
  VariableDeclarator({ node }) {
701
- if (utils_1.t.isIdentifier(node.id) &&
702
- node.init &&
703
- utils_1.t.isCallExpression(node.init)) {
704
- const callee = node.init.callee;
705
- let pName;
706
- if (utils_1.t.isMemberExpression(callee) &&
707
- utils_1.t.isIdentifier(callee.object) &&
708
- utils_1.t.isIdentifier(callee.property)) {
709
- if (plumeriaAliases[callee.object.value] === 'NAMESPACE')
710
- pName = callee.property.value;
711
- }
712
- else if (utils_1.t.isIdentifier(callee) && plumeriaAliases[callee.value]) {
713
- pName = plumeriaAliases[callee.value];
714
- }
715
- const isTheme = pName === 'createTheme';
716
- if (pName &&
717
- node.init.arguments.length > 0 &&
718
- ((!isTheme &&
719
- node.init.arguments.length === 1 &&
720
- utils_1.t.isObjectExpression(node.init.arguments[0].expression)) ||
721
- (isTheme &&
722
- node.init.arguments.length >= 2 &&
723
- utils_1.t.isObjectExpression(node.init.arguments[1].expression)))) {
724
- const arg = isTheme
725
- ? node.init.arguments[1].expression
726
- : node.init.arguments[0].expression;
727
- const resolveVariable = (name) => ctx.localCreateStyles[name]?.obj ||
728
- (ctx.mergedCreateThemeHashTable[name]
729
- ? ctx.scannedTables.createAtomicMapTable[ctx.mergedCreateThemeHashTable[name]]
730
- : undefined);
731
- if (pName === 'create') {
732
- 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);
733
- if (obj) {
734
- const styleFunctions = {};
735
- arg.properties.forEach((prop) => {
736
- if (prop.type !== 'KeyValueProperty' ||
737
- prop.key.type !== 'Identifier')
738
- return;
739
- const func = prop.value;
740
- if (func.type !== 'ArrowFunctionExpression' &&
741
- func.type !== 'FunctionExpression')
742
- return;
743
- const params = func.params.map((p) => {
744
- if (utils_1.t.isIdentifier(p))
745
- return p.value;
746
- if (typeof p === 'object' &&
747
- p !== null &&
748
- 'pat' in p &&
749
- utils_1.t.isIdentifier(p.pat))
750
- return p.pat.value;
751
- return 'arg';
752
- });
753
- let actualBody = func.body;
754
- if (actualBody?.type === 'ParenthesisExpression')
755
- actualBody = actualBody.expression;
756
- if (actualBody?.type === 'BlockStatement') {
757
- const first = actualBody.stmts?.[0];
758
- if (first?.type === 'ReturnStatement')
759
- actualBody = first.argument;
746
+ if (utils_1.t.isIdentifier(node.id) && node.init) {
747
+ const init = node.init;
748
+ if (utils_1.t.isCallExpression(init)) {
749
+ const callee = init.callee;
750
+ let pName;
751
+ if (utils_1.t.isMemberExpression(callee) &&
752
+ utils_1.t.isIdentifier(callee.object) &&
753
+ utils_1.t.isIdentifier(callee.property)) {
754
+ if (plumeriaAliases[callee.object.value] === 'NAMESPACE')
755
+ pName = callee.property.value;
756
+ }
757
+ else if (utils_1.t.isIdentifier(callee) &&
758
+ plumeriaAliases[callee.value]) {
759
+ pName = plumeriaAliases[callee.value];
760
+ }
761
+ const isTheme = pName === 'createTheme';
762
+ if (pName &&
763
+ init.arguments.length > 0 &&
764
+ ((!isTheme &&
765
+ init.arguments.length === 1 &&
766
+ utils_1.t.isObjectExpression(init.arguments[0].expression)) ||
767
+ (isTheme &&
768
+ init.arguments.length >= 2 &&
769
+ utils_1.t.isObjectExpression(init.arguments[1].expression)))) {
770
+ const arg = isTheme
771
+ ? init.arguments[1].expression
772
+ : init.arguments[0].expression;
773
+ const resolveVariable = (name) => ctx.localCreateStyles[name]?.obj ||
774
+ (ctx.mergedCreateThemeHashTable[name]
775
+ ? ctx.scannedTables.createAtomicMapTable[ctx.mergedCreateThemeHashTable[name]]
776
+ : undefined);
777
+ if (pName === 'create') {
778
+ 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);
779
+ if (obj) {
780
+ const styleFunctions = {};
781
+ arg.properties.forEach((prop) => {
782
+ if (prop.type !== 'KeyValueProperty' ||
783
+ prop.key.type !== 'Identifier')
784
+ return;
785
+ const func = prop.value;
786
+ if (func.type !== 'ArrowFunctionExpression' &&
787
+ func.type !== 'FunctionExpression')
788
+ return;
789
+ const params = func.params.map((p) => {
790
+ if (utils_1.t.isIdentifier(p))
791
+ return p.value;
792
+ if (typeof p === 'object' &&
793
+ p !== null &&
794
+ 'pat' in p &&
795
+ utils_1.t.isIdentifier(p.pat))
796
+ return p.pat.value;
797
+ return 'arg';
798
+ });
799
+ let actualBody = func.body;
760
800
  if (actualBody?.type === 'ParenthesisExpression')
761
801
  actualBody = actualBody.expression;
762
- }
763
- if (actualBody && actualBody.type === 'ObjectExpression') {
764
- styleFunctions[prop.key.value] = {
765
- params,
766
- body: actualBody,
767
- };
768
- }
769
- });
770
- ctx.localCreateStyles[node.id.value] = {
771
- type: 'create',
772
- obj,
773
- functions: styleFunctions,
774
- };
802
+ if (actualBody?.type === 'BlockStatement') {
803
+ const first = actualBody.stmts?.[0];
804
+ if (first?.type === 'ReturnStatement')
805
+ actualBody = first.argument;
806
+ if (actualBody?.type === 'ParenthesisExpression')
807
+ actualBody = actualBody.expression;
808
+ }
809
+ if (actualBody && actualBody.type === 'ObjectExpression') {
810
+ styleFunctions[prop.key.value] = {
811
+ params,
812
+ body: actualBody,
813
+ };
814
+ }
815
+ });
816
+ ctx.localCreateStyles[node.id.value] = {
817
+ type: 'create',
818
+ obj,
819
+ functions: styleFunctions,
820
+ };
821
+ }
775
822
  }
776
- }
777
- else if (pName === 'variants') {
778
- 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);
779
- if (obj) {
780
- const { hashMap } = (0, utils_1.processVariants)(obj);
823
+ else if (pName === 'variants') {
824
+ 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);
825
+ if (obj) {
826
+ const { hashMap } = (0, utils_1.processVariants)(obj);
827
+ ctx.localCreateStyles[node.id.value] = {
828
+ type: 'variant',
829
+ obj,
830
+ hashMap,
831
+ };
832
+ }
833
+ }
834
+ else if (pName === 'createTheme') {
835
+ let selector = '';
836
+ const selectorExpr = init.arguments[0].expression;
837
+ if (utils_1.t.isStringLiteral(selectorExpr)) {
838
+ selector = selectorExpr.value;
839
+ }
840
+ 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);
841
+ const hash = (0, zss_engine_1.genBase36Hash)({ _themeSelector: selector, ...obj }, 1, 8);
842
+ const uKey = `${resourcePath}-${node.id.value}`;
843
+ ctx.scannedTables.createThemeHashTable[uKey] = hash;
844
+ ctx.scannedTables.createThemeObjectTable[hash] = obj;
845
+ if (ctx.scannedTables.createThemeSelectorTable) {
846
+ ctx.scannedTables.createThemeSelectorTable[hash] = selector;
847
+ }
848
+ const themeHashMap = {};
849
+ for (const [key, value] of Object.entries(obj)) {
850
+ const cssVarName = (0, zss_engine_1.camelToKebabCase)(key);
851
+ const atomicHash = (0, zss_engine_1.genBase36Hash)({ [key]: value }, 1, 8);
852
+ themeHashMap[key] = `var(--${atomicHash}-${cssVarName})`;
853
+ }
854
+ ctx.scannedTables.createAtomicMapTable[hash] = themeHashMap;
781
855
  ctx.localCreateStyles[node.id.value] = {
782
- type: 'variant',
783
- obj,
784
- hashMap,
856
+ type: 'create',
857
+ obj: ctx.scannedTables.createAtomicMapTable[hash],
785
858
  };
786
859
  }
787
- }
788
- else if (pName === 'createTheme') {
789
- let selector = '';
790
- const selectorExpr = node.init.arguments[0].expression;
791
- if (utils_1.t.isStringLiteral(selectorExpr)) {
792
- selector = selectorExpr.value;
793
- }
794
- 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);
795
- const hash = (0, zss_engine_1.genBase36Hash)({ _themeSelector: selector, ...obj }, 1, 8);
796
- const uKey = `${resourcePath}-${node.id.value}`;
797
- ctx.scannedTables.createThemeHashTable[uKey] = hash;
798
- ctx.scannedTables.createThemeObjectTable[hash] = obj;
799
- if (ctx.scannedTables.createThemeSelectorTable) {
800
- ctx.scannedTables.createThemeSelectorTable[hash] = selector;
801
- }
802
- const themeHashMap = {};
803
- for (const [key, value] of Object.entries(obj)) {
804
- const cssVarName = (0, zss_engine_1.camelToKebabCase)(key);
805
- const atomicHash = (0, zss_engine_1.genBase36Hash)({ [key]: value }, 1, 8);
806
- themeHashMap[key] = `var(--${atomicHash}-${cssVarName})`;
860
+ else if (pName === 'createStatic') {
861
+ 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);
862
+ if (obj) {
863
+ const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
864
+ const uKey = `${resourcePath}-${node.id.value}`;
865
+ ctx.scannedTables.createStaticHashTable[uKey] = hash;
866
+ ctx.scannedTables.createStaticObjectTable[hash] = obj;
867
+ ctx.mergedCreateStaticHashTable[node.id.value] = hash;
868
+ }
807
869
  }
808
- ctx.scannedTables.createAtomicMapTable[hash] = themeHashMap;
809
- ctx.localCreateStyles[node.id.value] = {
810
- type: 'create',
811
- obj: ctx.scannedTables.createAtomicMapTable[hash],
812
- };
813
870
  }
814
- else if (pName === 'createStatic') {
815
- 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);
816
- if (obj) {
817
- const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
818
- const uKey = `${resourcePath}-${node.id.value}`;
819
- ctx.scannedTables.createStaticHashTable[uKey] = hash;
820
- ctx.scannedTables.createStaticObjectTable[hash] = obj;
821
- ctx.mergedCreateStaticHashTable[node.id.value] = hash;
822
- }
871
+ }
872
+ else if (utils_1.t.isMemberExpression(init) &&
873
+ utils_1.t.isIdentifier(init.object)) {
874
+ const objName = init.object.value;
875
+ if (ctx.localCreateStyles[objName] !== undefined ||
876
+ ctx.mergedCreateTable[objName] !== undefined) {
877
+ localStyleAliases[node.id.value] = init;
823
878
  }
824
879
  }
825
880
  }
@@ -847,7 +902,10 @@ function compileCSS(options) {
847
902
  if (node.value &&
848
903
  node.value.type === 'JSXExpressionContainer' &&
849
904
  node.value.expression.type !== 'JSXEmptyExpression') {
850
- const expr = node.value.expression;
905
+ let expr = node.value.expression;
906
+ if (utils_1.t.isIdentifier(expr) && localStyleAliases[expr.value]) {
907
+ expr = localStyleAliases[expr.value];
908
+ }
851
909
  const styles = extractStylesFromExpression(expr, ctx);
852
910
  styles.forEach(processStyle);
853
911
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plumeria/compiler",
3
- "version": "16.2.3",
3
+ "version": "16.2.5",
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": "^16.2.3"
24
+ "@plumeria/utils": "^16.2.5"
25
25
  },
26
26
  "devDependencies": {
27
27
  "@rust-gear/glob": "1.0.0",