@plumeria/vite-plugin 6.2.1 → 6.3.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.
Files changed (2) hide show
  1. package/dist/index.js +117 -102
  2. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -2,7 +2,7 @@ import { createFilter } from 'vite';
2
2
  import { parseSync } from '@swc/core';
3
3
  import path from 'path';
4
4
  import { genBase36Hash } from 'zss-engine';
5
- import { traverse, getStyleRecords, collectLocalConsts, objectExpressionToObject, t, extractOndemandStyles, deepMerge, scanAll, resolveImportPath, } from '@plumeria/utils';
5
+ import { traverse, getStyleRecords, collectLocalConsts, objectExpressionToObject, t, extractOndemandStyles, deepMerge, scanAll, resolveImportPath, optimizer, } from '@plumeria/utils';
6
6
  const TARGET_EXTENSIONS = ['ts', 'tsx', 'js', 'jsx'];
7
7
  const EXTENSION_PATTERN = /\.(ts|tsx|js|jsx)$/;
8
8
  export function plumeria(options = {}) {
@@ -20,6 +20,7 @@ export function plumeria(options = {}) {
20
20
  configResolved(resolvedConfig) {
21
21
  isDev = resolvedConfig.command === 'serve';
22
22
  config = resolvedConfig;
23
+ config.build.cssCodeSplit = false;
23
24
  },
24
25
  configureServer(_server) {
25
26
  if (!isDev)
@@ -49,7 +50,7 @@ export function plumeria(options = {}) {
49
50
  .filter((m) => !!m)
50
51
  .concat(ctx.modules);
51
52
  },
52
- transform(source, id) {
53
+ async transform(source, id) {
53
54
  if (id.includes('node_modules'))
54
55
  return null;
55
56
  if (id.includes('?'))
@@ -82,6 +83,8 @@ export function plumeria(options = {}) {
82
83
  const localConsts = collectLocalConsts(ast);
83
84
  const resourcePath = id;
84
85
  const importMap = {};
86
+ const createThemeImportMap = {};
87
+ const createStaticImportMap = {};
85
88
  const plumeriaAliases = {};
86
89
  traverse(ast, {
87
90
  ImportDeclaration({ node }) {
@@ -131,11 +134,11 @@ export function plumeria(options = {}) {
131
134
  scannedTables.variantsHashTable[uniqueKey];
132
135
  }
133
136
  if (scannedTables.createThemeHashTable[uniqueKey]) {
134
- importMap[localName] =
137
+ createThemeImportMap[localName] =
135
138
  scannedTables.createThemeHashTable[uniqueKey];
136
139
  }
137
140
  if (scannedTables.createStaticHashTable[uniqueKey]) {
138
- importMap[localName] =
141
+ createStaticImportMap[localName] =
139
142
  scannedTables.createStaticHashTable[uniqueKey];
140
143
  }
141
144
  }
@@ -168,22 +171,6 @@ export function plumeria(options = {}) {
168
171
  for (const key of Object.keys(importMap)) {
169
172
  mergedViewTransitionTable[key] = importMap[key];
170
173
  }
171
- const mergedCreateThemeHashTable = {};
172
- for (const key of Object.keys(scannedTables.createThemeHashTable)) {
173
- mergedCreateThemeHashTable[key] =
174
- scannedTables.createThemeHashTable[key];
175
- }
176
- for (const key of Object.keys(importMap)) {
177
- mergedCreateThemeHashTable[key] = importMap[key];
178
- }
179
- const mergedCreateStaticHashTable = {};
180
- for (const key of Object.keys(scannedTables.createStaticHashTable)) {
181
- mergedCreateStaticHashTable[key] =
182
- scannedTables.createStaticHashTable[key];
183
- }
184
- for (const key of Object.keys(importMap)) {
185
- mergedCreateStaticHashTable[key] = importMap[key];
186
- }
187
174
  const mergedCreateTable = {};
188
175
  for (const key of Object.keys(scannedTables.createHashTable)) {
189
176
  mergedCreateTable[key] = scannedTables.createHashTable[key];
@@ -198,6 +185,32 @@ export function plumeria(options = {}) {
198
185
  for (const key of Object.keys(importMap)) {
199
186
  mergedVariantsTable[key] = importMap[key];
200
187
  }
188
+ const mergedCreateThemeHashTable = {};
189
+ for (const key of Object.keys(scannedTables.createThemeHashTable)) {
190
+ mergedCreateThemeHashTable[key] =
191
+ scannedTables.createThemeHashTable[key];
192
+ if (key.startsWith(`${resourcePath}-`)) {
193
+ const varName = key.slice(resourcePath.length + 1);
194
+ mergedCreateThemeHashTable[varName] =
195
+ scannedTables.createThemeHashTable[key];
196
+ }
197
+ }
198
+ for (const key of Object.keys(createThemeImportMap)) {
199
+ mergedCreateThemeHashTable[key] = createThemeImportMap[key];
200
+ }
201
+ const mergedCreateStaticHashTable = {};
202
+ for (const key of Object.keys(scannedTables.createStaticHashTable)) {
203
+ mergedCreateStaticHashTable[key] =
204
+ scannedTables.createStaticHashTable[key];
205
+ if (key.startsWith(`${resourcePath}-`)) {
206
+ const varName = key.slice(resourcePath.length + 1);
207
+ mergedCreateStaticHashTable[varName] =
208
+ scannedTables.createStaticHashTable[key];
209
+ }
210
+ }
211
+ for (const key of Object.keys(createStaticImportMap)) {
212
+ mergedCreateStaticHashTable[key] = createStaticImportMap[key];
213
+ }
201
214
  const localCreateStyles = {};
202
215
  const replacements = [];
203
216
  const extractedSheets = [];
@@ -256,7 +269,7 @@ export function plumeria(options = {}) {
256
269
  if (obj) {
257
270
  const hashMap = {};
258
271
  Object.entries(obj).forEach(([key, style]) => {
259
- const records = getStyleRecords(key, style, 2);
272
+ const records = getStyleRecords(key, style);
260
273
  extractOndemandStyles(style, extractedSheets, scannedTables);
261
274
  records.forEach((r) => {
262
275
  addSheet(r.sheet);
@@ -285,27 +298,11 @@ export function plumeria(options = {}) {
285
298
  };
286
299
  }
287
300
  }
288
- else if ((propName === 'createTheme' || propName === 'createStatic') &&
289
- (t.isObjectExpression(node.init.arguments[0].expression) ||
290
- t.isStringLiteral(node.init.arguments[0].expression))) {
291
- localCreateStyles[node.id.value] = {
292
- name: node.id.value,
293
- type: 'constant',
294
- obj: {},
295
- hashMap: {},
296
- isExported,
297
- initSpan: {
298
- start: node.init.span.start - ast.span.start,
299
- end: node.init.span.end - ast.span.start,
300
- },
301
- declSpan: {
302
- start: declSpan.start - ast.span.start,
303
- end: declSpan.end - ast.span.start,
304
- },
305
- };
306
- }
307
301
  else if (propName === 'variants' &&
308
302
  t.isObjectExpression(node.init.arguments[0].expression)) {
303
+ if (t.isIdentifier(node.id)) {
304
+ idSpans.add(node.id.span.start);
305
+ }
309
306
  const obj = objectExpressionToObject(node.init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable, (name) => {
310
307
  if (localCreateStyles[name]) {
311
308
  return localCreateStyles[name].obj;
@@ -334,6 +331,32 @@ export function plumeria(options = {}) {
334
331
  },
335
332
  };
336
333
  }
334
+ else if (propName === 'createTheme' &&
335
+ t.isObjectExpression(node.init.arguments[0].expression)) {
336
+ if (t.isIdentifier(node.id)) {
337
+ idSpans.add(node.id.span.start);
338
+ }
339
+ const obj = objectExpressionToObject(node.init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
340
+ const hash = genBase36Hash(obj, 1, 8);
341
+ const uniqueKey = `${resourcePath}-${node.id.value}`;
342
+ scannedTables.createThemeHashTable[uniqueKey] = hash;
343
+ scannedTables.createThemeObjectTable[hash] = obj;
344
+ localCreateStyles[node.id.value] = {
345
+ name: node.id.value,
346
+ type: 'constant',
347
+ obj,
348
+ hashMap: scannedTables.createAtomicMapTable[hash],
349
+ isExported,
350
+ initSpan: {
351
+ start: node.init.span.start - ast.span.start,
352
+ end: node.init.span.end - ast.span.start,
353
+ },
354
+ declSpan: {
355
+ start: declSpan.start - ast.span.start,
356
+ end: declSpan.end - ast.span.start,
357
+ },
358
+ };
359
+ }
337
360
  }
338
361
  };
339
362
  traverse(ast, {
@@ -394,6 +417,7 @@ export function plumeria(options = {}) {
394
417
  const obj = objectExpressionToObject(args[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
395
418
  const hash = genBase36Hash(obj, 1, 8);
396
419
  scannedTables.keyframesObjectTable[hash] = obj;
420
+ extractOndemandStyles({ kf: `kf-${hash}` }, extractedSheets, scannedTables);
397
421
  replacements.push({
398
422
  start: node.span.start - ast.span.start,
399
423
  end: node.span.end - ast.span.start,
@@ -406,7 +430,6 @@ export function plumeria(options = {}) {
406
430
  const obj = objectExpressionToObject(args[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
407
431
  const hash = genBase36Hash(obj, 1, 8);
408
432
  scannedTables.viewTransitionObjectTable[hash] = obj;
409
- extractOndemandStyles(obj, extractedSheets, scannedTables);
410
433
  extractOndemandStyles({ vt: `vt-${hash}` }, extractedSheets, scannedTables);
411
434
  replacements.push({
412
435
  start: node.span.start - ast.span.start,
@@ -414,12 +437,23 @@ export function plumeria(options = {}) {
414
437
  content: JSON.stringify(`vt-${hash}`),
415
438
  });
416
439
  }
417
- else if (propName === 'createTheme' &&
440
+ else if ((propName === 'createTheme' || propName === 'createStatic') &&
418
441
  args.length > 0 &&
419
442
  t.isObjectExpression(args[0].expression)) {
420
443
  const obj = objectExpressionToObject(args[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
421
444
  const hash = genBase36Hash(obj, 1, 8);
422
- scannedTables.createThemeObjectTable[hash] = obj;
445
+ if (propName === 'createTheme') {
446
+ scannedTables.createThemeObjectTable[hash] = obj;
447
+ }
448
+ else {
449
+ scannedTables.createStaticObjectTable[hash] = obj;
450
+ }
451
+ const prefix = propName === 'createTheme' ? 'tm-' : 'st-';
452
+ replacements.push({
453
+ start: node.span.start - ast.span.start,
454
+ end: node.span.end - ast.span.start,
455
+ content: JSON.stringify(`${prefix}${hash}`),
456
+ });
423
457
  }
424
458
  else if (propName === 'create' &&
425
459
  args.length > 0 &&
@@ -429,7 +463,7 @@ export function plumeria(options = {}) {
429
463
  scannedTables.createObjectTable[hash] = obj;
430
464
  Object.entries(obj).forEach(([key, style]) => {
431
465
  if (typeof style === 'object' && style !== null) {
432
- const records = getStyleRecords(key, style, 2);
466
+ const records = getStyleRecords(key, style);
433
467
  extractOndemandStyles(style, extractedSheets, scannedTables);
434
468
  records.forEach((r) => addSheet(r.sheet));
435
469
  }
@@ -443,7 +477,7 @@ export function plumeria(options = {}) {
443
477
  if (t.isIdentifier(node.object) && t.isIdentifier(node.property)) {
444
478
  const varName = node.object.value;
445
479
  const propName = node.property.value;
446
- const uniqueKey = `${id}-${varName}`;
480
+ const uniqueKey = `${resourcePath}-${varName}`;
447
481
  let hash = scannedTables.createHashTable[uniqueKey];
448
482
  if (!hash) {
449
483
  hash = mergedCreateTable[varName];
@@ -466,14 +500,12 @@ export function plumeria(options = {}) {
466
500
  themeHash = mergedCreateThemeHashTable[varName];
467
501
  }
468
502
  if (themeHash) {
469
- const themeObj = scannedTables.createThemeObjectTable[themeHash];
470
- if (themeObj && themeObj[propName] !== undefined) {
471
- const camelToKebabCase = (str) => str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
472
- const cssVarName = camelToKebabCase(propName);
503
+ const atomicMap = scannedTables.createAtomicMapTable[themeHash];
504
+ if (atomicMap && atomicMap && atomicMap[propName]) {
473
505
  replacements.push({
474
506
  start: node.span.start - ast.span.start,
475
507
  end: node.span.end - ast.span.start,
476
- content: JSON.stringify(`var(--${cssVarName})`),
508
+ content: JSON.stringify(atomicMap[propName]),
477
509
  });
478
510
  }
479
511
  }
@@ -508,7 +540,7 @@ export function plumeria(options = {}) {
508
540
  return;
509
541
  }
510
542
  const varName = node.value;
511
- const uniqueKey = `${id}-${varName}`;
543
+ const uniqueKey = `${resourcePath}-${varName}`;
512
544
  let hash = scannedTables.createHashTable[uniqueKey];
513
545
  if (!hash) {
514
546
  hash = mergedCreateTable[varName];
@@ -530,47 +562,19 @@ export function plumeria(options = {}) {
530
562
  });
531
563
  }
532
564
  }
533
- let kfHash = scannedTables.keyframesHashTable[uniqueKey];
534
- if (!kfHash) {
535
- kfHash = mergedKeyframesTable[varName];
536
- }
537
- if (kfHash) {
538
- replacements.push({
539
- start: node.span.start - ast.span.start,
540
- end: node.span.end - ast.span.start,
541
- content: JSON.stringify(`kf-${kfHash}`),
542
- });
543
- return;
544
- }
545
- let vtHash = scannedTables.viewTransitionHashTable[uniqueKey];
546
- if (!vtHash) {
547
- vtHash = mergedViewTransitionTable[varName];
548
- }
549
- if (vtHash) {
550
- replacements.push({
551
- start: node.span.start - ast.span.start,
552
- end: node.span.end - ast.span.start,
553
- content: JSON.stringify(`vt-${vtHash}`),
554
- });
555
- return;
556
- }
557
565
  let themeHash = scannedTables.createThemeHashTable[uniqueKey];
558
566
  if (!themeHash) {
559
567
  themeHash = mergedCreateThemeHashTable[varName];
560
568
  }
561
569
  if (themeHash) {
562
- const themeObj = scannedTables.createThemeObjectTable[themeHash];
563
- if (themeObj) {
564
- const themeVars = {};
565
- const camelToKebabCase = (str) => str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
566
- Object.keys(themeObj).forEach((key) => {
567
- themeVars[key] = `var(--${camelToKebabCase(key)})`;
568
- });
570
+ const atomicMap = scannedTables.createAtomicMapTable[themeHash];
571
+ if (atomicMap) {
569
572
  replacements.push({
570
573
  start: node.span.start - ast.span.start,
571
574
  end: node.span.end - ast.span.start,
572
- content: JSON.stringify(themeVars),
575
+ content: JSON.stringify(atomicMap),
573
576
  });
577
+ return;
574
578
  }
575
579
  }
576
580
  let staticHash = scannedTables.createStaticHashTable[uniqueKey];
@@ -644,17 +648,21 @@ export function plumeria(options = {}) {
644
648
  }
645
649
  else if (t.isIdentifier(expr)) {
646
650
  const varName = expr.value;
647
- const styleInfo = localCreateStyles[varName];
648
- if (styleInfo && styleInfo.obj) {
649
- return styleInfo.obj;
651
+ const uniqueKey = `${this.resourcePath}-${varName}`;
652
+ let hash = scannedTables.createHashTable[uniqueKey];
653
+ if (!hash) {
654
+ hash = mergedCreateTable[varName];
650
655
  }
651
- const hash = mergedCreateTable[varName];
652
656
  if (hash) {
653
657
  const obj = scannedTables.createObjectTable[hash];
654
658
  if (obj && typeof obj === 'object') {
655
659
  return obj;
656
660
  }
657
661
  }
662
+ const styleInfo = localCreateStyles[varName];
663
+ if (styleInfo && styleInfo.obj) {
664
+ return styleInfo.obj;
665
+ }
658
666
  if (localCreateStyles[varName]) {
659
667
  return localCreateStyles[varName].obj;
660
668
  }
@@ -674,14 +682,18 @@ export function plumeria(options = {}) {
674
682
  if (t.isCallExpression(expr) && t.isIdentifier(expr.callee)) {
675
683
  const varName = expr.callee.value;
676
684
  let variantObj;
677
- if (localCreateStyles[varName] &&
678
- localCreateStyles[varName].obj) {
679
- variantObj = localCreateStyles[varName].obj;
685
+ const uniqueKey = `${this.resourcePath}-${varName}`;
686
+ let hash = scannedTables.variantsHashTable[uniqueKey];
687
+ if (!hash) {
688
+ hash = mergedVariantsTable[varName];
689
+ }
690
+ if (hash && scannedTables.variantsObjectTable[hash]) {
691
+ variantObj = scannedTables.variantsObjectTable[hash];
680
692
  }
681
- else if (mergedVariantsTable[varName]) {
682
- const hash = mergedVariantsTable[varName];
683
- if (scannedTables.variantsObjectTable[hash]) {
684
- variantObj = scannedTables.variantsObjectTable[hash];
693
+ if (!variantObj) {
694
+ if (localCreateStyles[varName] &&
695
+ localCreateStyles[varName].obj) {
696
+ variantObj = localCreateStyles[varName].obj;
685
697
  }
686
698
  }
687
699
  if (variantObj) {
@@ -798,7 +810,7 @@ export function plumeria(options = {}) {
798
810
  if (conditionals.length === 0) {
799
811
  extractOndemandStyles(baseStyle, extractedSheets, scannedTables);
800
812
  const hash = genBase36Hash(baseStyle, 1, 8);
801
- const records = getStyleRecords(hash, baseStyle, 2);
813
+ const records = getStyleRecords(hash, baseStyle);
802
814
  records.forEach((r) => addSheet(r.sheet));
803
815
  const className = records
804
816
  .map((r) => r.hash)
@@ -837,8 +849,8 @@ export function plumeria(options = {}) {
837
849
  }
838
850
  extractOndemandStyles(currentStyle, extractedSheets, scannedTables);
839
851
  const hash = genBase36Hash(currentStyle, 1, 8);
840
- const records = getStyleRecords(hash, currentStyle, 2);
841
- records.forEach((r) => addSheet(r.sheet));
852
+ const records = getStyleRecords(hash, currentStyle);
853
+ records.forEach((r) => extractedSheets.push(r.sheet));
842
854
  const className = records
843
855
  .map((r) => r.hash)
844
856
  .join(' ');
@@ -873,6 +885,9 @@ export function plumeria(options = {}) {
873
885
  },
874
886
  });
875
887
  Object.values(localCreateStyles).forEach((info) => {
888
+ if (info.type === 'constant') {
889
+ return;
890
+ }
876
891
  if (info.isExported) {
877
892
  replacements.push({
878
893
  start: info.declSpan.start,
@@ -888,6 +903,7 @@ export function plumeria(options = {}) {
888
903
  });
889
904
  }
890
905
  });
906
+ const optInCSS = await optimizer(extractedSheets.join(''));
891
907
  const buffer = Buffer.from(source);
892
908
  let offset = 0;
893
909
  const parts = [];
@@ -901,16 +917,15 @@ export function plumeria(options = {}) {
901
917
  offset = r.end;
902
918
  });
903
919
  parts.push(buffer.subarray(offset));
904
- const transformedCode = Buffer.concat(parts).toString();
920
+ const transformedSource = Buffer.concat(parts).toString();
905
921
  if (extractedSheets.length > 0) {
906
- const generatedCSS = extractedSheets.join('');
907
922
  const baseId = id.replace(EXTENSION_PATTERN, '');
908
923
  const cssFilename = `${baseId}.zero.css`;
909
924
  const cssRelativePath = path
910
925
  .relative(config.root, cssFilename)
911
926
  .replace(/\\/g, '/');
912
927
  const cssId = `/${cssRelativePath}`;
913
- cssLookup.set(cssFilename, generatedCSS);
928
+ cssLookup.set(cssFilename, optInCSS);
914
929
  cssFileLookup.set(cssId, cssFilename);
915
930
  const targetIndex = targets.findIndex((t) => t.id === id);
916
931
  if (targetIndex !== -1) {
@@ -925,12 +940,12 @@ export function plumeria(options = {}) {
925
940
  devServer.reloadModule(cssModule);
926
941
  }
927
942
  return {
928
- code: injectImport(transformedCode, id, cssFilename),
943
+ code: injectImport(transformedSource, id, cssFilename),
929
944
  map: null,
930
945
  };
931
946
  }
932
947
  return {
933
- code: transformedCode,
948
+ code: transformedSource,
934
949
  map: null,
935
950
  };
936
951
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plumeria/vite-plugin",
3
- "version": "6.2.1",
3
+ "version": "6.3.1",
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": "^6.2.1"
25
+ "@plumeria/utils": "^6.3.1"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@swc/core": "1.15.8",