@csszyx/compiler 0.1.2 → 0.2.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 (5) hide show
  1. package/dist/index.cjs +150 -9
  2. package/dist/index.d.cts +44 -2
  3. package/dist/index.d.ts +44 -2
  4. package/dist/index.js +150 -9
  5. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -60,10 +60,6 @@ module.exports = __toCommonJS(index_exports);
60
60
  // src/compiler.ts
61
61
  var import_core = require("@csszyx/core");
62
62
 
63
- // src/transform.ts
64
- var babel = __toESM(require("@babel/core"), 1);
65
- var t = __toESM(require("@babel/types"), 1);
66
-
67
63
  // src/property-types.ts
68
64
  var PropertyCategory = /* @__PURE__ */ ((PropertyCategory2) => {
69
65
  PropertyCategory2[PropertyCategory2["SPACING"] = 0] = "SPACING";
@@ -87,6 +83,8 @@ var PROPERTY_CATEGORY_MAP = {
87
83
  py: 0 /* SPACING */,
88
84
  ps: 0 /* SPACING */,
89
85
  pe: 0 /* SPACING */,
86
+ pbs: 0 /* SPACING */,
87
+ pbe: 0 /* SPACING */,
90
88
  m: 0 /* SPACING */,
91
89
  mt: 0 /* SPACING */,
92
90
  mr: 0 /* SPACING */,
@@ -96,6 +94,8 @@ var PROPERTY_CATEGORY_MAP = {
96
94
  my: 0 /* SPACING */,
97
95
  ms: 0 /* SPACING */,
98
96
  me: 0 /* SPACING */,
97
+ mbs: 0 /* SPACING */,
98
+ mbe: 0 /* SPACING */,
99
99
  spaceX: 0 /* SPACING */,
100
100
  spaceY: 0 /* SPACING */,
101
101
  gap: 0 /* SPACING */,
@@ -110,6 +110,10 @@ var PROPERTY_CATEGORY_MAP = {
110
110
  left: 0 /* SPACING */,
111
111
  start: 0 /* SPACING */,
112
112
  end: 0 /* SPACING */,
113
+ insetS: 0 /* SPACING */,
114
+ insetE: 0 /* SPACING */,
115
+ insetBs: 0 /* SPACING */,
116
+ insetBe: 0 /* SPACING */,
113
117
  w: 0 /* SPACING */,
114
118
  minW: 0 /* SPACING */,
115
119
  maxW: 0 /* SPACING */,
@@ -117,6 +121,12 @@ var PROPERTY_CATEGORY_MAP = {
117
121
  minH: 0 /* SPACING */,
118
122
  maxH: 0 /* SPACING */,
119
123
  size: 0 /* SPACING */,
124
+ blockSize: 0 /* SPACING */,
125
+ minBlockSize: 0 /* SPACING */,
126
+ maxBlockSize: 0 /* SPACING */,
127
+ inlineSize: 0 /* SPACING */,
128
+ minInlineSize: 0 /* SPACING */,
129
+ maxInlineSize: 0 /* SPACING */,
120
130
  basis: 0 /* SPACING */,
121
131
  indent: 0 /* SPACING */,
122
132
  scrollM: 0 /* SPACING */,
@@ -137,6 +147,10 @@ var PROPERTY_CATEGORY_MAP = {
137
147
  scrollPe: 0 /* SPACING */,
138
148
  scrollPx: 0 /* SPACING */,
139
149
  scrollPy: 0 /* SPACING */,
150
+ scrollPbs: 0 /* SPACING */,
151
+ scrollPbe: 0 /* SPACING */,
152
+ scrollMbs: 0 /* SPACING */,
153
+ scrollMbe: 0 /* SPACING */,
140
154
  translateX: 0 /* SPACING */,
141
155
  translateY: 0 /* SPACING */,
142
156
  borderSpacing: 0 /* SPACING */,
@@ -204,6 +218,8 @@ var PROPERTY_CATEGORY_MAP = {
204
218
  borderY: 3 /* UNITLESS */,
205
219
  borderS: 3 /* UNITLESS */,
206
220
  borderE: 3 /* UNITLESS */,
221
+ borderBs: 3 /* UNITLESS */,
222
+ borderBe: 3 /* UNITLESS */,
207
223
  ring: 3 /* UNITLESS */,
208
224
  outline: 3 /* UNITLESS */,
209
225
  leading: 3 /* UNITLESS */,
@@ -230,6 +246,81 @@ function getCSSVariableName(property, variantPrefix) {
230
246
  return `--_sz-${prop}`;
231
247
  }
232
248
 
249
+ // src/color-validation.ts
250
+ var COLOR_STRING_KEYWORDS = /* @__PURE__ */ new Set([
251
+ "inherit",
252
+ "current",
253
+ "transparent",
254
+ "black",
255
+ "white",
256
+ "none"
257
+ ]);
258
+ function isValidColorString(value) {
259
+ if (COLOR_STRING_KEYWORDS.has(value)) {
260
+ return true;
261
+ }
262
+ if (value.startsWith("--")) {
263
+ return true;
264
+ }
265
+ if (value.startsWith("#")) {
266
+ return true;
267
+ }
268
+ if (value.startsWith("[") && value.endsWith("]")) {
269
+ return true;
270
+ }
271
+ if (/^(rgb|hsl|oklch|color|hwb|lab|lch|oklab)\(/.test(value)) {
272
+ return true;
273
+ }
274
+ if (/^[a-zA-Z][a-zA-Z0-9]*(-[a-zA-Z0-9]+)*-\d+$/.test(value)) {
275
+ return true;
276
+ }
277
+ return false;
278
+ }
279
+ function hasSlashOpacity(value) {
280
+ const slashIdx = value.indexOf("/");
281
+ if (slashIdx === -1) {
282
+ return false;
283
+ }
284
+ return slashIdx > 0 && /\d$/.test(value.slice(0, slashIdx));
285
+ }
286
+ function stripInvalidColorStrings(sz) {
287
+ const result = {};
288
+ for (const [key, value] of Object.entries(sz)) {
289
+ if (typeof value === "object" && value !== null && !Array.isArray(value)) {
290
+ result[key] = stripInvalidColorStrings(value);
291
+ continue;
292
+ }
293
+ if (typeof value === "string" && PROPERTY_CATEGORY_MAP[key] === 1 /* COLOR */) {
294
+ const strVal = value.replace(/!$/, "");
295
+ if (hasSlashOpacity(strVal)) {
296
+ if (process.env["NODE_ENV"] !== "production" && typeof window === "undefined") {
297
+ const slashIdx = strVal.indexOf("/");
298
+ const colorPart = strVal.slice(0, slashIdx);
299
+ const opPart = strVal.slice(slashIdx + 1);
300
+ console.warn(
301
+ `[csszyx] "${key}: '${strVal}'" \u2014 string slash opacity is not supported. Use object form: { color: '${colorPart}', op: ${opPart} }.`
302
+ );
303
+ }
304
+ continue;
305
+ }
306
+ if (!isValidColorString(strVal)) {
307
+ if (process.env["NODE_ENV"] !== "production" && typeof window === "undefined") {
308
+ console.warn(
309
+ `[csszyx] "${key}: '${strVal}'" is not a recognized color value and will be ignored. Use a Tailwind color ("blue-500"), CSS variable ("--my-color"), hex/rgb/hsl ("#ff0000"), or object form ({ color: "blue-500", op: 50 }).`
310
+ );
311
+ }
312
+ continue;
313
+ }
314
+ }
315
+ result[key] = value;
316
+ }
317
+ return result;
318
+ }
319
+
320
+ // src/transform.ts
321
+ var babel = __toESM(require("@babel/core"), 1);
322
+ var t = __toESM(require("@babel/types"), 1);
323
+
233
324
  // src/transform-core.ts
234
325
  var PROPERTY_MAP = {
235
326
  // Background
@@ -273,6 +364,8 @@ var PROPERTY_MAP = {
273
364
  borderY: "border-y",
274
365
  borderS: "border-s",
275
366
  borderE: "border-e",
367
+ borderBs: "border-bs",
368
+ borderBe: "border-be",
276
369
  // Divide
277
370
  divideX: "divide-x",
278
371
  divideY: "divide-y",
@@ -298,6 +391,8 @@ var PROPERTY_MAP = {
298
391
  py: "py",
299
392
  ps: "ps",
300
393
  pe: "pe",
394
+ pbs: "pbs",
395
+ pbe: "pbe",
301
396
  m: "m",
302
397
  mt: "mt",
303
398
  mr: "mr",
@@ -307,6 +402,8 @@ var PROPERTY_MAP = {
307
402
  my: "my",
308
403
  ms: "ms",
309
404
  me: "me",
405
+ mbs: "mbs",
406
+ mbe: "mbe",
310
407
  // Space between
311
408
  spaceX: "space-x",
312
409
  spaceY: "space-y",
@@ -318,6 +415,12 @@ var PROPERTY_MAP = {
318
415
  minH: "min-h",
319
416
  maxH: "max-h",
320
417
  size: "size",
418
+ blockSize: "block",
419
+ minBlockSize: "min-block",
420
+ maxBlockSize: "max-block",
421
+ inlineSize: "inline",
422
+ minInlineSize: "min-inline",
423
+ maxInlineSize: "max-inline",
321
424
  // Layout
322
425
  aspect: "aspect",
323
426
  columns: "columns",
@@ -347,8 +450,13 @@ var PROPERTY_MAP = {
347
450
  right: "right",
348
451
  bottom: "bottom",
349
452
  left: "left",
350
- start: "start",
351
- end: "end",
453
+ // TW v4.2: start/end now emit inset-s-*/inset-e-* (same CSS, deprecated old class names)
454
+ start: "inset-s",
455
+ end: "inset-e",
456
+ insetS: "inset-s",
457
+ insetE: "inset-e",
458
+ insetBs: "inset-bs",
459
+ insetBe: "inset-be",
352
460
  // Visibility
353
461
  visibility: "visibility",
354
462
  // Typography
@@ -376,6 +484,7 @@ var PROPERTY_MAP = {
376
484
  leading: "leading",
377
485
  tracking: "tracking",
378
486
  lineClamp: "line-clamp",
487
+ fontFeatures: "font-features",
379
488
  list: "list",
380
489
  listPos: "list",
381
490
  listImg: "list-image",
@@ -492,6 +601,10 @@ var PROPERTY_MAP = {
492
601
  scrollPe: "scroll-pe",
493
602
  scrollPx: "scroll-px",
494
603
  scrollPy: "scroll-py",
604
+ scrollPbs: "scroll-pbs",
605
+ scrollPbe: "scroll-pbe",
606
+ scrollMbs: "scroll-mbs",
607
+ scrollMbe: "scroll-mbe",
495
608
  snapAlign: "snap",
496
609
  snapStop: "snap",
497
610
  snapType: "snap",
@@ -940,6 +1053,8 @@ var NEGATIVE_ALLOWED = /* @__PURE__ */ new Set([
940
1053
  "my",
941
1054
  "ms",
942
1055
  "me",
1056
+ "mbs",
1057
+ "mbe",
943
1058
  "top",
944
1059
  "right",
945
1060
  "bottom",
@@ -947,8 +1062,11 @@ var NEGATIVE_ALLOWED = /* @__PURE__ */ new Set([
947
1062
  "inset",
948
1063
  "inset-x",
949
1064
  "inset-y",
950
- "start",
951
- "end",
1065
+ // TW v4.2: start/end now map to inset-s/inset-e
1066
+ "inset-s",
1067
+ "inset-e",
1068
+ "inset-bs",
1069
+ "inset-be",
952
1070
  "z",
953
1071
  "order",
954
1072
  "col",
@@ -1324,6 +1442,28 @@ function transform(szProp, prefix = "", mangleMap) {
1324
1442
  }
1325
1443
  continue;
1326
1444
  }
1445
+ if (typeof value === "string" && PROPERTY_CATEGORY_MAP[rawKey] === 1 /* COLOR */) {
1446
+ const strVal = value.replace(/!$/, "");
1447
+ if (hasSlashOpacity(strVal)) {
1448
+ if (process.env["NODE_ENV"] !== "production" && typeof window === "undefined") {
1449
+ const slashIdx = strVal.indexOf("/");
1450
+ const colorPart = strVal.slice(0, slashIdx);
1451
+ const opPart = strVal.slice(slashIdx + 1);
1452
+ console.warn(
1453
+ `[csszyx] "${rawKey}: '${strVal}'" \u2014 string slash opacity is not supported. Use object form: { color: '${colorPart}', op: ${opPart} }.`
1454
+ );
1455
+ }
1456
+ continue;
1457
+ }
1458
+ if (!isValidColorString(strVal)) {
1459
+ if (process.env["NODE_ENV"] !== "production" && typeof window === "undefined") {
1460
+ console.warn(
1461
+ `[csszyx] "${rawKey}: '${strVal}'" is not a recognized color value and will be ignored. Use a Tailwind color ("blue-500"), CSS variable ("--my-color"), hex/rgb/hsl ("#ff0000"), or object form ({ color: "blue-500", op: 50 }).`
1462
+ );
1463
+ }
1464
+ continue;
1465
+ }
1466
+ }
1327
1467
  if (typeof value === "object" && !Array.isArray(value)) {
1328
1468
  if (rawKey === "group") {
1329
1469
  const groupClasses = handleGroupPeer("group", value, prefix);
@@ -2480,8 +2620,9 @@ var CsszyxCompiler = class _CsszyxCompiler {
2480
2620
  */
2481
2621
  transform(sz) {
2482
2622
  if (this.wasmLoaded) {
2623
+ const cleaned = stripInvalidColorStrings(sz);
2483
2624
  try {
2484
- return (0, import_core.transform_sz)(sz);
2625
+ return (0, import_core.transform_sz)(cleaned);
2485
2626
  } catch (error) {
2486
2627
  console.warn(
2487
2628
  "[csszyx] WASM transformation failed, using JS fallback",
package/dist/index.d.cts CHANGED
@@ -530,7 +530,7 @@ type SpacingValue = SpacingScale | 'px' | 'auto' | (number & {}) | (string & {})
530
530
  /** Negative spacing value */
531
531
  type NegativeSpacingValue = SpacingValue | number;
532
532
  /** Tailwind color names */
533
- type ColorName = 'inherit' | 'current' | 'transparent' | 'black' | 'white' | 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose';
533
+ type ColorName = 'inherit' | 'current' | 'transparent' | 'black' | 'white' | 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'mauve' | 'olive' | 'mist' | 'taupe';
534
534
  /** Tailwind color shades */
535
535
  type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
536
536
  /** Color value (string-based) */
@@ -642,6 +642,14 @@ interface LayoutProps {
642
642
  left?: NegativeSpacingValue;
643
643
  start?: SpacingValue;
644
644
  end?: SpacingValue;
645
+ /** inset-inline-start (camelCase alias for start, emits inset-s-*) */
646
+ insetS?: SpacingValue;
647
+ /** inset-inline-end (camelCase alias for end, emits inset-e-*) */
648
+ insetE?: SpacingValue;
649
+ /** inset-block-start */
650
+ insetBs?: SpacingValue;
651
+ /** inset-block-end */
652
+ insetBe?: SpacingValue;
645
653
  /** @see https://tailwindcss.com/docs/visibility */
646
654
  visibility?: 'visible' | 'hidden' | 'collapse';
647
655
  visible?: boolean;
@@ -729,6 +737,10 @@ interface SpacingProps {
729
737
  ps?: SpacingValue;
730
738
  /** Padding - inline end (logical) */
731
739
  pe?: SpacingValue;
740
+ /** Padding - block-start (logical) */
741
+ pbs?: SpacingValue;
742
+ /** Padding - block-end (logical) */
743
+ pbe?: SpacingValue;
732
744
  /** Margin - all sides */
733
745
  m?: NegativeSpacingValue;
734
746
  /** Margin - X axis (left/right) */
@@ -747,6 +759,10 @@ interface SpacingProps {
747
759
  ms?: NegativeSpacingValue;
748
760
  /** Margin - inline end (logical) */
749
761
  me?: NegativeSpacingValue;
762
+ /** Margin - block-start (logical) */
763
+ mbs?: NegativeSpacingValue;
764
+ /** Margin - block-end (logical) */
765
+ mbe?: NegativeSpacingValue;
750
766
  /** Space between child elements - X axis */
751
767
  spaceX?: NegativeSpacingValue;
752
768
  /** Space between child elements - Y axis */
@@ -774,6 +790,18 @@ interface SizingProps {
774
790
  maxH?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
775
791
  /** @see https://tailwindcss.com/docs/size */
776
792
  size?: SpacingScale | 'px' | 'auto' | 'full' | 'min' | 'max' | 'fit' | (string & {});
793
+ /** @see https://tailwindcss.com/docs/block-size — block-size (logical height) */
794
+ blockSize?: SpacingScale | 'px' | 'auto' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
795
+ /** @see https://tailwindcss.com/docs/min-block-size */
796
+ minBlockSize?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
797
+ /** @see https://tailwindcss.com/docs/max-block-size */
798
+ maxBlockSize?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
799
+ /** @see https://tailwindcss.com/docs/inline-size — inline-size (logical width) */
800
+ inlineSize?: SpacingScale | 'px' | 'auto' | 'full' | 'screen' | 'svw' | 'lvw' | 'dvw' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
801
+ /** @see https://tailwindcss.com/docs/min-inline-size */
802
+ minInlineSize?: SpacingScale | 'px' | 'full' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
803
+ /** @see https://tailwindcss.com/docs/max-inline-size */
804
+ maxInlineSize?: SpacingScale | 'px' | 'full' | 'none' | 'prose' | 'min' | 'max' | 'fit' | ContainerSize | FractionValue | (string & {});
777
805
  }
778
806
  /**
779
807
  *
@@ -858,6 +886,8 @@ interface TypographyProps {
858
886
  hyphens?: 'none' | 'manual' | 'auto';
859
887
  /** @see https://tailwindcss.com/docs/content — also handles align-content */
860
888
  content?: 'none' | 'normal' | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'baseline' | 'stretch' | (string & {});
889
+ /** @see https://tailwindcss.com/docs/font-feature-settings */
890
+ fontFeatures?: string & {};
861
891
  /** @see https://tailwindcss.com/docs/forced-color-adjust */
862
892
  forcedColorAdjust?: 'auto' | 'none';
863
893
  }
@@ -876,7 +906,7 @@ interface BackgroundProps {
876
906
  /** @see https://tailwindcss.com/docs/background-clip */
877
907
  bgClip?: 'border' | 'padding' | 'content' | 'text';
878
908
  /** @see https://tailwindcss.com/docs/background-color */
879
- bg?: ColorPropValue | (string & {});
909
+ bg?: ColorPropValue;
880
910
  /** @see https://tailwindcss.com/docs/background-origin */
881
911
  bgOrigin?: 'border' | 'padding' | 'content';
882
912
  /** @see https://tailwindcss.com/docs/background-position */
@@ -926,6 +956,10 @@ interface BorderProps {
926
956
  borderL?: boolean | 0 | 2 | 4 | 8 | (string & {});
927
957
  borderS?: boolean | 0 | 2 | 4 | 8 | (string & {});
928
958
  borderE?: boolean | 0 | 2 | 4 | 8 | (string & {});
959
+ /** border-block-start width */
960
+ borderBs?: boolean | 0 | 2 | 4 | 8 | (string & {});
961
+ /** border-block-end width */
962
+ borderBe?: boolean | 0 | 2 | 4 | 8 | (string & {});
929
963
  /** @see https://tailwindcss.com/docs/border-color */
930
964
  borderColor?: ColorPropValue;
931
965
  /** @see https://tailwindcss.com/docs/border-style */
@@ -1111,6 +1145,14 @@ interface InteractivityProps {
1111
1145
  scrollPl?: SpacingValue;
1112
1146
  scrollPs?: SpacingValue;
1113
1147
  scrollPe?: SpacingValue;
1148
+ /** scroll-padding-block-start */
1149
+ scrollPbs?: SpacingValue;
1150
+ /** scroll-padding-block-end */
1151
+ scrollPbe?: SpacingValue;
1152
+ /** scroll-margin-block-start */
1153
+ scrollMbs?: SpacingValue;
1154
+ /** scroll-margin-block-end */
1155
+ scrollMbe?: SpacingValue;
1114
1156
  /** @see https://tailwindcss.com/docs/scroll-snap-align */
1115
1157
  snapAlign?: 'start' | 'end' | 'center' | 'align-none';
1116
1158
  /** @see https://tailwindcss.com/docs/scroll-snap-stop */
package/dist/index.d.ts CHANGED
@@ -530,7 +530,7 @@ type SpacingValue = SpacingScale | 'px' | 'auto' | (number & {}) | (string & {})
530
530
  /** Negative spacing value */
531
531
  type NegativeSpacingValue = SpacingValue | number;
532
532
  /** Tailwind color names */
533
- type ColorName = 'inherit' | 'current' | 'transparent' | 'black' | 'white' | 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose';
533
+ type ColorName = 'inherit' | 'current' | 'transparent' | 'black' | 'white' | 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'mauve' | 'olive' | 'mist' | 'taupe';
534
534
  /** Tailwind color shades */
535
535
  type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
536
536
  /** Color value (string-based) */
@@ -642,6 +642,14 @@ interface LayoutProps {
642
642
  left?: NegativeSpacingValue;
643
643
  start?: SpacingValue;
644
644
  end?: SpacingValue;
645
+ /** inset-inline-start (camelCase alias for start, emits inset-s-*) */
646
+ insetS?: SpacingValue;
647
+ /** inset-inline-end (camelCase alias for end, emits inset-e-*) */
648
+ insetE?: SpacingValue;
649
+ /** inset-block-start */
650
+ insetBs?: SpacingValue;
651
+ /** inset-block-end */
652
+ insetBe?: SpacingValue;
645
653
  /** @see https://tailwindcss.com/docs/visibility */
646
654
  visibility?: 'visible' | 'hidden' | 'collapse';
647
655
  visible?: boolean;
@@ -729,6 +737,10 @@ interface SpacingProps {
729
737
  ps?: SpacingValue;
730
738
  /** Padding - inline end (logical) */
731
739
  pe?: SpacingValue;
740
+ /** Padding - block-start (logical) */
741
+ pbs?: SpacingValue;
742
+ /** Padding - block-end (logical) */
743
+ pbe?: SpacingValue;
732
744
  /** Margin - all sides */
733
745
  m?: NegativeSpacingValue;
734
746
  /** Margin - X axis (left/right) */
@@ -747,6 +759,10 @@ interface SpacingProps {
747
759
  ms?: NegativeSpacingValue;
748
760
  /** Margin - inline end (logical) */
749
761
  me?: NegativeSpacingValue;
762
+ /** Margin - block-start (logical) */
763
+ mbs?: NegativeSpacingValue;
764
+ /** Margin - block-end (logical) */
765
+ mbe?: NegativeSpacingValue;
750
766
  /** Space between child elements - X axis */
751
767
  spaceX?: NegativeSpacingValue;
752
768
  /** Space between child elements - Y axis */
@@ -774,6 +790,18 @@ interface SizingProps {
774
790
  maxH?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
775
791
  /** @see https://tailwindcss.com/docs/size */
776
792
  size?: SpacingScale | 'px' | 'auto' | 'full' | 'min' | 'max' | 'fit' | (string & {});
793
+ /** @see https://tailwindcss.com/docs/block-size — block-size (logical height) */
794
+ blockSize?: SpacingScale | 'px' | 'auto' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
795
+ /** @see https://tailwindcss.com/docs/min-block-size */
796
+ minBlockSize?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
797
+ /** @see https://tailwindcss.com/docs/max-block-size */
798
+ maxBlockSize?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
799
+ /** @see https://tailwindcss.com/docs/inline-size — inline-size (logical width) */
800
+ inlineSize?: SpacingScale | 'px' | 'auto' | 'full' | 'screen' | 'svw' | 'lvw' | 'dvw' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
801
+ /** @see https://tailwindcss.com/docs/min-inline-size */
802
+ minInlineSize?: SpacingScale | 'px' | 'full' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
803
+ /** @see https://tailwindcss.com/docs/max-inline-size */
804
+ maxInlineSize?: SpacingScale | 'px' | 'full' | 'none' | 'prose' | 'min' | 'max' | 'fit' | ContainerSize | FractionValue | (string & {});
777
805
  }
778
806
  /**
779
807
  *
@@ -858,6 +886,8 @@ interface TypographyProps {
858
886
  hyphens?: 'none' | 'manual' | 'auto';
859
887
  /** @see https://tailwindcss.com/docs/content — also handles align-content */
860
888
  content?: 'none' | 'normal' | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'baseline' | 'stretch' | (string & {});
889
+ /** @see https://tailwindcss.com/docs/font-feature-settings */
890
+ fontFeatures?: string & {};
861
891
  /** @see https://tailwindcss.com/docs/forced-color-adjust */
862
892
  forcedColorAdjust?: 'auto' | 'none';
863
893
  }
@@ -876,7 +906,7 @@ interface BackgroundProps {
876
906
  /** @see https://tailwindcss.com/docs/background-clip */
877
907
  bgClip?: 'border' | 'padding' | 'content' | 'text';
878
908
  /** @see https://tailwindcss.com/docs/background-color */
879
- bg?: ColorPropValue | (string & {});
909
+ bg?: ColorPropValue;
880
910
  /** @see https://tailwindcss.com/docs/background-origin */
881
911
  bgOrigin?: 'border' | 'padding' | 'content';
882
912
  /** @see https://tailwindcss.com/docs/background-position */
@@ -926,6 +956,10 @@ interface BorderProps {
926
956
  borderL?: boolean | 0 | 2 | 4 | 8 | (string & {});
927
957
  borderS?: boolean | 0 | 2 | 4 | 8 | (string & {});
928
958
  borderE?: boolean | 0 | 2 | 4 | 8 | (string & {});
959
+ /** border-block-start width */
960
+ borderBs?: boolean | 0 | 2 | 4 | 8 | (string & {});
961
+ /** border-block-end width */
962
+ borderBe?: boolean | 0 | 2 | 4 | 8 | (string & {});
929
963
  /** @see https://tailwindcss.com/docs/border-color */
930
964
  borderColor?: ColorPropValue;
931
965
  /** @see https://tailwindcss.com/docs/border-style */
@@ -1111,6 +1145,14 @@ interface InteractivityProps {
1111
1145
  scrollPl?: SpacingValue;
1112
1146
  scrollPs?: SpacingValue;
1113
1147
  scrollPe?: SpacingValue;
1148
+ /** scroll-padding-block-start */
1149
+ scrollPbs?: SpacingValue;
1150
+ /** scroll-padding-block-end */
1151
+ scrollPbe?: SpacingValue;
1152
+ /** scroll-margin-block-start */
1153
+ scrollMbs?: SpacingValue;
1154
+ /** scroll-margin-block-end */
1155
+ scrollMbe?: SpacingValue;
1114
1156
  /** @see https://tailwindcss.com/docs/scroll-snap-align */
1115
1157
  snapAlign?: 'start' | 'end' | 'center' | 'align-none';
1116
1158
  /** @see https://tailwindcss.com/docs/scroll-snap-stop */
package/dist/index.js CHANGED
@@ -8,10 +8,6 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
8
8
  // src/compiler.ts
9
9
  import { init, transform_sz, version as getWasmVersion } from "@csszyx/core";
10
10
 
11
- // src/transform.ts
12
- import * as babel from "@babel/core";
13
- import * as t from "@babel/types";
14
-
15
11
  // src/property-types.ts
16
12
  var PropertyCategory = /* @__PURE__ */ ((PropertyCategory2) => {
17
13
  PropertyCategory2[PropertyCategory2["SPACING"] = 0] = "SPACING";
@@ -35,6 +31,8 @@ var PROPERTY_CATEGORY_MAP = {
35
31
  py: 0 /* SPACING */,
36
32
  ps: 0 /* SPACING */,
37
33
  pe: 0 /* SPACING */,
34
+ pbs: 0 /* SPACING */,
35
+ pbe: 0 /* SPACING */,
38
36
  m: 0 /* SPACING */,
39
37
  mt: 0 /* SPACING */,
40
38
  mr: 0 /* SPACING */,
@@ -44,6 +42,8 @@ var PROPERTY_CATEGORY_MAP = {
44
42
  my: 0 /* SPACING */,
45
43
  ms: 0 /* SPACING */,
46
44
  me: 0 /* SPACING */,
45
+ mbs: 0 /* SPACING */,
46
+ mbe: 0 /* SPACING */,
47
47
  spaceX: 0 /* SPACING */,
48
48
  spaceY: 0 /* SPACING */,
49
49
  gap: 0 /* SPACING */,
@@ -58,6 +58,10 @@ var PROPERTY_CATEGORY_MAP = {
58
58
  left: 0 /* SPACING */,
59
59
  start: 0 /* SPACING */,
60
60
  end: 0 /* SPACING */,
61
+ insetS: 0 /* SPACING */,
62
+ insetE: 0 /* SPACING */,
63
+ insetBs: 0 /* SPACING */,
64
+ insetBe: 0 /* SPACING */,
61
65
  w: 0 /* SPACING */,
62
66
  minW: 0 /* SPACING */,
63
67
  maxW: 0 /* SPACING */,
@@ -65,6 +69,12 @@ var PROPERTY_CATEGORY_MAP = {
65
69
  minH: 0 /* SPACING */,
66
70
  maxH: 0 /* SPACING */,
67
71
  size: 0 /* SPACING */,
72
+ blockSize: 0 /* SPACING */,
73
+ minBlockSize: 0 /* SPACING */,
74
+ maxBlockSize: 0 /* SPACING */,
75
+ inlineSize: 0 /* SPACING */,
76
+ minInlineSize: 0 /* SPACING */,
77
+ maxInlineSize: 0 /* SPACING */,
68
78
  basis: 0 /* SPACING */,
69
79
  indent: 0 /* SPACING */,
70
80
  scrollM: 0 /* SPACING */,
@@ -85,6 +95,10 @@ var PROPERTY_CATEGORY_MAP = {
85
95
  scrollPe: 0 /* SPACING */,
86
96
  scrollPx: 0 /* SPACING */,
87
97
  scrollPy: 0 /* SPACING */,
98
+ scrollPbs: 0 /* SPACING */,
99
+ scrollPbe: 0 /* SPACING */,
100
+ scrollMbs: 0 /* SPACING */,
101
+ scrollMbe: 0 /* SPACING */,
88
102
  translateX: 0 /* SPACING */,
89
103
  translateY: 0 /* SPACING */,
90
104
  borderSpacing: 0 /* SPACING */,
@@ -152,6 +166,8 @@ var PROPERTY_CATEGORY_MAP = {
152
166
  borderY: 3 /* UNITLESS */,
153
167
  borderS: 3 /* UNITLESS */,
154
168
  borderE: 3 /* UNITLESS */,
169
+ borderBs: 3 /* UNITLESS */,
170
+ borderBe: 3 /* UNITLESS */,
155
171
  ring: 3 /* UNITLESS */,
156
172
  outline: 3 /* UNITLESS */,
157
173
  leading: 3 /* UNITLESS */,
@@ -178,6 +194,81 @@ function getCSSVariableName(property, variantPrefix) {
178
194
  return `--_sz-${prop}`;
179
195
  }
180
196
 
197
+ // src/color-validation.ts
198
+ var COLOR_STRING_KEYWORDS = /* @__PURE__ */ new Set([
199
+ "inherit",
200
+ "current",
201
+ "transparent",
202
+ "black",
203
+ "white",
204
+ "none"
205
+ ]);
206
+ function isValidColorString(value) {
207
+ if (COLOR_STRING_KEYWORDS.has(value)) {
208
+ return true;
209
+ }
210
+ if (value.startsWith("--")) {
211
+ return true;
212
+ }
213
+ if (value.startsWith("#")) {
214
+ return true;
215
+ }
216
+ if (value.startsWith("[") && value.endsWith("]")) {
217
+ return true;
218
+ }
219
+ if (/^(rgb|hsl|oklch|color|hwb|lab|lch|oklab)\(/.test(value)) {
220
+ return true;
221
+ }
222
+ if (/^[a-zA-Z][a-zA-Z0-9]*(-[a-zA-Z0-9]+)*-\d+$/.test(value)) {
223
+ return true;
224
+ }
225
+ return false;
226
+ }
227
+ function hasSlashOpacity(value) {
228
+ const slashIdx = value.indexOf("/");
229
+ if (slashIdx === -1) {
230
+ return false;
231
+ }
232
+ return slashIdx > 0 && /\d$/.test(value.slice(0, slashIdx));
233
+ }
234
+ function stripInvalidColorStrings(sz) {
235
+ const result = {};
236
+ for (const [key, value] of Object.entries(sz)) {
237
+ if (typeof value === "object" && value !== null && !Array.isArray(value)) {
238
+ result[key] = stripInvalidColorStrings(value);
239
+ continue;
240
+ }
241
+ if (typeof value === "string" && PROPERTY_CATEGORY_MAP[key] === 1 /* COLOR */) {
242
+ const strVal = value.replace(/!$/, "");
243
+ if (hasSlashOpacity(strVal)) {
244
+ if (process.env["NODE_ENV"] !== "production" && typeof window === "undefined") {
245
+ const slashIdx = strVal.indexOf("/");
246
+ const colorPart = strVal.slice(0, slashIdx);
247
+ const opPart = strVal.slice(slashIdx + 1);
248
+ console.warn(
249
+ `[csszyx] "${key}: '${strVal}'" \u2014 string slash opacity is not supported. Use object form: { color: '${colorPart}', op: ${opPart} }.`
250
+ );
251
+ }
252
+ continue;
253
+ }
254
+ if (!isValidColorString(strVal)) {
255
+ if (process.env["NODE_ENV"] !== "production" && typeof window === "undefined") {
256
+ console.warn(
257
+ `[csszyx] "${key}: '${strVal}'" is not a recognized color value and will be ignored. Use a Tailwind color ("blue-500"), CSS variable ("--my-color"), hex/rgb/hsl ("#ff0000"), or object form ({ color: "blue-500", op: 50 }).`
258
+ );
259
+ }
260
+ continue;
261
+ }
262
+ }
263
+ result[key] = value;
264
+ }
265
+ return result;
266
+ }
267
+
268
+ // src/transform.ts
269
+ import * as babel from "@babel/core";
270
+ import * as t from "@babel/types";
271
+
181
272
  // src/transform-core.ts
182
273
  var PROPERTY_MAP = {
183
274
  // Background
@@ -221,6 +312,8 @@ var PROPERTY_MAP = {
221
312
  borderY: "border-y",
222
313
  borderS: "border-s",
223
314
  borderE: "border-e",
315
+ borderBs: "border-bs",
316
+ borderBe: "border-be",
224
317
  // Divide
225
318
  divideX: "divide-x",
226
319
  divideY: "divide-y",
@@ -246,6 +339,8 @@ var PROPERTY_MAP = {
246
339
  py: "py",
247
340
  ps: "ps",
248
341
  pe: "pe",
342
+ pbs: "pbs",
343
+ pbe: "pbe",
249
344
  m: "m",
250
345
  mt: "mt",
251
346
  mr: "mr",
@@ -255,6 +350,8 @@ var PROPERTY_MAP = {
255
350
  my: "my",
256
351
  ms: "ms",
257
352
  me: "me",
353
+ mbs: "mbs",
354
+ mbe: "mbe",
258
355
  // Space between
259
356
  spaceX: "space-x",
260
357
  spaceY: "space-y",
@@ -266,6 +363,12 @@ var PROPERTY_MAP = {
266
363
  minH: "min-h",
267
364
  maxH: "max-h",
268
365
  size: "size",
366
+ blockSize: "block",
367
+ minBlockSize: "min-block",
368
+ maxBlockSize: "max-block",
369
+ inlineSize: "inline",
370
+ minInlineSize: "min-inline",
371
+ maxInlineSize: "max-inline",
269
372
  // Layout
270
373
  aspect: "aspect",
271
374
  columns: "columns",
@@ -295,8 +398,13 @@ var PROPERTY_MAP = {
295
398
  right: "right",
296
399
  bottom: "bottom",
297
400
  left: "left",
298
- start: "start",
299
- end: "end",
401
+ // TW v4.2: start/end now emit inset-s-*/inset-e-* (same CSS, deprecated old class names)
402
+ start: "inset-s",
403
+ end: "inset-e",
404
+ insetS: "inset-s",
405
+ insetE: "inset-e",
406
+ insetBs: "inset-bs",
407
+ insetBe: "inset-be",
300
408
  // Visibility
301
409
  visibility: "visibility",
302
410
  // Typography
@@ -324,6 +432,7 @@ var PROPERTY_MAP = {
324
432
  leading: "leading",
325
433
  tracking: "tracking",
326
434
  lineClamp: "line-clamp",
435
+ fontFeatures: "font-features",
327
436
  list: "list",
328
437
  listPos: "list",
329
438
  listImg: "list-image",
@@ -440,6 +549,10 @@ var PROPERTY_MAP = {
440
549
  scrollPe: "scroll-pe",
441
550
  scrollPx: "scroll-px",
442
551
  scrollPy: "scroll-py",
552
+ scrollPbs: "scroll-pbs",
553
+ scrollPbe: "scroll-pbe",
554
+ scrollMbs: "scroll-mbs",
555
+ scrollMbe: "scroll-mbe",
443
556
  snapAlign: "snap",
444
557
  snapStop: "snap",
445
558
  snapType: "snap",
@@ -888,6 +1001,8 @@ var NEGATIVE_ALLOWED = /* @__PURE__ */ new Set([
888
1001
  "my",
889
1002
  "ms",
890
1003
  "me",
1004
+ "mbs",
1005
+ "mbe",
891
1006
  "top",
892
1007
  "right",
893
1008
  "bottom",
@@ -895,8 +1010,11 @@ var NEGATIVE_ALLOWED = /* @__PURE__ */ new Set([
895
1010
  "inset",
896
1011
  "inset-x",
897
1012
  "inset-y",
898
- "start",
899
- "end",
1013
+ // TW v4.2: start/end now map to inset-s/inset-e
1014
+ "inset-s",
1015
+ "inset-e",
1016
+ "inset-bs",
1017
+ "inset-be",
900
1018
  "z",
901
1019
  "order",
902
1020
  "col",
@@ -1272,6 +1390,28 @@ function transform(szProp, prefix = "", mangleMap) {
1272
1390
  }
1273
1391
  continue;
1274
1392
  }
1393
+ if (typeof value === "string" && PROPERTY_CATEGORY_MAP[rawKey] === 1 /* COLOR */) {
1394
+ const strVal = value.replace(/!$/, "");
1395
+ if (hasSlashOpacity(strVal)) {
1396
+ if (process.env["NODE_ENV"] !== "production" && typeof window === "undefined") {
1397
+ const slashIdx = strVal.indexOf("/");
1398
+ const colorPart = strVal.slice(0, slashIdx);
1399
+ const opPart = strVal.slice(slashIdx + 1);
1400
+ console.warn(
1401
+ `[csszyx] "${rawKey}: '${strVal}'" \u2014 string slash opacity is not supported. Use object form: { color: '${colorPart}', op: ${opPart} }.`
1402
+ );
1403
+ }
1404
+ continue;
1405
+ }
1406
+ if (!isValidColorString(strVal)) {
1407
+ if (process.env["NODE_ENV"] !== "production" && typeof window === "undefined") {
1408
+ console.warn(
1409
+ `[csszyx] "${rawKey}: '${strVal}'" is not a recognized color value and will be ignored. Use a Tailwind color ("blue-500"), CSS variable ("--my-color"), hex/rgb/hsl ("#ff0000"), or object form ({ color: "blue-500", op: 50 }).`
1410
+ );
1411
+ }
1412
+ continue;
1413
+ }
1414
+ }
1275
1415
  if (typeof value === "object" && !Array.isArray(value)) {
1276
1416
  if (rawKey === "group") {
1277
1417
  const groupClasses = handleGroupPeer("group", value, prefix);
@@ -2428,8 +2568,9 @@ var CsszyxCompiler = class _CsszyxCompiler {
2428
2568
  */
2429
2569
  transform(sz) {
2430
2570
  if (this.wasmLoaded) {
2571
+ const cleaned = stripInvalidColorStrings(sz);
2431
2572
  try {
2432
- return transform_sz(sz);
2573
+ return transform_sz(cleaned);
2433
2574
  } catch (error) {
2434
2575
  console.warn(
2435
2576
  "[csszyx] WASM transformation failed, using JS fallback",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@csszyx/compiler",
3
- "version": "0.1.2",
3
+ "version": "0.2.0",
4
4
  "description": "Core compiler and transformation logic for csszyx",
5
5
  "keywords": [
6
6
  "csszyx",
@@ -38,7 +38,7 @@
38
38
  "@babel/core": "^7.23.7",
39
39
  "@babel/types": "^7.23.6",
40
40
  "@babel/traverse": "^7.23.7",
41
- "@csszyx/core": "0.1.2"
41
+ "@csszyx/core": "0.2.0"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@types/babel__core": "^7.20.5",