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

package/dist/module/compiler/declarations.js

@@ -4,13 +4,28 @@
 
 import Color from "colorjs.io";
 import { isStyleFunction } from "../utilities/index.js";
+import { isMappingProperty } from "./atRules.js";
 import { parseEasingFunction, parseIterationCount } from "./keyframes.js";
 import { toRNProperty } from "./selectors.js";
 const CommaSeparator = Symbol("CommaSeparator");
 const propertyRename = {
-  "background-image": "experimental_backgroundImage"
+  "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"
 };
-const unparsedRuntimeParsing = new Set(["animation", "border", "box-shadow", "line-height", "rotate", "scale", "text-shadow", "transform", "translate"]);
+
+// 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", "text-shadow", "transform", "translate"]);
 const parsers = {
   "align-content": parseAlignContent,
   "align-items": parseAlignItems,
@@ -34,10 +49,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,
@@ -240,8 +256,8 @@ function parseInsetInline({
   value
 }, builder) {
   builder.addShorthand("inset-inline", {
-    "inset-block-start": parseLengthPercentageOrAuto(value.inlineStart, builder),
-    "inset-block-end": parseLengthPercentageOrAuto(value.inlineEnd, builder)
+    "inset-inline-start": parseLengthPercentageOrAuto(value.inlineStart, builder),
+    "inset-inline-end": parseLengthPercentageOrAuto(value.inlineEnd, builder)
   });
 }
 function parseInset({
@@ -275,14 +291,14 @@ function parseBorderColor(declaration, builder) {
   } else {
     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);
     }
   }
 }
