@tokenami/config 0.0.21 → 0.0.23

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.mjs CHANGED
@@ -1,43 +1,62 @@
1
1
  // src/config.ts
2
2
  import * as v from "valibot";
3
+ var gridPropertyRegex = /--_grid/;
4
+ var GridProperty = {
5
+ safeParse: (input) => {
6
+ const schema = v.string([v.regex(gridPropertyRegex)]);
7
+ v.safeParse(schema, input);
8
+ }
9
+ };
10
+ function gridProperty() {
11
+ return `--_grid`;
12
+ }
13
+ var gridValueRegex = /^\d+/;
14
+ var GridValue = {
15
+ safeParse: (input) => {
16
+ const schema = v.string([v.regex(gridValueRegex)]);
17
+ v.safeParse(schema, input);
18
+ }
19
+ };
20
+ var tokenPropertyRegex = /(?<!var\()--(\w([\w-]+)?)/;
21
+ var TokenProperty = {
22
+ safeParse: (input) => {
23
+ const schema = v.string([v.regex(tokenPropertyRegex)]);
24
+ return v.safeParse(schema, input);
25
+ }
26
+ };
3
27
  function tokenProperty(name) {
4
28
  return `--${name}`;
5
29
  }
30
+ var variantPropertyRegex = /(?<!var\()--((\w)([\w-]+)_([\w-]+))/;
31
+ var VariantProperty = {
32
+ safeParse: (input) => {
33
+ const schema = v.string([v.regex(variantPropertyRegex)]);
34
+ return v.safeParse(schema, input);
35
+ }
36
+ };
6
37
  function variantProperty(variant, name) {
7
38
  return `--${variant}_${name}`;
8
39
  }
40
+ var tokenValueRegex = /var\((--([\w-]+)_([\w-]+))\)/;
41
+ var TokenValue = {
42
+ safeParse: (input) => {
43
+ const schema = v.string([v.regex(tokenValueRegex)]);
44
+ return v.safeParse(schema, input);
45
+ }
46
+ };
9
47
  function tokenValue(themeKey, name) {
10
48
  return `var(--${themeKey}_${name})`;
11
49
  }
50
+ var aritraryValueRegex = /var\(---,(.+)\)/;
51
+ var ArbitraryValue = {
52
+ safeParse: (input) => {
53
+ const schema = v.string([v.regex(aritraryValueRegex)]);
54
+ return v.safeParse(schema, input);
55
+ }
56
+ };
12
57
  function arbitraryValue(value) {
13
58
  return `var(---,${value})`;
14
59
  }
15
- var tokenPropertyRegex = /(?<!var\()--((\w)([\w-]+)?)/;
16
- var variantPropertyRegex = /(?<!var\()--((\w)([\w-]+)_([\w-]+))/;
17
- var tokenValueRegex = /var\(--([\w-]+)_([\w-]+)\)/;
18
- var aritraryValueRegex = /var\(---,(.+)\)/;
19
- var gridValueRegex = /^\d+/;
20
- var gridValueRegexSchema = v.regex(gridValueRegex);
21
- var gridValueSchema = v.string([gridValueRegexSchema]);
22
- var GridValue = { safeParse: (input) => v.safeParse(gridValueSchema, input) };
23
- var tokenPropertyRegexSchema = v.regex(tokenPropertyRegex);
24
- var tokenPropertySchema = v.string([tokenPropertyRegexSchema]);
25
- var TokenProperty = { safeParse: (input) => v.safeParse(tokenPropertySchema, input) };
26
- var variantPropertyRegexSchema = v.regex(variantPropertyRegex);
27
- var variantPropertySchema = v.string([
28
- variantPropertyRegexSchema
29
- ]);
30
- var VariantProperty = {
31
- safeParse: (input) => v.safeParse(variantPropertySchema, input)
32
- };
33
- var tokenValueRegexSchema = v.regex(tokenValueRegex);
34
- var tokenValueSchema = v.string([tokenValueRegexSchema]);
35
- var TokenValue = { safeParse: (input) => v.safeParse(tokenValueSchema, input) };
36
- var arbitraryValueRegexSchema = v.regex(aritraryValueRegex);
37
- var arbitraryValueSchema = v.string([
38
- arbitraryValueRegexSchema
39
- ]);
40
- var ArbitraryValue = { safeParse: (input) => v.safeParse(arbitraryValueSchema, input) };
41
60
  var createConfig = (obj) => {
42
61
  return obj;
43
62
  };
@@ -45,28 +64,23 @@ function getTokenPropertyName(tokenProperty2) {
45
64
  return tokenProperty2.replace(tokenPropertyRegex, "$1");
46
65
  }
47
66
  function getTokenPropertyParts(tokenProperty2, config) {
67
+ var _a, _b, _c;
48
68
  const name = getTokenPropertyName(tokenProperty2);
49
69
  const [alias, ...variants] = name.split("_").reverse();
50
- const responsiveVariants = variants.filter((variant) => {
51
- var _a;
52
- return (_a = config.responsive) == null ? void 0 : _a[variant];
53
- });
54
- const selectorVariants = variants.filter((variant) => {
55
- var _a;
56
- return (_a = config.selectors) == null ? void 0 : _a[variant];
57
- });
58
- const validVariants = responsiveVariants.concat(selectorVariants);
59
- const isValidResponsive = responsiveVariants.length <= 1;
60
- const isValidSelector = selectorVariants.length <= 1;
61
- const isValidVariants = variants.length === validVariants.length;
62
- const isValid = isValidResponsive && isValidSelector && isValidVariants;
63
- const [responsive] = responsiveVariants;
64
- const [selector] = selectorVariants;
65
- return isValid ? { name, alias, responsive, selector } : null;
70
+ const [v1, v2, ...invalidVariants] = variants.reverse();
71
+ const responsive = ((_a = config.responsive) == null ? void 0 : _a[v1]) && v1;
72
+ const selectorVariant1 = ((_b = config.selectors) == null ? void 0 : _b[v1]) && !v2 ? v1 : void 0;
73
+ const selectorVariant2 = responsive && ((_c = config.selectors) == null ? void 0 : _c[v2]) && v2;
74
+ const selector = selectorVariant1 || selectorVariant2;
75
+ const hasInvalidVariant = v1 && !responsive && !selector;
76
+ const variant = [responsive, selector].filter(Boolean).join("_");
77
+ if (invalidVariants.length || hasInvalidVariant)
78
+ return null;
79
+ return { name, alias, responsive, selector, variant };
66
80
  }
67
81
  function getTokenValueParts(tokenValue2) {
68
- const [, key, token] = tokenValue2.split(tokenValueRegex);
69
- return { themeKey: key, token };
82
+ const [, property, themeKey, token] = tokenValue2.split(tokenValueRegex);
83
+ return { property, themeKey, token };
70
84
  }
71
85
 
72
86
  // src/config.default.ts
@@ -225,11 +239,78 @@ var defaultConfig = createConfig({
225
239
  var config_default_default = defaultConfig;
226
240
 
227
241
  // src/supports.ts
242
+ var logicalProperties = [
243
+ "block-size",
244
+ "border-block",
245
+ "border-block-width",
246
+ "border-block-style",
247
+ "border-block-color",
248
+ "border-block-start",
249
+ "border-block-end",
250
+ "border-block-start-color",
251
+ "border-block-start-style",
252
+ "border-block-start-width",
253
+ "border-block-end-color",
254
+ "border-block-end-style",
255
+ "border-block-end-width",
256
+ "border-inline",
257
+ "border-inline-color",
258
+ "border-inline-style",
259
+ "border-inline-width",
260
+ "border-inline-start",
261
+ "border-inline-end",
262
+ "border-inline-start-color",
263
+ "border-inline-start-style",
264
+ "border-inline-start-width",
265
+ "border-inline-end-color",
266
+ "border-inline-end-style",
267
+ "border-inline-end-width",
268
+ "contain-intrinsic-block-size",
269
+ "contain-intrinsic-inline-size",
270
+ "inset-block",
271
+ "inset-block-end",
272
+ "inset-block-start",
273
+ "inset-inline",
274
+ "inset-inline-end",
275
+ "inset-inline-start",
276
+ "margin-block",
277
+ "margin-block-end",
278
+ "margin-block-start",
279
+ "margin-inline",
280
+ "margin-inline-end",
281
+ "margin-inline-start",
282
+ "max-block-size",
283
+ "min-block-size",
284
+ "max-inline-size",
285
+ "min-inline-size",
286
+ "overflow-block",
287
+ "overflow-inline",
288
+ "overscroll-behavior-block",
289
+ "overscroll-behavior-inline",
290
+ "padding-block",
291
+ "padding-block-end",
292
+ "padding-block-start",
293
+ "padding-inline",
294
+ "padding-inline-end",
295
+ "padding-inline-start",
296
+ "scroll-margin-block",
297
+ "scroll-margin-block-end",
298
+ "scroll-margin-block-start",
299
+ "scroll-margin-inline",
300
+ "scroll-margin-inline-end",
301
+ "scroll-margin-inline-start",
302
+ "scroll-padding-block",
303
+ "scroll-padding-block-end",
304
+ "scroll-padding-block-start",
305
+ "scroll-padding-inline",
306
+ "scroll-padding-inline-end",
307
+ "scroll-padding-inline-start"
308
+ ];
228
309
  var properties = [
310
+ "all",
229
311
  "-webkit-line-clamp",
230
312
  "accent-color",
231
313
  "align-tracks",
232
- "all",
233
314
  "animation",
234
315
  "animation-composition",
235
316
  "animation-delay",
@@ -257,8 +338,6 @@ var properties = [
257
338
  "background-position-y",
258
339
  "background-repeat",
259
340
  "background-size",
260
- "block-overflow",
261
- "block-size",
262
341
  "border",
263
342
  "border-style",
264
343
  "border-color",
@@ -279,36 +358,12 @@ var properties = [
279
358
  "border-left-color",
280
359
  "border-left-style",
281
360
  "border-left-width",
282
- "border-block",
283
- "border-block-width",
284
- "border-block-style",
285
- "border-block-color",
286
- "border-block-start",
287
- "border-block-end",
288
- "border-block-start-color",
289
- "border-block-start-style",
290
- "border-block-start-width",
291
- "border-block-end-color",
292
- "border-block-end-style",
293
- "border-block-end-width",
294
361
  "border-image",
295
362
  "border-image-outset",
296
363
  "border-image-repeat",
297
364
  "border-image-slice",
298
365
  "border-image-source",
299
366
  "border-image-width",
300
- "border-inline",
301
- "border-inline-color",
302
- "border-inline-style",
303
- "border-inline-width",
304
- "border-inline-start",
305
- "border-inline-end",
306
- "border-inline-start-color",
307
- "border-inline-start-style",
308
- "border-inline-start-width",
309
- "border-inline-end-color",
310
- "border-inline-end-style",
311
- "border-inline-end-width",
312
367
  "border-radius",
313
368
  "border-top-left-radius",
314
369
  "border-top-right-radius",
@@ -345,9 +400,7 @@ var properties = [
345
400
  "column-count",
346
401
  "column-width",
347
402
  "contain",
348
- "contain-intrinsic-block-size",
349
403
  "contain-intrinsic-height",
350
- "contain-intrinsic-inline-size",
351
404
  "contain-intrinsic-size",
352
405
  "contain-intrinsic-width",
353
406
  "container",
@@ -428,12 +481,6 @@ var properties = [
428
481
  "right",
429
482
  "bottom",
430
483
  "left",
431
- "inset-block",
432
- "inset-block-end",
433
- "inset-block-start",
434
- "inset-inline",
435
- "inset-inline-end",
436
- "inset-inline-start",
437
484
  "isolation",
438
485
  "justify-tracks",
439
486
  "letter-spacing",
@@ -450,12 +497,6 @@ var properties = [
450
497
  "margin-right",
451
498
  "margin-bottom",
452
499
  "margin-left",
453
- "margin-block",
454
- "margin-block-end",
455
- "margin-block-start",
456
- "margin-inline",
457
- "margin-inline-end",
458
- "margin-inline-start",
459
500
  "margin-trim",
460
501
  "mask",
461
502
  "mask-border",
@@ -477,14 +518,10 @@ var properties = [
477
518
  "math-depth",
478
519
  "math-shift",
479
520
  "math-style",
480
- "max-block-size",
481
521
  "max-height",
482
- "max-inline-size",
483
522
  "max-lines",
484
523
  "max-width",
485
- "min-block-size",
486
524
  "min-height",
487
- "min-inline-size",
488
525
  "min-width",
489
526
  "mix-blend-mode",
490
527
  "object-fit",
@@ -505,15 +542,11 @@ var properties = [
505
542
  "outline-width",
506
543
  "overflow",
507
544
  "overflow-anchor",
508
- "overflow-block",
509
545
  "overflow-clip-margin",
510
- "overflow-inline",
511
546
  "overflow-wrap",
512
547
  "overflow-x",
513
548
  "overflow-y",
514
549
  "overscroll-behavior",
515
- "overscroll-behavior-block",
516
- "overscroll-behavior-inline",
517
550
  "overscroll-behavior-x",
518
551
  "overscroll-behavior-y",
519
552
  "padding",
@@ -521,12 +554,6 @@ var properties = [
521
554
  "padding-right",
522
555
  "padding-bottom",
523
556
  "padding-left",
524
- "padding-block",
525
- "padding-block-end",
526
- "padding-block-start",
527
- "padding-inline",
528
- "padding-inline-end",
529
- "padding-inline-start",
530
557
  "page",
531
558
  "page-break-after",
532
559
  "page-break-before",
@@ -559,23 +586,11 @@ var properties = [
559
586
  "scroll-margin-right",
560
587
  "scroll-margin-bottom",
561
588
  "scroll-margin-left",
562
- "scroll-margin-block",
563
- "scroll-margin-block-end",
564
- "scroll-margin-block-start",
565
- "scroll-margin-inline",
566
- "scroll-margin-inline-end",
567
- "scroll-margin-inline-start",
568
589
  "scroll-padding",
569
590
  "scroll-padding-top",
570
591
  "scroll-padding-right",
571
592
  "scroll-padding-bottom",
572
593
  "scroll-padding-left",
573
- "scroll-padding-block",
574
- "scroll-padding-block-end",
575
- "scroll-padding-block-start",
576
- "scroll-padding-inline",
577
- "scroll-padding-inline-end",
578
- "scroll-padding-inline-start",
579
594
  "scroll-snap-align",
580
595
  "scroll-snap-stop",
581
596
  "scroll-snap-type",
@@ -638,10 +653,223 @@ var properties = [
638
653
  "word-wrap",
639
654
  "writing-mode",
640
655
  "z-index",
641
- "zoom"
656
+ "zoom",
657
+ // logical properties have higher specificity
658
+ ...logicalProperties
642
659
  ];
660
+
661
+ // src/shorthands.ts
662
+ var mapShorthandToLonghands = {
663
+ all: properties.filter((property) => property === "all"),
664
+ animation: [
665
+ "animation-name",
666
+ "animation-duration",
667
+ "animation-timing-function",
668
+ "animation-delay",
669
+ "animation-iteration-count",
670
+ "animation-direction",
671
+ "animation-fill-mode",
672
+ "animation-play-state",
673
+ "animation-timeline"
674
+ ],
675
+ background: [
676
+ "background-attachment",
677
+ "background-clip",
678
+ "background-color",
679
+ "background-image",
680
+ "background-position",
681
+ "background-repeat",
682
+ "background-size"
683
+ ],
684
+ border: [
685
+ "border-top",
686
+ "border-right",
687
+ "border-bottom",
688
+ "border-left",
689
+ "border-color",
690
+ "border-style",
691
+ "border-width",
692
+ "border-image",
693
+ "border-radius"
694
+ ],
695
+ "border-top": ["border-top-width", "border-top-style", "border-top-color"],
696
+ "border-right": ["border-right-width", "border-right-style", "border-right-color"],
697
+ "border-bottom": ["border-bottom-width", "border-bottom-style", "border-bottom-color"],
698
+ "border-left": ["border-left-width", "border-left-style", "border-left-color"],
699
+ "border-color": [
700
+ "border-top-color",
701
+ "border-right-color",
702
+ "border-bottom-color",
703
+ "border-left-color"
704
+ ],
705
+ "border-style": [
706
+ "border-top-style",
707
+ "border-right-style",
708
+ "border-bottom-style",
709
+ "border-left-style"
710
+ ],
711
+ "border-width": [
712
+ "border-top-width",
713
+ "border-right-width",
714
+ "border-bottom-width",
715
+ "border-left-width"
716
+ ],
717
+ "border-image": [
718
+ "border-image-source",
719
+ "border-image-slice",
720
+ "border-image-width",
721
+ "border-image-outset",
722
+ "border-image-repeat"
723
+ ],
724
+ "border-radius": [
725
+ "border-top-left-radius",
726
+ "border-top-right-radius",
727
+ "border-bottom-right-radius",
728
+ "border-bottom-left-radius"
729
+ ],
730
+ "border-block": [
731
+ "border-block-width",
732
+ "border-block-style",
733
+ "border-block-color",
734
+ "border-block-start",
735
+ "border-block-end"
736
+ ],
737
+ "border-block-width": ["border-block-start-width", "border-block-end-width"],
738
+ "border-block-style": ["border-block-start-style", "border-block-end-style"],
739
+ "border-block-color": ["border-block-start-color", "border-block-end-color"],
740
+ "border-block-start": [
741
+ "border-block-start-width",
742
+ "border-block-start-style",
743
+ "border-block-start-color"
744
+ ],
745
+ "border-block-end": [
746
+ "border-block-end-width",
747
+ "border-block-end-style",
748
+ "border-block-end-color"
749
+ ],
750
+ "border-inline": [
751
+ "border-inline-width",
752
+ "border-inline-style",
753
+ "border-inline-color",
754
+ "border-inline-start",
755
+ "border-inline-end"
756
+ ],
757
+ "border-inline-width": ["border-inline-start-width", "border-inline-end-width"],
758
+ "border-inline-style": ["border-inline-start-style", "border-inline-end-style"],
759
+ "border-inline-color": ["border-inline-start-color", "border-inline-end-color"],
760
+ "border-inline-start": [
761
+ "border-inline-start-width",
762
+ "border-inline-start-style",
763
+ "border-inline-start-color"
764
+ ],
765
+ "border-inline-end": [
766
+ "border-inline-end-width",
767
+ "border-inline-end-style",
768
+ "border-inline-end-color"
769
+ ],
770
+ "column-rule": ["column-rule-width", "column-rule-style", "column-rule-color"],
771
+ columns: ["column-width", "column-count"],
772
+ container: ["container-name", "container-type"],
773
+ "contain-intrinsic-size": ["contain-intrinsic-width", "contain-intrinsic-height"],
774
+ flex: ["flex-grow", "flex-shrink", "flex-basis"],
775
+ "flex-flow": ["flex-direction", "flex-wrap"],
776
+ font: [
777
+ "font-style",
778
+ "font-variant",
779
+ "font-weight",
780
+ "font-stretch",
781
+ "font-size",
782
+ "line-height",
783
+ "font-family"
784
+ ],
785
+ "font-variant": [
786
+ "font-variant-ligatures",
787
+ "font-variant-caps",
788
+ "font-variant-numeric",
789
+ "font-variant-east-asian"
790
+ ],
791
+ gap: ["row-gap", "column-gap"],
792
+ grid: [
793
+ "grid-template-rows",
794
+ "grid-template-columns",
795
+ "grid-template-areas",
796
+ "grid-auto-rows",
797
+ "grid-auto-columns",
798
+ "grid-auto-flow"
799
+ ],
800
+ "grid-area": ["grid-row-start", "grid-column-start", "grid-row-end", "grid-column-end"],
801
+ "grid-column": ["grid-column-start", "grid-column-end"],
802
+ "grid-row": ["grid-row-start", "grid-row-end"],
803
+ "grid-template": ["grid-template-rows", "grid-template-columns", "grid-template-areas"],
804
+ inset: ["top", "right", "bottom", "left"],
805
+ "list-style": ["list-style-type", "list-style-position", "list-style-image"],
806
+ "inset-block": ["inset-block-start", "inset-block-end"],
807
+ "inset-inline": ["inset-inline-start", "inset-inline-end"],
808
+ margin: ["margin-top", "margin-right", "margin-bottom", "margin-left"],
809
+ "margin-block": ["margin-block-start", "margin-block-end"],
810
+ "margin-inline": ["margin-inline-start", "margin-inline-end"],
811
+ mask: [
812
+ "mask-image",
813
+ "mask-mode",
814
+ "mask-position",
815
+ "mask-size",
816
+ "mask-repeat",
817
+ "mask-origin",
818
+ "mask-clip",
819
+ "mask-composite",
820
+ "mask-type"
821
+ ],
822
+ "mask-border": [
823
+ "mask-border-mode",
824
+ "mask-border-outset",
825
+ "mask-border-repeat",
826
+ "mask-border-slice",
827
+ "mask-border-source",
828
+ "mask-border-width"
829
+ ],
830
+ offset: ["offset-position", "offset-path", "offset-distance", "offset-anchor", "offset-rotate"],
831
+ outline: ["outline-color", "outline-style", "outline-width"],
832
+ overflow: ["overflow-x", "overflow-y"],
833
+ padding: ["padding-top", "padding-right", "padding-bottom", "padding-left"],
834
+ "padding-block": ["padding-block-start", "padding-block-end"],
835
+ "padding-inline": ["padding-inline-start", "padding-inline-end"],
836
+ "place-content": ["align-content", "justify-content"],
837
+ "place-items": ["align-items", "justify-items"],
838
+ "place-self": ["align-self", "justify-self"],
839
+ "scroll-margin": [
840
+ "scroll-margin-top",
841
+ "scroll-margin-right",
842
+ "scroll-margin-bottom",
843
+ "scroll-margin-left"
844
+ ],
845
+ "scroll-margin-block": ["scroll-margin-block-start", "scroll-margin-block-end"],
846
+ "scroll-margin-inline": ["scroll-margin-inline-start", "scroll-margin-inline-end"],
847
+ "scroll-padding": [
848
+ "scroll-padding-top",
849
+ "scroll-padding-right",
850
+ "scroll-padding-bottom",
851
+ "scroll-padding-left"
852
+ ],
853
+ "scroll-padding-block": ["scroll-padding-block-start", "scroll-padding-block-end"],
854
+ "scroll-padding-inline": ["scroll-padding-inline-start", "scroll-padding-inline-end"],
855
+ "scroll-timeline": ["scroll-timeline-name", "scroll-timeline-axis"],
856
+ "text-decoration": [
857
+ "text-decoration-line",
858
+ "text-decoration-style",
859
+ "text-decoration-color",
860
+ "text-decoration-thickness"
861
+ ],
862
+ "text-emphasis": ["text-emphasis-style", "text-emphasis-color"],
863
+ transition: [
864
+ "transition-property",
865
+ "transition-duration",
866
+ "transition-timing-function",
867
+ "transition-delay"
868
+ ]
869
+ };
643
870
  export {
644
871
  ArbitraryValue,
872
+ GridProperty,
645
873
  GridValue,
646
874
  TokenProperty,
647
875
  TokenValue,
@@ -652,6 +880,9 @@ export {
652
880
  getTokenPropertyName,
653
881
  getTokenPropertyParts,
654
882
  getTokenValueParts,
883
+ gridProperty,
884
+ logicalProperties,
885
+ mapShorthandToLonghands,
655
886
  properties,
656
887
  tokenProperty,
657
888
  tokenValue,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tokenami/config",
3
- "version": "0.0.21",
3
+ "version": "0.0.23",
4
4
  "license": "MIT",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -17,7 +17,7 @@
17
17
  "csstype": "^3.1.2",
18
18
  "tsup": "^7.0.0",
19
19
  "typescript": "^5.1.3",
20
- "@tokenami/dev": "0.0.21"
20
+ "@tokenami/dev": "0.0.23"
21
21
  },
22
22
  "scripts": {
23
23
  "build": "tsup src/index.ts --format=esm,cjs --dts",