rnwind 0.0.7 → 0.0.9

package/lib/cjs/core/parser/transform.cjs

@@ -96,39 +96,48 @@ function angleToString(angle) {
 }
 /**
  * Convert a `NumberOrPercentage` to a plain number. Percentages become
- * their fractional equivalent (e.g. `50%` → `0.5`).
+ * their fractional equivalent (e.g. `50%` → `0.5`). Rounded so a literal
+ * like `scale-[1.7]` doesn't carry lightningcss's f32 noise
+ * (`1.7000000476837158`) into the RN `transform` array.
  * @param value Typed value.
  * @returns Plain number.
  */
 function numberOrPercentageToNumber(value) {
-    if (value.type === 'percentage')
-        return value.value;
-    return value.value;
+    return roundNumber(value.value);
 }
 /**
  * Convert a length-or-percentage used by translate into the shape RN
  * accepts (`number` for px, `string` for `%`). Percentages stay as
- * strings so RN layout can resolve them against the element size.
+ * strings so RN layout can resolve them against the element size. Pixel
+ * values are rounded to shed f32 noise (`3.3px` → `3.299999952…`).
  * @param value Typed length or percentage.
  * @returns RN-style translate value.
  */
 function lengthOrPercentToNumber(value) {
     if (value.type === 'dimension')
-        return length.lengthToPx(value.value);
+        return roundNumber(length.lengthToPx(value.value));
     if (value.type === 'value')
-        return length.lengthToPx(value.value);
+        return roundNumber(length.lengthToPx(value.value));
     if (value.type === 'percentage')
         return `${formatNumber(value.value * 100)}%`;
     return 0;
 }