@@ -316,53 +332,65 @@ function parseBorderBlock({
   value
 }, builder) {
   builder.addDescriptor("border-block-color", parseColor(value.color, builder));
-  builder.addDescriptor("border-block-width", parseBorderSideWidth(value.width, builder));
-  builder.addDescriptor("border-block-style", parseBorderStyle(value.style, builder));
+  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");
 }
 function parseBorderBlockStart({
   value
 }, builder) {
   builder.addDescriptor("border-block-start-color", parseColor(value.color, builder));
-  builder.addDescriptor("border-block-start-width", parseBorderSideWidth(value.width, builder));
+  builder.addDescriptor("border-top-width", parseBorderSideWidth(value.width, builder));
+  dropUnsupportedInlineStyle(parseBorderStyle(value.style, builder), builder, "border-block-start-style");
 }
 function parseBorderBlockEnd({
   value
 }, builder) {
   builder.addDescriptor("border-block-end-color", parseColor(value.color, builder));
-  builder.addDescriptor("border-block-end-width", parseBorderSideWidth(value.width, builder));
+  builder.addDescriptor("border-bottom-width", parseBorderSideWidth(value.width, builder));
+  dropUnsupportedInlineStyle(parseBorderStyle(value.style, builder), builder, "border-block-end-style");
 }
 function parseBorderInline({
   value
 }, builder) {
-  builder.addDescriptor("border-inline-color", parseColor(value.color, builder));
-  builder.addDescriptor("border-inline-width", parseBorderSideWidth(value.width, builder));
-  builder.addDescriptor("border-inline-style", parseBorderStyle(value.style, builder));
+  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");
 }
 function parseBorderInlineStart({
   value
 }, builder) {
-  builder.addDescriptor("border-inline-start-color", parseColor(value.color, builder));
-  builder.addDescriptor("border-inline-start-width", parseBorderSideWidth(value.width, builder));
-  builder.addDescriptor("border-inline-start-style", parseBorderStyle(value.style, builder));
+  builder.addDescriptor("border-start-color", parseColor(value.color, builder));
+  builder.addDescriptor("border-start-width", parseBorderSideWidth(value.width, builder));
+  dropUnsupportedInlineStyle(parseBorderStyle(value.style, builder), builder, "border-inline-start-style");
 }
 function parseBorderInlineEnd({
   value
 }, builder) {
-  builder.addDescriptor("border-inline-end-color", parseColor(value.color, builder));
-  builder.addDescriptor("border-inline-end-width", parseBorderSideWidth(value.width, builder));
-  builder.addDescriptor("border-inline-end-style", parseBorderStyle(value.style, builder));
+  builder.addDescriptor("border-end-color", parseColor(value.color, builder));
+  builder.addDescriptor("border-end-width", parseBorderSideWidth(value.width, builder));
+  dropUnsupportedInlineStyle(parseBorderStyle(value.style, builder), builder, "border-inline-end-style");
 }
 export function parseBorderInlineWidth(declaration, builder) {
-  builder.addDescriptor("border-inline-width", parseBorderSideWidth(declaration.value.start, builder));
+  builder.addDescriptor("border-start-width", parseBorderSideWidth(declaration.value.start, builder));
+  builder.addDescriptor("border-end-width", parseBorderSideWidth(declaration.value.end, builder));
 }
 export function parseBorderInlineStyle(declaration, builder) {
   if (typeof declaration.value === "string") {
-    builder.addDescriptor(declaration.property, parseBorderStyle(declaration.value, builder));
-  } else if (declaration.value.start === declaration.value.end) {
-    builder.addDescriptor(declaration.property, parseBorderStyle(declaration.value.start, builder));
+    dropUnsupportedInlineStyle(parseBorderStyle(declaration.value, builder), builder, declaration.property);
   } else {
-    builder.addDescriptor("border-inline-start-style", parseBorderStyle(declaration.value.start, builder));
-    builder.addDescriptor("border-inline-end-style", parseBorderStyle(declaration.value.end, builder));
+    dropUnsupportedInlineStyle(parseBorderStyle(declaration.value.start, builder), builder, "border-inline-start-style");
+    dropUnsupportedInlineStyle(parseBorderStyle(declaration.value.end, builder), builder, "border-inline-end-style");
+  }
+}
+function dropUnsupportedInlineStyle(style, builder, property) {
+  if (style !== undefined && style !== "solid") {
+    builder.addWarning("style", property, style);
   }
 }
 function parseFlexFlow({
@@ -528,7 +556,7 @@ function parseScale({
 }
 export function parseScaleValue(translate, prop, builder) {
   if (translate === "none") {
-    return 0;
+    return 1;
   }
   return parseLength(translate[prop], builder);
 }
@@ -578,6 +606,10 @@ export function parseUnparsedDeclaration(declaration, builder) {
     builder.addWarning("property", property);
     return;
   }
+  if (unsupportedLogicalStyles.has(property)) {
+    builder.addWarning("property", property);
+    return;
+  }
   builder.setWarningProperty(property);
 
   /**
@@ -614,7 +646,10 @@ export function parseUnparsedDeclaration(declaration, builder) {
 }
 export function parseCustomDeclaration(declaration, builder) {
   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));
   } else if (property === "-rn-ripple-style") {
     if (parseUnparsed(declaration.value.value, builder, property) === "borderless") {
@@ -635,6 +670,11 @@ export function parseCustomDeclaration(declaration, builder) {
     builder.addDescriptor(property, parseUnparsed(declaration.value.value, builder, property));
   } else if (property === "corner-shape") {
     parseCornerShape(declaration.value, builder);
+  } else if (property === "font-variant") {
+    const parsedFontVariant = parseFontVariantCaps(parseUnparsed(declaration.value.value, builder, property), builder);
+    if (parsedFontVariant !== undefined) {
+      builder.addDescriptor(property, parsedFontVariant);
+    }
   } else if (validProperties.has(property) || property.startsWith("--") || property.startsWith("-rn-")) {
     builder.addDescriptor(property, parseUnparsed(declaration.value.value, builder, property));
   } else {
@@ -1087,7 +1127,19 @@ export function parseFontColorDeclaration(declaration, builder) {
   }
 }
 export function parseColorDeclaration(declaration, builder) {
-  builder.addDescriptor(declaration.property, parseColor(declaration.value, builder));
+  builder.addDescriptor(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) {
+  return Number.isNaN(value) ? 0 : value;
 }
 export function parseColor(cssColor, builder) {
   if (typeof cssColor === "string") {
@@ -1140,28 +1192,28 @@ export function parseColor(cssColor, builder) {
     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;
@@ -1470,25 +1522,17 @@ export function parseBorderStyle(value, builder) {
 export function parseBorderBlockWidth(declaration, builder) {
   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(declaration, builder) {
   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(declaration, builder) {
-  builder.addDescriptor(declaration.property, parseBorderSideWidth(declaration.value, builder));
+  builder.addDescriptor(propertyRename[declaration.property] ?? declaration.property, parseBorderSideWidth(declaration.value, builder));
 }
 export function parseBorderSideWidth(value, builder) {
   if (value.type === "length") {
@@ -1517,14 +1561,14 @@ function parseFontFamily({
   return value[0];
 }
 export function parseLineHeightDeclaration(declaration, builder) {
-  builder.addDescriptor("line-height", [{}, "lineHeight", [parseLineHeight(declaration.value, builder)], 1]);
+  builder.addDescriptor("line-height", parseLineHeight(declaration.value, builder));
 }
 export function parseLineHeight(value, builder) {
   switch (value.type) {
     case "normal":
       return undefined;
     case "number":
-      return [{}, "em", [value.value], 1];
+      return [{}, "em", value.value, 1];
     case "length":
       {
         const length = value.value;
@@ -1837,7 +1881,8 @@ export function parseCalcFn(name, tokens, builder, property) {
   return;
 }
 export function parseColorMix(tokens, builder, property) {
-  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" || inToken.value.type !== "ident" || inToken.value.value !== "in") {
     return;
   }
@@ -1867,10 +1912,6 @@ export function parseColorMix(tokens, builder, property) {
   }
   nextToken = rest.shift();
   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;
   if (nextToken?.type !== "token" || nextToken.value.type !== "comma") {
@@ -2138,7 +2179,7 @@ export function kebabCase(str) {
   return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? "-" : "") + $.toLowerCase());
 }
 function parseBackgroundImage(declaration, builder) {
-  builder.addDescriptor("experimental_backgroundImage", declaration.value.flatMap(image => {
+  builder.addDescriptor("experimental_backgroundImage", [{}, "join", [declaration.value.flatMap(image => {
     switch (image.type) {
       case "gradient":
         {
@@ -2149,7 +2190,7 @@ function parseBackgroundImage(declaration, builder) {
         return ["none"];
     }
     return [];
-  }));
+  }), ", "]]);
   return;
 }
 function parseGradient(gradient, builder) {
@@ -2185,10 +2226,10 @@ function parseGradientItem(item, builder) {
         if (item.position) {
           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];
   }
 }
 function parseObjectFit(declaration, builder) {
@@ -2247,7 +2288,7 @@ function parseFilter(declaration, builder) {
         };
       case "hue-rotate":
         return {
-          [value.type]: parseAngle(value.value, builder)
+          [toRNProperty(value.type)]: parseAngle(value.value, builder)
         };
       case "drop-shadow":
         return [{}, toRNProperty(value.type), [parseLength(value.value.xOffset, builder), parseLength(value.value.yOffset, builder), parseLength(value.value.blur, builder), parseColor(value.value.color, builder)]];