react-native-css 0.0.0-nightly.d6f42ab → 0.0.0-nightly.eda2b28

package/src/compiler/declarations.ts

@@ -37,6 +37,7 @@ import type {
 } from "lightningcss";
 
 import { isStyleFunction } from "../utilities";
+import { isMappingProperty } from "./atRules";
 import type {
   StyleDescriptor,
   StyleFunction,
@@ -62,12 +63,37 @@ type Parser<T extends Declaration["property"] = Declaration["property"]> = (
 
 const propertyRename: Record<string, string> = {
   "background-image": "experimental_backgroundImage",
+  // React Native has no border-inline-* props, but ships the equivalent
+  // RTL-aware border-start-* / border-end-* props
+  "border-inline-end-color": "border-end-color",
+  "border-inline-end-width": "border-end-width",
+  "border-inline-start-color": "border-start-color",
+  "border-inline-start-width": "border-start-width",
+  "border-block-start-width": "border-top-width",
+  "border-block-end-width": "border-bottom-width",
+  "font-variant-caps": "font-variant",
 };
 
+// React Native only supports a uniform borderStyle, so per-side border
+// styles have no native equivalent and are dropped. "solid" is dropped
+// silently as it matches React Native's default rendering.
+const unsupportedLogicalStyles = new Set([
+  "border-inline-style",
+  "border-inline-start-style",
+  "border-inline-end-style",
+  "border-block-style",
+  "border-block-start-style",
+  "border-block-end-style",
+]);
+
 const unparsedRuntimeParsing = new Set([
   "animation",
+  "animation-name",
   "border",
+  "border-block-width",
+  "border-inline-width",
   "box-shadow",
+  "filter",
   "line-height",
   "rotate",
   "scale",
@@ -101,10 +127,11 @@ const parsers: {
   "border-block-color": parseBorderColor,
   "border-block-end": parseBorderBlockEnd,
   "border-block-end-color": parseColorDeclaration,
+  "border-block-end-style": parseBorderInlineStyle,
   "border-block-end-width": parseBorderSideWidthDeclaration,
   "border-block-start": parseBorderBlockStart,
   "border-block-start-color": parseColorDeclaration,
-  "border-block-start-style": parseBorderStyleDeclaration,
+  "border-block-start-style": parseBorderInlineStyle,
   "border-block-start-width": parseBorderSideWidthDeclaration,
   "border-block-style": parseBorderBlockStyle,
   "border-block-width": parseBorderBlockWidth,
@@ -320,11 +347,11 @@ function parseInsetInline(
   builder: StylesheetBuilder,
 ) {
   builder.addShorthand("inset-inline", {
-    "inset-block-start": parseLengthPercentageOrAuto(
+    "inset-inline-start": parseLengthPercentageOrAuto(
       value.inlineStart,
       builder,
     ),
-    "inset-block-end": parseLengthPercentageOrAuto(value.inlineEnd, builder),
+    "inset-inline-end": parseLengthPercentageOrAuto(value.inlineEnd, builder),
   });
 }
 
@@ -381,14 +408,14 @@ function parseBorderColor(
     const start = parseColor(declaration.value.start, builder);
     const end = parseColor(declaration.value.end, builder);
 
-    if (start === end) {
+    if (declaration.property === "border-inline-color") {
+      builder.addDescriptor("border-start-color", start);
+      builder.addDescriptor("border-end-color", end);
+    } else if (start === end) {
       builder.addDescriptor(declaration.property, start);
-    } else if (declaration.property === "border-block-color") {
+    } else {
       builder.addDescriptor("border-top-color", start);
       builder.addDescriptor("border-bottom-color", end);
-    } else {
-      builder.addDescriptor("border-left-color", start);
-      builder.addDescriptor("border-right-color", end);
     }
   }
 }
@@ -437,13 +464,13 @@ function parseBorderBlock(
   builder: StylesheetBuilder,
 ) {
   builder.addDescriptor("border-block-color", parseColor(value.color, builder));
-  builder.addDescriptor(
-    "border-block-width",
-    parseBorderSideWidth(value.width, builder),
-  );
-  builder.addDescriptor(
-    "border-block-style",
+  const width = parseBorderSideWidth(value.width, builder);
+  builder.addDescriptor("border-top-width", width);
+  builder.addDescriptor("border-bottom-width", width);
+  dropUnsupportedInlineStyle(
     parseBorderStyle(value.style, builder),
+    builder,
+    "border-block-style",
   );
 }
 
@@ -456,9 +483,14 @@ function parseBorderBlockStart(
     parseColor(value.color, builder),
   );
   builder.addDescriptor(
-    "border-block-start-width",
+    "border-top-width",
     parseBorderSideWidth(value.width, builder),
   );
+  dropUnsupportedInlineStyle(
+    parseBorderStyle(value.style, builder),
+    builder,
+    "border-block-start-style",
+  );
 }
 
 function parseBorderBlockEnd(
@@ -470,26 +502,31 @@ function parseBorderBlockEnd(
     parseColor(value.color, builder),
   );
   builder.addDescriptor(
-    "border-block-end-width",
+    "border-bottom-width",
     parseBorderSideWidth(value.width, builder),
   );
+  dropUnsupportedInlineStyle(
+    parseBorderStyle(value.style, builder),
+    builder,
+    "border-block-end-style",
+  );
 }
 
 function parseBorderInline(
   { value }: DeclarationType<"border-inline">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor(
-    "border-inline-color",
-    parseColor(value.color, builder),
-  );
-  builder.addDescriptor(
-    "border-inline-width",
-    parseBorderSideWidth(value.width, builder),
-  );
-  builder.addDescriptor(
-    "border-inline-style",
+  const color = parseColor(value.color, builder);
+  const width = parseBorderSideWidth(value.width, builder);
+
+  builder.addDescriptor("border-start-color", color);
+  builder.addDescriptor("border-end-color", color);
+  builder.addDescriptor("border-start-width", width);
+  builder.addDescriptor("border-end-width", width);
+  dropUnsupportedInlineStyle(
     parseBorderStyle(value.style, builder),
+    builder,
+    "border-inline-style",
   );
 }
 
@@ -497,17 +534,15 @@ function parseBorderInlineStart(
   { value }: DeclarationType<"border-inline-start">,
   builder: StylesheetBuilder,
 ) {
+  builder.addDescriptor("border-start-color", parseColor(value.color, builder));
   builder.addDescriptor(
-    "border-inline-start-color",
-    parseColor(value.color, builder),
-  );
-  builder.addDescriptor(
-    "border-inline-start-width",
+    "border-start-width",
     parseBorderSideWidth(value.width, builder),
   );
-  builder.addDescriptor(
-    "border-inline-start-style",
+  dropUnsupportedInlineStyle(
     parseBorderStyle(value.style, builder),
+    builder,
+    "border-inline-start-style",
   );
 }
 
@@ -515,17 +550,15 @@ function parseBorderInlineEnd(
   { value }: DeclarationType<"border-inline-end">,
   builder: StylesheetBuilder,
 ) {
+  builder.addDescriptor("border-end-color", parseColor(value.color, builder));
   builder.addDescriptor(
-    "border-inline-end-color",
-    parseColor(value.color, builder),
-  );
-  builder.addDescriptor(
-    "border-inline-end-width",
+    "border-end-width",
     parseBorderSideWidth(value.width, builder),
   );
-  builder.addDescriptor(
-    "border-inline-end-style",
+  dropUnsupportedInlineStyle(
     parseBorderStyle(value.style, builder),
+    builder,
+    "border-inline-end-style",
   );
 }
 
@@ -534,9 +567,13 @@ export function parseBorderInlineWidth(
   builder: StylesheetBuilder,
 ) {
   builder.addDescriptor(
-    "border-inline-width",
+    "border-start-width",
     parseBorderSideWidth(declaration.value.start, builder),
   );
+  builder.addDescriptor(
+    "border-end-width",
+    parseBorderSideWidth(declaration.value.end, builder),
+  );
 }
 
 export function parseBorderInlineStyle(
@@ -544,31 +581,41 @@ export function parseBorderInlineStyle(
     | "border-inline-style"
     | "border-inline-start-style"
     | "border-inline-end-style"
+    | "border-block-start-style"
+    | "border-block-end-style"
   >,
   builder: StylesheetBuilder,
 ) {
   if (typeof declaration.value === "string") {
-    builder.addDescriptor(
-      declaration.property,
+    dropUnsupportedInlineStyle(
       parseBorderStyle(declaration.value, builder),
-    );
-  } else if (declaration.value.start === declaration.value.end) {
-    builder.addDescriptor(
+      builder,
       declaration.property,
-      parseBorderStyle(declaration.value.start, builder),
     );
   } else {
-    builder.addDescriptor(
-      "border-inline-start-style",
+    dropUnsupportedInlineStyle(
       parseBorderStyle(declaration.value.start, builder),
+      builder,
+      "border-inline-start-style",
     );
-    builder.addDescriptor(
-      "border-inline-end-style",
+    dropUnsupportedInlineStyle(
       parseBorderStyle(declaration.value.end, builder),
+      builder,
+      "border-inline-end-style",
     );
   }
 }
 
+function dropUnsupportedInlineStyle(
+  style: string | undefined,
+  builder: StylesheetBuilder,
+  property: string,
+) {
+  if (style !== undefined && style !== "solid") {
+    builder.addWarning("style", property, style);
+  }
+}
+
 function parseFlexFlow(
   { value }: DeclarationType<"flex-flow">,
   builder: StylesheetBuilder,
@@ -838,7 +885,7 @@ export function parseScaleValue(
   builder: StylesheetBuilder,
 ): StyleDescriptor {
   if (translate === "none") {
-    return 0;
+    return 1;
   }
 
   return parseLength(translate[prop], builder);
@@ -916,6 +963,11 @@ export function parseUnparsedDeclaration(
     return;
   }
 
+  if (unsupportedLogicalStyles.has(property)) {
+    builder.addWarning("property", property);
+    return;
+  }
+
   builder.setWarningProperty(property);
 
   /**
@@ -966,7 +1018,10 @@ export function parseCustomDeclaration(
 ) {
   const property = declaration.value.name;
 
-  if (property === "-webkit-line-clamp") {
+  if (isMappingProperty(property)) {
+    // Consumed before declarations so property order cannot affect mapping.
+    return;
+  } else if (property === "-webkit-line-clamp") {
     builder.addDescriptor(
       property,
       parseUnparsed(declaration.value.value, builder, property),
@@ -997,6 +1052,18 @@ export function parseCustomDeclaration(
     );
   } else if (property === "corner-shape") {
     parseCornerShape(declaration.value, builder);
+  } else if (property === "font-variant") {
+    const parsedFontVariant = parseFontVariantCaps(
+      parseUnparsed(
+        declaration.value.value,
+        builder,
+        property,
+      ) as FontVariantCaps,
+      builder,
+    );
+    if (parsedFontVariant !== undefined) {
+      builder.addDescriptor(property, parsedFontVariant);
+    }
   } else if (
     validProperties.has(property) ||
     property.startsWith("--") ||
@@ -1228,6 +1295,8 @@ export function parseUnparsed(
             builder,
             property,
           );
+        case "color-mix":
+          return parseColorMix(tokenOrValue.value.arguments, builder, property);
         default: {
           builder.addWarning("value", `${tokenOrValue.value.name}()`);
           return;
@@ -1592,11 +1661,23 @@ export function parseColorDeclaration(
   builder: StylesheetBuilder,
 ) {
   builder.addDescriptor(
-    declaration.property,
+    propertyRename[declaration.property] ?? declaration.property,
     parseColor(declaration.value, builder),
   );
 }
 
+/**
+ * Lab/LCH/OKLab/OKLCH channels can be `NaN` when lightningcss resolves a
+ * degenerate `color-mix()` at compile time (e.g. mixing black with
+ * `transparent` in oklab yields `NaN` for the a/b chromaticity channels).
+ * Passing `NaN` to colorjs.io produces an invalid string such as
+ * `#NaNNaNNaN80`, which React Native silently discards. Per CSS Color 4 a
+ * missing component is treated as `0`, so coerce `NaN` to `0`.
+ */
+function nanToZero(value: number): number {
+  return Number.isNaN(value) ? 0 : value;
+}
+
 export function parseColor(cssColor: CssColor, builder: StylesheetBuilder) {
   if (typeof cssColor === "string") {
     if (namedColors.has(cssColor)) {
@@ -1651,28 +1732,44 @@ export function parseColor(cssColor: CssColor, builder: StylesheetBuilder) {
     case "lab":
       color = new Color({
         space: cssColor.type,
-        coords: [cssColor.l, cssColor.a, cssColor.b],
+        coords: [
+          nanToZero(cssColor.l),
+          nanToZero(cssColor.a),
+          nanToZero(cssColor.b),
+        ],
         alpha: cssColor.alpha,
       });
       break;
     case "lch":
       color = new Color({
         space: cssColor.type,
-        coords: [cssColor.l, cssColor.c, cssColor.h],
+        coords: [
+          nanToZero(cssColor.l),
+          nanToZero(cssColor.c),
+          nanToZero(cssColor.h),
+        ],
         alpha: cssColor.alpha,
       });
       break;
     case "oklab":
       color = new Color({
         space: cssColor.type,
-        coords: [cssColor.l, cssColor.a, cssColor.b],
+        coords: [
+          nanToZero(cssColor.l),
+          nanToZero(cssColor.a),
+          nanToZero(cssColor.b),
+        ],
         alpha: cssColor.alpha,
       });
       break;
     case "oklch":
       color = new Color({
         space: cssColor.type,
-        coords: [cssColor.l, cssColor.c, cssColor.h],
+        coords: [
+          nanToZero(cssColor.l),
+          nanToZero(cssColor.c),
+          nanToZero(cssColor.h),
+        ],
         alpha: cssColor.alpha,
       });
       break;
@@ -2120,12 +2217,8 @@ export function parseBorderBlockWidth(
   const start = parseBorderSideWidth(declaration.value.start, builder);
   const end = parseBorderSideWidth(declaration.value.end, builder);
 
-  if (start === end) {
-    builder.addDescriptor("border-block-width", start);
-  } else {
-    builder.addDescriptor("border-block-start-width", start);
-    builder.addDescriptor("border-block-end-width", end);
-  }
+  builder.addDescriptor("border-top-width", start);
+  builder.addDescriptor("border-bottom-width", end);
 }
 
 function parseBorderBlockStyle(
@@ -2135,12 +2228,8 @@ function parseBorderBlockStyle(
   const start = parseBorderStyle(declaration.value.start, builder);
   const end = parseBorderStyle(declaration.value.end, builder);
 
-  if (start == end) {
-    builder.addDescriptor("border-block-style", start);
-  } else {
-    builder.addDescriptor("border-block-start-style", start);
-    builder.addDescriptor("border-block-end-style", end);
-  }
+  dropUnsupportedInlineStyle(start, builder, "border-block-start-style");
+  dropUnsupportedInlineStyle(end, builder, "border-block-end-style");
 }
 
 export function parseBorderSideWidthDeclaration(
@@ -2148,7 +2237,7 @@ export function parseBorderSideWidthDeclaration(
   builder: StylesheetBuilder,
 ) {
   builder.addDescriptor(
-    declaration.property,
+    propertyRename[declaration.property] ?? declaration.property,
     parseBorderSideWidth(declaration.value, builder),
   );
 }
@@ -2192,12 +2281,10 @@ export function parseLineHeightDeclaration(
   declaration: DeclarationType<"line-height">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor("line-height", [
-    {},
-    "lineHeight",
-    [parseLineHeight(declaration.value, builder)],
-    1,
-  ]);
+  builder.addDescriptor(
+    "line-height",
+    parseLineHeight(declaration.value, builder),
+  );
 }
 
 export function parseLineHeight(
@@ -2208,7 +2295,7 @@ export function parseLineHeight(
     case "normal":
       return undefined;
     case "number":
-      return [{}, "em", [value.value], 1];
+      return [{}, "em", value.value, 1];
     case "length": {
       const length = value.value;
 
@@ -2633,6 +2720,100 @@ export function parseCalcFn(
   return;
 }
 
+export function parseColorMix(
+  tokens: TokenOrValue[],
+  builder: StylesheetBuilder,
+  property: string,
+): StyleDescriptor {
+  const [inToken, whitespace, colorSpace, comma, ...remaining] = tokens;
+  const rest = remaining.filter(
+    (token) =>
+      token.type !== "token" ||
+      !["white-space", "comment"].includes(token.value.type),
+  );
+  if (
+    typeof inToken !== "object" ||
+    inToken.type !== "token" ||
+    inToken.value.type !== "ident" ||
+    inToken.value.value !== "in"
+  ) {
+    return;
+  }
+
+  if (
+    typeof whitespace !== "object" ||
+    whitespace.type !== "token" ||
+    whitespace.value.type !== "white-space"
+  ) {
+    return;
+  }
+
+  if (
+    typeof comma !== "object" ||
+    comma.type !== "token" ||
+    comma.value.type !== "comma"
+  ) {
+    return;
+  }
+
+  const colorSpaceArg = parseUnparsed(colorSpace, builder, property);
+  if (typeof colorSpaceArg !== "string") {
+    return;
+  }
+
+  let nextToken = rest.shift();
+
+  const leftColorArg = parseUnparsed(nextToken, builder, property);
+
+  if (!leftColorArg) {
+    return;
+  }
+
+  nextToken = rest.shift();
+
+  let leftColorPercentage: StyleDescriptor | undefined;
+  if (nextToken?.type !== "token" || nextToken.value.type !== "comma") {
+    leftColorPercentage = parseUnparsed(nextToken, builder, property);
+    nextToken = rest.shift();
+  }
+
+  if (
+    typeof nextToken !== "object" ||
+    nextToken.type !== "token" ||
+    nextToken.value.type !== "comma"
+  ) {
+    return;
+  }
+
+  nextToken = rest.shift();
+
+  const rightColorArg = parseUnparsed(nextToken, builder, property);
+
+  nextToken = rest.shift();
+  let rightColorPercentage: StyleDescriptor | undefined;
+  if (nextToken?.type !== "token" || nextToken.value.type !== "comma") {
+    rightColorPercentage = parseUnparsed(nextToken, builder, property);
+    nextToken = rest.shift();
+  }
+
+  // We should have expired all tokens now
+  if (nextToken) {
+    return;
+  }
+
+  return [
+    {},
+    "colorMix",
+    [
+      colorSpaceArg,
+      leftColorArg,
+      leftColorPercentage,
+      rightColorArg,
+      rightColorPercentage,
+    ],
+  ];
+}
+
 export function parseCalcArguments(
   [...args]: TokenOrValue[],
   builder: StylesheetBuilder,
@@ -3007,21 +3188,25 @@ function parseBackgroundImage(
   declaration: DeclarationType<"background-image">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor(
-    "experimental_backgroundImage",
-    declaration.value.flatMap((image): StyleDescriptor[] => {
-      switch (image.type) {
-        case "gradient": {
-          const gradient = parseGradient(image.value, builder);
-          return gradient ? [gradient] : [];
+  builder.addDescriptor("experimental_backgroundImage", [
+    {},
+    "join",
+    [
+      declaration.value.flatMap((image): StyleDescriptor[] => {
+        switch (image.type) {
+          case "gradient": {
+            const gradient = parseGradient(image.value, builder);
+            return gradient ? [gradient] : [];
+          }
+          case "none":
+            return ["none"];
         }
-        case "none":
-          return ["none"];
-      }
 
-      return [];
-    }),
-  );
+        return [];
+      }),
+      ", ",
+    ],
+  ]);
   return;
 }
 
@@ -3076,10 +3261,10 @@ function parseGradientItem(
         args.push(parseLength(item.position, builder));
       }
 
-      return [{}, "@colorStop", args, 1];
+      return [{}, "colorStop", args, 1];
     }
     case "hint":
-      return parseLength(item.value, builder);
+      return [{}, "gradientPosition", parseLength(item.value, builder), 1];
   }
 }
 
@@ -3179,7 +3364,7 @@ function parseFilter(
           } as unknown as StyleDescriptor;
         case "hue-rotate":
           return {
-            [value.type]: parseAngle(value.value, builder),
+            [toRNProperty(value.type)]: parseAngle(value.value, builder),
           } as unknown as StyleDescriptor;
         case "drop-shadow":
           return [

package/src/compiler/lightningcss-loader.ts

@@ -1,3 +1,6 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+import { dirname, resolve } from "node:path";
+
 export function lightningcssLoader() {
   let lightningcssPath: string | undefined;
 
@@ -28,11 +31,28 @@ export function lightningcssLoader() {
     );
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
   const { transform: lightningcss, Features } = require(
     lightningcssPath,
   ) as typeof import("lightningcss");
 
+  let version: unknown;
+  try {
+    // Lightning CSS keeps its entry in node/ and does not export package.json.
+    // Resolve relative to the selected copy, not the consumer or this loader.
+    const packageJSON = require(
+      resolve(dirname(lightningcssPath), "../package.json"),
+    ) as Record<string, unknown>;
+    version = packageJSON.version;
+  } catch {
+    // Some bundlers do not retain package metadata. Loading remains supported.
+  }
+
+  if (version === "1.30.2") {
+    throw new Error(
+      "[react-native-css] lightningcss version 1.30.2 has a critical bug that breaks compilation. Please pin the version of lightningcss to 1.30.1; or try upgrading.",
+    );
+  }
+
   return {
     lightningcss,
     Features,