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

package/src/compiler/declarations.ts

@@ -1,13 +1,13 @@
-// cSpell:ignore rcap,vmin,svmin,lvmin,dvmin,cqmin,vmax,svmax,lvmax,dvmax,cqmax,currentcolor,oklab,oklch,prophoto
+// cSpell:ignore rcap,vmin,svmin,lvmin,dvmin,cqmin,vmax,svmax,lvmax,dvmax,cqmax,currentcolor,oklab,oklch,prophoto,squircle,oldstyle,nums
 
 import Color from "colorjs.io";
 import type {
   Angle,
-  BorderBlockColor,
   BorderSideWidth,
   BorderStyle,
   ColorOrAuto,
   CssColor,
+  CustomProperty,
   Declaration,
   DimensionPercentageFor_LengthValue,
   EnvironmentVariable,
@@ -63,12 +63,16 @@ const propertyRename: Record<string, string> = {
   "background-image": "experimental_backgroundImage",
 };
 
+// TODO: We need a better way to handle this
 const unparsedRuntimeParsing = new Set([
   "animation",
+  "border",
+  "box-shadow",
   "text-shadow",
   "transform",
-  "box-shadow",
-  "border",
+  "scale",
+  "rotate",
+  "translate",
 ]);
 
 const parsers: {
@@ -87,42 +91,51 @@ const parsers: {
   "animation-play-state": addAnimationValue,
   "animation-timing-function": addAnimationValue,
   "aspect-ratio": parseAspectRatio,
+  "backface-visibility": parseBackfaceVisibility,
   "background-color": parseColorDeclaration,
   "background-image": parseBackgroundImage,
   "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,
@@ -131,21 +144,24 @@ 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,
+  "bottom": parseSizeWithAutoDeclaration,
   "box-shadow": parseBoxShadow,
-  "caret-color": parseColorOrAuto,
+  "box-sizing": parseBoxSizing,
+  "caret-color": parseColorOrAutoDeclaration,
   "color": parseFontColorDeclaration,
   "column-gap": parseGap,
   "container": parseContainer,
   "container-name": parseContainerName,
   "container-type": parseContainerType,
   "display": parseDisplay,
+  "direction": parseDirection,
   "fill": parseSVGPaint,
   "filter": parseFilter,
   "flex": parseFlex,
-  "flex-basis": parseLengthPercentageOrAutoDeclaration,
+  "flex-basis": parseLengthPercentageDeclaration,
   "flex-direction": ({ value }) => value,
   "flex-flow": parseFlexFlow,
   "flex-grow": ({ value }) => value,
@@ -162,26 +178,26 @@ const parsers: {
   "inline-size": parseSizeDeclaration,
   "inset": parseInset,
   "inset-block": parseInsetBlock,
-  "inset-block-end": parseLengthPercentageOrAutoDeclaration,
-  "inset-block-start": parseLengthPercentageOrAutoDeclaration,
+  "inset-block-end": parseLengthPercentageDeclaration,
+  "inset-block-start": parseLengthPercentageDeclaration,
   "inset-inline": parseInsetInline,
-  "inset-inline-end": parseLengthPercentageOrAutoDeclaration,
-  "inset-inline-start": parseLengthPercentageOrAutoDeclaration,
+  "inset-inline-end": parseLengthPercentageDeclaration,
+  "inset-inline-start": parseLengthPercentageDeclaration,
   "justify-content": parseJustifyContent,
-  "left": parseSizeDeclaration,
+  "left": parseSizeWithAutoDeclaration,
   "letter-spacing": parseLetterSpacing,
   "line-height": parseLineHeightDeclaration,
   "margin": parseMargin,
   "margin-block": parseMarginBlock,
   "margin-block-end": parseLengthPercentageOrAutoDeclaration,
   "margin-block-start": parseLengthPercentageOrAutoDeclaration,
-  "margin-bottom": parseSizeDeclaration,
+  "margin-bottom": parseSizeWithAutoDeclaration,
   "margin-inline": parseMarginInline,
   "margin-inline-end": parseLengthPercentageOrAutoDeclaration,
   "margin-inline-start": parseLengthPercentageOrAutoDeclaration,
-  "margin-left": parseSizeDeclaration,
-  "margin-right": parseSizeDeclaration,
-  "margin-top": parseSizeDeclaration,
+  "margin-left": parseSizeWithAutoDeclaration,
+  "margin-right": parseSizeWithAutoDeclaration,
+  "margin-top": parseSizeWithAutoDeclaration,
   "max-block-size": parseSizeDeclaration,
   "max-height": parseSizeDeclaration,
   "max-inline-size": parseSizeDeclaration,
@@ -190,21 +206,24 @@ const parsers: {
   "min-height": parseSizeDeclaration,
   "min-inline-size": parseSizeDeclaration,
   "min-width": parseSizeDeclaration,
-  "opacity": ({ value }) => value,
+  "opacity": ({ value }) => round(value),
+  "outline-color": parseColorDeclaration,
+  "outline-style": parseOutlineStyle,
+  "outline-width": parseBorderSideWidthDeclaration,
   "overflow": parseOverflow,
   "padding": parsePadding,
   "padding-block": parsePaddingBlock,
-  "padding-block-end": parseLengthPercentageOrAutoDeclaration,
-  "padding-block-start": parseLengthPercentageOrAutoDeclaration,
+  "padding-block-end": parseLengthPercentageDeclaration,
+  "padding-block-start": parseLengthPercentageDeclaration,
   "padding-bottom": parseSizeDeclaration,
   "padding-inline": parsePaddingInline,
-  "padding-inline-end": parseLengthPercentageOrAutoDeclaration,
-  "padding-inline-start": parseLengthPercentageOrAutoDeclaration,
+  "padding-inline-end": parseLengthPercentageDeclaration,
+  "padding-inline-start": parseLengthPercentageDeclaration,
   "padding-left": parseSizeDeclaration,
   "padding-right": parseSizeDeclaration,
   "padding-top": parseSizeDeclaration,
   "position": parsePosition,
-  "right": parseSizeDeclaration,
+  "right": parseSizeWithAutoDeclaration,
   "rotate": parseRotate,
   "row-gap": parseGap,
   "scale": parseScale,
@@ -217,7 +236,7 @@ const parsers: {
   "text-decoration-style": parseTextDecorationStyle,
   "text-shadow": parseTextShadow,
   "text-transform": ({ value }) => value.case,
-  "top": parseSizeDeclaration,
+  "top": parseSizeWithAutoDeclaration,
   "transform": parseTransform,
   "transition": addTransitionValue,
   "transition-delay": addTransitionValue,
@@ -227,6 +246,7 @@ const parsers: {
   "translate": parseTranslate,
   "user-select": parseUserSelect,
   "vertical-align": parseVerticalAlign,
+  "visibility": parseVisibility,
   "width": parseSizeDeclaration,
   "z-index": parseZIndex,
 };
@@ -256,9 +276,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);
   }
@@ -344,15 +364,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(
@@ -398,18 +444,14 @@ function parseBorderBlock(
   { value }: DeclarationType<"border-block">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor("border-top-color", parseColor(value.color, builder));
+  builder.addDescriptor("border-block-color", parseColor(value.color, builder));
   builder.addDescriptor(
-    "border-bottom-color",
-    parseColor(value.color, builder),
-  );
-  builder.addDescriptor(
-    "border-top-width",
+    "border-block-width",
     parseBorderSideWidth(value.width, builder),
   );
   builder.addDescriptor(
-    "border-bottom-width",
-    parseBorderSideWidth(value.width, builder),
+    "border-block-style",
+    parseBorderStyle(value.style, builder),
   );
 }
 
@@ -417,9 +459,12 @@ function parseBorderBlockStart(
   { value }: DeclarationType<"border-block-start">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor("border-top-color", parseColor(value.color, builder));
   builder.addDescriptor(
-    "border-top-width",
+    "border-block-start-color",
+    parseColor(value.color, builder),
+  );
+  builder.addDescriptor(
+    "border-block-start-width",
     parseBorderSideWidth(value.width, builder),
   );
 }
@@ -429,11 +474,11 @@ function parseBorderBlockEnd(
   builder: StylesheetBuilder,
 ) {
   builder.addDescriptor(
-    "border-bottom-color",
+    "border-block-end-color",
     parseColor(value.color, builder),
   );
   builder.addDescriptor(
-    "border-bottom-width",
+    "border-block-end-width",
     parseBorderSideWidth(value.width, builder),
   );
 }
@@ -442,38 +487,54 @@ function parseBorderInline(
   { value }: DeclarationType<"border-inline">,
   builder: StylesheetBuilder,
 ) {
-  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),
+    "border-inline-color",
+    parseColor(value.color, builder),
   );
   builder.addDescriptor(
-    "border-right-width",
+    "border-inline-width",
     parseBorderSideWidth(value.width, builder),
   );
+  builder.addDescriptor(
+    "border-inline-style",
+    parseBorderStyle(value.style, builder),
+  );
 }
 
 function parseBorderInlineStart(
   { value }: DeclarationType<"border-inline-start">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor("border-left-color", parseColor(value.color, builder));
   builder.addDescriptor(
-    "border-left-width",
+    "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 }: DeclarationType<"border-inline-end">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor("border-right-color", parseColor(value.color, builder));
   builder.addDescriptor(
-    "border-right-width",
+    "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(
@@ -481,13 +542,39 @@ export function parseBorderInlineWidth(
   builder: StylesheetBuilder,
 ) {
   builder.addDescriptor(
-    "border-left-width",
+    "border-inline-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(
+      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(
@@ -530,8 +617,11 @@ function parseMarginBlock(
     "margin-block-start": parseLengthPercentageOrAuto(
       value.blockStart,
       builder,
+      { allowAuto: true },
     ),
-    "margin-block-end": parseLengthPercentageOrAuto(value.blockEnd, builder),
+    "margin-block-end": parseLengthPercentageOrAuto(value.blockEnd, builder, {
+      allowAuto: true,
+    }),
   });
 }
 
@@ -543,8 +633,11 @@ function parseMarginInline(
     "margin-inline-start": parseLengthPercentageOrAuto(
       value.inlineStart,
       builder,
+      { allowAuto: true },
     ),
-    "margin-inline-end": parseLengthPercentageOrAuto(value.inlineEnd, builder),
+    "margin-inline-end": parseLengthPercentageOrAuto(value.inlineEnd, builder, {
+      allowAuto: true,
+    }),
   });
 }
 
@@ -610,22 +703,22 @@ function parseTransform(
 ) {
   builder.addDescriptor("transform", [
     {},
-    "@transform",
+    "transform",
     value.flatMap((t): StyleDescriptor[] => {
       switch (t.type) {
         case "perspective":
-          return [[{}, "@perspective", parseLength(t.value, builder)]];
+          return [[{}, "perspective", parseLength(t.value, builder)]];
         case "translate":
           return [
             [
               {},
-              "@translateX",
+              "translateX",
               parseLengthOrCoercePercentageToRuntime(t.value[0], builder),
             ],
             [
               [
                 {},
-                "@translateY",
+                "translateY",
                 parseLengthOrCoercePercentageToRuntime(t.value[1], builder),
               ],
             ],
@@ -634,7 +727,7 @@ function parseTransform(
           return [
             [
               {},
-              "@translateX",
+              "translateX",
               parseLengthOrCoercePercentageToRuntime(t.value, builder),
             ],
           ];
@@ -642,22 +735,22 @@ function parseTransform(
           return [
             [
               {},
-              "@translateY",
+              "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)],
+            [{}, "scaleX", parseLength(t.value[0], builder)],
+            [{}, "scaleY", parseLength(t.value[1], builder)],
           ];
         case "scaleX":
           return [[{}, "scaleX", parseLength(t.value, builder)]];
@@ -706,21 +799,29 @@ function parseRotate(
   { value }: DeclarationType<"rotate">,
   builder: StylesheetBuilder,
 ) {
-  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(
@@ -797,7 +898,11 @@ function parseZIndex(
   }
 }
 
-function parseContainerType(_value: unknown, _builder: StylesheetBuilder) {
+function parseContainerType(
+  _declaration: DeclarationType<"container-type">,
+  builder: StylesheetBuilder,
+) {
+  builder.addContainer(["___default___"]);
   return;
 }
 
@@ -817,7 +922,7 @@ function parseContainer(
   return;
 }
 
-export function parseDeclarationUnparsed(
+export function parseUnparsedDeclaration(
   declaration: Extract<Declaration, { property: "unparsed" }>,
   builder: StylesheetBuilder,
 ) {
@@ -844,24 +949,15 @@ 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", [
-        {},
-        `@${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);
 
@@ -875,26 +971,45 @@ export function parseDeclarationUnparsed(
   }
 }
 
-export function parseDeclarationCustom(
+export function parseCustomDeclaration(
   declaration: Extract<Declaration, { property: "custom" }>,
   builder: StylesheetBuilder,
 ) {
   const property = declaration.value.name;
-  if (
+
+  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 (property === "outline-offset") {
+    // https://github.com/parcel-bundler/lightningcss/issues/1048
+    builder.addDescriptor(
+      property,
+      parseUnparsed(declaration.value.value, builder, property),
+    );
+  } else if (property === "corner-shape") {
+    parseCornerShape(declaration.value, builder);
+  } else 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)),
+      parseUnparsed(declaration.value.value, builder, property),
     );
   } else {
     builder.addWarning("property", declaration.value.name);
@@ -904,9 +1019,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) {
@@ -925,6 +1044,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 [];
@@ -940,6 +1061,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];
     }
@@ -951,11 +1083,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),
+    toRNProperty(token.value.name),
+    reduceParseUnparsed(token.value.arguments, builder, property, allowAuto),
   ];
 }
 
@@ -972,7 +1106,8 @@ export function parseUnparsed(
     | undefined
     | null,
   builder: StylesheetBuilder,
-  allowAuto = false,
+  property: string,
+  allowAuto = allowAutoProperties.has(property),
 ): StyleDescriptor {
   if (tokenOrValue === undefined || tokenOrValue === null) {
     return;
@@ -995,7 +1130,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;
@@ -1003,11 +1143,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];
       }
@@ -1016,43 +1166,53 @@ export function parseUnparsed(
     }
     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":
@@ -1063,6 +1223,7 @@ export function parseUnparsed(
             tokenOrValue.value.name,
             tokenOrValue.value.arguments,
             builder,
+            property,
           );
         default: {
           builder.addWarning("value", `${tokenOrValue.value.name}()`);
@@ -1084,7 +1245,7 @@ export function parseUnparsed(
             return;
           }
 
-          if (value === "inherit") {
+          if (value === "inherit" || value === "initial") {
             builder.addWarning("value", value);
             return;
           } else if (value === "currentcolor") {
@@ -1095,6 +1256,8 @@ export function parseUnparsed(
             return true;
           } else if (value === "false") {
             return false;
+          } else if (value === "infinity") {
+            return Number.MAX_SAFE_INTEGER;
           } else {
             return value;
           }
@@ -1111,11 +1274,16 @@ export function parseUnparsed(
           return parseDimension(tokenOrValue.value, builder);
         case "comma":
           return CommaSeparator as unknown as StyleDescriptor;
+        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":
@@ -1197,7 +1365,12 @@ export function parseLength(
         } 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":
@@ -1304,6 +1477,13 @@ export function parseSizeDeclaration(
   return parseSize(declaration.value, builder);
 }
 
+export function parseSizeWithAutoDeclaration(
+  declaration: { value: Size | MaxSize },
+  builder: StylesheetBuilder,
+) {
+  return parseSize(declaration.value, builder, { allowAuto: true });
+}
+
 export function parsePointerEvents(
   { value }: { value: string },
   builder: StylesheetBuilder,
@@ -1375,7 +1555,7 @@ export function parseSize(
   return;
 }
 
-export function parseColorOrAuto(
+export function parseColorOrAutoDeclaration(
   { value }: { value: ColorOrAuto },
   builder: StylesheetBuilder,
 ) {
@@ -1556,13 +1736,20 @@ export function parseColor(cssColor: CssColor, builder: StylesheetBuilder) {
   }
 }
 
-export function parseLengthPercentageOrAutoDeclaration(
+export function parseLengthPercentageDeclaration(
   value: { value: LengthPercentageOrAuto },
   builder: StylesheetBuilder,
 ) {
   return parseLengthPercentageOrAuto(value.value, builder);
 }
 
+export function parseLengthPercentageOrAutoDeclaration(
+  value: { value: LengthPercentageOrAuto },
+  builder: StylesheetBuilder,
+) {
+  return parseLengthPercentageOrAuto(value.value, builder, { allowAuto: true });
+}
+
 export function parseLengthPercentageOrAuto(
   lengthPercentageOrAuto: LengthPercentageOrAuto,
   builder: StylesheetBuilder,
@@ -1877,7 +2064,10 @@ export function parseOverflow(
 }
 
 export function parseBorderStyleDeclaration(
-  declaration: DeclarationType<"border-style">,
+  declaration: Extract<
+    DeclarationType<Declaration["property"]>,
+    { value: LineStyle | BorderStyle }
+  >,
   builder: StylesheetBuilder,
 ) {
   return parseBorderStyle(declaration.value, builder);
@@ -1910,34 +2100,44 @@ export function parseBorderStyle(
   return undefined;
 }
 
-export function parseBorderBlockColor(
-  { value }: { value: BorderBlockColor },
+export function parseBorderBlockWidth(
+  declaration: DeclarationType<"border-block-width">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor("border-top-color", parseColor(value.start, builder));
-  builder.addDescriptor("border-bottom-color", parseColor(value.end, builder));
-  return;
+  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);
+  }
 }
 
-export function parseBorderBlockWidth(
-  declaration: DeclarationType<"border-block-width">,
+function parseBorderBlockStyle(
+  declaration: DeclarationType<"border-block-style">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor(
-    "border-top-width",
-    parseBorderSideWidth(declaration.value.start, builder),
-  );
-  builder.addDescriptor(
-    "border-bottom-width",
-    parseBorderSideWidth(declaration.value.end, 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: { value: BorderSideWidth },
+  declaration: Extract<Declaration, { value: BorderSideWidth }>,
   builder: StylesheetBuilder,
 ) {
-  return parseBorderSideWidth(declaration.value, builder);
+  builder.addDescriptor(
+    declaration.property,
+    parseBorderSideWidth(declaration.value, builder),
+  );
 }
 
 export function parseBorderSideWidth(
@@ -2184,6 +2384,18 @@ export function parseBoxShadow(
   }
 }
 
+export function parseBoxSizing(
+  declaration: DeclarationType<"box-sizing">,
+  builder: StylesheetBuilder,
+) {
+  if (["border-box", "content-box"].includes(declaration.value)) {
+    return declaration.value;
+  }
+
+  builder.addWarning("value", declaration.value);
+  return undefined;
+}
+
 export function parseDisplay(
   { value }: DeclarationType<"display">,
   builder: StylesheetBuilder,
@@ -2241,6 +2453,19 @@ export function parseDisplay(
   }
 }
 
+export function parseDirection(
+  declaration: DeclarationType<"direction">,
+  builder: StylesheetBuilder,
+) {
+  if (["ltr", "rtl"].includes(declaration.value)) {
+    builder.addDescriptor("direction", declaration.value);
+    builder.addDescriptor("--__rn-css-direction", declaration.value);
+  }
+
+  builder.addWarning("value", declaration.value);
+  return;
+}
+
 export function parseAspectRatio({
   value,
 }: DeclarationType<"aspect-ratio">): StyleDescriptor {
@@ -2258,6 +2483,18 @@ export function parseAspectRatio({
   }
 }
 
+export function parseBackfaceVisibility(
+  { value }: DeclarationType<"backface-visibility">,
+  builder: StylesheetBuilder,
+): StyleDescriptor {
+  if (["visible", "hidden"].includes(value)) {
+    return value;
+  } else {
+    builder.addWarning("value", value);
+    return;
+  }
+}
+
 export function parseDimension(
   { unit, value }: Extract<Token, { type: "dimension" }>,
   builder: StylesheetBuilder,
@@ -2295,16 +2532,20 @@ 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.addDescriptor(property, parsedValue);
 }
 
 export function round(number: number) {
@@ -2324,7 +2565,7 @@ export function parseDimensionPercentageFor_LengthValue(
   }
 }
 
-const allowAuto = new Set(["pointer-events"]);
+const allowAutoProperties = new Set(["pointer-events"]);
 
 export function parseEnv(
   value: EnvironmentVariable,
@@ -2342,7 +2583,7 @@ export function parseEnv(
             "var",
             [
               `--react-native-css-${value.name.value}`,
-              parseUnparsed(value.fallback, builder),
+              parseUnparsed(value.fallback, builder, value.name.value),
             ],
             1,
           ];
@@ -2365,8 +2606,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];
   }
@@ -2377,12 +2619,11 @@ export function parseCalcFn(
 export function parseCalcArguments(
   [...args]: TokenOrValue[],
   builder: StylesheetBuilder,
+  property: string,
 ) {
   const parsed: StyleDescriptor[] = [];
 
-  let mode: "number" | "percentage" | undefined;
-
-  for (const [currentIndex, arg] of args.entries()) {
+  for (const arg of args) {
     switch (arg.type) {
       case "env": {
         parsed.push(parseEnv(arg.value, builder));
@@ -2391,7 +2632,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;
@@ -2402,11 +2643,9 @@ export function parseCalcArguments(
       }
       case "length": {
         const value = parseLength(arg.value, builder);
-
         if (value !== undefined) {
           parsed.push(value);
         }
-
         break;
       }
       case "color":
@@ -2429,49 +2668,19 @@ export function parseCalcArguments(
             }
             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":
@@ -2520,6 +2729,8 @@ export function parseTranslateProp(
 export function parseUnresolvedColor(
   color: UnresolvedColor,
   builder: StylesheetBuilder,
+  property: string,
+  allowAuto: boolean,
 ): StyleDescriptor {
   switch (color.type) {
     case "rgb":
@@ -2530,26 +2741,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;
@@ -2646,7 +2862,12 @@ export function addTransitionValue(
         declaration.property,
         declaration.value
           .map((v) => v.property)
-          .filter((v) => v in parsers || v === "all" || v === "none")
+          .filter(
+            (v) =>
+              (v in parsers && !["visibility"].includes(v)) ||
+              v === "all" ||
+              v === "none",
+          )
           .map((v) => toRNProperty(v)),
       );
       return;
@@ -2795,7 +3016,7 @@ function parseGradient(
     case "linear": {
       return [
         {},
-        "@linear-gradient",
+        "linear-gradient",
         [
           parseLineDirection(gradient.direction, builder),
           ...gradient.items.map((item) => parseGradientItem(item, builder)),
@@ -2845,6 +3066,78 @@ function parseGradientItem(
   }
 }
 
+function parseObjectFit(
+  declaration: CustomProperty,
+  builder: StylesheetBuilder,
+) {
+  builder.addMapping({
+    "object-fit": "contentFit",
+  });
+  builder.addDescriptor(
+    "object-fit",
+    parseUnparsed(declaration.value, builder, "object-fit"),
+  );
+}
+
+function parseObjectPosition(
+  declaration: CustomProperty,
+  builder: StylesheetBuilder,
+) {
+  builder.addMapping({
+    "object-position": "contentPosition",
+  });
+  builder.addDescriptor("object-position", [
+    {},
+    "join",
+    [parseUnparsed(declaration.value, builder, "object-position"), " "],
+  ]);
+}
+
+function parseCornerShape(
+  declaration: CustomProperty,
+  builder: StylesheetBuilder,
+) {
+  const shape = parseUnparsed(declaration.value, builder, "corner-shape");
+
+  if (shape === "round") {
+    builder.addDescriptor("borderCurve", "circular");
+  } else if (shape === "squircle") {
+    builder.addDescriptor("borderCurve", "continuous");
+  }
+}
+
+function parseVisibility(
+  declaration: DeclarationType<"visibility">,
+  builder: StylesheetBuilder,
+) {
+  if (declaration.value === "visible") {
+    builder.addDescriptor("opacity", 1);
+  } else if (declaration.value === "hidden") {
+    builder.addDescriptor("opacity", 0);
+  } else {
+    builder.addWarning("value", declaration.value);
+  }
+}
+
+function parseOutlineStyle(
+  declaration: DeclarationType<"outline-style">,
+  builder: StylesheetBuilder,
+) {
+  const allowed = ["solid", "dotted", "dashed"];
+
+  if (
+    declaration.value.type !== "auto" &&
+    allowed.includes(declaration.value.value)
+  ) {
+    builder.addDescriptor("outlineStyle", declaration.value.value);
+  } else {
+    builder.addWarning(
+      "value",
+      declaration.value.type === "auto" ? "auto" : declaration.value.value,
+    );
+  }
+}
+
 function parseFilter(
   declaration: DeclarationType<"filter">,
   builder: StylesheetBuilder,
@@ -2872,6 +3165,16 @@ function parseFilter(
             [value.type]: parseAngle(value.value, builder),
           } as unknown as StyleDescriptor;
         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),
+            ],
+          ] as unknown as StyleDescriptor;
         case "url":
           return;
       }