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

package/dist/commonjs/compiler/declarations.js

@@ -13,6 +13,7 @@ exports.parseAlignItems = parseAlignItems;
 exports.parseAlignSelf = parseAlignSelf;
 exports.parseAngle = parseAngle;
 exports.parseAspectRatio = parseAspectRatio;
+exports.parseBackfaceVisibility = parseBackfaceVisibility;
 exports.parseBorderBlockWidth = parseBorderBlockWidth;
 exports.parseBorderInlineStyle = parseBorderInlineStyle;
 exports.parseBorderInlineWidth = parseBorderInlineWidth;
@@ -21,15 +22,18 @@ exports.parseBorderSideWidthDeclaration = parseBorderSideWidthDeclaration;
 exports.parseBorderStyle = parseBorderStyle;
 exports.parseBorderStyleDeclaration = parseBorderStyleDeclaration;
 exports.parseBoxShadow = parseBoxShadow;
+exports.parseBoxSizing = parseBoxSizing;
 exports.parseCalcArguments = parseCalcArguments;
 exports.parseCalcFn = parseCalcFn;
 exports.parseColor = parseColor;
 exports.parseColorDeclaration = parseColorDeclaration;
+exports.parseColorMix = parseColorMix;
 exports.parseColorOrAutoDeclaration = parseColorOrAutoDeclaration;
 exports.parseCustomDeclaration = parseCustomDeclaration;
 exports.parseDeclaration = parseDeclaration;
 exports.parseDimension = parseDimension;
 exports.parseDimensionPercentageFor_LengthValue = parseDimensionPercentageFor_LengthValue;
+exports.parseDirection = parseDirection;
 exports.parseDisplay = parseDisplay;
 exports.parseEnv = parseEnv;
 exports.parseFontColorDeclaration = parseFontColorDeclaration;
@@ -46,6 +50,7 @@ exports.parseJustifyContent = parseJustifyContent;
 exports.parseLength = parseLength;
 exports.parseLengthDeclaration = parseLengthDeclaration;
 exports.parseLengthOrCoercePercentageToRuntime = parseLengthOrCoercePercentageToRuntime;
+exports.parseLengthPercentageDeclaration = parseLengthPercentageDeclaration;
 exports.parseLengthPercentageOrAuto = parseLengthPercentageOrAuto;
 exports.parseLengthPercentageOrAutoDeclaration = parseLengthPercentageOrAutoDeclaration;
 exports.parseLineHeight = parseLineHeight;
@@ -59,6 +64,7 @@ exports.parseSize = parseSize;
 exports.parseSize2DDimensionPercentage = parseSize2DDimensionPercentage;
 exports.parseSize2DDimensionPercentageDeclaration = parseSize2DDimensionPercentageDeclaration;
 exports.parseSizeDeclaration = parseSizeDeclaration;
+exports.parseSizeWithAutoDeclaration = parseSizeWithAutoDeclaration;
 exports.parseTextAlign = parseTextAlign;
 exports.parseTextDecorationLine = parseTextDecorationLine;
 exports.parseTextDecorationLineDeclaration = parseTextDecorationLineDeclaration;
@@ -75,18 +81,17 @@ exports.reduceParseUnparsed = reduceParseUnparsed;
 exports.round = round;
 exports.unparsedFunction = unparsedFunction;
 var _colorjs = _interopRequireDefault(require("colorjs.io"));
