@plumeria/vite-plugin 10.0.7 → 10.1.0

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 +82 -82
  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 = {};
@@ -299,24 +307,16 @@ export function plumeria(options = {}) {
299
307
  if (typeof style !== 'object' || style === null)
300
308
  return;
301
309
  const records = getStyleRecords(style);
302
- extractOndemandStyles(style, extractedSheets, scannedTables);
303
- records.forEach((r) => {
304
- addSheet(r.sheet);
305
- });
306
310
  const atomMap = {};
307
311
  records.forEach((r) => (atomMap[r.key] = r.hash));
308
312
  hashMap[key] = atomMap;
309
313
  });
314
+ const styleFunctions = {};
310
315
  const objExpr = init.arguments[0].expression;
311
316
  objExpr.properties.forEach((prop) => {
312
317
  if (prop.type !== 'KeyValueProperty' ||
313
318
  prop.key.type !== 'Identifier')
314
319
  return;
315
- const isArrow = prop.value.type === 'ArrowFunctionExpression';
316
- const isFunc = prop.value.type === 'FunctionExpression';
317
- if (!isArrow && !isFunc)
318
- return;
319
- const key = prop.key.value;
320
320
  const func = prop.value;
321
321
  if (func.type !== 'ArrowFunctionExpression' &&
322
322
  func.type !== 'FunctionExpression')
@@ -331,16 +331,6 @@ export function plumeria(options = {}) {
331
331
  return p.pat.value;
332
332
  return 'arg';
333
333
  });
334
- const cssVarInfo = {};
335
- const tempStaticTable = { ...mergedStaticTable };
336
- const substitutedArgs = params.map((paramName) => {
337
- const cssVar = `--${key}-${paramName}`;
338
- cssVarInfo[paramName] = { cssVar, propKey: '' };
339
- return `var(${cssVar})`;
340
- });
341
- params.forEach((paramName, i) => {
342
- tempStaticTable[paramName] = substitutedArgs[i];
343
- });
344
334
  let actualBody = func.body;
345
335
  if (actualBody?.type === 'ParenthesisExpression')
346
336
  actualBody = actualBody.expression;
@@ -351,25 +341,12 @@ export function plumeria(options = {}) {
351
341
  if (actualBody?.type === 'ParenthesisExpression')
352
342
  actualBody = actualBody.expression;
353
343
  }
354
- if (!actualBody || actualBody.type !== 'ObjectExpression')
355
- return;
356
- const substituted = objectExpressionToObject(actualBody, tempStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
357
- if (!substituted)
358
- return;
359
- for (const [, info] of Object.entries(cssVarInfo)) {
360
- const cssVar = info.cssVar;
361
- const propKey = Object.keys(substituted).find((k) => typeof substituted[k] === 'string' &&
362
- substituted[k].includes(cssVar));
363
- if (propKey) {
364
- info.propKey = propKey;
365
- }
344
+ if (actualBody && actualBody.type === 'ObjectExpression') {
345
+ styleFunctions[prop.key.value] = {
346
+ params,
347
+ body: actualBody,
348
+ };
366
349
  }
367
- const records = getStyleRecords(substituted);
368
- records.forEach((r) => addSheet(r.sheet));
369
- const atomMap = {};
370
- records.forEach((r) => (atomMap[r.key] = r.hash));
371
- atomMap['__cssVars__'] = JSON.stringify(cssVarInfo);
372
- hashMap[key] = atomMap;
373
350
  });
374
351
  if (t.isIdentifier(node.id)) {
375
352
  idSpans.add(node.id.span.start);
@@ -389,6 +366,7 @@ export function plumeria(options = {}) {
389
366
  start: declSpan.start - baseByteOffset,
390
367
  end: declSpan.end - baseByteOffset,
391
368
  },
369
+ functions: styleFunctions,
392
370
  };
393
371
  }
394
372
  }
