react-native-css 3.0.0-nightly.61014be → 3.0.0-nightly.67b5d08

package/dist/commonjs/compiler/declarations.js

@@ -13,8 +13,9 @@ exports.parseAlignItems = parseAlignItems;
 exports.parseAlignSelf = parseAlignSelf;
 exports.parseAngle = parseAngle;
 exports.parseAspectRatio = parseAspectRatio;
-exports.parseBorderBlockColor = parseBorderBlockColor;
 exports.parseBorderBlockWidth = parseBorderBlockWidth;
+exports.parseBorderInlineStyle = parseBorderInlineStyle;
+exports.parseBorderInlineWidth = parseBorderInlineWidth;
 exports.parseBorderSideWidth = parseBorderSideWidth;
 exports.parseBorderSideWidthDeclaration = parseBorderSideWidthDeclaration;
 exports.parseBorderStyle = parseBorderStyle;
@@ -24,10 +25,9 @@ exports.parseCalcArguments = parseCalcArguments;
 exports.parseCalcFn = parseCalcFn;
 exports.parseColor = parseColor;
 exports.parseColorDeclaration = parseColorDeclaration;
-exports.parseColorOrAuto = parseColorOrAuto;
+exports.parseColorOrAutoDeclaration = parseColorOrAutoDeclaration;
+exports.parseCustomDeclaration = parseCustomDeclaration;
 exports.parseDeclaration = parseDeclaration;
-exports.parseDeclarationCustom = parseDeclarationCustom;
-exports.parseDeclarationUnparsed = parseDeclarationUnparsed;
 exports.parseDimension = parseDimension;
 exports.parseDimensionPercentageFor_LengthValue = parseDimensionPercentageFor_LengthValue;
 exports.parseDisplay = parseDisplay;
@@ -67,6 +67,7 @@ exports.parseTextShadow = parseTextShadow;
 exports.parseTime = parseTime;
 exports.parseTranslateProp = parseTranslateProp;
 exports.parseUnparsed = parseUnparsed;
+exports.parseUnparsedDeclaration = parseUnparsedDeclaration;
 exports.parseUnresolvedColor = parseUnresolvedColor;
 exports.parseUserSelect = parseUserSelect;
 exports.parseVerticalAlign = parseVerticalAlign;
@@ -83,7 +84,9 @@ const CommaSeparator = Symbol("CommaSeparator");
 const propertyRename = {
   "background-image": "experimental_backgroundImage"
 };
-const unparsedRuntimeParsing = new Set(["animation", "text-shadow", "transform", "box-shadow", "border"]);
+
+// TODO: We need a better way to handle this
+const unparsedRuntimeParsing = new Set(["animation", "border", "box-shadow", "text-shadow", "transform", "scale", "rotate", "translate"]);
 const parsers = {
   "align-content": parseAlignContent,
   "align-items": parseAlignItems,
@@ -103,37 +106,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,
@@ -142,11 +152,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": parseColorOrAutoDeclaration,
   "color": parseFontColorDeclaration,
   "column-gap": parseGap,
   "container": parseContainer,
@@ -265,9 +276,9 @@ function parseDeclaration(declaration, builder) {
     return;
   }
   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);
   }
