@plumeria/vite-plugin 10.0.6 → 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.
Files changed (2) hide show
  1. package/dist/index.js +221 -181
  2. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -104,6 +104,14 @@ export function plumeria(options = {}) {
104
104
  extractedSheets.push(sheet);
105
105
  }
106
106
  };
107
+ const processStyleRecords = (style) => {
108
+ const records = getStyleRecords(style);
109
+ extractOndemandStyles(style, extractedSheets, scannedTables);
110
+ records.forEach((r) => {
111
+ addSheet(r.sheet);
112
+ });
113
+ return records;
114
+ };
107
115
  const localConsts = collectLocalConsts(ast);
108
116
  const resourcePath = id;
109
117
  const importMap = {};
@@ -185,7 +193,10 @@ export function plumeria(options = {}) {
185
193
  mergedKeyframesTable[key] = scannedTables.keyframesHashTable[key];
186
194
  }
187
195
  for (const key of Object.keys(importMap)) {
188
- mergedKeyframesTable[key] = importMap[key];
196
+ const val = importMap[key];
197
+ if (typeof val === 'string') {
198
+ mergedKeyframesTable[key] = val;
199
+ }
189
200
  }
190
201
  const mergedViewTransitionTable = {};
191
202
  for (const key of Object.keys(scannedTables.viewTransitionHashTable)) {
@@ -193,21 +204,30 @@ export function plumeria(options = {}) {
193
204
  scannedTables.viewTransitionHashTable[key];
194
205
  }
195
206
  for (const key of Object.keys(importMap)) {
196
- mergedViewTransitionTable[key] = importMap[key];
207
+ const val = importMap[key];
208
+ if (typeof val === 'string') {
209
+ mergedViewTransitionTable[key] = val;
210
+ }
197
211
  }
198
212
  const mergedCreateTable = {};
199
213
  for (const key of Object.keys(scannedTables.createHashTable)) {
200
214
  mergedCreateTable[key] = scannedTables.createHashTable[key];
201
215
  }
202
216
  for (const key of Object.keys(importMap)) {
203
- mergedCreateTable[key] = importMap[key];
217
+ const val = importMap[key];
218
+ if (typeof val === 'string') {
219
+ mergedCreateTable[key] = val;
220
+ }
204
221
  }
205
222
  const mergedVariantsTable = {};
206
223
  for (const key of Object.keys(scannedTables.variantsHashTable)) {
207
224
  mergedVariantsTable[key] = scannedTables.variantsHashTable[key];
208
225
  }
209
226
  for (const key of Object.keys(importMap)) {
210
- mergedVariantsTable[key] = importMap[key];
227
+ const val = importMap[key];
228
+ if (typeof val === 'string') {
229
+ mergedVariantsTable[key] = val;
230
+ }
211
231
  }
212
232
  const mergedCreateThemeHashTable = {};
213
233
  for (const key of Object.keys(scannedTables.createThemeHashTable)) {
@@ -241,10 +261,9 @@ export function plumeria(options = {}) {
241
261
  const idSpans = new Set();
242
262
  const excludedSpans = new Set();
243
263
  const checkVariantAssignment = (decl) => {
244
- if (decl.init &&
245
- t.isCallExpression(decl.init) &&
246
- t.isIdentifier(decl.init.callee)) {
247
- const varName = decl.init.callee.value;
264
+ const init = decl.init;
265
+ if (init && t.isCallExpression(init) && t.isIdentifier(init.callee)) {
266
+ const varName = init.callee.value;
248
267
  if ((localCreateStyles[varName] &&
249
268
  localCreateStyles[varName].type === 'variant') ||
250
269
  mergedVariantsTable[varName]) {
@@ -254,11 +273,12 @@ export function plumeria(options = {}) {
254
273
  };
255
274
  const registerStyle = (node, declSpan, isExported) => {
256
275
  let propName;
276
+ const init = node.init;
257
277
  if (t.isIdentifier(node.id) &&
258
- node.init &&
259
- t.isCallExpression(node.init) &&
260
- node.init.arguments.length >= 1) {
261
- const callee = node.init.callee;
278
+ init &&
279
+ t.isCallExpression(init) &&
280
+ init.arguments.length >= 1) {
281
+ const callee = init.callee;
262
282
  if (t.isMemberExpression(callee) &&
263
283
  t.isIdentifier(callee.object) &&
264
284
  t.isIdentifier(callee.property)) {
@@ -277,47 +297,41 @@ export function plumeria(options = {}) {
277
297
  }
278
298
  }
279
299
  }
280
- if (propName) {
300
+ if (propName && init && t.isCallExpression(init)) {
281
301
  if (propName === 'create' &&
282
- t.isObjectExpression(node.init.arguments[0].expression)) {
283
- const obj = objectExpressionToObject(node.init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
302
+ t.isObjectExpression(init.arguments[0].expression)) {
303
+ const obj = objectExpressionToObject(init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
284
304
  if (obj) {
285
305
  const hashMap = {};
286
306
  Object.entries(obj).forEach(([key, style]) => {
287
307
  if (typeof style !== 'object' || style === null)
288
308
  return;
289
309
  const records = getStyleRecords(style);
290
- extractOndemandStyles(style, extractedSheets, scannedTables);
291
- records.forEach((r) => {
292
- addSheet(r.sheet);
293
- });
294
310
  const atomMap = {};
295
311
  records.forEach((r) => (atomMap[r.key] = r.hash));
296
312
  hashMap[key] = atomMap;
297
313
  });
298
- const objExpr = node.init.arguments[0]
299
- .expression;
314
+ const styleFunctions = {};
315
+ const objExpr = init.arguments[0].expression;
300
316
  objExpr.properties.forEach((prop) => {
301
317
  if (prop.type !== 'KeyValueProperty' ||
302
318
  prop.key.type !== 'Identifier')
303
319
  return;
304
- const isArrow = prop.value.type === 'ArrowFunctionExpression';
305
- const isFunc = prop.value.type === 'FunctionExpression';
306
- if (!isArrow && !isFunc)
320
+ const func = prop.value;
321
+ if (func.type !== 'ArrowFunctionExpression' &&
322
+ func.type !== 'FunctionExpression')
307
323
  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];
324
+ const params = func.params.map((p) => {
325
+ if (t.isIdentifier(p))
326
+ return p.value;
327
+ if (typeof p === 'object' &&
328
+ p !== null &&
329
+ 'pat' in p &&
330
+ t.isIdentifier(p.pat))
331
+ return p.pat.value;
332
+ return 'arg';
319
333
  });
320
- let actualBody = prop.value.body;
334
+ let actualBody = func.body;
321
335
  if (actualBody?.type === 'ParenthesisExpression')
322
336
  actualBody = actualBody.expression;
323
337
  if (actualBody?.type === 'BlockStatement') {
@@ -327,52 +341,42 @@ export function plumeria(options = {}) {
327
341
  if (actualBody?.type === 'ParenthesisExpression')
328
342
  actualBody = actualBody.expression;
329
343
  }
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
- }
344
+ if (actualBody && actualBody.type === 'ObjectExpression') {
345
+ styleFunctions[prop.key.value] = {
346
+ params,
347
+ body: actualBody,
348
+ };
342
349
  }
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
350
  });
350
351
  if (t.isIdentifier(node.id)) {
351
352
  idSpans.add(node.id.span.start);
352
353
  }
353
- localCreateStyles[node.id.value] = {
354
- name: node.id.value,
355
- type: 'create',
356
- obj,
357
- hashMap,
358
- isExported,
359
- initSpan: {
360
- start: node.init.span.start - baseByteOffset,
361
- end: node.init.span.end - baseByteOffset,
362
- },
363
- declSpan: {
364
- start: declSpan.start - baseByteOffset,
365
- end: declSpan.end - baseByteOffset,
366
- },
367
- };
354
+ if (t.isIdentifier(node.id)) {
355
+ localCreateStyles[node.id.value] = {
356
+ name: node.id.value,
357
+ type: 'create',
358
+ obj,
359
+ hashMap,
360
+ isExported,
361
+ initSpan: {
362
+ start: init.span.start - baseByteOffset,
363
+ end: init.span.end - baseByteOffset,
364
+ },
365
+ declSpan: {
366
+ start: declSpan.start - baseByteOffset,
367
+ end: declSpan.end - baseByteOffset,
368
+ },
369
+ functions: styleFunctions,
370
+ };
371
+ }
368
372
  }
369
373
  }
370
374
  else if (propName === 'variants' &&
371
- t.isObjectExpression(node.init.arguments[0].expression)) {
375
+ t.isObjectExpression(init.arguments[0].expression)) {
372
376
  if (t.isIdentifier(node.id)) {
373
377
  idSpans.add(node.id.span.start);
374
378
  }
375
- const obj = objectExpressionToObject(node.init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable, (name) => {
379
+ const obj = objectExpressionToObject(init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable, (name) => {
376
380
  if (localCreateStyles[name]) {
377
381
  return localCreateStyles[name].obj;
378
382
  }
@@ -385,47 +389,51 @@ export function plumeria(options = {}) {
385
389
  return undefined;
386
390
  });
387
391
  const { hashMap } = processVariants(obj);
388
- localCreateStyles[node.id.value] = {
389
- name: node.id.value,
390
- type: 'variant',
391
- obj,
392
- hashMap,
393
- isExported,
394
- initSpan: {
395
- start: node.init.span.start - baseByteOffset,
396
- end: node.init.span.end - baseByteOffset,
397
- },
398
- declSpan: {
399
- start: declSpan.start - baseByteOffset,
400
- end: declSpan.end - baseByteOffset,
401
- },
402
- };
392
+ if (t.isIdentifier(node.id)) {
393
+ localCreateStyles[node.id.value] = {
394
+ name: node.id.value,
395
+ type: 'variant',
396
+ obj,
397
+ hashMap,
398
+ isExported,
399
+ initSpan: {
400
+ start: init.span.start - baseByteOffset,
401
+ end: init.span.end - baseByteOffset,
402
+ },
403
+ declSpan: {
404
+ start: declSpan.start - baseByteOffset,
405
+ end: declSpan.end - baseByteOffset,
406
+ },
407
+ };
408
+ }
403
409
  }
404
410
  else if (propName === 'createTheme' &&
405
- t.isObjectExpression(node.init.arguments[0].expression)) {
411
+ t.isObjectExpression(init.arguments[0].expression)) {
406
412
  if (t.isIdentifier(node.id)) {
407
413
  idSpans.add(node.id.span.start);
408
414
  }
409
- const obj = objectExpressionToObject(node.init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
415
+ const obj = objectExpressionToObject(init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
410
416
  const hash = genBase36Hash(obj, 1, 8);
411
- const uniqueKey = `${resourcePath}-${node.id.value}`;
412
- scannedTables.createThemeHashTable[uniqueKey] = hash;
413
- scannedTables.createThemeObjectTable[hash] = obj;
414
- localCreateStyles[node.id.value] = {
415
- name: node.id.value,
416
- type: 'constant',
417
- obj,
418
- hashMap: scannedTables.createAtomicMapTable[hash],
419
- isExported,
420
- initSpan: {
421
- start: node.init.span.start - baseByteOffset,
422
- end: node.init.span.end - baseByteOffset,
423
- },
424
- declSpan: {
425
- start: declSpan.start - baseByteOffset,
426
- end: declSpan.end - baseByteOffset,
427
- },
428
- };
417
+ if (t.isIdentifier(node.id)) {
418
+ const uniqueKey = `${resourcePath}-${node.id.value}`;
419
+ scannedTables.createThemeHashTable[uniqueKey] = hash;
420
+ scannedTables.createThemeObjectTable[hash] = obj;
421
+ localCreateStyles[node.id.value] = {
422
+ name: node.id.value,
423
+ type: 'constant',
424
+ obj,
425
+ hashMap: scannedTables.createAtomicMapTable[hash],
426
+ isExported,
427
+ initSpan: {
428
+ start: init.span.start - baseByteOffset,
429
+ end: init.span.end - baseByteOffset,
430
+ },
431
+ declSpan: {
432
+ start: declSpan.start - baseByteOffset,
433
+ end: declSpan.end - baseByteOffset,
434
+ },
435
+ };
436
+ }
429
437
  }
430
438
  }
431
439
  };
@@ -436,7 +444,7 @@ export function plumeria(options = {}) {
436
444
  if (specifier.local) {
437
445
  excludedSpans.add(specifier.local.span.start);
438
446
  }
439
- if (specifier.imported) {
447
+ if (specifier.type === 'ImportSpecifier' && specifier.imported) {
440
448
  excludedSpans.add(specifier.imported.span.start);
441
449
  }
442
450
  });
@@ -481,17 +489,18 @@ export function plumeria(options = {}) {
481
489
  }
482
490
  if (propName) {
483
491
  const args = node.arguments;
484
- if (propName === 'keyframes' &&
485
- args.length > 0 &&
486
- t.isObjectExpression(args[0].expression)) {
487
- const obj = objectExpressionToObject(args[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
488
- const hash = genBase36Hash(obj, 1, 8);
489
- scannedTables.keyframesObjectTable[hash] = obj;
490
- replacements.push({
491
- start: node.span.start - baseByteOffset,
492
- end: node.span.end - baseByteOffset,
493
- content: JSON.stringify(`kf-${hash}`),
494
- });
492
+ if (propName === 'keyframes') {
493
+ const expr = args[0].expression;
494
+ if (t.isObjectExpression(expr)) {
495
+ const obj = objectExpressionToObject(expr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
496
+ const hash = genBase36Hash(obj, 1, 8);
497
+ scannedTables.keyframesObjectTable[hash] = obj;
498
+ replacements.push({
499
+ start: node.span.start - baseByteOffset,
500
+ end: node.span.end - baseByteOffset,
501
+ content: JSON.stringify(`kf-${hash}`),
502
+ });
503
+ }
495
504
  }
496
505
  else if (propName === 'viewTransition' &&
497
506
  args.length > 0 &&
@@ -545,8 +554,7 @@ export function plumeria(options = {}) {
545
554
  }
546
555
  else if (t.isMemberExpression(expr) &&
547
556
  t.isIdentifier(expr.object) &&
548
- (t.isIdentifier(expr.property) ||
549
- expr.property.type === 'Computed')) {
557
+ (t.isIdentifier(expr.property) || expr.property.type === 'Computed')) {
550
558
  if (expr.property.type === 'Computed')
551
559
  return {};
552
560
  const varName = expr.object.value;
@@ -682,8 +690,9 @@ export function plumeria(options = {}) {
682
690
  const currentGroupId = ++groupIdCounter;
683
691
  const valSource = getSource(valExpr);
684
692
  if (valExpr.type === 'StringLiteral') {
685
- if (groupVariants[valExpr.value])
686
- baseStyle = deepMerge(baseStyle, groupVariants[valExpr.value]);
693
+ const groupVariantsAsObj = groupVariants;
694
+ if (groupVariantsAsObj[valExpr.value])
695
+ baseStyle = deepMerge(baseStyle, groupVariantsAsObj[valExpr.value]);
687
696
  continue;
688
697
  }
689
698
  Object.entries(groupVariants).forEach(([optionName, style]) => {
@@ -861,7 +870,7 @@ export function plumeria(options = {}) {
861
870
  if (existingClass)
862
871
  classParts.push(JSON.stringify(existingClass));
863
872
  if (Object.keys(baseIndependent).length > 0) {
864
- const className = getStyleRecords(baseIndependent)
873
+ const className = processStyleRecords(baseIndependent)
865
874
  .map((r) => r.hash)
866
875
  .join(' ');
867
876
  if (className)
@@ -873,7 +882,7 @@ export function plumeria(options = {}) {
873
882
  const processBranch = (style) => {
874
883
  if (Object.keys(style).length === 0)
875
884
  return '""';
876
- return JSON.stringify(getStyleRecords(style)
885
+ return JSON.stringify(processStyleRecords(style)
877
886
  .map((r) => r.hash)
878
887
  .join(' '));
879
888
  };
@@ -895,7 +904,7 @@ export function plumeria(options = {}) {
895
904
  const lookupMap = {};
896
905
  options.forEach((opt) => {
897
906
  if (opt.valueName && opt.truthy) {
898
- const className = getStyleRecords(opt.truthy)
907
+ const className = processStyleRecords(opt.truthy)
899
908
  .map((r) => r.hash)
900
909
  .join(' ');
901
910
  if (className)
@@ -948,7 +957,7 @@ export function plumeria(options = {}) {
948
957
  const results = {};
949
958
  const recurse = (dimIndex, currentStyle, keyParts) => {
950
959
  if (dimIndex >= dimensions.length) {
951
- const className = getStyleRecords(currentStyle)
960
+ const className = processStyleRecords(currentStyle)
952
961
  .map((r) => r.hash)
953
962
  .join(' ');
954
963
  if (className)
@@ -962,7 +971,7 @@ export function plumeria(options = {}) {
962
971
  };
963
972
  recurse(0, baseConflict, []);
964
973
  const baseConflictClass = Object.keys(baseConflict).length > 0
965
- ? getStyleRecords(baseConflict)
974
+ ? processStyleRecords(baseConflict)
966
975
  .map((r) => r.hash)
967
976
  .join(' ')
968
977
  : '';
@@ -1108,20 +1117,24 @@ export function plumeria(options = {}) {
1108
1117
  const expr = node.value.expression;
1109
1118
  let args = expr.type === 'ArrayExpression'
1110
1119
  ? expr.elements
1111
- .filter(Boolean)
1112
- .map((el) => ({ expression: el.expression ?? el }))
1120
+ .filter((el) => el !== undefined)
1121
+ .map((el) => ({ expression: el.expression }))
1113
1122
  : [{ expression: expr }];
1114
1123
  const dynamicClassParts = [];
1115
1124
  const dynamicStyleParts = [];
1116
1125
  let attributes = [];
1117
1126
  for (const [, attrs] of jsxOpeningElementMap) {
1118
- const found = attrs.find((a) => a.span?.start === node.span.start);
1127
+ const found = attrs
1128
+ .filter((a) => a.type === 'JSXAttribute')
1129
+ .find((a) => a.span.start === node.span.start);
1119
1130
  if (found) {
1120
1131
  attributes = attrs;
1121
1132
  break;
1122
1133
  }
1123
1134
  }
1124
- const classNameAttr = attributes.find((attr) => attr.name?.value === 'className');
1135
+ const classNameAttr = attributes.find((attr) => attr.type === 'JSXAttribute' &&
1136
+ attr.name.type === 'Identifier' &&
1137
+ attr.name.value === 'className');
1125
1138
  let existingClass = '';
1126
1139
  if (classNameAttr?.value?.type === 'StringLiteral') {
1127
1140
  existingClass = classNameAttr.value.value;
@@ -1131,23 +1144,27 @@ export function plumeria(options = {}) {
1131
1144
  content: '',
1132
1145
  });
1133
1146
  }
1134
- const styleAttrExisting = attributes.find((attr) => attr.name?.value === 'style');
1147
+ const styleAttrExisting = attributes.find((attr) => attr.type === 'JSXAttribute' &&
1148
+ attr.name.type === 'Identifier' &&
1149
+ attr.name.value === 'style');
1135
1150
  if (styleAttrExisting) {
1136
1151
  replacements.push({
1137
1152
  start: styleAttrExisting.span.start - baseByteOffset,
1138
1153
  end: styleAttrExisting.span.end - baseByteOffset,
1139
1154
  content: '',
1140
1155
  });
1141
- const innerExpr = styleAttrExisting.value?.expression;
1142
- if (innerExpr?.type === 'ObjectExpression') {
1143
- const start = innerExpr.span.start - baseByteOffset;
1144
- const end = innerExpr.span.end - baseByteOffset;
1145
- const innerSource = sourceBuffer
1146
- .subarray(start, end)
1147
- .toString('utf-8');
1148
- const stripped = innerSource.slice(1, -1).trim();
1149
- if (stripped)
1150
- dynamicStyleParts.push(stripped);
1156
+ if (styleAttrExisting.value?.type === 'JSXExpressionContainer') {
1157
+ const innerExpr = styleAttrExisting.value?.expression;
1158
+ if (innerExpr?.type === 'ObjectExpression') {
1159
+ const start = innerExpr.span.start - baseByteOffset;
1160
+ const end = innerExpr.span.end - baseByteOffset;
1161
+ const innerSource = sourceBuffer
1162
+ .subarray(start, end)
1163
+ .toString('utf-8');
1164
+ const stripped = innerSource.slice(1, -1).trim();
1165
+ if (stripped)
1166
+ dynamicStyleParts.push(stripped);
1167
+ }
1151
1168
  }
1152
1169
  }
1153
1170
  args = args.filter((arg) => {
@@ -1161,44 +1178,68 @@ export function plumeria(options = {}) {
1161
1178
  const varName = callee.object.value;
1162
1179
  const propKey = callee.property.value;
1163
1180
  const styleInfo = localCreateStyles[varName];
1164
- const atomMap = styleInfo?.hashMap?.[propKey];
1165
- if (!atomMap?.['__cssVars__'])
1166
- return true;
1167
- const cssVarInfo = JSON.parse(atomMap['__cssVars__']);
1168
- const hashes = Object.entries(atomMap)
1169
- .filter(([k]) => k !== '__cssVars__')
1170
- .map(([, v]) => v)
1171
- .join(' ');
1172
- if (hashes)
1173
- dynamicClassParts.push(JSON.stringify(hashes));
1174
- const callArgs = expr.arguments;
1175
- Object.entries(cssVarInfo).forEach(([_, { cssVar, propKey: targetProp }], i) => {
1176
- const callArg = callArgs[i];
1177
- if (!callArg)
1178
- return;
1179
- const argStart = callArg.expression.span.start - baseByteOffset;
1180
- const argEnd = callArg.expression.span.end - baseByteOffset;
1181
- const argSource = sourceBuffer
1182
- .subarray(argStart, argEnd)
1183
- .toString('utf-8');
1184
- let valueExpr;
1185
- const maybeNumber = Number(argSource);
1186
- if (!isNaN(maybeNumber) &&
1187
- argSource.trim() === String(maybeNumber)) {
1188
- valueExpr = JSON.stringify(applyCssValue(maybeNumber, targetProp));
1189
- }
1190
- else if ((argSource.startsWith('"') && argSource.endsWith('"')) ||
1191
- (argSource.startsWith("'") && argSource.endsWith("'"))) {
1192
- valueExpr = JSON.stringify(applyCssValue(argSource.slice(1, -1), targetProp));
1193
- }
1194
- else {
1195
- valueExpr = exceptionCamelCase.includes(targetProp)
1196
- ? argSource
1197
- : `(typeof ${argSource} === 'number' ? ${argSource} + 'px' : ${argSource})`;
1181
+ if (styleInfo?.functions?.[propKey]) {
1182
+ const func = styleInfo.functions[propKey];
1183
+ const callArgs = expr.arguments;
1184
+ const tempStaticTable = { ...mergedStaticTable };
1185
+ if (callArgs.length === 1 && !callArgs[0].spread) {
1186
+ const argExpr = callArgs[0].expression;
1187
+ const cssVarInfo = {};
1188
+ if (argExpr.type === 'ObjectExpression') {
1189
+ const argObj = objectExpressionToObject(argExpr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
1190
+ func.params.forEach((p) => {
1191
+ if (argObj[p] !== undefined)
1192
+ tempStaticTable[p] = argObj[p];
1193
+ });
1194
+ }
1195
+ else {
1196
+ func.params.forEach((p) => {
1197
+ const cssVar = `--${propKey}-${p}`;
1198
+ tempStaticTable[p] = `var(${cssVar})`;
1199
+ cssVarInfo[p] = { cssVar, propKey: '' };
1200
+ });
1201
+ }
1202
+ const substituted = objectExpressionToObject(func.body, tempStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
1203
+ if (substituted) {
1204
+ const records = processStyleRecords(substituted);
1205
+ const hashes = records.map((r) => r.hash).join(' ');
1206
+ if (hashes)
1207
+ dynamicClassParts.push(JSON.stringify(hashes));
1208
+ if (Object.keys(cssVarInfo).length > 0) {
1209
+ Object.entries(cssVarInfo).forEach(([_, info]) => {
1210
+ const targetProp = Object.keys(substituted).find((k) => typeof substituted[k] === 'string' &&
1211
+ substituted[k].includes(info.cssVar));
1212
+ if (targetProp) {
1213
+ const argStart = argExpr.span.start - baseByteOffset;
1214
+ const argEnd = argExpr.span.end - baseByteOffset;
1215
+ const argSource = sourceBuffer
1216
+ .subarray(argStart, argEnd)
1217
+ .toString('utf-8');
1218
+ let valueExpr;
1219
+ const maybeNumber = Number(argSource);
1220
+ if (!isNaN(maybeNumber) &&
1221
+ argSource.trim() === String(maybeNumber)) {
1222
+ valueExpr = JSON.stringify(applyCssValue(maybeNumber, targetProp));
1223
+ }
1224
+ else if ((argSource.startsWith('"') &&
1225
+ argSource.endsWith('"')) ||
1226
+ (argSource.startsWith("'") && argSource.endsWith("'"))) {
1227
+ valueExpr = JSON.stringify(applyCssValue(argSource.slice(1, -1), targetProp));
1228
+ }
1229
+ else {
1230
+ valueExpr = exceptionCamelCase.includes(targetProp)
1231
+ ? argSource
1232
+ : `(typeof ${argSource} === 'number' ? ${argSource} + 'px' : ${argSource})`;
1233
+ }
1234
+ dynamicStyleParts.push(`"${info.cssVar}": ${valueExpr}`);
1235
+ }
1236
+ });
1237
+ }
1238
+ return false;
1239
+ }
1198
1240
  }
1199
- dynamicStyleParts.push(`"${cssVar}": ${valueExpr}`);
1200
- });
1201
- return false;
1241
+ }
1242
+ return true;
1202
1243
  });
1203
1244
  const styleAttr = dynamicStyleParts.length > 0
1204
1245
  ? ` style={{${dynamicStyleParts.join(', ')}}}`
@@ -1257,8 +1298,7 @@ export function plumeria(options = {}) {
1257
1298
  const varName = callee.object.value;
1258
1299
  const propKey = callee.property.value;
1259
1300
  const styleInfo = localCreateStyles[varName];
1260
- const atomMap = styleInfo?.hashMap?.[propKey];
1261
- if (atomMap?.['__cssVars__']) {
1301
+ if (styleInfo?.functions?.[propKey]) {
1262
1302
  throw new Error(`Plumeria: css.use(${getSource(expr)}) does not support dynamic function keys.\n`);
1263
1303
  }
1264
1304
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plumeria/vite-plugin",
3
- "version": "10.0.6",
3
+ "version": "10.0.8",
4
4
  "type": "module",
5
5
  "description": "Plumeria Vite plugin",
6
6
  "author": "Refirst 11",
@@ -22,7 +22,7 @@
22
22
  "dist/"
23
23
  ],
24
24
  "dependencies": {
25
- "@plumeria/utils": "^10.0.6"
25
+ "@plumeria/utils": "^10.0.8"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@swc/core": "1.15.21",