react-native-css 3.0.0-nightly.75f8b74 → 3.0.0-nightly.8dd703d

package/dist/module/compiler/declarations.js

@@ -9,7 +9,9 @@ const CommaSeparator = Symbol("CommaSeparator");
 const propertyRename = {
   "background-image": "experimental_backgroundImage"
 };
-const unparsedRuntimeParsing = new Set(["animation", "text-shadow", "transform", "box-shadow", "border"]);
+
+// TODO: We need a better way to handle this
+const unparsedRuntimeParsing = new Set(["animation", "border", "box-shadow", "text-shadow", "transform", "scale", "rotate", "translate"]);
 const parsers = {
   "align-content": parseAlignContent,
   "align-items": parseAlignItems,
@@ -29,37 +31,44 @@ const parsers = {
   "block-size": parseSizeDeclaration,
   "border": parseBorder,
   "border-block": parseBorderBlock,
-  "border-block-color": parseBorderBlockColor,
+  "border-block-color": parseBorderColor,
   "border-block-end": parseBorderBlockEnd,
   "border-block-end-color": parseColorDeclaration,
   "border-block-end-width": parseBorderSideWidthDeclaration,
   "border-block-start": parseBorderBlockStart,
   "border-block-start-color": parseColorDeclaration,
   "border-block-start-width": parseBorderSideWidthDeclaration,
+  "border-block-style": parseBorderBlockStyle,
   "border-block-width": parseBorderBlockWidth,
   "border-bottom": parseBorderSide,
   "border-bottom-color": parseColorDeclaration,
   "border-bottom-left-radius": parseSize2DDimensionPercentageDeclaration,
   "border-bottom-right-radius": parseSize2DDimensionPercentageDeclaration,
+  "border-bottom-style": parseBorderStyleDeclaration,
   "border-bottom-width": parseBorderSideWidthDeclaration,
   "border-color": parseBorderColor,
   "border-end-end-radius": parseSize2DDimensionPercentageDeclaration,
   "border-end-start-radius": parseSize2DDimensionPercentageDeclaration,
   "border-inline": parseBorderInline,
-  "border-inline-color": parseBorderBlockColor,
+  "border-inline-color": parseBorderColor,
   "border-inline-end": parseBorderInlineEnd,
   "border-inline-end-color": parseColorDeclaration,
+  "border-inline-end-style": parseBorderInlineStyle,
   "border-inline-end-width": parseBorderSideWidthDeclaration,
   "border-inline-start": parseBorderInlineStart,
   "border-inline-start-color": parseColorDeclaration,
+  "border-inline-start-style": parseBorderInlineStyle,
   "border-inline-start-width": parseBorderSideWidthDeclaration,
-  "border-inline-width": parseBorderBlockWidth,
+  "border-inline-style": parseBorderInlineStyle,
+  "border-inline-width": parseBorderInlineWidth,
   "border-left": parseBorderSide,
   "border-left-color": parseColorDeclaration,
+  "border-left-style": parseBorderStyleDeclaration,
   "border-left-width": parseBorderSideWidthDeclaration,
   "border-radius": parseBorderRadius,
   "border-right": parseBorderSide,
   "border-right-color": parseColorDeclaration,
+  "border-right-style": parseBorderStyleDeclaration,
   "border-right-width": parseBorderSideWidthDeclaration,
   "border-start-end-radius": parseSize2DDimensionPercentageDeclaration,
   "border-start-start-radius": parseSize2DDimensionPercentageDeclaration,
@@ -68,11 +77,12 @@ const parsers = {
   "border-top-color": parseColorDeclaration,
   "border-top-left-radius": parseSize2DDimensionPercentageDeclaration,
   "border-top-right-radius": parseSize2DDimensionPercentageDeclaration,
+  "border-top-style": parseBorderStyleDeclaration,
   "border-top-width": parseBorderSideWidthDeclaration,
   "border-width": parseBorderWidth,
   "bottom": parseSizeDeclaration,
   "box-shadow": parseBoxShadow,
-  "caret-color": parseColorOrAuto,
+  "caret-color": parseColorOrAutoDeclaration,
   "color": parseFontColorDeclaration,
   "column-gap": parseGap,
   "container": parseContainer,
@@ -191,9 +201,9 @@ export function parseDeclaration(declaration, builder) {
     return;
   }
   if (declaration.property === "unparsed") {
-    parseDeclarationUnparsed(declaration, builder);
+    parseUnparsedDeclaration(declaration, builder);
   } else if (declaration.property === "custom") {
-    parseDeclarationCustom(declaration, builder);
+    parseCustomDeclaration(declaration, builder);
   } else {
     parseWithParser(declaration, builder);
   }
@@ -202,6 +212,7 @@ function parseWithParser(declaration, builder) {
   if (declaration.property in parsers) {
     const parser = parsers[declaration.property];
     builder.descriptorProperty = declaration.property;
+    builder.setWarningProperty(declaration.property);
     const value = parser(declaration, builder, declaration.property);
     if (value !== undefined) {
       builder.addDescriptor(propertyRename[declaration.property] ?? declaration.property, value);
@@ -246,15 +257,25 @@ function parseBorderRadius({
     "border-top-right-radius": parseSize2DDimensionPercentage(value.topRight, builder)
   });
 }
-function parseBorderColor({
-  value
-}, builder) {
-  builder.addShorthand("border-color", {
-    "border-top-color": parseColor(value.top, builder),
-    "border-bottom-color": parseColor(value.bottom, builder),
-    "border-left-color": parseColor(value.left, builder),
-    "border-right-color": parseColor(value.right, builder)
-  });
+function parseBorderColor(declaration, builder) {
+  switch (declaration.property) {
+    case "border-color":
+      builder.addShorthand("border-color", {
+        "border-top-color": parseColor(declaration.value.top, builder),
+        "border-bottom-color": parseColor(declaration.value.bottom, builder),
+        "border-left-color": parseColor(declaration.value.left, builder),
+        "border-right-color": parseColor(declaration.value.right, builder)
+      });
+      break;
+    case "border-block-color":
+      builder.addDescriptor("border-top-color", parseColor(declaration.value.start, builder));
+      builder.addDescriptor("border-bottom-color", parseColor(declaration.value.end, builder));
+      break;
+    case "border-inline-color":
+      builder.addDescriptor("border-left-color", parseColor(declaration.value.start, builder));
+      builder.addDescriptor("border-right-color", parseColor(declaration.value.end, builder));
+      break;
+  }
 }
 function parseBorderWidth({
   value
@@ -322,6 +343,19 @@ function parseBorderInlineEnd({
   builder.addDescriptor("border-right-color", parseColor(value.color, builder));
   builder.addDescriptor("border-right-width", parseBorderSideWidth(value.width, builder));
 }
+export function parseBorderInlineWidth(declaration, builder) {
+  builder.addDescriptor("border-left-width", parseBorderSideWidth(declaration.value.start, builder));
+  builder.addDescriptor("border-right-width", parseBorderSideWidth(declaration.value.end, builder));
+}
+export function parseBorderInlineStyle(declaration, builder) {
+  if (typeof declaration.value === "string") {
+    builder.addDescriptor("border-style", parseBorderStyle(declaration.value, builder));
+  } else if (declaration.value.start === declaration.value.end) {
+    builder.addDescriptor("border-style", parseBorderStyle(declaration.value.start, builder));
+  } else {
+    builder.addWarning("property", "border-inline-style");
+  }
+}
 function parseFlexFlow({
   value
 }, builder) {
@@ -408,26 +442,26 @@ function parseFont({
 function parseTransform({
   value
 }, builder) {
-  builder.addDescriptor("transform", [{}, "@transform", value.flatMap(t => {
+  builder.addDescriptor("transform", [{}, "transform", value.flatMap(t => {
     switch (t.type) {
       case "perspective":
-        return [[{}, "@perspective", parseLength(t.value, builder)]];
+        return [[{}, "perspective", parseLength(t.value, builder)]];
       case "translate":
-        return [[{}, "@translateX", parseLengthOrCoercePercentageToRuntime(t.value[0], builder)], [[{}, "@translateY", parseLengthOrCoercePercentageToRuntime(t.value[1], builder)]]];
+        return [[{}, "translateX", parseLengthOrCoercePercentageToRuntime(t.value[0], builder)], [[{}, "translateY", parseLengthOrCoercePercentageToRuntime(t.value[1], builder)]]];
       case "translateX":
-        return [[{}, "@translateX", parseLengthOrCoercePercentageToRuntime(t.value, builder)]];
+        return [[{}, "translateX", parseLengthOrCoercePercentageToRuntime(t.value, builder)]];
       case "translateY":
-        return [[{}, "@translateY", parseLengthOrCoercePercentageToRuntime(t.value, builder)]];
+        return [[{}, "translateY", parseLengthOrCoercePercentageToRuntime(t.value, builder)]];
       case "rotate":
-        return [[{}, "@rotate", parseAngle(t.value, builder)]];
+        return [[{}, "rotate", parseAngle(t.value, builder)]];
       case "rotateX":
-        return [[{}, "@rotateX", parseAngle(t.value, builder)]];
+        return [[{}, "rotateX", parseAngle(t.value, builder)]];
       case "rotateY":
-        return [[{}, "@rotateY", parseAngle(t.value, builder)]];
+        return [[{}, "rotateY", parseAngle(t.value, builder)]];
       case "rotateZ":
-        return [[{}, "@rotateZ", parseAngle(t.value, builder)]];
+        return [[{}, "rotateZ", parseAngle(t.value, builder)]];
       case "scale":
-        return [[{}, "@scaleX", parseLength(t.value[0], builder)], [{}, "@scaleY", parseLength(t.value[1], builder)]];
+        return [[{}, "scaleX", parseLength(t.value[0], builder)], [{}, "scaleY", parseLength(t.value[1], builder)]];
       case "scaleX":
         return [[{}, "scaleX", parseLength(t.value, builder)]];
       case "scaleY":
@@ -459,9 +493,15 @@ function parseTranslate({
 function parseRotate({
   value
 }, builder) {
-  builder.addDescriptor("rotateX", [{}, "rotateX", parseAngle(value.x, builder)]);
-  builder.addDescriptor("rotateY", [{}, "rotateY", parseAngle(value.y, builder)]);
-  builder.addDescriptor("rotateZ", [{}, "rotateZ", parseAngle(value.z, builder)]);
+  if (value.x) {
+    builder.addDescriptor("rotateX", [{}, "rotateX", parseAngle(value.angle, builder)]);
+  }
+  if (value.y) {
+    builder.addDescriptor("rotateY", [{}, "rotateY", parseAngle(value.angle, builder)]);
+  }
+  if (value.z) {
+    builder.addDescriptor("rotateZ", [{}, "rotateZ", parseAngle(value.angle, builder)]);
+  }
 }
 function parseScale({
   value
@@ -481,7 +521,11 @@ function parseLetterSpacing({
   if (value.type === "normal") {
     return;
   }
-  return parseLength(value.value, builder);
+  const descriptor = parseLength(value.value, builder);
+  if (Array.isArray(descriptor) && descriptor[1] === "em" && typeof descriptor[2] === "number") {
+    return descriptor[2];
+  }
+  return descriptor;
 }
 function parseTextDecoration({
   value
@@ -499,7 +543,8 @@ function parseZIndex({
     return;
   }
 }
-function parseContainerType(_value, _builder) {
+function parseContainerType(_declaration, builder) {
+  builder.addContainer(["___default___"]);
   return;
 }
 function parseContainerName({
@@ -514,12 +559,13 @@ function parseContainer({
   builder.addContainer(value.name.type === "none" ? false : value.name.value);
   return;
 }
-export function parseDeclarationUnparsed(declaration, builder) {
+export function parseUnparsedDeclaration(declaration, builder) {
   let property = declaration.value.propertyId.property;
   if (!(property in parsers)) {
     builder.addWarning("property", property);
     return;
   }
+  builder.setWarningProperty(property);
 
   /**
    * React Native doesn't support all the logical properties
@@ -534,14 +580,14 @@ export function parseDeclarationUnparsed(declaration, builder) {
    */
   builder.descriptorProperty = property;
   if (unparsedRuntimeParsing.has(property)) {
-    const args = parseUnparsed(declaration.value.value, builder);
+    const args = parseUnparsed(declaration.value.value, builder, property);
     if (property === "animation") {
-      builder.addDescriptor("animation", [{}, `@${toRNProperty(property)}`, args]);
+      builder.addDescriptor("animation", [{}, property, args]);
     } else {
-      builder.addDescriptor(property, [{}, `@${toRNProperty(property)}`, args, 1]);
+      builder.addDescriptor(property, [{}, toRNProperty(property), args, 1]);
     }
   } else {
-    const value = parseUnparsed(declaration.value.value, builder);
+    const value = parseUnparsed(declaration.value.value, builder, property);
     builder.addDescriptor(property, value);
     if (property === "font-size") {
       builder.addDescriptor("--__rn-css-em", value);
@@ -551,16 +597,20 @@ export function parseDeclarationUnparsed(declaration, builder) {
     }
   }
 }
-export function parseDeclarationCustom(declaration, builder) {
+export function parseCustomDeclaration(declaration, builder) {
   const property = declaration.value.name;
-  if (validProperties.has(property) || property.startsWith("--") || property.startsWith("-rn-")) {
-    builder.addDescriptor(property, parseUnparsed(declaration.value.value, builder, allowAuto.has(property)));
+  if (property === "-webkit-line-clamp") {
+    builder.addDescriptor(property, parseUnparsed(declaration.value.value, builder, property));
+  } else if (property === "-rn-ripple-style") {
+    builder.addDescriptor(property, parseUnparsed(declaration.value.value, builder, property) === "borderless");
+  } else if (validProperties.has(property) || property.startsWith("--") || property.startsWith("-rn-")) {
+    builder.addDescriptor(property, parseUnparsed(declaration.value.value, builder, property));
   } else {
     builder.addWarning("property", declaration.value.name);
   }
 }
-export function reduceParseUnparsed(tokenOrValues, builder) {
-  const result = tokenOrValues.map(tokenOrValue => parseUnparsed(tokenOrValue, builder)).filter(v => v !== undefined);
+export function reduceParseUnparsed(tokenOrValues, builder, property, allowAuto) {
+  const result = tokenOrValues.map(tokenOrValue => parseUnparsed(tokenOrValue, builder, property, allowAuto)).filter(v => v !== undefined);
   if (result.length === 0) {
     return undefined;
   }
@@ -574,6 +624,9 @@ export function reduceParseUnparsed(tokenOrValues, builder) {
       currentGroup.push(value);
     }
   }
+
+  // Groups are the tokens grouped together by comma location
+  // If a group only has 1 item, it shouldn't be an array
   groups = groups.flatMap(group => {
     if (!Array.isArray(group)) {
       return [];
@@ -587,21 +640,26 @@ export function reduceParseUnparsed(tokenOrValues, builder) {
       } else {
         return [first];
       }
+    } else if (
+    // This is a special case for <ratio> values
+    group.includes("/") && group.every(item => typeof item === "string" && item === "/" ? item : typeof item === "number")) {
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
+      return [group.join(" ")];
     } else {
       return [group];
     }
   });
   return groups.length === 1 ? groups[0] : groups;
 }
-export function unparsedFunction(token, builder) {
-  return [{}, token.value.name, reduceParseUnparsed(token.value.arguments, builder)];
+export function unparsedFunction(token, builder, property, allowAuto) {
+  return [{}, toRNProperty(token.value.name), reduceParseUnparsed(token.value.arguments, builder, property, allowAuto)];
 }
 
 /**
  * When the CSS cannot be parsed (often due to a runtime condition like a CSS variable)
  * This export function best efforts parsing it into a export function that we can evaluate at runtime
  */
-export function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
+export function parseUnparsed(tokenOrValue, builder, property, allowAuto = allowAutoProperties.has(property)) {
   if (tokenOrValue === undefined || tokenOrValue === null) {
     return;
   }
@@ -620,7 +678,7 @@ export function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
     return round(tokenOrValue);
   }
   if (Array.isArray(tokenOrValue)) {
-    const args = reduceParseUnparsed(tokenOrValue, builder);
+    const args = reduceParseUnparsed(tokenOrValue, builder, property, allowAuto);
     if (!args) return;
     if (Array.isArray(args) && args.length === 1) return args[0];
     return args;
@@ -628,12 +686,12 @@ export function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
   switch (tokenOrValue.type) {
     case "unresolved-color":
       {
-        return parseUnresolvedColor(tokenOrValue.value, builder);
+        return parseUnresolvedColor(tokenOrValue.value, builder, property, allowAuto);
       }
     case "var":
       {
         let args = tokenOrValue.value.name.ident.slice(2);
-        const fallback = parseUnparsed(tokenOrValue.value.fallback, builder);
+        const fallback = parseUnparsed(tokenOrValue.value.fallback, builder, property, allowAuto);
         if (fallback !== undefined) {
           args = [args, fallback];
         }
@@ -653,8 +711,8 @@ export function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
           case "scaleY":
           case "translateX":
           case "translateY":
-            tokenOrValue.value.name = `@${tokenOrValue.value.name}`;
-            return unparsedFunction(tokenOrValue, builder);
+            return unparsedFunction(tokenOrValue, builder, property, allowAuto);
+          case "blur":
           case "brightness":
           case "contrast":
           case "cubic-bezier":
@@ -668,7 +726,7 @@ export function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
           case "linear-gradient":
           case "opacity":
           case "pixelScale":
-          case "pixelSizeForLayoutSize":
+          case "getPixelSizeForLayoutSize":
           case "platformColor":
           case "radial-gradient":
           case "rgb":
@@ -678,17 +736,17 @@ export function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
           case "sepia":
           case "shadow":
           case "steps":
-            return unparsedFunction(tokenOrValue, builder);
+            return unparsedFunction(tokenOrValue, builder, property, allowAuto);
           case "hairlineWidth":
             return [{}, tokenOrValue.value.name, []];
           case "calc":
           case "max":
           case "min":
           case "clamp":
-            return parseCalcFn(tokenOrValue.value.name, tokenOrValue.value.arguments, builder);
+            return parseCalcFn(tokenOrValue.value.name, tokenOrValue.value.arguments, builder, property);
           default:
             {
-              builder.addWarning("function", tokenOrValue.value.name);
+              builder.addWarning("value", `${tokenOrValue.value.name}()`);
               return;
             }
         }
@@ -717,6 +775,8 @@ export function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
               return true;
             } else if (value === "false") {
               return false;
+            } else if (value === "infinity") {
+              return Number.MAX_SAFE_INTEGER;
             } else {
               return value;
             }
@@ -734,11 +794,17 @@ export function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
           return parseDimension(tokenOrValue.value, builder);
         case "comma":
           return CommaSeparator;
+        case "delim":
+          {
+            if (tokenOrValue.value.value === "/") {
+              return tokenOrValue.value.value;
+            }
+            return;
+          }
         case "at-keyword":
         case "hash":
         case "id-hash":
         case "unquoted-url":
-        case "delim":
         case "white-space":
         case "comment":
         case "colon":
@@ -791,22 +857,32 @@ export function parseLength(length, builder) {
     inlineRem = 14
   } = builder.getOptions();
   if (typeof length === "number") {
-    return length;
+    return round(length);
   }
   if ("unit" in length) {
     switch (length.unit) {
       case "px":
-        return length.value;
+        {
+          if (length.value === Infinity) {
+            return 9999;
+          } else if (length.value === -Infinity) {
+            return -9999;
+          } else {
+            // Normalize large values to safe integers, e.g. `calc(infinity * 1px)`
+            const value = Math.max(Math.min(length.value, Number.MAX_SAFE_INTEGER), Number.MIN_SAFE_INTEGER);
+            return round(value);
+          }
+        }
       case "rem":
         if (typeof inlineRem === "number") {
           return length.value * inlineRem;
         } else {
-          return [{}, "rem", length.value];
+          return [{}, "rem", round(length.value)];
         }
       case "vw":
       case "vh":
       case "em":
-        return [{}, length.unit, length.value, 1];
+        return [{}, length.unit, round(length.value), 1];
       case "in":
       case "cm":
       case "mm":
@@ -891,7 +967,7 @@ export function parseAngle(angle, builder) {
     case "rad":
       return `${angle.value}${angle.type}`;
     default:
-      builder.addWarning("value", angle.value);
+      builder.addWarning("value", `${angle.value} ${angle.type}`);
       return undefined;
   }
 }
@@ -949,7 +1025,7 @@ export function parseSize(size, builder, options, {
   }
   return;
 }
-export function parseColorOrAuto({
+export function parseColorOrAutoDeclaration({
   value
 }, builder) {
   if (value.type === "auto") {
@@ -1339,19 +1415,27 @@ export function parseBorderStyle(value, builder) {
   builder.addWarning("value", value.top);
   return undefined;
 }
-export function parseBorderBlockColor({
-  value
-}, builder) {
-  builder.addDescriptor("border-top-color", parseColor(value.start, builder));
-  builder.addDescriptor("border-bottom-color", parseColor(value.end, builder));
-  return;
-}
 export function parseBorderBlockWidth(declaration, builder) {
   builder.addDescriptor("border-top-width", parseBorderSideWidth(declaration.value.start, builder));
   builder.addDescriptor("border-bottom-width", parseBorderSideWidth(declaration.value.end, builder));
 }
+function parseBorderBlockStyle(declaration, builder) {
+  if (declaration.value.start === declaration.value.end) {
+    builder.addDescriptor("border-style", parseBorderStyle(declaration.value.start, builder));
+  } else {
+    builder.addWarning("property", "border-block-style");
+  }
+}
 export function parseBorderSideWidthDeclaration(declaration, builder) {
-  return parseBorderSideWidth(declaration.value, builder);
+  if (declaration.property.includes("block")) {
+    builder.addDescriptor(`border-${declaration.property.includes("start") ? "top" : "bottom"}-width`, parseBorderSideWidth(declaration.value, builder));
+    return;
+  } else if (declaration.property.includes("inline")) {
+    builder.addDescriptor(`border-${declaration.property.includes("start") ? "left" : "right"}-width`, parseBorderSideWidth(declaration.value, builder));
+    return;
+  } else {
+    return parseBorderSideWidth(declaration.value, builder);
+  }
 }
 export function parseBorderSideWidth(value, builder) {
   if (value.type === "length") {
@@ -1396,7 +1480,7 @@ export function parseLineHeight(value, builder) {
             return parseLength(length, builder);
           case "percentage":
           case "calc":
-            builder.addWarning("value", typeof length.value === "number" ? length.value : JSON.stringify(length.value));
+            builder.addWarning("style", "line-height", typeof length.value === "number" ? length.value : JSON.stringify(length.value));
             return;
           default:
             {
@@ -1583,7 +1667,11 @@ export function parseDimension({
 }, builder) {
   switch (unit) {
     case "px":
-      return value;
+      if (value === Infinity) {
+        return 9999;
+      } else {
+        return value;
+      }
     case "%":
       return `${value}%`;
     case "rnh":
@@ -1608,17 +1696,21 @@ export function parseUserSelect({
   }
 }
 export function parseSVGPaint({
-  value
+  value,
+  property
 }, builder) {
+  let parsedValue;
   if (value.type === "none") {
-    return "transparent";
+    parsedValue = "transparent";
   } else if (value.type === "color") {
-    return parseColor(value.value, builder);
+    parsedValue = parseColor(value.value, builder);
+  } else {
+    return;
   }
-  return;
+  builder.addDescriptor(property, parsedValue);
 }
 export function round(number) {
-  return Math.round((number + Number.EPSILON) * 100) / 100;
+  return Math.round((number + Number.EPSILON) * 10000) / 10000;
 }
 export function parseDimensionPercentageFor_LengthValue(value, builder) {
   if (value.type === "calc") {
@@ -1629,7 +1721,7 @@ export function parseDimensionPercentageFor_LengthValue(value, builder) {
     return parseLength(value.value, builder);
   }
 }
-const allowAuto = new Set(["pointer-events"]);
+const allowAutoProperties = new Set(["pointer-events"]);
 export function parseEnv(value, builder) {
   switch (value.name.type) {
     case "ua":
@@ -1638,7 +1730,7 @@ export function parseEnv(value, builder) {
         case "safe-area-inset-right":
         case "safe-area-inset-bottom":
         case "safe-area-inset-left":
-          return [{}, "var", [`--react-native-css-${value.name.value}`, parseUnparsed(value.fallback, builder)], 1];
+          return [{}, "var", [`--react-native-css-${value.name.value}`, parseUnparsed(value.fallback, builder, value.name.value)], 1];
         case "viewport-segment-width":
         case "viewport-segment-height":
         case "viewport-segment-top":
@@ -1652,14 +1744,14 @@ export function parseEnv(value, builder) {
   }
   return;
 }
-export function parseCalcFn(name, tokens, builder) {
-  const args = parseCalcArguments(tokens, builder);
+export function parseCalcFn(name, tokens, builder, property) {
+  const args = parseCalcArguments(tokens, builder, property);
   if (args) {
     return [{}, name, args];
   }
   return;
 }
-export function parseCalcArguments([...args], builder) {
+export function parseCalcArguments([...args], builder, property) {
   const parsed = [];
   let mode;
   for (const [currentIndex, arg] of args.entries()) {
@@ -1673,7 +1765,7 @@ export function parseCalcArguments([...args], builder) {
       case "function":
       case "unresolved-color":
         {
-          const value = parseUnparsed(arg, builder);
+          const value = parseUnparsed(arg, builder, property);
           if (value === undefined) {
             return undefined;
           }
@@ -1742,7 +1834,7 @@ export function parseCalcArguments([...args], builder) {
               .splice(currentIndex, closeParenthesisIndex - currentIndex + 1)
               // Then drop the surrounding parenthesis
               .slice(1, -1);
-              parsed.push(parseCalcFn("calc", innerCalcArgs, builder));
+              parsed.push(parseCalcFn("calc", innerCalcArgs, builder, property));
               break;
             }
           case "close-parenthesis":
@@ -1783,20 +1875,20 @@ export function parseTranslateProp(value, prop, builder) {
   }
   return parseLength(value[prop], builder);
 }
-export function parseUnresolvedColor(color, builder) {
+export function parseUnresolvedColor(color, builder, property, allowAuto) {
   switch (color.type) {
     case "rgb":
-      return [{}, "rgba", [round(color.r * 255), round(color.g * 255), round(color.b * 255), parseUnparsed(color.alpha, builder)]];
+      return [{}, "rgba", [round(color.r * 255), round(color.g * 255), round(color.b * 255), parseUnparsed(color.alpha, builder, property)]];
     case "hsl":
-      return [{}, color.type, [color.h, color.s, color.l, parseUnparsed(color.alpha, builder)]];
+      return [{}, color.type, [color.h, color.s, color.l, parseUnparsed(color.alpha, builder, property)]];
     case "light-dark":
       {
         const extraRule = builder.extendRule({
           m: [["=", "prefers-color-scheme", "dark"]]
         });
-        builder.addUnnamedDescriptor(reduceParseUnparsed(color.dark, builder), false, extraRule);
+        builder.addUnnamedDescriptor(reduceParseUnparsed(color.dark, builder, property, allowAuto), false, extraRule);
         builder.addExtraRule(extraRule);
-        return reduceParseUnparsed(color.light, builder);
+        return reduceParseUnparsed(color.light, builder, property, allowAuto);
       }
     default:
       color;
@@ -1955,7 +2047,7 @@ function parseGradient(gradient, builder) {
   switch (gradient.type) {
     case "linear":
       {
-        return [{}, "@linear-gradient", [parseLineDirection(gradient.direction, builder), ...gradient.items.map(item => parseGradientItem(item, builder))]];
+        return [{}, "linear-gradient", [parseLineDirection(gradient.direction, builder), ...gradient.items.map(item => parseGradientItem(item, builder))]];
       }
   }
   return;
@@ -2012,6 +2104,7 @@ function parseFilter(declaration, builder) {
           [value.type]: parseAngle(value.value, builder)
         };
       case "drop-shadow":
+        return [{}, toRNProperty(value.type), [parseLength(value.value.xOffset, builder), parseLength(value.value.yOffset, builder), parseLength(value.value.blur, builder), parseColor(value.value.color, builder)]];
       case "url":
         return;
     }