react-native-css 3.0.6 → 3.1.0-rc.0

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("--") ||
@@ -1594,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)) {
@@ -1653,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;
@@ -2122,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(
@@ -2137,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(
@@ -2150,7 +2237,7 @@ export function parseBorderSideWidthDeclaration(
   builder: StylesheetBuilder,
 ) {
   builder.addDescriptor(
-    declaration.property,
+    propertyRename[declaration.property] ?? declaration.property,
     parseBorderSideWidth(declaration.value, builder),
   );
 }
@@ -2194,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(
@@ -2210,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;
 
@@ -2640,7 +2725,12 @@ export function parseColorMix(
   builder: StylesheetBuilder,
   property: string,
 ): StyleDescriptor {
-  const [inToken, whitespace, colorSpace, comma, ...rest] = tokens;
+  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" ||
@@ -2699,11 +2789,6 @@ export function parseColorMix(
 
   const rightColorArg = parseUnparsed(nextToken, builder, property);
 
-  if (rightColorArg === "transparent") {
-    // Ignore the rest, treat as single color with alpha
-    return [{}, "colorMix", [colorSpaceArg, leftColorArg, leftColorPercentage]];
-  }
-
   nextToken = rest.shift();
   let rightColorPercentage: StyleDescriptor | undefined;
   if (nextToken?.type !== "token" || nextToken.value.type !== "comma") {
@@ -3103,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;
 }
 
@@ -3172,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];
   }
 }
 
@@ -3275,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,4 +1,6 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
+import { dirname, resolve } from "node:path";
+
 export function lightningcssLoader() {
   let lightningcssPath: string | undefined;
 
@@ -33,23 +35,22 @@ export function lightningcssLoader() {
     lightningcssPath,
   ) as typeof import("lightningcss");
 
+  let version: unknown;
   try {
-    const lightningcssPackageJSONPath = require.resolve("../../package.json", {
-      paths: [lightningcssPath],
-    });
-
-    const packageJSON = require(lightningcssPackageJSONPath) as Record<
-      string,
-      unknown
-    >;
-
-    if (packageJSON.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.",
-      );
-    }
+    // 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 {
-    // Intentionally left empty
+    // 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 {

package/src/compiler/media-query.ts

@@ -24,9 +24,10 @@ export function parseMediaQuery(
   let condition: MediaCondition | undefined;
 
   if (query.mediaType) {
-    // Print is for printing documents
+    // Native screens never match print. Negating that media type matches
+    // regardless of the remaining feature tests in the same conjunction.
     if (query.mediaType === "print") {
-      return;
+      return query.qualifier === "not";
     }
 
     // These all/screen are not conditions, they always apply
@@ -40,7 +41,7 @@ export function parseMediaQuery(
 
     // If any of these are undefined, the media query is invalid
     if (!condition || condition.some((v) => v === undefined)) {
-      return;
+      return false;
     }
   }
 
@@ -50,7 +51,8 @@ export function parseMediaQuery(
       : platformCondition || condition;
 
   if (!mediaQuery) {
-    return;
+    // Unqualified all/screen apply; not all and not screen do not.
+    return query.qualifier !== "not";
   }
 
   if (query.qualifier === "not") {
@@ -58,6 +60,7 @@ export function parseMediaQuery(
   }
 
   builder.addMediaQuery(mediaQuery);
+  return true;
 }
 
 function parseMediaQueryCondition(
@@ -65,15 +68,23 @@ function parseMediaQueryCondition(
   builder: StylesheetBuilder,
 ): MediaCondition | undefined {
   switch (query.type) {
-    case "feature":
-      return parseFeature(query.value, builder);
+    case "feature": {
+      const feature = parseFeature(query.value, builder);
+      return feature?.some((value) => value === undefined)
+        ? undefined
+        : feature;
+    }
     case "not":
       const mediaQuery = parseMediaQueryCondition(query.value, builder);
       return mediaQuery ? ["!", mediaQuery] : undefined;
     case "operation":
-      const mediaQueries = query.conditions
-        .map((c) => parseMediaQueryCondition(c, builder))
-        .filter((v): v is MediaCondition => !!v);
+      const parsed = query.conditions.map((c) =>
+        parseMediaQueryCondition(c, builder),
+      );
+      if (query.operator === "and" && parsed.some((c) => !c)) {
+        return;
+      }
+      const mediaQueries = parsed.filter((v): v is MediaCondition => !!v);
 
       if (mediaQueries.length === 0) {
         return;