react-native-css 3.0.0-nightly.fa5e95b → 3.0.0-preview.0

package/dist/module/compiler/declarations.js

@@ -9,7 +9,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,
@@ -29,37 +31,45 @@ 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-style": parseBorderStyleDeclaration,
   "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-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,
@@ -68,11 +78,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,
@@ -176,6 +187,7 @@ const parsers = {
   "translate": parseTranslate,
   "user-select": parseUserSelect,
   "vertical-align": parseVerticalAlign,
+  "visibility": parseVisibility,
   "width": parseSizeDeclaration,
   "z-index": parseZIndex
 };
@@ -191,9 +203,9 @@ export 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);
   }
@@ -247,15 +259,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
@@ -286,46 +308,55 @@ function parseBorderSide({
 function parseBorderBlock({
   value
 }, builder) {
-  builder.addDescriptor("border-top-color", parseColor(value.color, builder));
-  builder.addDescriptor("border-bottom-color", parseColor(value.color, builder));
-  builder.addDescriptor("border-top-width", parseBorderSideWidth(value.width, builder));
-  builder.addDescriptor("border-bottom-width", parseBorderSideWidth(value.width, 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));
 }
 function parseBorderBlockStart({
   value
 }, builder) {
-  builder.addDescriptor("border-top-color", parseColor(value.color, builder));
-  builder.addDescriptor("border-top-width", parseBorderSideWidth(value.width, builder));
+  builder.addDescriptor("border-block-start-color", parseColor(value.color, builder));
+  builder.addDescriptor("border-block-start-width", parseBorderSideWidth(value.width, builder));
 }
 function parseBorderBlockEnd({
   value
 }, builder) {
-  builder.addDescriptor("border-bottom-color", parseColor(value.color, builder));
-  builder.addDescriptor("border-bottom-width", parseBorderSideWidth(value.width, builder));
+  builder.addDescriptor("border-block-end-color", parseColor(value.color, builder));
+  builder.addDescriptor("border-block-end-width", parseBorderSideWidth(value.width, builder));
 }
 function parseBorderInline({
   value
 }, builder) {
-  builder.addDescriptor("border-left-color", parseColor(value.color, builder));
-  builder.addDescriptor("border-right-color", parseColor(value.color, builder));
-  builder.addDescriptor("border-left-width", parseBorderSideWidth(value.width, builder));
-  builder.addDescriptor("border-right-width", parseBorderSideWidth(value.width, 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));
 }
 function parseBorderInlineStart({
   value
 }, builder) {
-  builder.addDescriptor("border-left-color", parseColor(value.color, builder));
-  builder.addDescriptor("border-left-width", parseBorderSideWidth(value.width, 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));
 }
 function parseBorderInlineEnd({
   value
 }, builder) {
-  builder.addDescriptor("border-right-color", parseColor(value.color, builder));
-  builder.addDescriptor("border-right-width", parseBorderSideWidth(value.width, 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));
 }
 export function parseBorderInlineWidth(declaration, builder) {
-  builder.addDescriptor("border-left-width", parseBorderSideWidth(declaration.value.start, builder));
-  builder.addDescriptor("border-right-width", parseBorderSideWidth(declaration.value.end, builder));
+  builder.addDescriptor("border-inline-width", parseBorderSideWidth(declaration.value.start, 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));
+  } else {
+    builder.addDescriptor("border-inline-start-style", parseBorderStyle(declaration.value.start, builder));
+    builder.addDescriptor("border-inline-end-style", parseBorderStyle(declaration.value.end, builder));
+  }
 }
 function parseFlexFlow({
   value
@@ -413,26 +444,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":
@@ -464,9 +495,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
@@ -508,7 +545,8 @@ function parseZIndex({
     return;
   }
 }
-function parseContainerType(_value, _builder) {
+function parseContainerType(_declaration, builder) {
+  builder.addContainer(["___default___"]);
   return;
 }
 function parseContainerName({
@@ -523,7 +561,7 @@ function parseContainer({
   builder.addContainer(value.name.type === "none" ? false : value.name.value);
   return;
 }
-export function parseDeclarationUnparsed(declaration, builder) {
+export function parseUnparsedDeclaration(declaration, builder) {
   let property = declaration.value.propertyId.property;
   if (!(property in parsers)) {
     builder.addWarning("property", property);
@@ -544,14 +582,14 @@ export 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", [{}, `@${toRNProperty(property)}`, args]);
+      builder.addDescriptor("animation", [{}, property, args]);
     } else {
-      builder.addDescriptor(property, [{}, `@${toRNProperty(property)}`, args, 1]);
+      builder.addDescriptor(property, [{}, 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);
@@ -561,22 +599,26 @@ export function parseDeclarationUnparsed(declaration, builder) {
     }
   }
 }
-export function parseDeclarationCustom(declaration, builder) {
+export function parseCustomDeclaration(declaration, builder) {
   const property = declaration.value.name;
-  if (validProperties.has(property) || property.startsWith("--") || property.startsWith("-rn-")) {
-    builder.setWarningProperty(property);
-    builder.addDescriptor(property, parseUnparsed(declaration.value.value, builder, allowAuto.has(property)));
-  } else if (property === "-webkit-line-clamp") {
-    builder.addMapping({
-      [property]: ["numberOfLines"]
-    });
-    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 (property === "object-fit") {
+    // https://github.com/parcel-bundler/lightningcss/issues/1046
+    parseObjectFit(declaration.value, builder);
+  } else if (property === "object-position") {
+    // https://github.com/parcel-bundler/lightningcss/issues/1047
+    parseObjectPosition(declaration.value, builder);
+  } 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);
   }
 }
-export function reduceParseUnparsed(tokenOrValues, builder) {
-  const result = tokenOrValues.map(tokenOrValue => parseUnparsed(tokenOrValue, builder)).filter(v => v !== undefined);
+export 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;
   }
@@ -590,6 +632,9 @@ export 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 [];
@@ -603,21 +648,26 @@ export 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;
 }
-export function unparsedFunction(token, builder) {
-  return [{}, token.value.name, reduceParseUnparsed(token.value.arguments, builder)];
+export function unparsedFunction(token, builder, property, allowAuto) {
+  return [{}, 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
  */
-export function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
+export function parseUnparsed(tokenOrValue, builder, property, allowAuto = allowAutoProperties.has(property)) {
   if (tokenOrValue === undefined || tokenOrValue === null) {
     return;
   }
@@ -636,7 +686,7 @@ export 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;
@@ -644,12 +694,12 @@ export 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];
         }
@@ -658,50 +708,51 @@ export 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("value", `${tokenOrValue.value.name}()`);
@@ -723,7 +774,7 @@ export function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
               builder.addWarning("value", value);
               return;
             }
-            if (value === "inherit") {
+            if (value === "inherit" || value === "initial") {
               builder.addWarning("value", value);
               return;
             } else if (value === "currentcolor") {
@@ -733,6 +784,8 @@ export 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;
             }
@@ -750,11 +803,17 @@ export 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":
@@ -818,7 +877,9 @@ export function parseLength(length, builder) {
           } else if (length.value === -Infinity) {
             return -9999;
           } else {
-            return round(length.value);
+            // 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":
@@ -973,7 +1034,7 @@ export function parseSize(size, builder, options, {
   }
   return;
 }
-export function parseColorOrAuto({
+export function parseColorOrAutoDeclaration({
   value
 }, builder) {
   if (value.type === "auto") {
@@ -1363,19 +1424,28 @@ export function parseBorderStyle(value, builder) {
   builder.addWarning("value", value.top);
   return undefined;
 }
-export function parseBorderBlockColor({
-  value
-}, builder) {
-  builder.addDescriptor("border-top-color", parseColor(value.start, builder));
-  builder.addDescriptor("border-bottom-color", parseColor(value.end, builder));
-  return;
-}
 export function parseBorderBlockWidth(declaration, builder) {
-  builder.addDescriptor("border-top-width", parseBorderSideWidth(declaration.value.start, builder));
-  builder.addDescriptor("border-bottom-width", parseBorderSideWidth(declaration.value.end, 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);
+  }
+}
+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);
+  }
 }
 export function parseBorderSideWidthDeclaration(declaration, builder) {
-  return parseBorderSideWidth(declaration.value, builder);
+  builder.addDescriptor(declaration.property, parseBorderSideWidth(declaration.value, builder));
 }
 export function parseBorderSideWidth(value, builder) {
   if (value.type === "length") {
@@ -1636,14 +1706,18 @@ export function parseUserSelect({
   }
 }
 export 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);
 }
 export function round(number) {
   return Math.round((number + Number.EPSILON) * 10000) / 10000;
@@ -1657,7 +1731,7 @@ export function parseDimensionPercentageFor_LengthValue(value, builder) {
     return parseLength(value.value, builder);
   }
 }
-const allowAuto = new Set(["pointer-events"]);
+const allowAutoProperties = new Set(["pointer-events"]);
 export function parseEnv(value, builder) {
   switch (value.name.type) {
     case "ua":
@@ -1666,7 +1740,7 @@ export 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":
@@ -1680,17 +1754,16 @@ export function parseEnv(value, builder) {
   }
   return;
 }
-export function parseCalcFn(name, tokens, builder) {
-  const args = parseCalcArguments(tokens, builder);
+export function parseCalcFn(name, tokens, builder, property) {
+  const args = parseCalcArguments(tokens, builder, property);
   if (args) {
     return [{}, name, args];
   }
   return;
 }
-export function parseCalcArguments([...args], builder) {
+export 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":
         {
@@ -1701,7 +1774,7 @@ export 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;
           }
@@ -1736,44 +1809,21 @@ export 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":
@@ -1811,20 +1861,20 @@ export function parseTranslateProp(value, prop, builder) {
   }
   return parseLength(value[prop], builder);
 }
-export function parseUnresolvedColor(color, builder) {
+export 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;
@@ -1886,7 +1936,7 @@ export function addTransitionValue(declaration, builder) {
       }
     case "transition-property":
       {
-        builder.addDescriptor(declaration.property, declaration.value.map(v => v.property).filter(v => v in parsers || v === "all" || v === "none").map(v => toRNProperty(v)));
+        builder.addDescriptor(declaration.property, declaration.value.map(v => v.property).filter(v => v in parsers && !["visibility"].includes(v) || v === "all" || v === "none").map(v => toRNProperty(v)));
         return;
       }
     case "transition-duration":
@@ -1983,7 +2033,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;
@@ -2018,6 +2068,27 @@ function parseGradientItem(item, builder) {
       return parseLength(item.value, builder);
   }
 }
+function parseObjectFit(declaration, builder) {
+  builder.addMapping({
+    "object-fit": "contentFit"
+  });
+  builder.addDescriptor("object-fit", parseUnparsed(declaration.value, builder, "object-fit"));
+}
+function parseObjectPosition(declaration, builder) {
+  builder.addMapping({
+    "object-position": "contentPosition"
+  });
+  builder.addDescriptor("object-position", [{}, "join", [parseUnparsed(declaration.value, builder, "object-position"), " "]]);
+}
+function parseVisibility(declaration, builder) {
+  if (declaration.value === "visible") {
+    builder.addDescriptor("opacity", 1);
+  } else if (declaration.value === "hidden") {
+    builder.addDescriptor("opacity", 0);
+  } else {
+    builder.addWarning("value", declaration.value);
+  }
+}
 function parseFilter(declaration, builder) {
   if (declaration.value.type === "none") {
     return "unset";
@@ -2040,6 +2111,7 @@ function parseFilter(declaration, builder) {
           [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)]];
       case "url":
         return;
     }