mancha 0.7.0 → 0.7.2

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 (4) hide show
  1. package/dist/css_gen_utils.js +220 -114
  2. package/dist/mancha.js +1 -1
  3. package/package.json +3 -2
  4. package/yarn-error.log +1588 -702
package/dist/css_gen_utils.js CHANGED
@@ -5,6 +5,12 @@ const UNITS_XL = [64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320, 3
5
5
  const UNITS_ALL = [...UNITS_SM, ...UNITS_LG, ...UNITS_XL];
6
6
  const PERCENTS = [1, 2, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 98, 99, 100];
7
7
  const PSEUDO_STATES = ["hover", "focus", "disabled", "focus", "active"];
8
+ const MEDIA_BREAKPOINTS = {
9
+ sm: 640,
10
+ md: 768,
11
+ lg: 1024,
12
+ xl: 1280,
13
+ };
8
14
  const PROPS_SPACING = {
9
15
  margin: "m",
10
16
  padding: "p",
@@ -26,31 +32,33 @@ const PROPS_SIZING_MINMAX = {
26
32
  "max-height": "max-h",
27
33
  };
28
34
  const PROPS_CUSTOM = {
29
- /** Based on https://matcha.mizu.sh/@utilities.css */
30
- /* Text style */
35
+ // Based on https://matcha.mizu.sh/@utilities.css.
36
+ // Text style.
31
37
  bold: { "font-weight": "bold" },
32
38
  semibold: { "font-weight": 600 },
33
39
  italic: { "font-style": "italic" },
34
40
  underline: { "text-decoration": "underline" },
35
- strikethrough: { "text-decoration": "line-through" },
41
+ "no-underline": { "text-decoration": "none" },
42
+ "decoration-none": { "text-decoration": "none" },
43
+ "line-through": { "text-decoration": "line-through" },
36
44
  uppercase: { "text-transform": "uppercase" },
37
45
  lowercase: { "text-transform": "lowercase" },
38
46
  capitalize: { "text-transform": "capitalize" },
39
- centered: { "text-align": "center" },
40
- justified: { "text-align": "justify" },
41
- monospace: { "font-family": "monospace" },
47
+ "font-mono": { "font-family": "ui-monospace, monospace" },
48
+ "font-sans": { "font-family": "ui-sans-serif, system-ui, sans-serif" },
49
+ "font-serif": { "font-family": "ui-serif, serif" },
42
50
  // Text position.
43
51
  "text-left": { "text-align": "left" },
44
52
  "text-right": { "text-align": "right" },
45
53
  "text-center": { "text-align": "center" },
46
54
  "text-justify": { "text-align": "justify" },
47
- /* Font size */
48
- "text-xs": { "font-size": ".85rem" },
55
+ // Font size.
56
+ "text-xs": { "font-size": ".75rem" },
49
57
  "text-sm": { "font-size": ".875rem" },
50
- "text-md": { "font-size": "1rem" },
51
- "text-lg": { "font-size": "1.25rem" },
52
- "text-xl": { "font-size": "1.5rem" },
53
- /* Position */
58
+ "text-base": { "font-size": "1rem" },
59
+ "text-lg": { "font-size": "1.125rem" },
60
+ "text-xl": { "font-size": "1.25rem" },
61
+ // Position.
54
62
  relative: { position: "relative" },
55
63
  fixed: { position: "fixed" },
56
64
  absolute: { position: "absolute" },
@@ -60,75 +68,99 @@ const PROPS_CUSTOM = {
60
68
  "object-cover": { "object-fit": "cover" },
61
69
  "object-fill": { "object-fit": "fill" },
62
70
  "object-none": { "object-fit": "none" },
63
- /* Display */
71
+ // Display.
72
+ block: { display: "block" },
73
+ contents: { display: "contents" },
64
74
  hidden: { display: "none" },
65
75
  inline: { display: "inline" },
66
- block: { display: "block" },
67
- "block.inline": { display: "inline-block" },
76
+ "inline-block": { display: "inline-block" },
77
+ // Flex.
68
78
  flex: { display: "flex" },
69
- "flex.inline": { display: "inline-flex" },
70
- content: { display: "contents" },
71
- /* Flex */
72
- "flex.row": { "flex-direction": "row" },
73
- "flex.column": { "flex-direction": "column" },
74
- "flex.row.reverse": { "flex-direction": "row-reverse" },
75
- "flex.column.reverse": { "flex-direction": "column-reverse" },
76
- "flex.wrap": { "flex-wrap": "wrap" },
77
- "flex.wrap.reverse": { "flex-wrap": "wrap-reverse" },
78
- "flex.no-wrap": { "flex-wrap": "nowrap" },
79
- "flex.start": { "justify-content": "flex-start" },
80
- "flex.end": { "justify-content": "flex-end" },
81
- "flex.center": { "justify-content": "center" },
82
- "flex.space-between": { "justify-content": "space-between" },
83
- "flex.space-around": { "justify-content": "space-around" },
84
- "flex.space-evenly": { "justify-content": "space-evenly" },
85
- "flex.stretch": { "justify-content": "stretch" },
86
- "flex.align-start": { "align-items": "flex-start" },
87
- "flex.align-end": { "align-items": "flex-end" },
88
- "flex.align-center": { "align-items": "center" },
89
- "flex.align-stretch": { "align-items": "stretch" },
90
- grow: { "flex-grow": 1 },
91
- shrink: { "flex-shrink": 1 },
92
- /* Overflow */
93
- overflow: { overflow: "auto" },
94
- "overflow-x": { "overflow-x": "auto" },
95
- "overflow-y": { "overflow-y": "auto" },
96
- "no-overflow": { overflow: "hidden" },
97
- /* Cursors */
98
- pointer: { cursor: "pointer" },
99
- wait: { cursor: "wait" },
100
- "not-allowed": { cursor: "not-allowed" },
101
- /* User selection */
102
- "no-select": { "user-select": "none" },
79
+ "flex-1": { flex: "1 1 0%" },
80
+ "flex-inline": { display: "inline-flex" },
81
+ "flex-row": { "flex-direction": "row" },
82
+ "flex-col": { "flex-direction": "column" },
83
+ "flex-row-reverse": { "flex-direction": "row-reverse" },
84
+ "flex-col-reverse": { "flex-direction": "column-reverse" },
85
+ "flex-wrap": { "flex-wrap": "wrap" },
86
+ "flex-wrap-reverse": { "flex-wrap": "wrap-reverse" },
87
+ "flex-nowrap": { "flex-wrap": "nowrap" },
88
+ "justify-start": { "justify-content": "flex-start" },
89
+ "justify-end": { "justify-content": "flex-end" },
90
+ "justify-center": { "justify-content": "center" },
91
+ "justify-between": { "justify-content": "space-between" },
92
+ "justify-around": { "justify-content": "space-around" },
93
+ "justify-evenly": { "justify-content": "space-evenly" },
94
+ "justify-stretch": { "justify-content": "stretch" },
95
+ "items-start": { "align-items": "flex-start" },
96
+ "items-end": { "align-items": "flex-end" },
97
+ "items-center": { "align-items": "center" },
98
+ "items-stretch": { "align-items": "stretch" },
99
+ "flex-grow": { "flex-grow": 1 },
100
+ "flex-shrink": { "flex-shrink": 1 },
101
+ // Overflow.
102
+ "overflow-auto": { overflow: "auto" },
103
+ "overflow-x-auto": { "overflow-x": "auto" },
104
+ "overflow-y-auto": { "overflow-y": "auto" },
105
+ "overflow-hidden": { overflow: "hidden" },
106
+ "overflow-visible": { overflow: "visible" },
107
+ // Cursors.
108
+ "cursor-pointer": { cursor: "pointer" },
109
+ "cursor-wait": { cursor: "wait" },
110
+ "cursor-not-allowed": { cursor: "not-allowed" },
111
+ // User selection.
112
+ "select-none": { "user-select": "none" },
103
113
  "select-all": { "user-select": "all" },
104
- /* Events */
105
- events: { "pointer-events": "auto" },
106
- "no-events": { "pointer-events": "none" },
107
- /* Sizing */
108
- "border-box": { "box-sizing": "border-box" },
109
- "content-box": { "box-sizing": "content-box" },
110
- /* Resizing */
114
+ // Events.
115
+ "pointer-events-auto": { "pointer-events": "auto" },
116
+ "pointer-events-none": { "pointer-events": "none" },
117
+ // Sizing.
118
+ "box-border": { "box-sizing": "border-box" },
119
+ "box-content": { "box-sizing": "content-box" },
120
+ // Resizing.
111
121
  resize: { resize: "both" },
112
122
  "resize-x": { resize: "horizontal" },
113
123
  "resize-y": { resize: "vertical" },
114
- "no-resize": { resize: "none" },
115
- // Colors.
116
- transparent: { color: "transparent" },
117
- "bg-transparent": { "background-color": "transparent" },
118
- "border-transparent": { "border-color": "transparent" },
124
+ "resize-none": { resize: "none" },
119
125
  // Borders.
126
+ border: { border: "1px solid" },
127
+ "border-none": { border: "none" },
120
128
  "border-solid": { "border-style": "solid" },
121
129
  "border-dashed": { "border-style": "dashed" },
122
130
  "border-dotted": { "border-style": "dotted" },
123
131
  // Radius.
124
132
  "rounded-none": { "border-radius": "0" },
133
+ rounded: { "border-radius": ".25rem" },
125
134
  "rounded-sm": { "border-radius": ".125rem" },
126
- "rounded-md": { "border-radius": ".25rem" },
135
+ "rounded-md": { "border-radius": ".375rem" },
127
136
  "rounded-lg": { "border-radius": ".5rem" },
137
+ "rounded-xl": { "border-radius": ".75rem" },
138
+ "rounded-full": { "border-radius": "9999px" },
128
139
  // Transitions.
129
140
  "transition-none": { transition: "none" },
130
141
  transition: { transition: "all 150ms" },
142
+ // Animations.
143
+ "animate-none": { animation: "none" },
144
+ "animate-spin": { animation: "spin 1s linear infinite" },
145
+ "animate-ping": { animation: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" },
146
+ "animate-pulse": { animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" },
131
147
  };
148
+ const PROPS_AS_IS = [
149
+ `@keyframes spin {
150
+ from { transform: rotate(0deg) }
151
+ to { transform: rotate(360deg) }
152
+ }`,
153
+ `@keyframes ping {
154
+ 75%, 100% {
155
+ transform: scale(2);
156
+ opacity: 0;
157
+ }
158
+ }`,
159
+ `@keyframes pulse {
160
+ 0%, 100% { opacity: 1 }
161
+ 50% { opacity: .5 }
162
+ }`,
163
+ ];
132
164
  const PROPS_COLORS = {
133
165
  red: {
134
166
  50: 0xffebee,
@@ -334,7 +366,7 @@ const PROPS_COLORS = {
334
366
  800: 0x4e342e,
335
367
  900: 0x3e2723,
336
368
  },
337
- grey: {
369
+ gray: {
338
370
  50: 0xfafafa,
339
371
  100: 0xf5f5f5,
340
372
  200: 0xeeeeee,
@@ -346,7 +378,7 @@ const PROPS_COLORS = {
346
378
  800: 0x424242,
347
379
  900: 0x212121,
348
380
  },
349
- "blue-grey": {
381
+ "blue-gray": {
350
382
  50: 0xeceff1,
351
383
  100: 0xcfd8dc,
352
384
  200: 0xb0bec5,
@@ -362,27 +394,49 @@ const PROPS_COLORS = {
362
394
  function wrapPseudoStates(klass) {
363
395
  return PSEUDO_STATES.map((state) => `.${state}\\:${klass}:${state}`);
364
396
  }
397
+ function wrapMediaQueries(klass, rule) {
398
+ return Object.entries(MEDIA_BREAKPOINTS).map(([bp, width]) => `@media (min-width: ${width}px) { .${bp}\\:${klass} { ${rule} } }`);
399
+ }
365
400
  function posneg(props) {
366
401
  return Object.entries(props)
367
- .map(([prop, klass]) => [
402
+ .flatMap(([prop, klass]) => [
368
403
  // Zero.
369
- `.${klass}-0 { ${prop}: 0; }`,
404
+ [`${klass}-0`, `${prop}: 0`],
405
+ // Screen.
406
+ [`${klass}-screen`, `${prop}: 100vw`],
407
+ // Full.
408
+ [`${klass}-full`, `${prop}: 100%`],
370
409
  // Positive REM units.
371
- ...UNITS_ALL.map((v) => `.${klass}-${v} { ${prop}: ${v * REM_UNIT}rem; }`),
410
+ ...UNITS_ALL.map((v) => [`${klass}-${v}`, `${prop}: ${v * REM_UNIT}rem`]),
372
411
  // Negative REM units.
373
- ...UNITS_ALL.map((v) => `.-${klass}-${v} { ${prop}: -${v * REM_UNIT}rem; }`),
412
+ ...UNITS_ALL.map((v) => [`-${klass}-${v}`, `${prop}: -${v * REM_UNIT}rem`]),
374
413
  // Positive PX units.
375
- ...UNITS_ALL.map((v) => `.${klass}-${v}px { ${prop}: ${v}px; }`),
414
+ ...UNITS_ALL.map((v) => [`${klass}-${v}px`, `${prop}: ${v}px`]),
376
415
  // Negative PX units.
377
- ...UNITS_ALL.map((v) => `.-${klass}-${v}px { ${prop}: -${v}px; }`),
416
+ ...UNITS_ALL.map((v) => [`-${klass}-${v}px`, `${prop}: -${v}px`]),
378
417
  // Positive percent units.
379
- ...PERCENTS.map((v) => `.${klass}-${v}% { ${prop}: ${v}%; }`),
418
+ ...PERCENTS.map((v) => [`${klass}-${v}%`, `${prop}: ${v}%`]),
380
419
  // Negative percent units.
381
- ...PERCENTS.map((v) => `.-${klass}-${v}% { ${prop}: -${v}%; }`),
420
+ ...PERCENTS.map((v) => [`-${klass}-${v}%`, ` ${prop}: -${v}%`]),
421
+ ])
422
+ .flatMap(([klass, rule]) => [
423
+ `.${klass} { ${rule} }`,
424
+ `${wrapPseudoStates(klass).join(",")} { ${rule} }`,
425
+ ...wrapMediaQueries(klass, rule),
426
+ ]);
427
+ }
428
+ function autoxy(props) {
429
+ return Object.entries(props).flatMap(([prop, klass]) => [
430
+ // Auto.
431
+ `.${klass}-auto { ${prop}: auto; }`,
432
+ // Auto x-axis.
433
+ `.${klass}x-auto { ${prop}-left: auto; ${prop}-right: auto; }`,
434
+ // Auto y-axis.
435
+ `.${klass}y-auto { ${prop}-top: auto; ${prop}-bottom: auto; }`,
382
436
  // Positive REM units x-axis.
383
- ...UNITS_ALL.map((v) => `.${klass}x-${v} { ${prop}-left: ${v * REM_UNIT}rem; ${prop}-right: ${v * REM_UNIT}rem; }`),
437
+ ...UNITS_ALL.map((v) => [v, v * REM_UNIT]).map(([k, v]) => `.${klass}x-${k} { ${prop}-left: ${v}rem; ${prop}-right: ${v}rem; }`),
384
438
  // Positive REM units y-axis.
385
- ...UNITS_ALL.map((v) => `.${klass}y-${v} { ${prop}-top: ${v * REM_UNIT}rem; ${prop}-bottom: ${v * REM_UNIT}rem; }`),
439
+ ...UNITS_ALL.map((v) => [v, v * REM_UNIT]).map(([k, v]) => `.${klass}y-${k} { ${prop}-top: ${v}rem; ${prop}-bottom: ${v}rem; }`),
386
440
  // Positive PX units x-axis.
387
441
  ...UNITS_ALL.map((v) => `.${klass}x-${v}px { ${prop}-left: ${v}px; ${prop}-right: ${v}px; }`),
388
442
  // Positive PX units y-axis.
@@ -391,25 +445,46 @@ function posneg(props) {
391
445
  ...PERCENTS.map((v) => `.${klass}x-${v}% { ${prop}-left: ${v}%; ${prop}-right: ${v}%; }`),
392
446
  // Positive percent units y-axis.
393
447
  ...PERCENTS.map((v) => `.${klass}y-${v}% { ${prop}-top: ${v}%; ${prop}-bottom: ${v}%; }`),
394
- ])
395
- .flat();
448
+ ]);
396
449
  }
397
- function autoxy(props) {
398
- return Object.entries(props)
399
- .map(([prop, klass]) => [
400
- // Auto.
401
- `.${klass}-auto { ${prop}: auto; }`,
402
- // Auto x-axis.
403
- `.${klass}x-auto { ${prop}-left: auto; ${prop}-right: auto; }`,
404
- // Auto y-axis.
405
- `.${klass}y-auto { ${prop}-top: auto; ${prop}-bottom: auto; }`,
406
- ])
407
- .flat();
450
+ function tblr(props) {
451
+ return Object.entries(props).flatMap(([prop, klass]) => [
452
+ // Auto top.
453
+ `.${klass}t-auto { ${prop}-top: auto }`,
454
+ // Auto bottom.
455
+ `.${klass}b-auto { ${prop}-bottom: auto }`,
456
+ // Auto left.
457
+ `.${klass}l-auto { ${prop}-left: auto }`,
458
+ // Auto right.
459
+ `.${klass}r-auto { ${prop}-right: auto }`,
460
+ // Positive REM units top.
461
+ ...UNITS_ALL.map((v) => [v, v * REM_UNIT]).map(([k, v]) => `.${klass}t-${k} { ${prop}-top: ${v}rem }`),
462
+ // Positive REM units bottom.
463
+ ...UNITS_ALL.map((v) => [v, v * REM_UNIT]).map(([k, v]) => `.${klass}b-${k} { ${prop}-bottom: ${v}rem }`),
464
+ // Positive REM units left.
465
+ ...UNITS_ALL.map((v) => [v, v * REM_UNIT]).map(([k, v]) => `.${klass}l-${k} { ${prop}-left: ${v}rem }`),
466
+ // Positive REM units right.
467
+ ...UNITS_ALL.map((v) => [v, v * REM_UNIT]).map(([k, v]) => `.${klass}r-${k} { ${prop}-right: ${v}rem }`),
468
+ // Positive PX units top.
469
+ ...UNITS_ALL.map((v) => `.${klass}t-${v}px { ${prop}-top: ${v}px }`),
470
+ // Positive PX units bottom.
471
+ ...UNITS_ALL.map((v) => `.${klass}t-${v}px { ${prop}-bottom: ${v}px }`),
472
+ // Positive PX units left.
473
+ ...UNITS_ALL.map((v) => `.${klass}t-${v}px { ${prop}-left: ${v}px }`),
474
+ // Positive PX units right.
475
+ ...UNITS_ALL.map((v) => `.${klass}t-${v}px { ${prop}-right: ${v}px }`),
476
+ // Positive percent units top.
477
+ ...PERCENTS.map((v) => `.${klass}y-${v}% { ${prop}-top: ${v}% }`),
478
+ // Positive percent units bottom.
479
+ ...PERCENTS.map((v) => `.${klass}y-${v}% { ${prop}-bottom: ${v}%; }`),
480
+ // Positive percent units left.
481
+ ...PERCENTS.map((v) => `.${klass}x-${v}% { ${prop}-left: ${v}% }`),
482
+ // Positive percent units right.
483
+ ...PERCENTS.map((v) => `.${klass}x-${v}% { ${prop}-right: ${v}% }`),
484
+ ]);
408
485
  }
409
486
  function border() {
410
487
  return [
411
- // Zero for border width.
412
- `.border-0 { border-width: 0; }`,
413
488
  // Pixel units for border width.
414
489
  ...UNITS_SM.map((v) => `.border-${v} { border-width: ${v}px; }`),
415
490
  ];
@@ -435,47 +510,77 @@ function between() {
435
510
  // Positive PX units for gap.
436
511
  ...UNITS_ALL.map((v) => `.gap-${v}px { gap: ${v}px; }`),
437
512
  // Positive REM units for col gap.
438
- ...UNITS_ALL.map((v) => `.gap-col-${v} { column-gap: ${v * REM_UNIT}rem; }`),
513
+ ...UNITS_ALL.map((v) => `.gap-x-${v} { column-gap: ${v * REM_UNIT}rem; }`),
439
514
  // Positive REM units for row gap.
440
- ...UNITS_ALL.map((v) => `.gap-row-${v} { row-gap: ${v * REM_UNIT}rem; }`),
515
+ ...UNITS_ALL.map((v) => `.gap-y-${v} { row-gap: ${v * REM_UNIT}rem; }`),
441
516
  // Positive PX units for col gap.
442
- ...UNITS_ALL.map((v) => `.gap-col-${v}px { column-gap: ${v}px; }`),
517
+ ...UNITS_ALL.map((v) => `.gap-x-${v}px { column-gap: ${v}px; }`),
443
518
  // Positive PX units for row gap.
444
- ...UNITS_ALL.map((v) => `.gap-row-${v}px { row-gap: ${v}px; }`),
519
+ ...UNITS_ALL.map((v) => `.gap-y-${v}px { row-gap: ${v}px; }`),
445
520
  ];
446
521
  }
447
522
  function custom() {
448
- return Object.entries(PROPS_CUSTOM)
449
- .map(([klass, props]) => Object.entries(props).map(([key, val]) => `.${klass},${wrapPseudoStates(klass).join(",")} { ${key}: ${val}; }`))
450
- .flat();
523
+ return Object.entries(PROPS_CUSTOM).flatMap(([klass, props]) => Object.entries(props).flatMap(([propkey, propval]) => [
524
+ `.${klass} { ${propkey}: ${propval} }`,
525
+ `${wrapPseudoStates(klass).join(",")} { ${propkey}: ${propval} }`,
526
+ ...wrapMediaQueries(klass, `${propkey}: ${propval}`),
527
+ ]));
451
528
  }
452
529
  function colors() {
453
- const mains = Object.entries(PROPS_COLORS)
454
- .map(([color, shades]) => [
455
- [`${color}`, `{ color: #${shades[500].toString(16)}; }`],
456
- [`${color}-bg`, `{ background-color: #${shades[500].toString(16)}; }`],
457
- [`${color}-border`, `{ border-color: #${shades[500].toString(16)}; }`],
458
- ])
459
- .flat();
460
- const shades = Object.entries(PROPS_COLORS)
461
- .map(([color, shades]) => Object.entries(shades)
462
- .map(([shade, hex]) => [
463
- [`${color}-${shade}`, `{ color: #${hex.toString(16)}; }`],
464
- [`bg-${color}-${shade}`, `{ background-color: #${hex.toString(16)}; }`],
465
- [`border-${color}-${shade}`, `{ border-color: #${hex.toString(16)}; }`],
466
- ])
467
- .flat())
468
- .flat();
469
- return mains
530
+ const bw = [
531
+ ["white", "#fff"],
532
+ ["black", "#000"],
533
+ ["transparent", "transparent"],
534
+ ].flatMap(([color, value]) => [
535
+ [`text-${color}`, `color: ${value}`],
536
+ [`fill-${color}`, `fill: ${value}`],
537
+ [`bg-${color}`, `background-color: ${value}`],
538
+ [`border-${color}`, `border-color: ${value}`],
539
+ ]);
540
+ const mains = Object.entries(PROPS_COLORS).flatMap(([color, shades]) => [
541
+ [`text-${color}`, `color: #${shades[500].toString(16)}`],
542
+ [`fill-${color}`, `fill: #${shades[500].toString(16)}`],
543
+ [`bg-${color}`, `background-color: #${shades[500].toString(16)}`],
544
+ [`border-${color}`, `border-color: #${shades[500].toString(16)}`],
545
+ ]);
546
+ const shades = Object.entries(PROPS_COLORS).flatMap(([color, shades]) => Object.entries(shades).flatMap(([shade, hex]) => [
547
+ [`text-${color}-${shade}`, `color: #${hex.toString(16)}`],
548
+ [`fill-${color}-${shade}`, `fill: #${hex.toString(16)}`],
549
+ [`bg-${color}-${shade}`, `background-color: #${hex.toString(16)}`],
550
+ [`border-${color}-${shade}`, `border-color: #${hex.toString(16)}`],
551
+ ]));
552
+ return []
553
+ .concat(bw)
554
+ .concat(mains)
470
555
  .concat(shades)
471
- .map(([klass, rule]) => `.${klass},${wrapPseudoStates(klass).join(",")} ${rule}`);
556
+ .flatMap(([klass, rule]) => [
557
+ `.${klass} { ${rule} }`,
558
+ `${wrapPseudoStates(klass).join(",")} { ${rule} }`,
559
+ ...wrapMediaQueries(klass, rule),
560
+ ]);
561
+ }
562
+ function opacity() {
563
+ return [
564
+ // Zero for opacity.
565
+ `.opacity-0 { opacity: 0; }`,
566
+ // Positive percent units for opacity.
567
+ ...PERCENTS.map((v) => `.opacity-${v} { opacity: ${v / 100}; }`),
568
+ ].flatMap(([klass, rule]) => [
569
+ `.${klass} { ${rule} }`,
570
+ `${wrapPseudoStates(klass).join(",")} { ${rule} }`,
571
+ ...wrapMediaQueries(klass, rule),
572
+ ]);
472
573
  }
473
574
  export default function rules() {
474
575
  return [
576
+ // As-is.
577
+ ...PROPS_AS_IS,
475
578
  // Custom.
476
579
  ...custom(),
477
580
  // Colors.
478
581
  ...colors(),
582
+ // Opacity.
583
+ ...opacity(),
479
584
  // Sizing.
480
585
  ...posneg(PROPS_SIZING),
481
586
  ...autoxy(PROPS_SIZING),
@@ -483,6 +588,7 @@ export default function rules() {
483
588
  ...posneg(PROPS_POSITION),
484
589
  ...autoxy(PROPS_POSITION),
485
590
  // Spacing.
591
+ ...tblr(PROPS_SPACING),
486
592
  ...posneg(PROPS_SPACING),
487
593
  ...autoxy(PROPS_SPACING),
488
594
  ...between(),