react-native-css 3.0.0-nightly.75f8b74 → 3.0.0-nightly.d8cb1bc

package/src/compiler/declarations.ts

@@ -3,7 +3,6 @@
 import Color from "colorjs.io";
 import type {
   Angle,
-  BorderBlockColor,
   BorderSideWidth,
   BorderStyle,
   ColorOrAuto,
@@ -92,37 +91,44 @@ const parsers: {
   "block-size": parseSizeDeclaration,
   "border": parseBorder,
   "border-block": parseBorderBlock,
-  "border-block-color": parseBorderBlockColor,
+  "border-block-color": parseBorderColor,
   "border-block-end": parseBorderBlockEnd,
   "border-block-end-color": parseColorDeclaration,
   "border-block-end-width": parseBorderSideWidthDeclaration,
   "border-block-start": parseBorderBlockStart,
   "border-block-start-color": parseColorDeclaration,
   "border-block-start-width": parseBorderSideWidthDeclaration,
+  "border-block-style": parseBorderBlockStyle,
   "border-block-width": parseBorderBlockWidth,
   "border-bottom": parseBorderSide,
   "border-bottom-color": parseColorDeclaration,
   "border-bottom-left-radius": parseSize2DDimensionPercentageDeclaration,
   "border-bottom-right-radius": parseSize2DDimensionPercentageDeclaration,
+  "border-bottom-style": parseBorderStyleDeclaration,
   "border-bottom-width": parseBorderSideWidthDeclaration,
   "border-color": parseBorderColor,
   "border-end-end-radius": parseSize2DDimensionPercentageDeclaration,
   "border-end-start-radius": parseSize2DDimensionPercentageDeclaration,
   "border-inline": parseBorderInline,
-  "border-inline-color": parseBorderBlockColor,
+  "border-inline-color": parseBorderColor,
   "border-inline-end": parseBorderInlineEnd,
   "border-inline-end-color": parseColorDeclaration,
+  "border-inline-end-style": parseBorderInlineStyle,
   "border-inline-end-width": parseBorderSideWidthDeclaration,
   "border-inline-start": parseBorderInlineStart,
   "border-inline-start-color": parseColorDeclaration,
+  "border-inline-start-style": parseBorderInlineStyle,
   "border-inline-start-width": parseBorderSideWidthDeclaration,
-  "border-inline-width": parseBorderBlockWidth,
+  "border-inline-style": parseBorderInlineStyle,
+  "border-inline-width": parseBorderInlineWidth,
   "border-left": parseBorderSide,
   "border-left-color": parseColorDeclaration,
+  "border-left-style": parseBorderStyleDeclaration,
   "border-left-width": parseBorderSideWidthDeclaration,
   "border-radius": parseBorderRadius,
   "border-right": parseBorderSide,
   "border-right-color": parseColorDeclaration,
+  "border-right-style": parseBorderStyleDeclaration,
   "border-right-width": parseBorderSideWidthDeclaration,
   "border-start-end-radius": parseSize2DDimensionPercentageDeclaration,
   "border-start-start-radius": parseSize2DDimensionPercentageDeclaration,
@@ -131,11 +137,12 @@ const parsers: {
   "border-top-color": parseColorDeclaration,
   "border-top-left-radius": parseSize2DDimensionPercentageDeclaration,
   "border-top-right-radius": parseSize2DDimensionPercentageDeclaration,
+  "border-top-style": parseBorderStyleDeclaration,
   "border-top-width": parseBorderSideWidthDeclaration,
   "border-width": parseBorderWidth,
   "bottom": parseSizeDeclaration,
   "box-shadow": parseBoxShadow,
-  "caret-color": parseColorOrAuto,
+  "caret-color": parseCaretColor,
   "color": parseFontColorDeclaration,
   "column-gap": parseGap,
   "container": parseContainer,
@@ -237,6 +244,17 @@ const parsers: {
 
 const validProperties = new Set(Object.keys(parsers));
 
+function parseCaretColor(
+  declaration: DeclarationType<"caret-color">,
+  builder: StylesheetBuilder,
+) {
+  builder.addMapping({ [declaration.property]: ["cursorColor"] });
+  builder.addDescriptor(
+    "caret-color",
+    parseColorOrAutoDeclaration(declaration, builder),
+  );
+}
+
 export function parseDeclaration(
   declaration: Declaration,
   builder: StylesheetBuilder,
@@ -256,9 +274,9 @@ export function parseDeclaration(
   }
 
   if (declaration.property === "unparsed") {
-    parseDeclarationUnparsed(declaration, builder);
+    parseUnparsedDeclaration(declaration, builder);
   } else if (declaration.property === "custom") {
-    parseDeclarationCustom(declaration, builder);
+    parseCustomDeclaration(declaration, builder);
   } else {
     parseWithParser(declaration, builder);
   }
@@ -270,6 +288,7 @@ function parseWithParser(declaration: Declaration, builder: StylesheetBuilder) {
 
     builder.descriptorProperty = declaration.property;
 
+    builder.setWarningProperty(declaration.property);
     const value = parser(declaration, builder, declaration.property);
 
     if (value !== undefined) {
@@ -343,15 +362,41 @@ function parseBorderRadius(
 }
 
 function parseBorderColor(
-  { value }: DeclarationType<"border-color">,
+  declaration: DeclarationType<
+    "border-color" | "border-block-color" | "border-inline-color"
+  >,
   builder: StylesheetBuilder,
 ) {
-  builder.addShorthand("border-color", {
-    "border-top-color": parseColor(value.top, builder),
-    "border-bottom-color": parseColor(value.bottom, builder),
-    "border-left-color": parseColor(value.left, builder),
-    "border-right-color": parseColor(value.right, builder),
-  });
+  switch (declaration.property) {
+    case "border-color":
+      builder.addShorthand("border-color", {
+        "border-top-color": parseColor(declaration.value.top, builder),
+        "border-bottom-color": parseColor(declaration.value.bottom, builder),
+        "border-left-color": parseColor(declaration.value.left, builder),
+        "border-right-color": parseColor(declaration.value.right, builder),
+      });
+      break;
+    case "border-block-color":
+      builder.addDescriptor(
+        "border-top-color",
+        parseColor(declaration.value.start, builder),
+      );
+      builder.addDescriptor(
+        "border-bottom-color",
+        parseColor(declaration.value.end, builder),
+      );
+      break;
+    case "border-inline-color":
+      builder.addDescriptor(
+        "border-left-color",
+        parseColor(declaration.value.start, builder),
+      );
+      builder.addDescriptor(
+        "border-right-color",
+        parseColor(declaration.value.end, builder),
+      );
+      break;
+  }
 }
 
 function parseBorderWidth(
@@ -475,6 +520,43 @@ function parseBorderInlineEnd(
   );
 }
 
+export function parseBorderInlineWidth(
+  declaration: DeclarationType<"border-inline-width">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor(
+    "border-left-width",
+    parseBorderSideWidth(declaration.value.start, builder),
+  );
+  builder.addDescriptor(
+    "border-right-width",
+    parseBorderSideWidth(declaration.value.end, builder),
+  );
+}
+
+export function parseBorderInlineStyle(
+  declaration: DeclarationType<
+    | "border-inline-style"
+    | "border-inline-start-style"
+    | "border-inline-end-style"
+  >,
+  builder: StylesheetBuilder,
+) {
+  if (typeof declaration.value === "string") {
+    builder.addDescriptor(
+      "border-style",
+      parseBorderStyle(declaration.value, builder),
+    );
+  } else if (declaration.value.start === declaration.value.end) {
+    builder.addDescriptor(
+      "border-style",
+      parseBorderStyle(declaration.value.start, builder),
+    );
+  } else {
+    builder.addWarning("property", "border-inline-style");
+  }
+}
+
 function parseFlexFlow(
   { value }: DeclarationType<"flex-flow">,
   builder: StylesheetBuilder,
@@ -743,7 +825,17 @@ function parseLetterSpacing(
   if (value.type === "normal") {
     return;
   }
-  return parseLength(value.value, builder);
+  const descriptor = parseLength(value.value, builder);
+
+  if (
+    Array.isArray(descriptor) &&
+    descriptor[1] === "em" &&
+    typeof descriptor[2] === "number"
+  ) {
+    return descriptor[2];
+  }
+
+  return descriptor;
 }
 
 function parseTextDecoration(
@@ -772,7 +864,11 @@ function parseZIndex(
   }
 }
 
-function parseContainerType(_value: unknown, _builder: StylesheetBuilder) {
+function parseContainerType(
+  _declaration: DeclarationType<"container-type">,
+  builder: StylesheetBuilder,
+) {
+  builder.addContainer(["___default___"]);
   return;
 }
 
@@ -792,7 +888,7 @@ function parseContainer(
   return;
 }
 
-export function parseDeclarationUnparsed(
+export function parseUnparsedDeclaration(
   declaration: Extract<Declaration, { property: "unparsed" }>,
   builder: StylesheetBuilder,
 ) {
@@ -803,6 +899,8 @@ export function parseDeclarationUnparsed(
     return;
   }
 
+  builder.setWarningProperty(property);
+
   /**
    * React Native doesn't support all the logical properties
    */
@@ -817,7 +915,7 @@ export function parseDeclarationUnparsed(
   builder.descriptorProperty = property;
 
   if (unparsedRuntimeParsing.has(property)) {
-    const args = parseUnparsed(declaration.value.value, builder);
+    const args = parseUnparsed(declaration.value.value, builder, property);
 
     if (property === "animation") {
       builder.addDescriptor("animation", [
@@ -834,7 +932,7 @@ export function parseDeclarationUnparsed(
       ]);
     }
   } else {
-    const value = parseUnparsed(declaration.value.value, builder);
+    const value = parseUnparsed(declaration.value.value, builder, property);
 
     builder.addDescriptor(property, value);
 
@@ -848,7 +946,7 @@ export function parseDeclarationUnparsed(
   }
 }
 
-export function parseDeclarationCustom(
+export function parseCustomDeclaration(
   declaration: Extract<Declaration, { property: "custom" }>,
   builder: StylesheetBuilder,
 ) {
@@ -860,7 +958,13 @@ export function parseDeclarationCustom(
   ) {
     builder.addDescriptor(
       property,
-      parseUnparsed(declaration.value.value, builder, allowAuto.has(property)),
+      parseUnparsed(declaration.value.value, builder, property),
+    );
+  } else if (property === "-webkit-line-clamp") {
+    builder.addMapping({ [property]: ["numberOfLines"] });
+    builder.addDescriptor(
+      property,
+      parseUnparsed(declaration.value.value, builder, property),
     );
   } else {
     builder.addWarning("property", declaration.value.name);
@@ -870,9 +974,13 @@ export function parseDeclarationCustom(
 export function reduceParseUnparsed(
   tokenOrValues: TokenOrValue[],
   builder: StylesheetBuilder,
+  property: string,
+  allowAuto: boolean,
 ): StyleDescriptor {
   const result = tokenOrValues
-    .map((tokenOrValue) => parseUnparsed(tokenOrValue, builder))
+    .map((tokenOrValue) =>
+      parseUnparsed(tokenOrValue, builder, property, allowAuto),
+    )
     .filter((v) => v !== undefined);
 
   if (result.length === 0) {
@@ -891,6 +999,8 @@ export function reduceParseUnparsed(
     }
   }
 
+  // Groups are the tokens grouped together by comma location
+  // If a group only has 1 item, it shouldn't be an array
   groups = groups.flatMap((group): StyleDescriptor[] => {
     if (!Array.isArray(group)) {
       return [];
@@ -906,6 +1016,17 @@ export function reduceParseUnparsed(
       } else {
         return [first];
       }
+    } else if (
+      // This is a special case for <ratio> values
+      group.includes("/") &&
+      group.every((item) =>
+        typeof item === "string" && item === "/"
+          ? item
+          : typeof item === "number",
+      )
+    ) {
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
+      return [group.join(" ")];
     } else {
       return [group];
     }
@@ -917,11 +1038,13 @@ export function reduceParseUnparsed(
 export function unparsedFunction(
   token: Extract<TokenOrValue, { type: "function" }>,
   builder: StylesheetBuilder,
+  property: string,
+  allowAuto: boolean,
 ): StyleFunction {
   return [
     {},
     token.value.name,
-    reduceParseUnparsed(token.value.arguments, builder),
+    reduceParseUnparsed(token.value.arguments, builder, property, allowAuto),
   ];
 }
 
@@ -938,7 +1061,8 @@ export function parseUnparsed(
     | undefined
     | null,
   builder: StylesheetBuilder,
-  allowAuto = false,
+  property: string,
+  allowAuto = allowAutoProperties.has(property),
 ): StyleDescriptor {
   if (tokenOrValue === undefined || tokenOrValue === null) {
     return;
@@ -961,7 +1085,12 @@ export function parseUnparsed(
   }
 
   if (Array.isArray(tokenOrValue)) {
-    const args = reduceParseUnparsed(tokenOrValue, builder);
+    const args = reduceParseUnparsed(
+      tokenOrValue,
+      builder,
+      property,
+      allowAuto,
+    );
     if (!args) return;
     if (Array.isArray(args) && args.length === 1) return args[0];
     return args;
@@ -969,11 +1098,21 @@ export function parseUnparsed(
 
   switch (tokenOrValue.type) {
     case "unresolved-color": {
-      return parseUnresolvedColor(tokenOrValue.value, builder);
+      return parseUnresolvedColor(
+        tokenOrValue.value,
+        builder,
+        property,
+        allowAuto,
+      );
     }
     case "var": {
       let args: StyleDescriptor = tokenOrValue.value.name.ident.slice(2);
-      const fallback = parseUnparsed(tokenOrValue.value.fallback, builder);
+      const fallback = parseUnparsed(
+        tokenOrValue.value.fallback,
+        builder,
+        property,
+        allowAuto,
+      );
       if (fallback !== undefined) {
         args = [args, fallback];
       }
@@ -994,7 +1133,8 @@ export function parseUnparsed(
         case "translateX":
         case "translateY":
           tokenOrValue.value.name = `@${tokenOrValue.value.name}`;
-          return unparsedFunction(tokenOrValue, builder);
+          return unparsedFunction(tokenOrValue, builder, property, allowAuto);
+        case "blur":
         case "brightness":
         case "contrast":
         case "cubic-bezier":
@@ -1018,7 +1158,7 @@ export function parseUnparsed(
         case "sepia":
         case "shadow":
         case "steps":
-          return unparsedFunction(tokenOrValue, builder);
+          return unparsedFunction(tokenOrValue, builder, property, allowAuto);
         case "hairlineWidth":
           return [{}, tokenOrValue.value.name, []];
         case "calc":
@@ -1029,9 +1169,10 @@ export function parseUnparsed(
             tokenOrValue.value.name,
             tokenOrValue.value.arguments,
             builder,
+            property,
           );
         default: {
-          builder.addWarning("function", tokenOrValue.value.name);
+          builder.addWarning("value", `${tokenOrValue.value.name}()`);
           return;
         }
       }
@@ -1077,11 +1218,16 @@ export function parseUnparsed(
           return parseDimension(tokenOrValue.value, builder);
         case "comma":
           return CommaSeparator as unknown as StyleDescriptor;
+        case "delim": {
+          if (property === "aspect-ratio" && tokenOrValue.value.value === "/") {
+            return tokenOrValue.value.value;
+          }
+          return;
+        }
         case "at-keyword":
         case "hash":
         case "id-hash":
         case "unquoted-url":
-        case "delim":
         case "white-space":
         case "comment":
         case "colon":
@@ -1152,23 +1298,30 @@ export function parseLength(
   const { inlineRem = 14 } = builder.getOptions();
 
   if (typeof length === "number") {
-    return length;
+    return round(length);
   }
 
   if ("unit" in length) {
     switch (length.unit) {
-      case "px":
-        return length.value;
+      case "px": {
+        if (length.value === Infinity) {
+          return 9999;
+        } else if (length.value === -Infinity) {
+          return -9999;
+        } else {
+          return round(length.value);
+        }
+      }
       case "rem":
         if (typeof inlineRem === "number") {
           return length.value * inlineRem;
         } else {
-          return [{}, "rem", length.value];
+          return [{}, "rem", round(length.value)];
         }
       case "vw":
       case "vh":
       case "em":
-        return [{}, length.unit, length.value, 1];
+        return [{}, length.unit, round(length.value), 1];
       case "in":
       case "cm":
       case "mm":
@@ -1251,7 +1404,7 @@ export function parseAngle(angle: Angle | number, builder: StylesheetBuilder) {
     case "rad":
       return `${angle.value}${angle.type}`;
     default:
-      builder.addWarning("value", angle.value);
+      builder.addWarning("value", `${angle.value} ${angle.type}`);
       return undefined;
   }
 }
@@ -1334,7 +1487,7 @@ export function parseSize(
   return;
 }
 
-export function parseColorOrAuto(
+export function parseColorOrAutoDeclaration(
   { value }: { value: ColorOrAuto },
   builder: StylesheetBuilder,
 ) {
@@ -1836,7 +1989,13 @@ export function parseOverflow(
 }
 
 export function parseBorderStyleDeclaration(
-  declaration: DeclarationType<"border-style">,
+  declaration: DeclarationType<
+    | "border-style"
+    | "border-left-style"
+    | "border-right-style"
+    | "border-top-style"
+    | "border-bottom-style"
+  >,
   builder: StylesheetBuilder,
 ) {
   return parseBorderStyle(declaration.value, builder);
@@ -1869,17 +2028,8 @@ export function parseBorderStyle(
   return undefined;
 }
 
-export function parseBorderBlockColor(
-  { value }: { value: BorderBlockColor },
-  builder: StylesheetBuilder,
-) {
-  builder.addDescriptor("border-top-color", parseColor(value.start, builder));
-  builder.addDescriptor("border-bottom-color", parseColor(value.end, builder));
-  return;
-}
-
 export function parseBorderBlockWidth(
-  declaration: DeclarationType<"border-block-width" | "border-inline-width">,
+  declaration: DeclarationType<"border-block-width">,
   builder: StylesheetBuilder,
 ) {
   builder.addDescriptor(
@@ -1892,11 +2042,48 @@ export function parseBorderBlockWidth(
   );
 }
 
+function parseBorderBlockStyle(
+  declaration: DeclarationType<"border-block-style">,
+  builder: StylesheetBuilder,
+) {
+  if (declaration.value.start === declaration.value.end) {
+    builder.addDescriptor(
+      "border-style",
+      parseBorderStyle(declaration.value.start, builder),
+    );
+  } else {
+    builder.addWarning("property", "border-block-style");
+  }
+}
+
 export function parseBorderSideWidthDeclaration(
-  declaration: { value: BorderSideWidth },
+  declaration: DeclarationType<
+    | "border-block-end-width"
+    | "border-block-start-width"
+    | "border-bottom-width"
+    | "border-inline-end-width"
+    | "border-inline-start-width"
+    | "border-left-width"
+    | "border-right-width"
+    | "border-top-width"
+  >,
   builder: StylesheetBuilder,
 ) {
-  return parseBorderSideWidth(declaration.value, builder);
+  if (declaration.property.includes("block")) {
+    builder.addDescriptor(
+      `border-${declaration.property.includes("start") ? "top" : "bottom"}-width`,
+      parseBorderSideWidth(declaration.value, builder),
+    );
+    return;
+  } else if (declaration.property.includes("inline")) {
+    builder.addDescriptor(
+      `border-${declaration.property.includes("start") ? "left" : "right"}-width`,
+      parseBorderSideWidth(declaration.value, builder),
+    );
+    return;
+  } else {
+    return parseBorderSideWidth(declaration.value, builder);
+  }
 }
 
 export function parseBorderSideWidth(
@@ -1959,7 +2146,8 @@ export function parseLineHeight(
         case "percentage":
         case "calc":
           builder.addWarning(
-            "value",
+            "style",
+            "line-height",
             typeof length.value === "number"
               ? length.value
               : JSON.stringify(length.value),
@@ -2222,7 +2410,11 @@ export function parseDimension(
 ): StyleDescriptor {
   switch (unit) {
     case "px":
-      return value;
+      if (value === Infinity) {
+        return 9999;
+      } else {
+        return value;
+      }
     case "%":
       return `${value}%`;
     case "rnh":
@@ -2249,20 +2441,25 @@ export function parseUserSelect(
 }
 
 export function parseSVGPaint(
-  { value }: DeclarationType<"fill" | "stroke">,
+  { value, property }: DeclarationType<"fill" | "stroke">,
   builder: StylesheetBuilder,
 ) {
+  let parsedValue: StyleDescriptor | undefined;
+
   if (value.type === "none") {
-    return "transparent";
+    parsedValue = "transparent";
   } else if (value.type === "color") {
-    return parseColor(value.value, builder);
+    parsedValue = parseColor(value.value, builder);
+  } else {
+    return;
   }
 
-  return;
+  builder.addMapping({ [property]: [property] });
+  builder.addDescriptor(property, parsedValue);
 }
 
 export function round(number: number) {
-  return Math.round((number + Number.EPSILON) * 100) / 100;
+  return Math.round((number + Number.EPSILON) * 10000) / 10000;
 }
 
 export function parseDimensionPercentageFor_LengthValue(
@@ -2278,7 +2475,7 @@ export function parseDimensionPercentageFor_LengthValue(
   }
 }
 
-const allowAuto = new Set(["pointer-events"]);
+const allowAutoProperties = new Set(["pointer-events"]);
 
 export function parseEnv(
   value: EnvironmentVariable,
@@ -2296,7 +2493,7 @@ export function parseEnv(
             "var",
             [
               `--react-native-css-${value.name.value}`,
-              parseUnparsed(value.fallback, builder),
+              parseUnparsed(value.fallback, builder, value.name.value),
             ],
             1,
           ];
@@ -2319,8 +2516,9 @@ export function parseCalcFn(
   name: string,
   tokens: TokenOrValue[],
   builder: StylesheetBuilder,
+  property: string,
 ): StyleDescriptor {
-  const args = parseCalcArguments(tokens, builder);
+  const args = parseCalcArguments(tokens, builder, property);
   if (args) {
     return [{}, name, args];
   }
@@ -2331,6 +2529,7 @@ export function parseCalcFn(
 export function parseCalcArguments(
   [...args]: TokenOrValue[],
   builder: StylesheetBuilder,
+  property: string,
 ) {
   const parsed: StyleDescriptor[] = [];
 
@@ -2345,7 +2544,7 @@ export function parseCalcArguments(
       case "var":
       case "function":
       case "unresolved-color": {
-        const value = parseUnparsed(arg, builder);
+        const value = parseUnparsed(arg, builder, property);
 
         if (value === undefined) {
           return undefined;
@@ -2421,7 +2620,7 @@ export function parseCalcArguments(
               // Then drop the surrounding parenthesis
               .slice(1, -1);
 
-            parsed.push(parseCalcFn("calc", innerCalcArgs, builder));
+            parsed.push(parseCalcFn("calc", innerCalcArgs, builder, property));
 
             break;
           }
@@ -2474,6 +2673,8 @@ export function parseTranslateProp(
 export function parseUnresolvedColor(
   color: UnresolvedColor,
   builder: StylesheetBuilder,
+  property: string,
+  allowAuto: boolean,
 ): StyleDescriptor {
   switch (color.type) {
     case "rgb":
@@ -2484,26 +2685,31 @@ export function parseUnresolvedColor(
           round(color.r * 255),
           round(color.g * 255),
           round(color.b * 255),
-          parseUnparsed(color.alpha, builder),
+          parseUnparsed(color.alpha, builder, property),
         ],
       ];
     case "hsl":
       return [
         {},
         color.type,
-        [color.h, color.s, color.l, parseUnparsed(color.alpha, builder)],
+        [
+          color.h,
+          color.s,
+          color.l,
+          parseUnparsed(color.alpha, builder, property),
+        ],
       ];
     case "light-dark": {
       const extraRule = builder.extendRule({
         m: [["=", "prefers-color-scheme", "dark"]],
       });
       builder.addUnnamedDescriptor(
-        reduceParseUnparsed(color.dark, builder),
+        reduceParseUnparsed(color.dark, builder, property, allowAuto),
         false,
         extraRule,
       );
       builder.addExtraRule(extraRule);
-      return reduceParseUnparsed(color.light, builder);
+      return reduceParseUnparsed(color.light, builder, property, allowAuto);
     }
     default:
       color satisfies never;