+var _index = require("../utilities/index.js");
 var _keyframes = require("./keyframes.js");
 var _selectors = require("./selectors.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// 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
 
 const CommaSeparator = Symbol("CommaSeparator");
 const propertyRename = {
   "background-image": "experimental_backgroundImage"
 };
-
-// TODO: We need a better way to handle this
-const unparsedRuntimeParsing = new Set(["animation", "border", "box-shadow", "text-shadow", "transform", "scale", "rotate", "translate"]);
+const unparsedRuntimeParsing = new Set(["animation", "border", "box-shadow", "line-height", "rotate", "scale", "text-shadow", "transform", "translate"]);
 const parsers = {
   "align-content": parseAlignContent,
   "align-items": parseAlignItems,
@@ -101,6 +106,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,
@@ -156,8 +162,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,
@@ -165,10 +172,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,
@@ -189,30 +197,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,
@@ -223,21 +231,24 @@ const parsers = {
   "min-width": parseSizeDeclaration,
   "opacity": ({
     value
-  }) => 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,
@@ -252,7 +263,7 @@ const parsers = {
   "text-transform": ({
     value
   }) => value.case,
-  "top": parseSizeDeclaration,
+  "top": parseSizeWithAutoDeclaration,
   "transform": parseTransform,
   "transition": addTransitionValue,
   "transition-delay": addTransitionValue,
@@ -263,7 +274,7 @@ const parsers = {
   "user-select": parseUserSelect,
   "vertical-align": parseVerticalAlign,
   "visibility": parseVisibility,
-  "width": parseSizeDeclaration,
+  "width": parseSizeWithAutoDeclaration,
   "z-index": parseZIndex
 };
 
@@ -335,23 +346,25 @@ function parseBorderRadius({
   });
 }
 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;
+  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);
+    }
   }
 }
 function parseBorderWidth({
@@ -468,16 +481,24 @@ function parseMarginBlock({
   value
 }, builder) {
   builder.addShorthand("margin-block", {
-    "margin-block-start": parseLengthPercentageOrAuto(value.blockStart, builder),
-    "margin-block-end": parseLengthPercentageOrAuto(value.blockEnd, builder)
+    "margin-block-start": parseLengthPercentageOrAuto(value.blockStart, builder, {
+      allowAuto: true
+    }),
+    "margin-block-end": parseLengthPercentageOrAuto(value.blockEnd, builder, {
+      allowAuto: true
+    })
   });
 }
 function parseMarginInline({
   value
 }, builder) {
   builder.addShorthand("margin-inline", {
-    "margin-inline-start": parseLengthPercentageOrAuto(value.inlineStart, builder),
-    "margin-inline-end": parseLengthPercentageOrAuto(value.inlineEnd, builder)
+    "margin-inline-start": parseLengthPercentageOrAuto(value.inlineStart, builder, {
+      allowAuto: true
+    }),
+    "margin-inline-end": parseLengthPercentageOrAuto(value.inlineEnd, builder, {
+      allowAuto: true
+    })
   });
 }
 function parsePadding({
@@ -598,11 +619,7 @@ 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({
   value
@@ -670,7 +687,9 @@ function parseUnparsedDeclaration(declaration, builder) {
       builder.addDescriptor("--__rn-css-em", value);
     }
     if (property === "color") {
-      builder.addDescriptor("--__rn-css-current-color", value);
+      if (!(0, _index.isStyleFunction)(value) || value[1] !== "var" || value[2] !== "-css-color") {
+        builder.addDescriptor("--__rn-css-color", value);
+      }
     }
   }
 }
@@ -679,13 +698,24 @@ function parseCustomDeclaration(declaration, builder) {
   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");
+    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("--") || property.startsWith("-rn-")) {
     builder.addDescriptor(property, parseUnparsed(declaration.value.value, builder, property));
   } else {
@@ -752,7 +782,7 @@ function parseUnparsed(tokenOrValue, builder, property, allowAuto = allowAutoPro
     } else if (tokenOrValue === "false") {
       return false;
     } else if (tokenOrValue === "currentcolor") {
-      return [{}, "var", "__rn-css-current-color"];
+      return [{}, "var", "__rn-css-color"];
     } else {
       return tokenOrValue;
     }
@@ -763,8 +793,13 @@ function parseUnparsed(tokenOrValue, builder, property, allowAuto = allowAutoPro
   if (Array.isArray(tokenOrValue)) {
     const args = reduceParseUnparsed(tokenOrValue, builder, property, 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") && (0, _index.isStyleFunction)(args)) {
+      return [args];
+    } else {
+      return args;
+    }
   }
   switch (tokenOrValue.type) {
     case "unresolved-color":
@@ -828,6 +863,8 @@ function parseUnparsed(tokenOrValue, builder, property, allowAuto = allowAutoPro
           case "min":
           case "clamp":
             return parseCalcFn(tokenOrValue.value.name, tokenOrValue.value.arguments, builder, property);
+          case "color-mix":
+            return parseColorMix(tokenOrValue.value.arguments, builder, property);
           default:
             {
               builder.addWarning("value", `${tokenOrValue.value.name}()`);
@@ -853,7 +890,7 @@ function parseUnparsed(tokenOrValue, builder, property, allowAuto = allowAutoPro
               builder.addWarning("value", value);
               return;
             } else if (value === "currentcolor") {
-              return [{}, "var", "__rn-css-current-color"];
+              return [{}, "var", "__rn-css-color"];
             }
             if (value === "true") {
               return true;
@@ -948,9 +985,9 @@ function parseLength(length, builder) {
       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(Math.min(length.value, Number.MAX_SAFE_INTEGER), Number.MIN_SAFE_INTEGER);
@@ -1058,6 +1095,11 @@ function parseAngle(angle, builder) {
 function parseSizeDeclaration(declaration, builder) {
   return parseSize(declaration.value, builder);
 }
+function parseSizeWithAutoDeclaration(declaration, builder) {
+  return parseSize(declaration.value, builder, {
+    allowAuto: true
+  });
+}
 function parsePointerEvents({
   value
 }, builder) {
@@ -1121,7 +1163,9 @@ function parseColorOrAutoDeclaration({
 }
 function parseFontColorDeclaration(declaration, builder) {
   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));
+  }
 }
 function parseColorDeclaration(declaration, builder) {
   builder.addDescriptor(declaration.property, parseColor(declaration.value, builder));
@@ -1140,7 +1184,7 @@ function parseColor(cssColor, builder) {
   } = builder.getOptions();
   switch (cssColor.type) {
     case "currentcolor":
-      return [{}, "var", "__rn-css-current-color"];
+      return [{}, "var", "__rn-css-color"];
     case "light-dark":
       {
         const extraRule = {
@@ -1273,9 +1317,14 @@ function parseColor(cssColor, builder) {
     });
   }
 }
-function parseLengthPercentageOrAutoDeclaration(value, builder) {
+function parseLengthPercentageDeclaration(value, builder) {
   return parseLengthPercentageOrAuto(value.value, builder);
 }
+function parseLengthPercentageOrAutoDeclaration(value, builder) {
+  return parseLengthPercentageOrAuto(value.value, builder, {
+    allowAuto: true
+  });
+}
 function parseLengthPercentageOrAuto(lengthPercentageOrAuto, builder, {
   allowAuto = false
 } = {}) {
@@ -1321,7 +1370,7 @@ function parseJustifyContent(declaration, builder) {
   return value;
 }
 function parseAlignContent(declaration, builder) {
-  const allowed = new Set(["flex-start", "flex-end", "center", "stretch", "space-between", "space-around"]);
+  const allowed = new Set(["flex-start", "flex-end", "center", "stretch", "space-between", "space-around", "space-evenly"]);
   let value;
   switch (declaration.value.type) {
     case "normal":
@@ -1405,7 +1454,7 @@ function parseFontWeight(fontWeight, builder) {
   switch (fontWeight.type) {
     case "absolute":
       if (fontWeight.value.type === "weight") {
-        return fontWeight.value.value.toString();
+        return fontWeight.value.value;
       } else {
         return fontWeight.value.type;
       }
@@ -1426,8 +1475,8 @@ function parseTextShadow(declaration, builder) {
     return;
   }
   builder.addDescriptor("textShadowColor", parseColor(textShadow.color, builder));
-  builder.addDescriptor("textShadowOffset.width", parseLength(textShadow.xOffset, builder));
-  builder.addDescriptor("textShadowOffset.height", parseLength(textShadow.yOffset, builder));
+  builder.addDescriptor("&.textShadowOffset.width", parseLength(textShadow.xOffset, builder));
+  builder.addDescriptor("&.textShadowOffset.height", parseLength(textShadow.yOffset, builder));
   builder.addDescriptor("textShadowRadius", parseLength(textShadow.blur, builder));
 }
 function parseTextDecorationStyle(declaration, builder) {
@@ -1465,7 +1514,7 @@ function parseTextDecorationLine(value, builder) {
 function parsePosition({
   value
 }, builder) {
-  if (value.type === "absolute" || value.type === "relative") {
+  if (value.type === "absolute" || value.type === "relative" || value.type === "static") {
     return value.type;
   }
   builder.addWarning("value", value.type);
@@ -1549,7 +1598,7 @@ function parseFontFamily({
   return value[0];
 }
 function parseLineHeightDeclaration(declaration, builder) {
-  return parseLineHeight(declaration.value, builder);
+  builder.addDescriptor("line-height", [{}, "lineHeight", [parseLineHeight(declaration.value, builder)], 1]);
 }
 function parseLineHeight(value, builder) {
   switch (value.type) {
@@ -1635,16 +1684,20 @@ function parseLengthOrCoercePercentageToRuntime(value, builder) {
 }
 function parseGap(declaration, builder) {
   if ("column" in declaration.value) {
-    builder.addDescriptor("row-gap", parseGapValue(declaration.value.row, builder));
-    builder.addDescriptor("column-gap", parseGapValue(declaration.value.column, builder));
-    return;
-  } else {
-    if (declaration.value.type === "normal") {
-      builder.addWarning("value", declaration.value.type);
-      return;
+    const row = parseGapValue(declaration.value.row, builder);
+    const column = parseGapValue(declaration.value.column, builder);
+    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(value, builder) {
   if (value.type === "normal") {
@@ -1667,19 +1720,26 @@ function parseBoxShadow({
   value
 }, builder) {
   for (const [index, shadow] of value.entries()) {
-    builder.addDescriptor(`boxShadow.[${index}].color`, parseColor(shadow.color, builder));
-    builder.addDescriptor(`boxShadow.[${index}].offsetX`, parseLength(shadow.xOffset, builder));
-    builder.addDescriptor(`boxShadow.[${index}].offsetY`, parseLength(shadow.yOffset, builder));
-    builder.addDescriptor(`boxShadow.[${index}].blurRadius`, parseLength(shadow.blur, builder));
-    builder.addDescriptor(`boxShadow.[${index}].spreadDistance`, parseLength(shadow.spread, builder));
-    builder.addDescriptor(`boxShadow.[${index}].inset`, shadow.inset ? true : undefined);
+    builder.addDescriptor(`&.boxShadow.[${index}].color`, parseColor(shadow.color, builder));
+    builder.addDescriptor(`&.boxShadow.[${index}].offsetX`, parseLength(shadow.xOffset, builder));
+    builder.addDescriptor(`&.boxShadow.[${index}].offsetY`, parseLength(shadow.yOffset, builder));
+    builder.addDescriptor(`&.boxShadow.[${index}].blurRadius`, parseLength(shadow.blur, builder));
+    builder.addDescriptor(`&.boxShadow.[${index}].spreadDistance`, parseLength(shadow.spread, builder));
+    builder.addDescriptor(`&.boxShadow.[${index}].inset`, shadow.inset ? true : undefined);
+  }
+}
+function parseBoxSizing(declaration, builder) {
+  if (["border-box", "content-box"].includes(declaration.value)) {
+    return declaration.value;
   }
+  builder.addWarning("value", declaration.value);
+  return undefined;
 }
 function parseDisplay({
   value
 }, builder) {
   if (value.type === "keyword") {
-    if (value.value === "none") {
+    if (value.value === "none" || value.value === "contents") {
       return value.value;
     } else {
       builder.addWarning("value", value.value);
@@ -1730,6 +1790,14 @@ function parseDisplay({
     }
   }
 }
+function parseDirection(declaration, builder) {
+  if (["ltr", "rtl"].includes(declaration.value)) {
+    builder.addDescriptor("direction", declaration.value);
+    builder.addDescriptor("--__rn-css-direction", declaration.value);
+  }
+  builder.addWarning("value", declaration.value);
+  return;
+}
 function parseAspectRatio({
   value
 }) {
@@ -1746,6 +1814,16 @@ function parseAspectRatio({
     }
   }
 }
+function parseBackfaceVisibility({
+  value
+}, builder) {
+  if (["visible", "hidden"].includes(value)) {
+    return value;
+  } else {
+    builder.addWarning("value", value);
+    return;
+  }
+}
 function parseDimension({
   unit,
   value
@@ -1815,7 +1893,10 @@ 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, value.name.value)], 1];
+          {
+            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":
@@ -1836,6 +1917,54 @@ function parseCalcFn(name, tokens, builder, property) {
   }
   return;
 }
+function parseColorMix(tokens, builder, property) {
+  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;
+  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;
+  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]];
+}
 function parseCalcArguments([...args], builder, property) {
   const parsed = [];
   for (const arg of args) {
@@ -1982,7 +2111,7 @@ function equal(a, b) {
   return false;
 }
 function parseTime(time) {
-  return time.type === "milliseconds" ? time.value : time.value * 1000;
+  return round(time.type === "milliseconds" ? time.value : time.value * 1000);
 }
 function parseSize2DDimensionPercentageDeclaration(declaration, builder) {
   return parseSize2DDimensionPercentage(declaration.value, builder);
@@ -2145,16 +2274,24 @@ function parseGradientItem(item, builder) {
 }
 function parseObjectFit(declaration, builder) {
   builder.addMapping({
-    "object-fit": "contentFit"
+    "object-fit": ["contentFit"]
   });
   builder.addDescriptor("object-fit", parseUnparsed(declaration.value, builder, "object-fit"));
 }
 function parseObjectPosition(declaration, builder) {
   builder.addMapping({
-    "object-position": "contentPosition"
+    "object-position": ["contentPosition"]
   });
   builder.addDescriptor("object-position", [{}, "join", [parseUnparsed(declaration.value, builder, "object-position"), " "]]);
 }
+function parseCornerShape(declaration, builder) {
+  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, builder) {
   if (declaration.value === "visible") {
     builder.addDescriptor("opacity", 1);
@@ -2164,6 +2301,14 @@ function parseVisibility(declaration, builder) {
     builder.addWarning("value", declaration.value);
   }
 }
+function parseOutlineStyle(declaration, builder) {
+  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, builder) {
   if (declaration.value.type === "none") {
     return "unset";