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

package/dist/commonjs/compiler/declarations.js

@@ -27,6 +27,7 @@ exports.parseCalcArguments = parseCalcArguments;
 exports.parseCalcFn = parseCalcFn;
 exports.parseColor = parseColor;
 exports.parseColorDeclaration = parseColorDeclaration;
+exports.parseColorMix = parseColorMix;
 exports.parseColorOrAutoDeclaration = parseColorOrAutoDeclaration;
 exports.parseCustomDeclaration = parseCustomDeclaration;
 exports.parseDeclaration = parseDeclaration;
@@ -81,6 +82,7 @@ exports.round = round;
 exports.unparsedFunction = unparsedFunction;
 var _colorjs = _interopRequireDefault(require("colorjs.io"));
 var _index = require("../utilities/index.js");
+var _atRules = require("./atRules.js");
 var _keyframes = require("./keyframes.js");
 var _selectors = require("./selectors.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -88,9 +90,23 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 
 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,
@@ -114,10 +130,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,8 +337,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({
@@ -355,14 +372,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);
     }
   }
 }
@@ -396,53 +413,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");
 }
 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));
 }
 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({
@@ -608,7 +637,7 @@ function parseScale({
 }
 function parseScaleValue(translate, prop, builder) {
   if (translate === "none") {
-    return 0;
+    return 1;
   }
   return parseLength(translate[prop], builder);
 }
@@ -658,6 +687,10 @@ function parseUnparsedDeclaration(declaration, builder) {
     builder.addWarning("property", property);
     return;
   }
+  if (unsupportedLogicalStyles.has(property)) {
+    builder.addWarning("property", property);
+    return;
+  }
   builder.setWarningProperty(property);
 
   /**
@@ -694,7 +727,10 @@ function parseUnparsedDeclaration(declaration, builder) {
 }
 function parseCustomDeclaration(declaration, builder) {
   const property = declaration.value.name;
-  if (property === "-webkit-line-clamp") {
+  if ((0, _atRules.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") {
@@ -715,6 +751,11 @@ 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 {
@@ -862,6 +903,8 @@ function parseUnparsed(tokenOrValue, builder, property, allowAuto = allowAutoPro
           case "min":
           case "clamp":
             return parseCalcFn(tokenOrValue.value.name, tokenOrValue.value.arguments, builder, property);
+          case "color-mix":
+            return parseColorMix(tokenOrValue.value.arguments, builder, property);
           default:
             {
               builder.addWarning("value", `${tokenOrValue.value.name}()`);
@@ -1165,7 +1208,19 @@ function parseFontColorDeclaration(declaration, builder) {
   }
 }
 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;
 }
 function parseColor(cssColor, builder) {
   if (typeof cssColor === "string") {
@@ -1218,28 +1273,28 @@ function parseColor(cssColor, builder) {
     case "lab":
       color = new _colorjs.default({
         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 _colorjs.default({
         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 _colorjs.default({
         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 _colorjs.default({
         space: cssColor.type,
-        coords: [cssColor.l, cssColor.c, cssColor.h],
+        coords: [nanToZero(cssColor.l), nanToZero(cssColor.c), nanToZero(cssColor.h)],
         alpha: cssColor.alpha
       });
       break;
@@ -1548,25 +1603,17 @@ function parseBorderStyle(value, builder) {
 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");
 }
 function parseBorderSideWidthDeclaration(declaration, builder) {
-  builder.addDescriptor(declaration.property, parseBorderSideWidth(declaration.value, builder));
+  builder.addDescriptor(propertyRename[declaration.property] ?? declaration.property, parseBorderSideWidth(declaration.value, builder));
 }
 function parseBorderSideWidth(value, builder) {
   if (value.type === "length") {
@@ -1595,14 +1642,14 @@ function parseFontFamily({
   return value[0];
 }
 function parseLineHeightDeclaration(declaration, builder) {
-  builder.addDescriptor("line-height", [{}, "lineHeight", [parseLineHeight(declaration.value, builder)], 1]);
+  builder.addDescriptor("line-height", parseLineHeight(declaration.value, builder));
 }
 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;
@@ -1914,6 +1961,51 @@ function parseCalcFn(name, tokens, builder, property) {
   }
   return;
 }
+function parseColorMix(tokens, builder, property) {
+  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;
+  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;
+  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]];
+}
 function parseCalcArguments([...args], builder, property) {
   const parsed = [];
   for (const arg of args) {
@@ -2168,7 +2260,7 @@ 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":
         {
@@ -2179,7 +2271,7 @@ function parseBackgroundImage(declaration, builder) {
         return ["none"];
     }
     return [];
-  }));
+  }), ", "]]);
   return;
 }
 function parseGradient(gradient, builder) {
@@ -2215,10 +2307,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) {
@@ -2277,7 +2369,7 @@ function parseFilter(declaration, builder) {
         };
       case "hue-rotate":
         return {
-          [value.type]: parseAngle(value.value, builder)
+          [(0, _selectors.toRNProperty)(value.type)]: parseAngle(value.value, builder)
         };
       case "drop-shadow":
         return [{}, (0, _selectors.toRNProperty)(value.type), [parseLength(value.value.xOffset, builder), parseLength(value.value.yOffset, builder), parseLength(value.value.blur, builder), parseColor(value.value.color, builder)]];