react-native-css 0.0.0-nightly.7bc9102 → 0.0.0-nightly.8a01f75

package/src/compiler/declarations.ts

@@ -1,4 +1,4 @@
-// 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 {
@@ -36,6 +36,7 @@ import type {
   UnresolvedColor,
 } from "lightningcss";
 
+import { isStyleFunction } from "../utilities";
 import type {
   StyleDescriptor,
   StyleFunction,
@@ -63,15 +64,15 @@ 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",
+  "line-height",
+  "rotate",
+  "scale",
   "text-shadow",
   "transform",
-  "scale",
-  "rotate",
   "translate",
 ]);
 
@@ -91,6 +92,7 @@ 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,
@@ -146,8 +148,9 @@ const parsers: {
   "border-top-style": parseBorderStyleDeclaration,
   "border-top-width": parseBorderSideWidthDeclaration,
   "border-width": parseBorderWidth,
-  "bottom": parseSizeDeclaration,
+  "bottom": parseSizeWithAutoDeclaration,
   "box-shadow": parseBoxShadow,
+  "box-sizing": parseBoxSizing,
   "caret-color": parseColorOrAutoDeclaration,
   "color": parseFontColorDeclaration,
   "column-gap": parseGap,
@@ -155,10 +158,11 @@ const parsers: {
   "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,
@@ -171,30 +175,30 @@ const parsers: {
   "font-variant-caps": parseFontVariantCapsDeclaration,
   "font-weight": parseFontWeightDeclaration,
   "gap": parseGap,
-  "height": parseSizeDeclaration,
-  "inline-size": parseSizeDeclaration,
+  "height": parseSizeWithAutoDeclaration,
+  "inline-size": parseSizeWithAutoDeclaration,
   "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,
@@ -203,21 +207,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,
@@ -230,7 +237,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,
@@ -241,7 +248,7 @@ const parsers: {
   "user-select": parseUserSelect,
   "vertical-align": parseVerticalAlign,
   "visibility": parseVisibility,
-  "width": parseSizeDeclaration,
+  "width": parseSizeWithAutoDeclaration,
   "z-index": parseZIndex,
 };
 
@@ -363,35 +370,26 @@ function parseBorderColor(
   >,
   builder: StylesheetBuilder,
 ) {
-  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;
+  if (declaration.property === "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),
+    });
+  } else {
+    const start = parseColor(declaration.value.start, builder);
+    const end = parseColor(declaration.value.end, builder);
+
+    if (start === end) {
+      builder.addDescriptor(declaration.property, start);
+    } else if (declaration.property === "border-block-color") {
+      builder.addDescriptor("border-top-color", start);
+      builder.addDescriptor("border-bottom-color", end);
+    } else {
+      builder.addDescriptor("border-left-color", start);
+      builder.addDescriptor("border-right-color", end);
+    }
   }
 }
 
@@ -611,8 +609,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,
+    }),
   });
 }
 
@@ -624,8 +625,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,
+    }),
   });
 }
 
@@ -847,17 +851,8 @@ function parseLetterSpacing(
   if (value.type === "normal") {
     return;
   }
-  const descriptor = parseLength(value.value, builder);
-
-  if (
-    Array.isArray(descriptor) &&
-    descriptor[1] === "em" &&
-    typeof descriptor[2] === "number"
-  ) {
-    return descriptor[2];
-  }
 
-  return descriptor;
+  return parseLength(value.value, builder);
 }
 
 function parseTextDecoration(
@@ -954,7 +949,13 @@ export function parseUnparsedDeclaration(
     }
 
     if (property === "color") {
-      builder.addDescriptor("--__rn-css-current-color", value);
+      if (
+        !isStyleFunction(value) ||
+        value[1] !== "var" ||
+        value[2] !== "-css-color"
+      ) {
+        builder.addDescriptor("--__rn-css-color", value);
+      }
     }
   }
 }
@@ -971,17 +972,31 @@ export function parseCustomDeclaration(
       parseUnparsed(declaration.value.value, builder, property),
     );
   } else if (property === "-rn-ripple-style") {
-    builder.addDescriptor(
-      property,
-      parseUnparsed(declaration.value.value, builder, property) ===
-        "borderless",
-    );
+    if (
+      parseUnparsed(declaration.value.value, builder, property) === "borderless"
+    ) {
+      builder.addDescriptor(property, true);
+    }
+  } else if (property === "-rn-ripple-layer") {
+    if (
+      parseUnparsed(declaration.value.value, builder, property) === "foreground"
+    ) {
+      builder.addDescriptor(property, true);
+    }
   } 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("--") ||