@@ -276,6 +287,7 @@ function parseWithParser(declaration, builder) {
   if (declaration.property in parsers) {
     const parser = parsers[declaration.property];
     builder.descriptorProperty = declaration.property;
+    builder.setWarningProperty(declaration.property);
     const value = parser(declaration, builder, declaration.property);
     if (value !== undefined) {
       builder.addDescriptor(propertyRename[declaration.property] ?? declaration.property, value);
@@ -320,15 +332,25 @@ function parseBorderRadius({
     "border-top-right-radius": parseSize2DDimensionPercentage(value.topRight, builder)
   });
 }
-function parseBorderColor({
-  value
-}, builder) {
-  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)
-  });
+function parseBorderColor(declaration, 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({
   value
@@ -396,6 +418,19 @@ function parseBorderInlineEnd({
   builder.addDescriptor("border-right-color", parseColor(value.color, builder));
   builder.addDescriptor("border-right-width", parseBorderSideWidth(value.width, builder));
 }
+function parseBorderInlineWidth(declaration, builder) {
+  builder.addDescriptor("border-left-width", parseBorderSideWidth(declaration.value.start, builder));
+  builder.addDescriptor("border-right-width", parseBorderSideWidth(declaration.value.end, builder));
+}
+function parseBorderInlineStyle(declaration, builder) {
+  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
 }, builder) {
@@ -482,26 +517,26 @@ function parseFont({
 function parseTransform({
   value
 }, builder) {
-  builder.addDescriptor("transform", [{}, "@transform", value.flatMap(t => {
+  builder.addDescriptor("transform", [{}, "transform", value.flatMap(t => {
     switch (t.type) {
       case "perspective":
-        return [[{}, "@perspective", parseLength(t.value, builder)]];
+        return [[{}, "perspective", parseLength(t.value, builder)]];
       case "translate":
-        return [[{}, "@translateX", parseLengthOrCoercePercentageToRuntime(t.value[0], builder)], [[{}, "@translateY", parseLengthOrCoercePercentageToRuntime(t.value[1], builder)]]];
+        return [[{}, "translateX", parseLengthOrCoercePercentageToRuntime(t.value[0], builder)], [[{}, "translateY", parseLengthOrCoercePercentageToRuntime(t.value[1], builder)]]];
       case "translateX":
-        return [[{}, "@translateX", parseLengthOrCoercePercentageToRuntime(t.value, builder)]];
+        return [[{}, "translateX", parseLengthOrCoercePercentageToRuntime(t.value, builder)]];
       case "translateY":
-        return [[{}, "@translateY", parseLengthOrCoercePercentageToRuntime(t.value, builder)]];
+        return [[{}, "translateY", parseLengthOrCoercePercentageToRuntime(t.value, builder)]];
       case "rotate":
-        return [[{}, "@rotate", parseAngle(t.value, builder)]];
+        return [[{}, "rotate", parseAngle(t.value, builder)]];
       case "rotateX":
-        return [[{}, "@rotateX", parseAngle(t.value, builder)]];
+        return [[{}, "rotateX", parseAngle(t.value, builder)]];
       case "rotateY":
-        return [[{}, "@rotateY", parseAngle(t.value, builder)]];
+        return [[{}, "rotateY", parseAngle(t.value, builder)]];
       case "rotateZ":
-        return [[{}, "@rotateZ", parseAngle(t.value, builder)]];
+        return [[{}, "rotateZ", parseAngle(t.value, builder)]];
       case "scale":
-        return [[{}, "@scaleX", parseLength(t.value[0], builder)], [{}, "@scaleY", parseLength(t.value[1], builder)]];
+        return [[{}, "scaleX", parseLength(t.value[0], builder)], [{}, "scaleY", parseLength(t.value[1], builder)]];
       case "scaleX":
         return [[{}, "scaleX", parseLength(t.value, builder)]];
       case "scaleY":
@@ -533,9 +568,15 @@ function parseTranslate({
 function parseRotate({
   value
 }, builder) {
-  builder.addDescriptor("rotateX", [{}, "rotateX", parseAngle(value.x, builder)]);
-  builder.addDescriptor("rotateY", [{}, "rotateY", parseAngle(value.y, builder)]);
-  builder.addDescriptor("rotateZ", [{}, "rotateZ", parseAngle(value.z, builder)]);
+  if (value.x) {
+    builder.addDescriptor("rotateX", [{}, "rotateX", parseAngle(value.angle, builder)]);
+  }
+  if (value.y) {
+    builder.addDescriptor("rotateY", [{}, "rotateY", parseAngle(value.angle, builder)]);
+  }
+  if (value.z) {
+    builder.addDescriptor("rotateZ", [{}, "rotateZ", parseAngle(value.angle, builder)]);
+  }
 }
 function parseScale({
   value
@@ -555,7 +596,11 @@ 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({
   value
@@ -573,7 +618,8 @@ function parseZIndex({
     return;
   }
 }
-function parseContainerType(_value, _builder) {
+function parseContainerType(_declaration, builder) {
+  builder.addContainer(["___default___"]);
   return;
 }
 function parseContainerName({
@@ -588,12 +634,13 @@ function parseContainer({
   builder.addContainer(value.name.type === "none" ? false : value.name.value);
   return;
 }
-function parseDeclarationUnparsed(declaration, builder) {
+function parseUnparsedDeclaration(declaration, builder) {
   let property = declaration.value.propertyId.property;
   if (!(property in parsers)) {
     builder.addWarning("property", property);
     return;
   }
+  builder.setWarningProperty(property);
 
   /**
    * React Native doesn't support all the logical properties
@@ -608,14 +655,14 @@ function parseDeclarationUnparsed(declaration, builder) {
    */
   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", [{}, `@${(0, _selectors.toRNProperty)(property)}`, args]);
+      builder.addDescriptor("animation", [{}, property, args]);
     } else {
-      builder.addDescriptor(property, [{}, `@${(0, _selectors.toRNProperty)(property)}`, args, 1]);
+      builder.addDescriptor(property, [{}, (0, _selectors.toRNProperty)(property), args, 1]);
     }
   } else {
-    const value = parseUnparsed(declaration.value.value, builder);
+    const value = parseUnparsed(declaration.value.value, builder, property);
     builder.addDescriptor(property, value);
     if (property === "font-size") {
       builder.addDescriptor("--__rn-css-em", value);
@@ -625,16 +672,20 @@ function parseDeclarationUnparsed(declaration, builder) {
     }
   }
 }
-function parseDeclarationCustom(declaration, builder) {
+function parseCustomDeclaration(declaration, builder) {
   const property = declaration.value.name;
-  if (validProperties.has(property) || property.startsWith("--") || property.startsWith("-rn-")) {
-    builder.addDescriptor(property, parseUnparsed(declaration.value.value, builder, allowAuto.has(property)));
+  if (property === "-webkit-line-clamp") {
+    builder.addDescriptor(property, parseUnparsed(declaration.value.value, builder, property));
+  } else if (property === "-rn-ripple-style") {
+    builder.addDescriptor(property, parseUnparsed(declaration.value.value, builder, property) === "borderless");
+  } else if (validProperties.has(property) || property.startsWith("--") || property.startsWith("-rn-")) {
+    builder.addDescriptor(property, parseUnparsed(declaration.value.value, builder, property));
   } else {
     builder.addWarning("property", declaration.value.name);
   }
 }
-function reduceParseUnparsed(tokenOrValues, builder) {
-  const result = tokenOrValues.map(tokenOrValue => parseUnparsed(tokenOrValue, builder)).filter(v => v !== undefined);
+function reduceParseUnparsed(tokenOrValues, builder, property, allowAuto) {
+  const result = tokenOrValues.map(tokenOrValue => parseUnparsed(tokenOrValue, builder, property, allowAuto)).filter(v => v !== undefined);
   if (result.length === 0) {
     return undefined;
   }
@@ -648,6 +699,9 @@ function reduceParseUnparsed(tokenOrValues, builder) {
       currentGroup.push(value);
     }
   }
+
+  // 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 => {
     if (!Array.isArray(group)) {
       return [];
@@ -661,21 +715,26 @@ function reduceParseUnparsed(tokenOrValues, builder) {
       } 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];
     }
   });
   return groups.length === 1 ? groups[0] : groups;
 }
-function unparsedFunction(token, builder) {
-  return [{}, token.value.name, reduceParseUnparsed(token.value.arguments, builder)];
+function unparsedFunction(token, builder, property, allowAuto) {
+  return [{}, (0, _selectors.toRNProperty)(token.value.name), reduceParseUnparsed(token.value.arguments, builder, property, allowAuto)];
 }
 
 /**
  * When the CSS cannot be parsed (often due to a runtime condition like a CSS variable)
  * This export function best efforts parsing it into a export function that we can evaluate at runtime
  */
-function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
+function parseUnparsed(tokenOrValue, builder, property, allowAuto = allowAutoProperties.has(property)) {
   if (tokenOrValue === undefined || tokenOrValue === null) {
     return;
   }
@@ -694,7 +753,7 @@ function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
     return round(tokenOrValue);
   }
   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;
@@ -702,12 +761,12 @@ function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
   switch (tokenOrValue.type) {
     case "unresolved-color":
       {
-        return parseUnresolvedColor(tokenOrValue.value, builder);
+        return parseUnresolvedColor(tokenOrValue.value, builder, property, allowAuto);
       }
     case "var":
       {
         let args = 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];
         }
@@ -716,53 +775,54 @@ function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
     case "function":
       {
         switch (tokenOrValue.value.name) {
-          case "translate":
-          case "rotate":
-          case "rotateX":
-          case "rotateY":
-          case "skewX":
-          case "skewY":
-          case "scale":
-          case "scaleX":
-          case "scaleY":
-          case "translateX":
-          case "translateY":
-            tokenOrValue.value.name = `@${tokenOrValue.value.name}`;
-            return unparsedFunction(tokenOrValue, builder);
+          case "blur":
           case "brightness":
           case "contrast":
           case "cubic-bezier":
           case "drop-shadow":
           case "fontScale":
+          case "getPixelSizeForLayoutSize":
           case "grayscale":
           case "hsl":
           case "hsla":
           case "hue-rotate":
           case "invert":
-          case "linear-gradient":
           case "opacity":
           case "pixelScale":
-          case "pixelSizeForLayoutSize":
           case "platformColor":
-          case "radial-gradient":
           case "rgb":
           case "rgba":
+          case "rotate":
+          case "rotateX":
+          case "rotateY":
           case "roundToNearestPixel":
           case "saturate":
+          case "scale":
+          case "scaleX":
+          case "scaleY":
           case "sepia":
           case "shadow":
+          case "skewX":
+          case "skewY":
           case "steps":
-            return unparsedFunction(tokenOrValue, builder);
+          case "translate":
+          case "translateX":
+          case "translateY":
+            return unparsedFunction(tokenOrValue, builder, property, allowAuto);
+          case "linear-gradient":
+          case "radial-gradient":
+            // These are special as React Native requires the '-' in their name
+            return [{}, tokenOrValue.value.name, reduceParseUnparsed(tokenOrValue.value.arguments, builder, property, allowAuto)];
           case "hairlineWidth":
             return [{}, tokenOrValue.value.name, []];
           case "calc":
           case "max":
           case "min":
           case "clamp":
-            return parseCalcFn(tokenOrValue.value.name, tokenOrValue.value.arguments, builder);
+            return parseCalcFn(tokenOrValue.value.name, tokenOrValue.value.arguments, builder, property);
           default:
             {
-              builder.addWarning("function", tokenOrValue.value.name);
+              builder.addWarning("value", `${tokenOrValue.value.name}()`);
               return;
             }
         }
@@ -791,6 +851,8 @@ function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
               return true;
             } else if (value === "false") {
               return false;
+            } else if (value === "infinity") {
+              return Number.MAX_SAFE_INTEGER;
             } else {
               return value;
             }
@@ -808,11 +870,17 @@ function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
           return parseDimension(tokenOrValue.value, builder);
         case "comma":
           return CommaSeparator;
+        case "delim":
+          {
+            if (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":
@@ -865,22 +933,32 @@ function parseLength(length, builder) {
     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;
+        {
+          if (length.value === Infinity) {
+            return 9999;
+          } else if (length.value === -Infinity) {
+            return -9999;
+          } else {
+            // Normalize large values to safe integers, e.g. `calc(infinity * 1px)`
+            const value = Math.max(Math.min(length.value, Number.MAX_SAFE_INTEGER), Number.MIN_SAFE_INTEGER);
+            return round(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":
@@ -965,7 +1043,7 @@ function parseAngle(angle, builder) {
     case "rad":
       return `${angle.value}${angle.type}`;
     default:
-      builder.addWarning("value", angle.value);
+      builder.addWarning("value", `${angle.value} ${angle.type}`);
       return undefined;
   }
 }
@@ -1023,7 +1101,7 @@ function parseSize(size, builder, options, {
   }
   return;
 }
-function parseColorOrAuto({
+function parseColorOrAutoDeclaration({
   value
 }, builder) {
   if (value.type === "auto") {
@@ -1413,19 +1491,27 @@ function parseBorderStyle(value, builder) {
   builder.addWarning("value", value.top);
   return undefined;
 }
-function parseBorderBlockColor({
-  value
-}, builder) {
-  builder.addDescriptor("border-top-color", parseColor(value.start, builder));
-  builder.addDescriptor("border-bottom-color", parseColor(value.end, builder));
-  return;
-}
 function parseBorderBlockWidth(declaration, builder) {
   builder.addDescriptor("border-top-width", parseBorderSideWidth(declaration.value.start, builder));
   builder.addDescriptor("border-bottom-width", parseBorderSideWidth(declaration.value.end, builder));
 }
+function parseBorderBlockStyle(declaration, builder) {
+  if (declaration.value.start === declaration.value.end) {
+    builder.addDescriptor("border-style", parseBorderStyle(declaration.value.start, builder));
+  } else {
+    builder.addWarning("property", "border-block-style");
+  }
+}
 function parseBorderSideWidthDeclaration(declaration, builder) {
-  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);
+  }
 }
 function parseBorderSideWidth(value, builder) {
   if (value.type === "length") {
@@ -1470,7 +1556,7 @@ function parseLineHeight(value, builder) {
             return parseLength(length, builder);
           case "percentage":
           case "calc":
-            builder.addWarning("value", typeof length.value === "number" ? length.value : JSON.stringify(length.value));
+            builder.addWarning("style", "line-height", typeof length.value === "number" ? length.value : JSON.stringify(length.value));
             return;
           default:
             {
@@ -1540,8 +1626,8 @@ function parseLengthOrCoercePercentageToRuntime(value, builder) {
 }
 function parseGap(declaration, builder) {
   if ("column" in declaration.value) {
-    builder.addDescriptor("row-gap", parseGap(declaration, builder));
-    builder.addDescriptor("column-gap", parseGap(declaration, builder));
+    builder.addDescriptor("row-gap", parseGapValue(declaration.value.row, builder));
+    builder.addDescriptor("column-gap", parseGapValue(declaration.value.column, builder));
     return;
   } else {
     if (declaration.value.type === "normal") {
@@ -1551,6 +1637,13 @@ function parseGap(declaration, builder) {
     return parseLength(declaration.value.value, builder);
   }
 }
+function parseGapValue(value, builder) {
+  if (value.type === "normal") {
+    return;
+  } else {
+    return parseLength(value.value, builder);
+  }
+}
 function parseTextAlign({
   value
 }, builder) {
@@ -1650,7 +1743,11 @@ function parseDimension({
 }, builder) {
   switch (unit) {
     case "px":
-      return value;
+      if (value === Infinity) {
+        return 9999;
+      } else {
+        return value;
+      }
     case "%":
       return `${value}%`;
     case "rnh":
@@ -1675,17 +1772,21 @@ function parseUserSelect({
   }
 }
 function parseSVGPaint({
-  value
+  value,
+  property
 }, builder) {
+  let parsedValue;
   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.addDescriptor(property, parsedValue);
 }
 function round(number) {
-  return Math.round((number + Number.EPSILON) * 100) / 100;
+  return Math.round((number + Number.EPSILON) * 10000) / 10000;
 }
 function parseDimensionPercentageFor_LengthValue(value, builder) {
   if (value.type === "calc") {
@@ -1696,7 +1797,7 @@ function parseDimensionPercentageFor_LengthValue(value, builder) {
     return parseLength(value.value, builder);
   }
 }
-const allowAuto = new Set(["pointer-events"]);
+const allowAutoProperties = new Set(["pointer-events"]);
 function parseEnv(value, builder) {
   switch (value.name.type) {
     case "ua":
@@ -1705,7 +1806,7 @@ function parseEnv(value, builder) {
         case "safe-area-inset-right":
         case "safe-area-inset-bottom":
         case "safe-area-inset-left":
-          return [{}, "var", [`--react-native-css-${value.name.value}`, parseUnparsed(value.fallback, builder)], 1];
+          return [{}, "var", [`--react-native-css-${value.name.value}`, parseUnparsed(value.fallback, builder, value.name.value)], 1];
         case "viewport-segment-width":
         case "viewport-segment-height":
         case "viewport-segment-top":
@@ -1719,17 +1820,16 @@ function parseEnv(value, builder) {
   }
   return;
 }
-function parseCalcFn(name, tokens, builder) {
-  const args = parseCalcArguments(tokens, builder);
+function parseCalcFn(name, tokens, builder, property) {
+  const args = parseCalcArguments(tokens, builder, property);
   if (args) {
     return [{}, name, args];
   }
   return;
 }
-function parseCalcArguments([...args], builder) {
+function parseCalcArguments([...args], builder, property) {
   const parsed = [];
-  let mode;
-  for (const [currentIndex, arg] of args.entries()) {
+  for (const arg of args) {
     switch (arg.type) {
       case "env":
         {
@@ -1740,7 +1840,7 @@ function parseCalcArguments([...args], builder) {
       case "function":
       case "unresolved-color":
         {
-          const value = parseUnparsed(arg, builder);
+          const value = parseUnparsed(arg, builder, property);
           if (value === undefined) {
             return undefined;
           }
@@ -1775,44 +1875,21 @@ function parseCalcArguments([...args], builder) {
             }
             break;
           case "percentage":
-            mode ??= "percentage";
-            if (mode !== "percentage") return;
-            parsed.push(`${arg.value.value * 100}%`);
+            parsed.push(`${round(arg.value.value * 100)}%`);
             break;
           case "number":
             {
-              mode ??= "number";
-              if (mode !== "number") return;
-              parsed.push(arg.value.value);
+              parsed.push(round(arg.value.value));
               break;
             }
           case "parenthesis-block":
             {
-              /**
-               * If we have a parenthesis block, we just treat it as a nested calc function
-               * Because there could be multiple parenthesis blocks, this is recursive
-               */
-              let closeParenthesisIndex = -1;
-              for (let index = args.length - 1; index > 0; index--) {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                const value = args[index];
-                if (value.type === "token" && value.value.type === "close-parenthesis") {
-                  closeParenthesisIndex = index;
-                  break;
-                }
-              }
-              if (closeParenthesisIndex === -1) {
-                return;
-              }
-              const innerCalcArgs = args
-              // Extract the inner calcArgs including the parenthesis. This mutates args
-              .splice(currentIndex, closeParenthesisIndex - currentIndex + 1)
-              // Then drop the surrounding parenthesis
-              .slice(1, -1);
-              parsed.push(parseCalcFn("calc", innerCalcArgs, builder));
+              parsed.push("(");
               break;
             }
           case "close-parenthesis":
+            parsed.push(")");
+            break;
           case "string":
           case "function":
           case "ident":
@@ -1850,20 +1927,20 @@ function parseTranslateProp(value, prop, builder) {
   }
   return parseLength(value[prop], builder);
 }
-function parseUnresolvedColor(color, builder) {
+function parseUnresolvedColor(color, builder, property, allowAuto) {
   switch (color.type) {
     case "rgb":
-      return [{}, "rgba", [round(color.r * 255), round(color.g * 255), round(color.b * 255), parseUnparsed(color.alpha, builder)]];
+      return [{}, "rgba", [round(color.r * 255), round(color.g * 255), round(color.b * 255), parseUnparsed(color.alpha, builder, property)]];
     case "hsl":
-      return [{}, color.type, [color.h, color.s, color.l, parseUnparsed(color.alpha, builder)]];
+      return [{}, color.type, [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), false, extraRule);
+        builder.addUnnamedDescriptor(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;
@@ -2022,7 +2099,7 @@ function parseGradient(gradient, builder) {
   switch (gradient.type) {
     case "linear":
       {
-        return [{}, "@linear-gradient", [parseLineDirection(gradient.direction, builder), ...gradient.items.map(item => parseGradientItem(item, builder))]];
+        return [{}, "linear-gradient", [parseLineDirection(gradient.direction, builder), ...gradient.items.map(item => parseGradientItem(item, builder))]];
       }
   }
   return;
@@ -2079,6 +2156,7 @@ function parseFilter(declaration, builder) {
           [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)]];
       case "url":
         return;
     }