+/**
+ * Round a number to 4 decimals — sheds lightningcss's f32 representation
+ * noise while staying well below subpixel / sub-percent precision.
+ * @param value Raw number.
+ * @returns Rounded number.
+ */
+function roundNumber(value) {
+    return Math.round(value * 10_000) / 10_000;
+}
 /**
  * Render a number without trailing IEEE noise.
  * @param value Number to format.
  * @returns Compact string form.
  */
 function formatNumber(value) {
-    const rounded = Math.round(value * 10_000) / 10_000;
-    return String(rounded);
+    return String(roundNumber(value));
 }
 /**
  * Convert lightningcss's typed `transform: ...` value into RN's

package/lib/cjs/core/parser/transform.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"transform.cjs","sources":["../../../../../src/core/parser/transform.ts"],"sourcesContent":["import type { Angle, LengthValue, NumberOrPercentage, Rotate, Scale, Transform, Translate } from 'lightningcss'\nimport type { RNEntry } from './types'\nimport { lengthToPx } from './length'\n\ntype RnTransformRecord = Record<string, string | number>\n\ntype DimensionPercent =\n  | { type: 'dimension'; value: LengthValue }\n  | { type: 'percentage'; value: number }\n  | { type: 'calc'; value: unknown }\n\n/**\n * Map a single typed transform function into zero-or-more RN transform\n * operations. Compound ops (like `translate`, `scale`, `skew`) expand\n * into per-axis entries the way RN expects them.\n * @param fn Typed transform function.\n * @returns RN transform operations.\n */\nfunction mapTransformFunction(fn: Transform): RnTransformRecord[] | null {\n  switch (fn.type) {\n    case 'rotate':\n    case 'rotateZ': {\n      return [{ rotate: angleToString(fn.value) }]\n    }\n    case 'rotateX': {\n      return [{ rotateX: angleToString(fn.value) }]\n    }\n    case 'rotateY': {\n      return [{ rotateY: angleToString(fn.value) }]\n    }\n    case 'scale': {\n      const [x, y] = fn.value\n      return [{ scaleX: numberOrPercentageToNumber(x) }, { scaleY: numberOrPercentageToNumber(y) }]\n    }\n    case 'scaleX': {\n      return [{ scaleX: numberOrPercentageToNumber(fn.value) }]\n    }\n    case 'scaleY': {\n      return [{ scaleY: numberOrPercentageToNumber(fn.value) }]\n    }\n    case 'translateX': {\n      return [{ translateX: lengthOrPercentToNumber(fn.value) }]\n    }\n    case 'translateY': {\n      return [{ translateY: lengthOrPercentToNumber(fn.value) }]\n    }\n    case 'translate': {\n      const [x, y] = fn.value\n      const out: RnTransformRecord[] = [{ translateX: lengthOrPercentToNumber(x) }]\n      if (y) out.push({ translateY: lengthOrPercentToNumber(y) })\n      return out\n    }\n    case 'translate3d': {\n      const [x, y] = fn.value\n      return [{ translateX: lengthOrPercentToNumber(x) }, { translateY: lengthOrPercentToNumber(y) }]\n    }\n    case 'skew': {\n      const [x, y] = fn.value\n      const out: RnTransformRecord[] = [{ skewX: angleToString(x) }]\n      if (y) out.push({ skewY: angleToString(y) })\n      return out\n    }\n    case 'skewX': {\n      return [{ skewX: angleToString(fn.value) }]\n    }\n    case 'skewY': {\n      return [{ skewY: angleToString(fn.value) }]\n    }\n    default: {\n      // RN doesn't have a direct equivalent for `matrix()` / `matrix3d()` /\n      // `perspective()` at the transform-op level — skip silently. Tailwind's\n      // generated transforms stay within rotate/translate/scale/skew.\n      return null\n    }\n  }\n}\n\n/**\n * Serialize a typed angle into the CSS degree string RN accepts\n * (`'45deg'`, `'0.5turn'` → `'180deg'`).\n * @param angle Typed angle.\n * @returns Degree string.\n */\nfunction angleToString(angle: Angle): string {\n  switch (angle.type) {\n    case 'deg': {\n      return `${formatNumber(angle.value)}deg`\n    }\n    case 'rad': {\n      return `${formatNumber((angle.value * 180) / Math.PI)}deg`\n    }\n    case 'grad': {\n      return `${formatNumber((angle.value * 360) / 400)}deg`\n    }\n    case 'turn': {\n      return `${formatNumber(angle.value * 360)}deg`\n    }\n    default: {\n      return '0deg'\n    }\n  }\n}\n\n/**\n * Convert a `NumberOrPercentage` to a plain number. Percentages become\n * their fractional equivalent (e.g. `50%` → `0.5`).\n * @param value Typed value.\n * @returns Plain number.\n */\nfunction numberOrPercentageToNumber(value: NumberOrPercentage): number {\n  if (value.type === 'percentage') return value.value\n  return value.value\n}\n\n/**\n * Convert a length-or-percentage used by translate into the shape RN\n * accepts (`number` for px, `string` for `%`). Percentages stay as\n * strings so RN layout can resolve them against the element size.\n * @param value Typed length or percentage.\n * @returns RN-style translate value.\n */\nfunction lengthOrPercentToNumber(value: DimensionPercent | { type: 'value'; value: LengthValue }): number | string {\n  if (value.type === 'dimension') return lengthToPx(value.value)\n  if (value.type === 'value') return lengthToPx(value.value)\n  if (value.type === 'percentage') return `${formatNumber(value.value * 100)}%`\n  return 0\n}\n\n/**\n * Render a number without trailing IEEE noise.\n * @param value Number to format.\n * @returns Compact string form.\n */\nfunction formatNumber(value: number): string {\n  const rounded = Math.round(value * 10_000) / 10_000\n  return String(rounded)\n}\n\n/**\n * Convert lightningcss's typed `transform: ...` value into RN's\n * `transform: [{ op: value }, ...]` array. RN supports a restricted subset\n * of CSS transforms — this function picks out the ones it actually\n * handles and drops the rest.\n *\n * Reanimated v4's CSS engine reads this same array shape, so the output\n * is drop-in for both static RN `style` props and `Animated.View` styles.\n * @param fns Typed transform function list.\n * @returns Zero-or-one RN entry with the `transform` array.\n */\nexport function transformFunctionsToEntries(fns: readonly Transform[]): readonly RNEntry[] {\n  const ops: RnTransformRecord[] = []\n  for (const fn of fns) {\n    const mapped = mapTransformFunction(fn)\n    if (mapped) ops.push(...mapped)\n  }\n  if (ops.length === 0) return []\n  return [['transform', ops]]\n}\n\n/**\n * Convert Tailwind v4's typed `rotate: ...` (individual property) into\n * the RN transform array. Tailwind's `rotate-*` utilities emit this\n * property rather than the classic `transform: rotate(...)` shorthand.\n * @param value Typed rotate value.\n * @returns Zero-or-one RN entry.\n */\nexport function rotateToEntries(value: Rotate | 'none'): readonly RNEntry[] {\n  if (value === 'none') return []\n  return [['transform', [{ rotate: angleToString(value.angle) }]]]\n}\n\n/**\n * Convert Tailwind v4's typed `translate: ...` into the RN transform\n * array. Both axes are emitted as separate ops so each is independently\n * animatable by Reanimated.\n * @param value Typed translate value.\n * @returns Zero-or-one RN entry.\n */\nexport function translateToEntries(value: Translate | 'none'): readonly RNEntry[] {\n  if (value === 'none') return []\n  const ops: RnTransformRecord[] = [{ translateX: lengthOrPercentToNumber(value.x) }]\n  const yNumber = lengthOrPercentToNumber(value.y)\n  if (yNumber !== 0) ops.push({ translateY: yNumber })\n  return [['transform', ops]]\n}\n\n/**\n * Convert Tailwind v4's typed `scale: ...` into the RN transform array.\n * @param value Typed scale value.\n * @returns Zero-or-one RN entry.\n */\nexport function scaleToEntries(value: Scale | 'none'): readonly RNEntry[] {\n  if (value === 'none') return []\n  return [['transform', [{ scaleX: numberOrPercentageToNumber(value.x) }, { scaleY: numberOrPercentageToNumber(value.y) }]]]\n}\n"],"names":["lengthToPx"],"mappings":";;;;AAWA;;;;;;AAMG;AACH,SAAS,oBAAoB,CAAC,EAAa,EAAA;AACzC,IAAA,QAAQ,EAAE,CAAC,IAAI;AACb,QAAA,KAAK,QAAQ;QACb,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,CAAC,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;QAC9C;QACA,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,CAAC,EAAE,OAAO,EAAE,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;QAC/C;QACA,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,CAAC,EAAE,OAAO,EAAE,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;QAC/C;QACA,KAAK,OAAO,EAAE;YACZ,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK;AACvB,YAAA,OAAO,CAAC,EAAE,MAAM,EAAE,0BAA0B,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/F;QACA,KAAK,QAAQ,EAAE;AACb,YAAA,OAAO,CAAC,EAAE,MAAM,EAAE,0BAA0B,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;QAC3D;QACA,KAAK,QAAQ,EAAE;AACb,YAAA,OAAO,CAAC,EAAE,MAAM,EAAE,0BAA0B,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;QAC3D;QACA,KAAK,YAAY,EAAE;AACjB,YAAA,OAAO,CAAC,EAAE,UAAU,EAAE,uBAAuB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;QAC5D;QACA,KAAK,YAAY,EAAE;AACjB,YAAA,OAAO,CAAC,EAAE,UAAU,EAAE,uBAAuB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;QAC5D;QACA,KAAK,WAAW,EAAE;YAChB,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK;AACvB,YAAA,MAAM,GAAG,GAAwB,CAAC,EAAE,UAAU,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC;AAC7E,YAAA,IAAI,CAAC;AAAE,gBAAA,GAAG,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC;AAC3D,YAAA,OAAO,GAAG;QACZ;QACA,KAAK,aAAa,EAAE;YAClB,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK;AACvB,YAAA,OAAO,CAAC,EAAE,UAAU,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC;QACjG;QACA,KAAK,MAAM,EAAE;YACX,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK;AACvB,YAAA,MAAM,GAAG,GAAwB,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;AAC9D,YAAA,IAAI,CAAC;AAAE,gBAAA,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;AAC5C,YAAA,OAAO,GAAG;QACZ;QACA,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;QAC7C;QACA,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;QAC7C;QACA,SAAS;;;;AAIP,YAAA,OAAO,IAAI;QACb;;AAEJ;AAEA;;;;;AAKG;AACH,SAAS,aAAa,CAAC,KAAY,EAAA;AACjC,IAAA,QAAQ,KAAK,CAAC,IAAI;QAChB,KAAK,KAAK,EAAE;YACV,OAAO,CAAA,EAAG,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK;QAC1C;QACA,KAAK,KAAK,EAAE;AACV,YAAA,OAAO,GAAG,YAAY,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK;QAC5D;QACA,KAAK,MAAM,EAAE;AACX,YAAA,OAAO,CAAA,EAAG,YAAY,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,GAAG,CAAC,KAAK;QACxD;QACA,KAAK,MAAM,EAAE;YACX,OAAO,CAAA,EAAG,YAAY,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,CAAA,GAAA,CAAK;QAChD;QACA,SAAS;AACP,YAAA,OAAO,MAAM;QACf;;AAEJ;AAEA;;;;;AAKG;AACH,SAAS,0BAA0B,CAAC,KAAyB,EAAA;AAC3D,IAAA,IAAI,KAAK,CAAC,IAAI,KAAK,YAAY;QAAE,OAAO,KAAK,CAAC,KAAK;IACnD,OAAO,KAAK,CAAC,KAAK;AACpB;AAEA;;;;;;AAMG;AACH,SAAS,uBAAuB,CAAC,KAA+D,EAAA;AAC9F,IAAA,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW;AAAE,QAAA,OAAOA,iBAAU,CAAC,KAAK,CAAC,KAAK,CAAC;AAC9D,IAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;AAAE,QAAA,OAAOA,iBAAU,CAAC,KAAK,CAAC,KAAK,CAAC;AAC1D,IAAA,IAAI,KAAK,CAAC,IAAI,KAAK,YAAY;QAAE,OAAO,CAAA,EAAG,YAAY,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,CAAA,CAAA,CAAG;AAC7E,IAAA,OAAO,CAAC;AACV;AAEA;;;;AAIG;AACH,SAAS,YAAY,CAAC,KAAa,EAAA;AACjC,IAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,MAAM;AACnD,IAAA,OAAO,MAAM,CAAC,OAAO,CAAC;AACxB;AAEA;;;;;;;;;;AAUG;AACG,SAAU,2BAA2B,CAAC,GAAyB,EAAA;IACnE,MAAM,GAAG,GAAwB,EAAE;AACnC,IAAA,KAAK,MAAM,EAAE,IAAI,GAAG,EAAE;AACpB,QAAA,MAAM,MAAM,GAAG,oBAAoB,CAAC,EAAE,CAAC;AACvC,QAAA,IAAI,MAAM;AAAE,YAAA,GAAG,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC;IACjC;AACA,IAAA,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,EAAE;AAC/B,IAAA,OAAO,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;AAC7B;AAEA;;;;;;AAMG;AACG,SAAU,eAAe,CAAC,KAAsB,EAAA;IACpD,IAAI,KAAK,KAAK,MAAM;AAAE,QAAA,OAAO,EAAE;AAC/B,IAAA,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;AAClE;AAEA;;;;;;AAMG;AACG,SAAU,kBAAkB,CAAC,KAAyB,EAAA;IAC1D,IAAI,KAAK,KAAK,MAAM;AAAE,QAAA,OAAO,EAAE;AAC/B,IAAA,MAAM,GAAG,GAAwB,CAAC,EAAE,UAAU,EAAE,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IACnF,MAAM,OAAO,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC;IAChD,IAAI,OAAO,KAAK,CAAC;QAAE,GAAG,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC;AACpD,IAAA,OAAO,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;AAC7B;AAEA;;;;AAIG;AACG,SAAU,cAAc,CAAC,KAAqB,EAAA;IAClD,IAAI,KAAK,KAAK,MAAM;AAAE,QAAA,OAAO,EAAE;AAC/B,IAAA,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,0BAA0B,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,0BAA0B,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5H;;;;;;;"}
+{"version":3,"file":"transform.cjs","sources":["../../../../../src/core/parser/transform.ts"],"sourcesContent":["import type { Angle, LengthValue, NumberOrPercentage, Rotate, Scale, Transform, Translate } from 'lightningcss'\nimport type { RNEntry } from './types'\nimport { lengthToPx } from './length'\n\ntype RnTransformRecord = Record<string, string | number>\n\ntype DimensionPercent =\n  | { type: 'dimension'; value: LengthValue }\n  | { type: 'percentage'; value: number }\n  | { type: 'calc'; value: unknown }\n\n/**\n * Map a single typed transform function into zero-or-more RN transform\n * operations. Compound ops (like `translate`, `scale`, `skew`) expand\n * into per-axis entries the way RN expects them.\n * @param fn Typed transform function.\n * @returns RN transform operations.\n */\nfunction mapTransformFunction(fn: Transform): RnTransformRecord[] | null {\n  switch (fn.type) {\n    case 'rotate':\n    case 'rotateZ': {\n      return [{ rotate: angleToString(fn.value) }]\n    }\n    case 'rotateX': {\n      return [{ rotateX: angleToString(fn.value) }]\n    }\n    case 'rotateY': {\n      return [{ rotateY: angleToString(fn.value) }]\n    }\n    case 'scale': {\n      const [x, y] = fn.value\n      return [{ scaleX: numberOrPercentageToNumber(x) }, { scaleY: numberOrPercentageToNumber(y) }]\n    }\n    case 'scaleX': {\n      return [{ scaleX: numberOrPercentageToNumber(fn.value) }]\n    }\n    case 'scaleY': {\n      return [{ scaleY: numberOrPercentageToNumber(fn.value) }]\n    }\n    case 'translateX': {\n      return [{ translateX: lengthOrPercentToNumber(fn.value) }]\n    }\n    case 'translateY': {\n      return [{ translateY: lengthOrPercentToNumber(fn.value) }]\n    }\n    case 'translate': {\n      const [x, y] = fn.value\n      const out: RnTransformRecord[] = [{ translateX: lengthOrPercentToNumber(x) }]\n      if (y) out.push({ translateY: lengthOrPercentToNumber(y) })\n      return out\n    }\n    case 'translate3d': {\n      const [x, y] = fn.value\n      return [{ translateX: lengthOrPercentToNumber(x) }, { translateY: lengthOrPercentToNumber(y) }]\n    }\n    case 'skew': {\n      const [x, y] = fn.value\n      const out: RnTransformRecord[] = [{ skewX: angleToString(x) }]\n      if (y) out.push({ skewY: angleToString(y) })\n      return out\n    }\n    case 'skewX': {\n      return [{ skewX: angleToString(fn.value) }]\n    }\n    case 'skewY': {\n      return [{ skewY: angleToString(fn.value) }]\n    }\n    default: {\n      // RN doesn't have a direct equivalent for `matrix()` / `matrix3d()` /\n      // `perspective()` at the transform-op level — skip silently. Tailwind's\n      // generated transforms stay within rotate/translate/scale/skew.\n      return null\n    }\n  }\n}\n\n/**\n * Serialize a typed angle into the CSS degree string RN accepts\n * (`'45deg'`, `'0.5turn'` → `'180deg'`).\n * @param angle Typed angle.\n * @returns Degree string.\n */\nfunction angleToString(angle: Angle): string {\n  switch (angle.type) {\n    case 'deg': {\n      return `${formatNumber(angle.value)}deg`\n    }\n    case 'rad': {\n      return `${formatNumber((angle.value * 180) / Math.PI)}deg`\n    }\n    case 'grad': {\n      return `${formatNumber((angle.value * 360) / 400)}deg`\n    }\n    case 'turn': {\n      return `${formatNumber(angle.value * 360)}deg`\n    }\n    default: {\n      return '0deg'\n    }\n  }\n}\n\n/**\n * Convert a `NumberOrPercentage` to a plain number. Percentages become\n * their fractional equivalent (e.g. `50%` → `0.5`). Rounded so a literal\n * like `scale-[1.7]` doesn't carry lightningcss's f32 noise\n * (`1.7000000476837158`) into the RN `transform` array.\n * @param value Typed value.\n * @returns Plain number.\n */\nfunction numberOrPercentageToNumber(value: NumberOrPercentage): number {\n  return roundNumber(value.value)\n}\n\n/**\n * Convert a length-or-percentage used by translate into the shape RN\n * accepts (`number` for px, `string` for `%`). Percentages stay as\n * strings so RN layout can resolve them against the element size. Pixel\n * values are rounded to shed f32 noise (`3.3px` → `3.299999952…`).\n * @param value Typed length or percentage.\n * @returns RN-style translate value.\n */\nfunction lengthOrPercentToNumber(value: DimensionPercent | { type: 'value'; value: LengthValue }): number | string {\n  if (value.type === 'dimension') return roundNumber(lengthToPx(value.value))\n  if (value.type === 'value') return roundNumber(lengthToPx(value.value))\n  if (value.type === 'percentage') return `${formatNumber(value.value * 100)}%`\n  return 0\n}\n\n/**\n * Round a number to 4 decimals — sheds lightningcss's f32 representation\n * noise while staying well below subpixel / sub-percent precision.\n * @param value Raw number.\n * @returns Rounded number.\n */\nfunction roundNumber(value: number): number {\n  return Math.round(value * 10_000) / 10_000\n}\n\n/**\n * Render a number without trailing IEEE noise.\n * @param value Number to format.\n * @returns Compact string form.\n */\nfunction formatNumber(value: number): string {\n  return String(roundNumber(value))\n}\n\n/**\n * Convert lightningcss's typed `transform: ...` value into RN's\n * `transform: [{ op: value }, ...]` array. RN supports a restricted subset\n * of CSS transforms — this function picks out the ones it actually\n * handles and drops the rest.\n *\n * Reanimated v4's CSS engine reads this same array shape, so the output\n * is drop-in for both static RN `style` props and `Animated.View` styles.\n * @param fns Typed transform function list.\n * @returns Zero-or-one RN entry with the `transform` array.\n */\nexport function transformFunctionsToEntries(fns: readonly Transform[]): readonly RNEntry[] {\n  const ops: RnTransformRecord[] = []\n  for (const fn of fns) {\n    const mapped = mapTransformFunction(fn)\n    if (mapped) ops.push(...mapped)\n  }\n  if (ops.length === 0) return []\n  return [['transform', ops]]\n}\n\n/**\n * Convert Tailwind v4's typed `rotate: ...` (individual property) into\n * the RN transform array. Tailwind's `rotate-*` utilities emit this\n * property rather than the classic `transform: rotate(...)` shorthand.\n * @param value Typed rotate value.\n * @returns Zero-or-one RN entry.\n */\nexport function rotateToEntries(value: Rotate | 'none'): readonly RNEntry[] {\n  if (value === 'none') return []\n  return [['transform', [{ rotate: angleToString(value.angle) }]]]\n}\n\n/**\n * Convert Tailwind v4's typed `translate: ...` into the RN transform\n * array. Both axes are emitted as separate ops so each is independently\n * animatable by Reanimated.\n * @param value Typed translate value.\n * @returns Zero-or-one RN entry.\n */\nexport function translateToEntries(value: Translate | 'none'): readonly RNEntry[] {\n  if (value === 'none') return []\n  const ops: RnTransformRecord[] = [{ translateX: lengthOrPercentToNumber(value.x) }]\n  const yNumber = lengthOrPercentToNumber(value.y)\n  if (yNumber !== 0) ops.push({ translateY: yNumber })\n  return [['transform', ops]]\n}\n\n/**\n * Convert Tailwind v4's typed `scale: ...` into the RN transform array.\n * @param value Typed scale value.\n * @returns Zero-or-one RN entry.\n */\nexport function scaleToEntries(value: Scale | 'none'): readonly RNEntry[] {\n  if (value === 'none') return []\n  return [['transform', [{ scaleX: numberOrPercentageToNumber(value.x) }, { scaleY: numberOrPercentageToNumber(value.y) }]]]\n}\n"],"names":["lengthToPx"],"mappings":"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"}

package/lib/cjs/core/parser/tw-parser.cjs

@@ -12,6 +12,7 @@ var property = require('./property.cjs');
 var selector = require('./selector.cjs');
 var themeVars = require('./theme-vars.cjs');
 var tokens = require('./tokens.cjs');
+var color = require('./color.cjs');
 
 /**
  * Default LightningCSS transform options for TailwindParser's visitor.
@@ -283,7 +284,8 @@ class TailwindParser {
                                 // surface their role + resolved colour so the transformer
                                 // can rewrite `<LinearGradient className="...">` into
                                 // `colors={...}` / `start={...}` / `end={...}` props.
-                                const gradient$1 = gradient.detectGradientAtom(rule.value.declarations.declarations);
+                                const gradientTable = schemeTables.get(themeVars.BASE_SCHEME) ?? schemeTables.get(schemes[0] ?? themeVars.BASE_SCHEME);
+                                const gradient$1 = gradient.detectGradientAtom(rule.value.declarations.declarations, gradientTable);
                                 if (gradient$1)
                                     gradientAtoms.set(className, gradient$1);
                                 // Haptics may live on the rule directly OR inside a
@@ -304,8 +306,8 @@ class TailwindParser {
                             const steps = [];
                             const baseTable = schemeTables.get(themeVars.BASE_SCHEME) ?? schemeTables.get(schemes[0] ?? themeVars.BASE_SCHEME);
                             for (const frame of rule.value.keyframes) {
-                                const offset = keyframes.keyframeSelectorOffset(frame.selectors);
-                                if (!offset)
+                                const offsets = keyframes.keyframeSelectorOffsets(frame.selectors);
+                                if (offsets.length === 0)
                                     continue;
                                 const style = {};
                                 const frameDecls = frame.declarations.declarations ?? [];
@@ -313,7 +315,10 @@ class TailwindParser {
                                     for (const [key, value] of declaration.declarationToRnEntries(decl, baseTable))
                                         style[key] = value;
                                 }
-                                steps.push({ offset, style });
+                                // One frame can carry several offsets (`0%, 100% { … }`); emit a
+                                // step for each so the terminal frame isn't lost.
+                                for (const offset of offsets)
+                                    steps.push({ offset, style });
                             }
                             keyframes$1.set(name, { name, steps });
                         },
@@ -454,8 +459,8 @@ function processStyleRule(declarations, className, ctx, nestedRules = []) {
             ctx.referencedKeyframes.add(animationRef);
     }
     applyComposedTransform(bucket, ctx.schemes, ruleLocalVars);
-    applyComposedShadow(bucket, ctx.schemes, ruleLocalVars);
-    applyComposedRing(bucket, ctx.schemes, ruleLocalVars);
+    applyComposedShadow(bucket, ctx.schemes, ruleLocalVars, ruleSchemeTables);
+    applyComposedRing(bucket, ctx.schemes, ruleLocalVars, ruleSchemeTables);
     // Phase 2: nested rules — three orthogonal flavours, dispatched on
     // the lightningcss node `type`:
     //  - `media`: Tailwind v4 responsive variants (`sm:`, `md:`, …) wrap
@@ -600,7 +605,7 @@ function applyMediaRule(nested, className, bucket, ctx, ruleSchemeTables, ruleLo
         for (const [k, v] of collectRuleLocalVars(decls))
             nestedLocalVars.set(k, v);
         applyComposedTransformToScheme(schemeBucket, nestedLocalVars);
-        applyComposedShadowToScheme(schemeBucket, nestedLocalVars);
+        applyComposedShadowToScheme(schemeBucket, nestedLocalVars, table);
         bucket[scheme] = schemeBucket;
     }
 }
@@ -637,7 +642,7 @@ function applyInteractiveNestedRule(nested, bucket, ctx, ruleSchemeTables, ruleL
         for (const [k, v] of collectRuleLocalVars(decls))
             nestedLocalVars.set(k, v);
         applyComposedTransformToScheme(schemeBucket, nestedLocalVars);
-        applyComposedShadowToScheme(schemeBucket, nestedLocalVars);
+        applyComposedShadowToScheme(schemeBucket, nestedLocalVars, table);
         bucket[scheme] = schemeBucket;
     }
 }
@@ -703,7 +708,7 @@ function applyNestedSchemeRule(nested, bucket, ctx, ruleSchemeTables, ruleLocalV
     for (const [k, v] of collectRuleLocalVars(innerDecls))
         nestedLocalVars.set(k, v);
     applyComposedTransformToScheme(schemeBucket, nestedLocalVars);
-    applyComposedShadowToScheme(schemeBucket, nestedLocalVars);
+    applyComposedShadowToScheme(schemeBucket, nestedLocalVars, table);
     bucket[targetScheme] = schemeBucket;
 }
 /**
@@ -804,12 +809,13 @@ function applyComposedTransformToScheme(style, ruleLocalVars) {
  * prop.
  * @param style Scheme-specific style map.
  * @param ruleLocalVars Combined outer+nested `--tw-*` vars.
+ * @param table Per-scheme var table for resolving `var(--color-x)` in colors.
  */
-function applyComposedShadowToScheme(style, ruleLocalVars) {
+function applyComposedShadowToScheme(style, ruleLocalVars, table) {
     const rawShadow = ruleLocalVars.get('--tw-shadow');
     const rawShadowColor = ruleLocalVars.get('--tw-shadow-color');
     if (!rawShadow && rawShadowColor) {
-        const color = resolveCustomColorString(rawShadowColor);
+        const color = resolveCustomColorString(rawShadowColor, table);
         if (!color)
             return;
         delete style.boxShadow;
@@ -838,8 +844,9 @@ function applyComposedShadowToScheme(style, ruleLocalVars) {
  * @param bucket Per-scheme style map for the atom.
  * @param schemes Scheme names active for this parse.
  * @param ruleLocalVars Rule-local `--tw-*` vars.
+ * @param schemeTables Per-scheme var tables for resolving `var(--color-x)`.
  */
-function applyComposedShadow(bucket, schemes, ruleLocalVars) {
+function applyComposedShadow(bucket, schemes, ruleLocalVars, schemeTables) {
     const rawShadow = ruleLocalVars.get('--tw-shadow');
     const rawShadowColor = ruleLocalVars.get('--tw-shadow-color');
     // Color-only utility (`shadow-red-50`, `shadow-gray-200`, …): emit
@@ -848,10 +855,11 @@ function applyComposedShadow(bucket, schemes, ruleLocalVars) {
     // where setting `--tw-shadow-color` swaps in a solid color). Offset /
     // blur / elevation come from the partner size utility's atom.
     if (!rawShadow && rawShadowColor) {
-        const color = resolveCustomColorString(rawShadowColor);
-        if (!color)
-            return;
         for (const scheme of schemes) {
+            // Resolve per scheme — a custom token may differ between light/dark.
+            const color = resolveCustomColorString(rawShadowColor, schemeTables.get(scheme));
+            if (!color)
+                continue;
             const style = bucket[scheme] ?? {};
             delete style.boxShadow;
             style.shadowColor = color;
@@ -884,35 +892,62 @@ function applyComposedShadow(bucket, schemes, ruleLocalVars) {
  * @param bucket Per-scheme style map for the atom.
  * @param schemes Scheme names active for this parse.
  * @param ruleLocalVars Rule-local `--tw-*` vars.
+ * @param schemeTables Per-scheme var tables for resolving `var(--color-x)`.
  */
-function applyComposedRing(bucket, schemes, ruleLocalVars) {
+function applyComposedRing(bucket, schemes, ruleLocalVars, schemeTables) {
     const ringColor = ruleLocalVars.get('--tw-ring-color');
     if (!ringColor)
         return;
-    const color = resolveCustomColorString(ringColor);
-    if (!color)
-        return;
     for (const scheme of schemes) {
+        // Resolve per scheme — a custom token may differ between light/dark.
+        const color = resolveCustomColorString(ringColor, schemeTables.get(scheme));
+        if (!color)
+            continue;
         const style = bucket[scheme] ?? {};
         if (!('borderColor' in style))
             style.borderColor = color;
         bucket[scheme] = style;
     }
 }
+/**
+ * Tailwind composable shadow/inset-shadow alpha defaults. Their `100%` lives
+ * in an `@property` initial-value (not the rule's local vars), so after the
+ * `@supports` color-mix is unwrapped, `var(--tw-shadow-alpha)` is left dangling
+ * and the shadow color fails to resolve. Seed the default; a `/<opacity>`
+ * modifier still wins because the in-rule table value overrides it.
+ */
+const COMPOSABLE_ALPHA_DEFAULTS = new Map([
+    ['--tw-shadow-alpha', '100%'],
+    ['--tw-inset-shadow-alpha', '100%'],
+]);
 /**
  * Resolve a CSS color string (`oklch(0.971 0.013 17.38)`, `#ff0000`,
  * `rgb(0 0 0 / 0.1)`) to the hex string RN's `shadowColor` accepts.
  * Wraps culori's parser via {@link parseCssColorToHex}.
- * @param raw Raw color text from a `--tw-shadow-color` custom prop.
+ *
+ * Custom `@theme` color tokens arrive as `var(--color-x)` (only the default
+ * palette is `theme(inline)`-d), so `table` is substituted FIRST — without it
+ * `shadow-<token>` / `ring-<token>` silently drop the color (culori can't
+ * parse a bare `var()`). The table is per-scheme so a token that differs
+ * between light/dark resolves to the right value for each.
+ * @param raw Raw color text from a `--tw-shadow-color` / `--tw-ring-color` prop.
+ * @param table Per-scheme var table for resolving `var(--color-x)` references.
  * @returns `#rrggbb` string, or null when culori can't parse it.
  */
-function resolveCustomColorString(raw) {
-    const text = unwrapVariableFallback(raw).trim();
-    if (text.length === 0)
+function resolveCustomColorString(raw, table) {
+    const seeded = new Map([...COMPOSABLE_ALPHA_DEFAULTS, ...(table ?? [])]);
+    const substituted = tokens.substituteThemeVars(raw, seeded);
+    // `coerceUnparsedValue` collapses Tailwind's opacity shape
+    // `color-mix(in oklab, <color> <pct>%, transparent)` (emitted by
+    // `shadow-<token>` / `ring-<token>`) to a flat rgba/hex and unwraps
+    // `var(…, fallback)`. Modern spaces (`oklch(…)`) then lower via
+    // `normalizeColorString`; anything still un-RN-safe falls to culori.
+    const coerced = tokens.coerceUnparsedValue(unwrapVariableFallback(substituted).trim());
+    if (typeof coerced !== 'string' || coerced.length === 0 || coerced.startsWith('var('))
         return null;
-    if (text.startsWith('#'))
-        return text;
-    return parseCssColorToHex(text);
+    if (coerced.startsWith('#') || coerced.startsWith('rgb') || coerced.startsWith('hsl'))
+        return coerced;
+    return color.normalizeColorString(coerced) ?? parseCssColorToHex(coerced);
 }
 /**
  * Parse any CSS color expression into an `#rrggbb` string via culori.
@@ -1018,6 +1053,12 @@ function parseShadowColor(expr) {
         return rgba;
     if (working.startsWith('#'))
         return { color: working, opacity: 1 };
+    // Named (`red`) / modern (`hsl(…)`, `oklch(…)`) colors — culori → sRGB hex.
+    // Without this they fell to the default black at 0.1 alpha, silently losing
+    // the user's `shadow-[0_2px_4px_red]` color.
+    const hex = formatHexSafe(working);
+    if (hex)
+        return { color: hex, opacity: 1 };
     return { color: '#000', opacity: 0.1 };
 }
 /**
@@ -1222,8 +1263,8 @@ function resolveLengthExpression(text) {
     if (evaluated.unit === '%')
         return `${stripTrailingZeros(evaluated.value)}%`;
     if (evaluated.unit === 'rem')
-        return evaluated.value * 16;
-    return evaluated.value;
+        return roundTransformValue(evaluated.value * 16);
+    return roundTransformValue(evaluated.value);
 }
 /**
  * Evaluate a CSS length expression to a `{value, unit}` pair.
@@ -1450,19 +1491,38 @@ function parseArithmeticFactor(tokens, cursor) {
     return number_;
 }
 /**
- * Resolve a scale factor expressed as a percentage (`150%`) or number (`1.5`).
+ * Resolve a scale factor expressed as a percentage (`150%`), number (`1.5`),
+ * or a `calc()` expression. Tailwind emits NEGATIVE scale utilities as a calc
+ * (`-scale-x-100` → `calc(100% * -1)`), so a plain percent/number regex
+ * silently dropped them — `-scale-*` (the horizontal-flip idiom) rendered
+ * nothing. Fall back to the shared arithmetic evaluator, reading `%` as a
+ * fraction (`100%` → 1) and rounding off f32 noise.
  * @param text Raw value.
- * @returns Scale number (e.g. 1.5 for 150%), or null.
+ * @returns Scale number (e.g. 1.5 for 150%, -1 for `calc(100% * -1)`), or null.
  */
 function resolveNumberOrPercent(text) {
     const trimmed = text.trim();
     const percent = /^(-?\d+(?:\.\d+)?)%$/.exec(trimmed);
     if (percent)
-        return Number(percent[1]) / 100;
+        return roundTransformValue(Number(percent[1]) / 100);
     const bare = /^-?\d+(?:\.\d+)?$/.exec(trimmed);
     if (bare)
-        return Number(trimmed);
-    return null;
+        return roundTransformValue(Number(trimmed));
+    const evaluated = evaluateLengthExpr(trimmed);
+    if (!evaluated || evaluated.unit === 'rem')
+        return null;
+    return roundTransformValue(evaluated.unit === '%' ? evaluated.value / 100 : evaluated.value);
+}
+/**
+ * Round a composed-transform numeric value to 4 decimals. lightningcss
+ * serializes arbitrary literals (`scale-x-[0.333]`) back as noisy f32 text
+ * (`0.3330000042915344`), and the resolvers `Number()` that verbatim — round
+ * so the RN `transform` array stays clean.
+ * @param value Raw number.
+ * @returns Rounded number.
+ */
+function roundTransformValue(value) {
+    return Math.round(value * 10_000) / 10_000;
 }
 /**
  * Extract the angle from Tailwind's `skewX(12deg)` / `skewY(-5deg)` /