@@ -1099,7 +1114,7 @@ export function parseUnparsed(
     } else if (tokenOrValue === "false") {
       return false;
     } else if (tokenOrValue === "currentcolor") {
-      return [{}, "var", "__rn-css-current-color"] as const;
+      return [{}, "var", "__rn-css-color"] as const;
     } else {
       return tokenOrValue;
     }
@@ -1117,8 +1132,16 @@ export function parseUnparsed(
       allowAuto,
     );
     if (!args) return;
-    if (Array.isArray(args) && args.length === 1) return args[0];
-    return args;
+    if (Array.isArray(args) && args.length === 1) {
+      return args[0];
+    } else if (
+      (property === "filter" || property === "transform") &&
+      isStyleFunction(args)
+    ) {
+      return [args];
+    } else {
+      return args;
+    }
   }
 
   switch (tokenOrValue.type) {
@@ -1205,6 +1228,8 @@ export function parseUnparsed(
             builder,
             property,
           );
+        case "color-mix":
+          return parseColorMix(tokenOrValue.value.arguments, builder, property);
         default: {
           builder.addWarning("value", `${tokenOrValue.value.name}()`);
           return;
@@ -1229,7 +1254,7 @@ export function parseUnparsed(
             builder.addWarning("value", value);
             return;
           } else if (value === "currentcolor") {
-            return [{}, "var", "__rn-css-current-color"] as const;
+            return [{}, "var", "__rn-css-color"] as const;
           }
 
           if (value === "true") {
@@ -1341,9 +1366,9 @@ export function parseLength(
     switch (length.unit) {
       case "px": {
         if (length.value === Infinity) {
-          return 9999;
+          return Number.MAX_SAFE_INTEGER;
         } else if (length.value === -Infinity) {
-          return -9999;
+          return Number.MIN_SAFE_INTEGER;
         } else {
           // Normalize large values to safe integers, e.g. `calc(infinity * 1px)`
           const value = Math.max(
@@ -1457,6 +1482,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,
@@ -1546,10 +1578,15 @@ export function parseFontColorDeclaration(
 ) {
   parseColorDeclaration(declaration, builder);
 
-  builder.addDescriptor(
-    "--__rn-css-color",
-    parseColor(declaration.value, builder),
-  );
+  if (
+    typeof declaration.value !== "object" ||
+    declaration.value.type !== "currentcolor"
+  ) {
+    builder.addDescriptor(
+      "--__rn-css-color",
+      parseColor(declaration.value, builder),
+    );
+  }
 }
 
 export function parseColorDeclaration(
@@ -1576,7 +1613,7 @@ export function parseColor(cssColor: CssColor, builder: StylesheetBuilder) {
 
   switch (cssColor.type) {
     case "currentcolor":
-      return [{}, "var", "__rn-css-current-color"] as const;
+      return [{}, "var", "__rn-css-color"] as const;
     case "light-dark": {
       const extraRule: StyleRule = {
         s: [],
@@ -1709,13 +1746,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,
@@ -1788,6 +1832,7 @@ export function parseAlignContent(
     "stretch",
     "space-between",
     "space-around",
+    "space-evenly",
   ]);
 
   let value: string | undefined;
@@ -1911,7 +1956,7 @@ export function parseFontWeight(
   switch (fontWeight.type) {
     case "absolute":
       if (fontWeight.value.type === "weight") {
-        return fontWeight.value.value.toString();
+        return fontWeight.value.value;
       } else {
         return fontWeight.value.type;
       }
@@ -1941,11 +1986,11 @@ export function parseTextShadow(
     parseColor(textShadow.color, builder),
   );
   builder.addDescriptor(
-    "textShadowOffset.width",
+    "&.textShadowOffset.width",
     parseLength(textShadow.xOffset, builder),
   );
   builder.addDescriptor(
-    "textShadowOffset.height",
+    "&.textShadowOffset.height",
     parseLength(textShadow.yOffset, builder),
   );
   builder.addDescriptor(
@@ -2007,7 +2052,11 @@ export function parsePosition(
   { value }: DeclarationType<"position">,
   builder: StylesheetBuilder,
 ) {
-  if (value.type === "absolute" || value.type === "relative") {
+  if (
+    value.type === "absolute" ||
+    value.type === "relative" ||
+    value.type === "static"
+  ) {
     return value.type;
   }
 
@@ -2097,16 +2146,7 @@ function parseBorderBlockStyle(
 }
 
 export function parseBorderSideWidthDeclaration(
-  declaration: DeclarationType<
-    | "border-block-end-width"
-    | "border-block-start-width"
-    | "border-bottom-width"
-    | "border-inline-end-width"
-    | "border-inline-start-width"
-    | "border-left-width"
-    | "border-right-width"
-    | "border-top-width"
-  >,
+  declaration: Extract<Declaration, { value: BorderSideWidth }>,
   builder: StylesheetBuilder,
 ) {
   builder.addDescriptor(
@@ -2154,7 +2194,12 @@ export function parseLineHeightDeclaration(
   declaration: DeclarationType<"line-height">,
   builder: StylesheetBuilder,
 ) {
-  return parseLineHeight(declaration.value, builder);
+  builder.addDescriptor("line-height", [
+    {},
+    "lineHeight",
+    [parseLineHeight(declaration.value, builder)],
+    1,
+  ]);
 }
 
 export function parseLineHeight(
@@ -2283,24 +2328,22 @@ export function parseGap(
   builder: StylesheetBuilder,
 ) {
   if ("column" in declaration.value) {
-    builder.addDescriptor(
-      "row-gap",
-      parseGapValue(declaration.value.row, builder),
-    );
-    builder.addDescriptor(
-      "column-gap",
-      parseGapValue(declaration.value.column, builder),
-    );
+    const row = parseGapValue(declaration.value.row, builder);
+    const column = parseGapValue(declaration.value.column, builder);
 
-    return;
-  } else {
-    if (declaration.value.type === "normal") {
-      builder.addWarning("value", declaration.value.type);
-      return;
+    if (row !== column) {
+      builder.addDescriptor("row-gap", row);
+      builder.addDescriptor("column-gap", column);
+    } else {
+      builder.addDescriptor("gap", row);
     }
-
+  } else if (declaration.value.type === "normal") {
+    builder.addWarning("value", declaration.value.type);
+  } else {
     return parseLength(declaration.value.value, builder);
   }
+
+  return;
 }
 
 function parseGapValue(
@@ -2333,38 +2376,50 @@ export function parseBoxShadow(
 ) {
   for (const [index, shadow] of value.entries()) {
     builder.addDescriptor(
-      `boxShadow.[${index}].color`,
+      `&.boxShadow.[${index}].color`,
       parseColor(shadow.color, builder),
     );
     builder.addDescriptor(
-      `boxShadow.[${index}].offsetX`,
+      `&.boxShadow.[${index}].offsetX`,
       parseLength(shadow.xOffset, builder),
     );
     builder.addDescriptor(
-      `boxShadow.[${index}].offsetY`,
+      `&.boxShadow.[${index}].offsetY`,
       parseLength(shadow.yOffset, builder),
     );
     builder.addDescriptor(
-      `boxShadow.[${index}].blurRadius`,
+      `&.boxShadow.[${index}].blurRadius`,
       parseLength(shadow.blur, builder),
     );
     builder.addDescriptor(
-      `boxShadow.[${index}].spreadDistance`,
+      `&.boxShadow.[${index}].spreadDistance`,
       parseLength(shadow.spread, builder),
     );
     builder.addDescriptor(
-      `boxShadow.[${index}].inset`,
+      `&.boxShadow.[${index}].inset`,
       shadow.inset ? true : undefined,
     );
   }
 }
 
+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,
 ) {
   if (value.type === "keyword") {
-    if (value.value === "none") {
+    if (value.value === "none" || value.value === "contents") {
       return value.value;
     } else {
       builder.addWarning("value", value.value);
@@ -2416,6 +2471,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 {
@@ -2433,6 +2501,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,
@@ -2515,16 +2595,17 @@ export function parseEnv(
         case "safe-area-inset-top":
         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, value.name.value),
-            ],
-            1,
-          ];
+        case "safe-area-inset-left": {
+          const fallback = parseUnparsed(
+            value.fallback,
+            builder,
+            value.name.value,
+          );
+
+          return fallback
+            ? [{}, "var", [`react-native-css-${value.name.value}`, fallback], 1]
+            : [{}, "var", [`react-native-css-${value.name.value}`], 1];
+        }
         case "viewport-segment-width":
         case "viewport-segment-height":
         case "viewport-segment-top":
@@ -2554,6 +2635,100 @@ export function parseCalcFn(
   return;
 }
 
+export function parseColorMix(
+  tokens: TokenOrValue[],
+  builder: StylesheetBuilder,
+  property: string,
+): StyleDescriptor {
+  const [inToken, whitespace, colorSpace, comma, ...rest] = tokens;
+  if (
+    typeof inToken !== "object" ||
+    inToken.type !== "token" ||
+    inToken.value.type !== "ident" ||
+    inToken.value.value !== "in"
+  ) {
+    return;
+  }
+
+  if (
+    typeof whitespace !== "object" ||
+    whitespace.type !== "token" ||
+    whitespace.value.type !== "white-space"
+  ) {
+    return;
+  }
+
+  if (
+    typeof comma !== "object" ||
+    comma.type !== "token" ||
+    comma.value.type !== "comma"
+  ) {
+    return;
+  }
+
+  const colorSpaceArg = parseUnparsed(colorSpace, builder, property);
+  if (typeof colorSpaceArg !== "string") {
+    return;
+  }
+
+  let nextToken = rest.shift();
+
+  const leftColorArg = parseUnparsed(nextToken, builder, property);
+
+  if (!leftColorArg) {
+    return;
+  }
+
+  nextToken = rest.shift();
+
+  let leftColorPercentage: StyleDescriptor | undefined;
+  if (nextToken?.type !== "token" || nextToken.value.type !== "comma") {
+    leftColorPercentage = parseUnparsed(nextToken, builder, property);
+    nextToken = rest.shift();
+  }
+
+  if (
+    typeof nextToken !== "object" ||
+    nextToken.type !== "token" ||
+    nextToken.value.type !== "comma"
+  ) {
+    return;
+  }
+
+  nextToken = rest.shift();
+
+  const rightColorArg = parseUnparsed(nextToken, builder, property);
+
+  if (rightColorArg === "transparent") {
+    // Ignore the rest, treat as single color with alpha
+    return [{}, "colorMix", [colorSpaceArg, leftColorArg, leftColorPercentage]];
+  }
+
+  nextToken = rest.shift();
+  let rightColorPercentage: StyleDescriptor | undefined;
+  if (nextToken?.type !== "token" || nextToken.value.type !== "comma") {
+    rightColorPercentage = parseUnparsed(nextToken, builder, property);
+    nextToken = rest.shift();
+  }
+
+  // We should have expired all tokens now
+  if (nextToken) {
+    return;
+  }
+
+  return [
+    {},
+    "colorMix",
+    [
+      colorSpaceArg,
+      leftColorArg,
+      leftColorPercentage,
+      rightColorArg,
+      rightColorPercentage,
+    ],
+  ];
+}
+
 export function parseCalcArguments(
   [...args]: TokenOrValue[],
   builder: StylesheetBuilder,
@@ -2746,7 +2921,7 @@ export function equal(a: unknown, b: unknown) {
 }
 
 export function parseTime(time: Time) {
-  return time.type === "milliseconds" ? time.value : time.value * 1000;
+  return round(time.type === "milliseconds" ? time.value : time.value * 1000);
 }
 
 export function parseSize2DDimensionPercentageDeclaration(
@@ -3009,7 +3184,7 @@ function parseObjectFit(
   builder: StylesheetBuilder,
 ) {
   builder.addMapping({
-    "object-fit": "contentFit",
+    "object-fit": ["contentFit"],
   });
   builder.addDescriptor(
     "object-fit",
@@ -3022,7 +3197,7 @@ function parseObjectPosition(
   builder: StylesheetBuilder,
 ) {
   builder.addMapping({
-    "object-position": "contentPosition",
+    "object-position": ["contentPosition"],
   });
   builder.addDescriptor("object-position", [
     {},
@@ -3031,6 +3206,19 @@ function parseObjectPosition(
   ]);
 }
 
+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,
@@ -3044,6 +3232,25 @@ function parseVisibility(
   }
 }
 
+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,