@@ -892,7 +870,7 @@ export function plumeria(options = {}) {
892
870
  if (existingClass)
893
871
  classParts.push(JSON.stringify(existingClass));
894
872
  if (Object.keys(baseIndependent).length > 0) {
895
- const className = getStyleRecords(baseIndependent)
873
+ const className = processStyleRecords(baseIndependent)
896
874
  .map((r) => r.hash)
897
875
  .join(' ');
898
876
  if (className)
@@ -904,7 +882,7 @@ export function plumeria(options = {}) {
904
882
  const processBranch = (style) => {
905
883
  if (Object.keys(style).length === 0)
906
884
  return '""';
907
- return JSON.stringify(getStyleRecords(style)
885
+ return JSON.stringify(processStyleRecords(style)
908
886
  .map((r) => r.hash)
909
887
  .join(' '));
910
888
  };
@@ -926,7 +904,7 @@ export function plumeria(options = {}) {
926
904
  const lookupMap = {};
927
905
  options.forEach((opt) => {
928
906
  if (opt.valueName && opt.truthy) {
929
- const className = getStyleRecords(opt.truthy)
907
+ const className = processStyleRecords(opt.truthy)
930
908
  .map((r) => r.hash)
931
909
  .join(' ');
932
910
  if (className)
@@ -979,7 +957,7 @@ export function plumeria(options = {}) {
979
957
  const results = {};
980
958
  const recurse = (dimIndex, currentStyle, keyParts) => {
981
959
  if (dimIndex >= dimensions.length) {
982
- const className = getStyleRecords(currentStyle)
960
+ const className = processStyleRecords(currentStyle)
983
961
  .map((r) => r.hash)
984
962
  .join(' ');
985
963
  if (className)
@@ -993,7 +971,7 @@ export function plumeria(options = {}) {
993
971
  };
994
972
  recurse(0, baseConflict, []);
995
973
  const baseConflictClass = Object.keys(baseConflict).length > 0
996
- ? getStyleRecords(baseConflict)
974
+ ? processStyleRecords(baseConflict)
997
975
  .map((r) => r.hash)
998
976
  .join(' ')
999
977
  : '';
@@ -1200,45 +1178,68 @@ export function plumeria(options = {}) {
1200
1178
  const varName = callee.object.value;
1201
1179
  const propKey = callee.property.value;
1202
1180
  const styleInfo = localCreateStyles[varName];
1203
- const atomMap = styleInfo?.hashMap?.[propKey];
1204
- if (!atomMap?.['__cssVars__'])
1205
- return true;
1206
- const cssVarInfo = JSON.parse(atomMap['__cssVars__']);
1207
- const hashes = Object.entries(atomMap)
1208
- .filter(([k]) => k !== '__cssVars__')
1209
- .map(([, v]) => v)
1210
- .join(' ');
1211
- if (hashes)
1212
- dynamicClassParts.push(JSON.stringify(hashes));
1213
- const callArgs = expr.arguments;
1214
- Object.entries(cssVarInfo).forEach(([_, { cssVar, propKey: targetProp }], i) => {
1215
- const callArg = callArgs[i];
1216
- if (!callArg)
1217
- return;
1218
- const argExpr = callArg.expression;
1219
- const argStart = argExpr.span.start - baseByteOffset;
1220
- const argEnd = argExpr.span.end - baseByteOffset;
1221
- const argSource = sourceBuffer
1222
- .subarray(argStart, argEnd)
1223
- .toString('utf-8');
1224
- let valueExpr;
1225
- const maybeNumber = Number(argSource);
1226
- if (!isNaN(maybeNumber) &&
1227
- argSource.trim() === String(maybeNumber)) {
1228
- valueExpr = JSON.stringify(applyCssValue(maybeNumber, targetProp));
1229
- }
1230
- else if ((argSource.startsWith('"') && argSource.endsWith('"')) ||
1231
- (argSource.startsWith("'") && argSource.endsWith("'"))) {
1232
- valueExpr = JSON.stringify(applyCssValue(argSource.slice(1, -1), targetProp));
1233
- }
1234
- else {
1235
- valueExpr = exceptionCamelCase.includes(targetProp)
1236
- ? argSource
1237
- : `(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
+ }
1238
1240
  }
1239
- dynamicStyleParts.push(`"${cssVar}": ${valueExpr}`);
1240
- });
1241
- return false;
1241
+ }
1242
+ return true;
1242
1243
  });
1243
1244
  const styleAttr = dynamicStyleParts.length > 0
1244
1245
  ? ` style={{${dynamicStyleParts.join(', ')}}}`
@@ -1297,8 +1298,7 @@ export function plumeria(options = {}) {
1297
1298
  const varName = callee.object.value;
1298
1299
  const propKey = callee.property.value;
1299
1300
  const styleInfo = localCreateStyles[varName];
1300
- const atomMap = styleInfo?.hashMap?.[propKey];
1301
- if (atomMap?.['__cssVars__']) {
1301
+ if (styleInfo?.functions?.[propKey]) {
1302
1302
  throw new Error(`Plumeria: css.use(${getSource(expr)}) does not support dynamic function keys.\n`);
1303
1303
  }
1304
1304
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plumeria/vite-plugin",
3
- "version": "10.0.7",
3
+ "version": "10.1.0",
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.7"
25
+ "@plumeria/utils": "^10.1.0"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@swc/core": "1.15.21",