@plumeria/compiler 18.3.18 → 18.4.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.d.ts +2 -1
- package/dist/index.js +20 -198
- package/package.json +3 -3
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -71,133 +71,16 @@ const isStaticArgValue = (node) => node.type === 'StringLiteral' ||
|
|
|
71
71
|
(node.type === 'TemplateLiteral' && node.expressions.length === 0) ||
|
|
72
72
|
utils_1.t.isIdentifier(node) ||
|
|
73
73
|
utils_1.t.isMemberExpression(node);
|
|
74
|
-
const
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
named.push({ key: prop.key.value, local: prop.key.value });
|
|
85
|
-
if (prop.value)
|
|
86
|
-
defaults[prop.key.value] = prop.value;
|
|
87
|
-
}
|
|
88
|
-
else if (prop.type === 'KeyValuePatternProperty' &&
|
|
89
|
-
utils_1.t.isIdentifier(prop.key) &&
|
|
90
|
-
utils_1.t.isIdentifier(prop.value)) {
|
|
91
|
-
named.push({ key: prop.key.value, local: prop.value.value });
|
|
92
|
-
}
|
|
93
|
-
else if (prop.type === 'KeyValuePatternProperty' &&
|
|
94
|
-
utils_1.t.isIdentifier(prop.key) &&
|
|
95
|
-
prop.value?.type === 'AssignmentPattern' &&
|
|
96
|
-
utils_1.t.isIdentifier(prop.value.left)) {
|
|
97
|
-
named.push({ key: String(prop.key.value), local: prop.value.left.value });
|
|
98
|
-
defaults[prop.value.left.value] = prop.value.right;
|
|
99
|
-
}
|
|
100
|
-
else {
|
|
101
|
-
return undefined;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
return named.length > 0 ? named : undefined;
|
|
105
|
-
};
|
|
106
|
-
const isUnitlessProp = (prop) => zss_engine_1.exceptionCamelCase.includes(prop) || prop.startsWith('--');
|
|
107
|
-
const collectVarProps = (style, cssVar, props) => {
|
|
108
|
-
const reference = `var(${cssVar})`;
|
|
109
|
-
for (const [prop, value] of Object.entries(style)) {
|
|
110
|
-
if (typeof value === 'string' && value.includes(reference))
|
|
111
|
-
props.push(prop);
|
|
112
|
-
else if (value !== null && typeof value === 'object')
|
|
113
|
-
collectVarProps(value, cssVar, props);
|
|
114
|
-
}
|
|
115
|
-
};
|
|
116
|
-
const retargetVar = (style, cssVar, next, unitless) => {
|
|
117
|
-
const reference = `var(${cssVar})`;
|
|
118
|
-
for (const [prop, value] of Object.entries(style)) {
|
|
119
|
-
if (typeof value === 'string' && value.includes(reference)) {
|
|
120
|
-
if (isUnitlessProp(prop) === unitless)
|
|
121
|
-
style[prop] = value
|
|
122
|
-
.split(reference)
|
|
123
|
-
.join(`var(${next})`);
|
|
124
|
-
}
|
|
125
|
-
else if (value !== null && typeof value === 'object') {
|
|
126
|
-
retargetVar(value, cssVar, next, unitless);
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
};
|
|
130
|
-
const splitVarByUnit = (style, cssVar) => {
|
|
131
|
-
const props = [];
|
|
132
|
-
collectVarProps(style, cssVar, props);
|
|
133
|
-
if (props.length === 0)
|
|
134
|
-
return [];
|
|
135
|
-
const lead = props[0];
|
|
136
|
-
const split = props.find((prop) => isUnitlessProp(prop) !== isUnitlessProp(lead));
|
|
137
|
-
if (!split)
|
|
138
|
-
return [{ cssVar, prop: lead }];
|
|
139
|
-
const splitVar = `${cssVar}-${(0, zss_engine_1.camelToKebabCase)(split).replace(/^-+/, '')}`;
|
|
140
|
-
retargetVar(style, cssVar, splitVar, isUnitlessProp(split));
|
|
141
|
-
return [
|
|
142
|
-
{ cssVar, prop: lead },
|
|
143
|
-
{ cssVar: splitVar, prop: split },
|
|
144
|
-
];
|
|
145
|
-
};
|
|
146
|
-
const applyVarFallback = (style, cssVar, literal) => {
|
|
147
|
-
const reference = `var(${cssVar})`;
|
|
148
|
-
for (const [prop, value] of Object.entries(style)) {
|
|
149
|
-
if (typeof value === 'string' && value.includes(reference)) {
|
|
150
|
-
style[prop] = value
|
|
151
|
-
.split(reference)
|
|
152
|
-
.join(`var(${cssVar}, ${(0, zss_engine_1.applyCssValue)(literal, (0, zss_engine_1.camelToKebabCase)(prop))})`);
|
|
153
|
-
}
|
|
154
|
-
else if (value !== null && typeof value === 'object') {
|
|
155
|
-
applyVarFallback(value, cssVar, literal);
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
};
|
|
159
|
-
const styleFunctionsOf = (objExpr) => {
|
|
160
|
-
const styleFunctions = {};
|
|
161
|
-
objExpr.properties.forEach((prop) => {
|
|
162
|
-
if (prop.type !== 'KeyValueProperty' || prop.key.type !== 'Identifier')
|
|
163
|
-
return;
|
|
164
|
-
const func = prop.value;
|
|
165
|
-
if (func.type !== 'ArrowFunctionExpression' &&
|
|
166
|
-
func.type !== 'FunctionExpression')
|
|
167
|
-
return;
|
|
168
|
-
const defaults = {};
|
|
169
|
-
const params = func.params.map((p) => {
|
|
170
|
-
const pattern = (typeof p === 'object' && p !== null && 'pat' in p ? p.pat : p);
|
|
171
|
-
if (utils_1.t.isIdentifier(pattern))
|
|
172
|
-
return pattern.value;
|
|
173
|
-
if (pattern?.type === 'AssignmentPattern' &&
|
|
174
|
-
utils_1.t.isIdentifier(pattern.left)) {
|
|
175
|
-
defaults[pattern.left.value] = pattern.right;
|
|
176
|
-
return pattern.left.value;
|
|
177
|
-
}
|
|
178
|
-
return 'arg';
|
|
179
|
-
});
|
|
180
|
-
let actualBody = func.body;
|
|
181
|
-
if (actualBody?.type === 'ParenthesisExpression')
|
|
182
|
-
actualBody = actualBody.expression;
|
|
183
|
-
if (actualBody?.type === 'BlockStatement') {
|
|
184
|
-
const first = actualBody.stmts?.[0];
|
|
185
|
-
if (first?.type === 'ReturnStatement')
|
|
186
|
-
actualBody = first.argument;
|
|
187
|
-
if (actualBody?.type === 'ParenthesisExpression')
|
|
188
|
-
actualBody = actualBody.expression;
|
|
189
|
-
}
|
|
190
|
-
if (actualBody && actualBody.type === 'ObjectExpression') {
|
|
191
|
-
styleFunctions[prop.key.value] = {
|
|
192
|
-
params,
|
|
193
|
-
named: namedParamsOf(func.params, defaults),
|
|
194
|
-
defaults,
|
|
195
|
-
body: actualBody,
|
|
196
|
-
};
|
|
197
|
-
}
|
|
198
|
-
});
|
|
199
|
-
return styleFunctions;
|
|
200
|
-
};
|
|
74
|
+
const dynamicTablesOf = (ctx) => ({
|
|
75
|
+
keyframesHashTable: ctx.mergedKeyframesTable,
|
|
76
|
+
viewTransitionHashTable: ctx.mergedViewTransitionTable,
|
|
77
|
+
createThemeHashTable: ctx.mergedCreateThemeHashTable,
|
|
78
|
+
createThemeObjectTable: ctx.scannedTables.createThemeObjectTable,
|
|
79
|
+
createHashTable: ctx.mergedCreateTable,
|
|
80
|
+
createStaticHashTable: ctx.mergedCreateStaticHashTable,
|
|
81
|
+
createStaticObjectTable: ctx.scannedTables.createStaticObjectTable,
|
|
82
|
+
variantsHashTable: ctx.mergedVariantsTable,
|
|
83
|
+
});
|
|
201
84
|
function extractStylesFromExpression(expression, ctx) {
|
|
202
85
|
let expr = expression;
|
|
203
86
|
if (ctx.localStyleAliases &&
|
|
@@ -296,6 +179,7 @@ function extractStylesFromExpression(expression, ctx) {
|
|
|
296
179
|
}
|
|
297
180
|
function compileCSS(options) {
|
|
298
181
|
const { include, exclude, cwd = process.cwd(), styleProp = utils_1.DEFAULT_STYLE_PROP, } = options;
|
|
182
|
+
const propertyPolicy = (0, utils_1.resolvePropertyPolicy)(options);
|
|
299
183
|
const allSheets = new Set();
|
|
300
184
|
const files = rs.globSync(include, {
|
|
301
185
|
cwd,
|
|
@@ -312,6 +196,7 @@ function compileCSS(options) {
|
|
|
312
196
|
tsx: true,
|
|
313
197
|
target: 'es2022',
|
|
314
198
|
});
|
|
199
|
+
(0, utils_1.assertPropertyPolicy)(ast, propertyPolicy, resourcePath);
|
|
315
200
|
const leadingLen = (0, utils_2.getLeadingCommentLength)(source);
|
|
316
201
|
const sourceBuffer = Buffer.from(source, 'utf-8');
|
|
317
202
|
const leadingBytes = Buffer.byteLength(source.slice(0, leadingLen), 'utf-8');
|
|
@@ -377,7 +262,7 @@ function compileCSS(options) {
|
|
|
377
262
|
createImportMap[localName] =
|
|
378
263
|
scannedTables.createHashTable[uniqueKey];
|
|
379
264
|
if (scannedTables.createFunctionTable[uniqueKey])
|
|
380
|
-
createFunctionImportMap[localName] = styleFunctionsOf(scannedTables.createFunctionTable[uniqueKey]);
|
|
265
|
+
createFunctionImportMap[localName] = (0, utils_1.styleFunctionsOf)(scannedTables.createFunctionTable[uniqueKey]);
|
|
381
266
|
if (scannedTables.variantsHashTable[uniqueKey])
|
|
382
267
|
variantsImportMap[localName] =
|
|
383
268
|
scannedTables.variantsHashTable[uniqueKey];
|
|
@@ -552,7 +437,7 @@ function compileCSS(options) {
|
|
|
552
437
|
const records = (0, utils_1.getStyleRecords)(style);
|
|
553
438
|
records.forEach((r) => extractedSheets.push(r.sheet));
|
|
554
439
|
};
|
|
555
|
-
const extractAndProcessConditionals = (args
|
|
440
|
+
const extractAndProcessConditionals = (args) => {
|
|
556
441
|
args.forEach((arg) => {
|
|
557
442
|
if (utils_1.t.isIdentifier(arg.expression) &&
|
|
558
443
|
localStyleAliases[arg.expression.value]) {
|
|
@@ -724,36 +609,10 @@ function compileCSS(options) {
|
|
|
724
609
|
runtime.push(p);
|
|
725
610
|
});
|
|
726
611
|
}
|
|
727
|
-
const
|
|
728
|
-
|
|
729
|
-
const varParams = Array.from(new Set([...runtime, ...withDefault.map(([param]) => param)]));
|
|
730
|
-
if (varParams.length > 0) {
|
|
731
|
-
varParams.forEach((p) => (tempStaticTable[p] = p));
|
|
732
|
-
const probe = (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);
|
|
733
|
-
const hash = (0, zss_engine_1.genBase36Hash)(probe ?? {}, 1, 8);
|
|
734
|
-
varParams.forEach((p) => {
|
|
735
|
-
const cssVar = `--${hash}-${p}`;
|
|
736
|
-
tempStaticTable[p] = `var(${cssVar})`;
|
|
737
|
-
cssVars[p] = cssVar;
|
|
738
|
-
});
|
|
739
|
-
}
|
|
740
|
-
const style = (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);
|
|
741
|
-
if (!style)
|
|
612
|
+
const resolved = (0, utils_1.resolveDynamicStyle)(func, runtime, tempStaticTable, dynamicTablesOf(ctx));
|
|
613
|
+
if (!resolved)
|
|
742
614
|
return null;
|
|
743
|
-
const
|
|
744
|
-
varParams.forEach((param) => {
|
|
745
|
-
const cssVar = cssVars[param];
|
|
746
|
-
if (cssVar)
|
|
747
|
-
varGroups.set(param, splitVarByUnit(style, cssVar));
|
|
748
|
-
});
|
|
749
|
-
withDefault.forEach(([param, expr]) => {
|
|
750
|
-
const literal = expr.type === 'StringLiteral' || expr.type === 'NumericLiteral'
|
|
751
|
-
? expr.value
|
|
752
|
-
: undefined;
|
|
753
|
-
if (literal === undefined)
|
|
754
|
-
return;
|
|
755
|
-
(varGroups.get(param) ?? []).forEach(({ cssVar }) => applyVarFallback(style, cssVar, literal));
|
|
756
|
-
});
|
|
615
|
+
const { style } = resolved;
|
|
757
616
|
return style;
|
|
758
617
|
};
|
|
759
618
|
const collectConditions = (node, currentTestStrings = []) => {
|
|
@@ -825,44 +684,7 @@ function compileCSS(options) {
|
|
|
825
684
|
assertResolvable(node);
|
|
826
685
|
return false;
|
|
827
686
|
};
|
|
828
|
-
const checkFunctionKey = (node) => {
|
|
829
|
-
if (isStyleProp)
|
|
830
|
-
return;
|
|
831
|
-
if (utils_1.t.isCallExpression(node) &&
|
|
832
|
-
utils_1.t.isMemberExpression(node.callee) &&
|
|
833
|
-
utils_1.t.isIdentifier(node.callee.object) &&
|
|
834
|
-
utils_1.t.isIdentifier(node.callee.property)) {
|
|
835
|
-
const varName = node.callee.object.value;
|
|
836
|
-
const propKey = node.callee.property.value;
|
|
837
|
-
const styleInfo = ctx.localCreateStyles[varName];
|
|
838
|
-
const atomMap = styleInfo?.obj[propKey];
|
|
839
|
-
if (typeof atomMap === 'object' &&
|
|
840
|
-
atomMap !== null &&
|
|
841
|
-
'__cssVars__' in atomMap) {
|
|
842
|
-
throw new Error(`[plumeria] css.use(${getSource(node)}) cannot handle dynamic style functions. Use ${styleProp} instead.\n`);
|
|
843
|
-
}
|
|
844
|
-
}
|
|
845
|
-
if (node.type === 'ConditionalExpression') {
|
|
846
|
-
checkFunctionKey(node.consequent);
|
|
847
|
-
checkFunctionKey(node.alternate);
|
|
848
|
-
}
|
|
849
|
-
else if (node.type === 'BinaryExpression' &&
|
|
850
|
-
['&&', '||', '??'].includes(node.operator)) {
|
|
851
|
-
checkFunctionKey(node.left);
|
|
852
|
-
checkFunctionKey(node.right);
|
|
853
|
-
}
|
|
854
|
-
else if (node.type === 'ParenthesisExpression') {
|
|
855
|
-
checkFunctionKey(node.expression);
|
|
856
|
-
}
|
|
857
|
-
else if (node.type === 'ArrayExpression') {
|
|
858
|
-
for (const el of node.elements) {
|
|
859
|
-
if (el && el.expression)
|
|
860
|
-
checkFunctionKey(el.expression);
|
|
861
|
-
}
|
|
862
|
-
}
|
|
863
|
-
};
|
|
864
687
|
for (const arg of args) {
|
|
865
|
-
checkFunctionKey(arg.expression);
|
|
866
688
|
const expr = arg.expression;
|
|
867
689
|
if (utils_1.t.isIdentifier(expr) ||
|
|
868
690
|
(utils_1.t.isMemberExpression(expr) &&
|
|
@@ -947,7 +769,7 @@ function compileCSS(options) {
|
|
|
947
769
|
if (propName) {
|
|
948
770
|
const args = node.arguments;
|
|
949
771
|
if (propName === 'use') {
|
|
950
|
-
extractAndProcessConditionals(args
|
|
772
|
+
extractAndProcessConditionals(args);
|
|
951
773
|
}
|
|
952
774
|
else if (propName === 'keyframes' &&
|
|
953
775
|
args.length > 0 &&
|
|
@@ -1033,7 +855,7 @@ function compileCSS(options) {
|
|
|
1033
855
|
if (pName === 'create') {
|
|
1034
856
|
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);
|
|
1035
857
|
if (obj) {
|
|
1036
|
-
const styleFunctions = styleFunctionsOf(arg);
|
|
858
|
+
const styleFunctions = (0, utils_1.styleFunctionsOf)(arg);
|
|
1037
859
|
ctx.localCreateStyles[node.id.value] = {
|
|
1038
860
|
type: 'create',
|
|
1039
861
|
obj,
|
|
@@ -1148,7 +970,7 @@ function compileCSS(options) {
|
|
|
1148
970
|
.filter((el) => el !== undefined)
|
|
1149
971
|
.map((el) => ({ expression: el.expression }))
|
|
1150
972
|
: [{ expression: expr }];
|
|
1151
|
-
extractAndProcessConditionals(args
|
|
973
|
+
extractAndProcessConditionals(args);
|
|
1152
974
|
},
|
|
1153
975
|
});
|
|
1154
976
|
return extractedSheets;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plumeria/compiler",
|
|
3
|
-
"version": "18.
|
|
3
|
+
"version": "18.4.1",
|
|
4
4
|
"description": "Plumeria swc based compiler for statically extracting css",
|
|
5
5
|
"author": "Refirst 11",
|
|
6
6
|
"license": "MIT",
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
"dist/"
|
|
22
22
|
],
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@plumeria/utils": "^18.
|
|
24
|
+
"@plumeria/utils": "^18.4.1"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@rust-gear/glob": "1.1.1",
|
|
28
28
|
"@swc/core": "1.15.47",
|
|
29
|
-
"zss-engine": "2.
|
|
29
|
+
"zss-engine": "2.8.0"
|
|
30
30
|
},
|
|
31
31
|
"publishConfig": {
|
|
32
32
|
"access": "public",
|