react-native-css 3.0.0-nightly.26b272f → 3.0.0-nightly.46bc0ab

package/dist/commonjs/runtime/utils/objects.js

@@ -27,6 +27,8 @@ function getDeepPath(source, paths) {
       target = target[path];
     }
     return target;
+  } else if (_defaults.transformKeys.has(paths)) {
+    return source?.transform?.find(t => t[paths] !== undefined);
   } else {
     return source?.[paths];
   }
@@ -45,20 +47,26 @@ function applyShorthand(value) {
   return target;
 }
 function applyValue(target, prop, value) {
+  // This is confusing.
+  // An undefined value means "don't set anything" (something failed while parsing)
+  // While a null value means "remove this value", which in React Native means "set to undefined"
   if (value === undefined) {
     return;
+  } else if (value === null) {
+    value = undefined;
   }
   if (_defaults.transformKeys.has(prop)) {
     if (!Array.isArray(target.transform)) {
       target.transform = [];
     }
-    const transform = target.transform.find(t => t[prop] !== undefined);
-    if (transform) {
-      transform[prop] = value;
+    const transformArray = target.transform;
+
+    // Remove any existing values
+    target.transform = transformArray.filter(t => !(prop in t));
+    if (Array.isArray(value)) {
+      target.transform.push(...value);
     } else {
-      target.transform.push({
-        [prop]: value
-      });
+      target.transform.push(value);
     }
     return;
   } else if (typeof value === "object" && value && _constants.ShortHandSymbol in value) {

package/dist/commonjs/runtime/utils/objects.js.map

@@ -1 +1 @@
-{"version":3,"names":["_constants","require","_defaults","getDeepPath","source","paths","undefined","Array","isArray","target","path","applyShorthand","value","ShortHandSymbol","values","prop","applyValue","transformKeys","has","transform","find","t","push","Object","assign","setDeepPath","i","length"],"sourceRoot":"../../../../src","sources":["runtime/utils/objects.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_constants","require","_defaults","getDeepPath","source","paths","undefined","Array","isArray","target","path","transformKeys","has","transform","find","t","applyShorthand","value","ShortHandSymbol","values","prop","applyValue","transformArray","filter","push","Object","assign","setDeepPath","i","length"],"sourceRoot":"../../../../src","sources":["runtime/utils/objects.ts"],"mappings":";;;;;;;;;AACA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAFA;;AAIO,SAASE,WAAWA,CAACC,MAAW,EAAEC,KAAgC,EAAE;EACzE,IAAI,CAACD,MAAM,EAAE;IACX;EACF;EAEA,IAAIC,KAAK,KAAK,KAAK,EAAE;IACnB,OAAOC,SAAS;EAClB;EAEA,IAAIC,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,EAAE;IACxB,IAAII,MAAM,GAAGL,MAAM;IAEnB,KAAK,MAAMM,IAAI,IAAIL,KAAK,EAAE;MACxB,IAAI,OAAOI,MAAM,KAAK,QAAQ,IAAI,CAACA,MAAM,IAAI,EAAEC,IAAI,IAAID,MAAM,CAAC,EAAE;QAC9D,OAAOH,SAAS;MAClB;MAEAG,MAAM,GAAGA,MAAM,CAACC,IAAI,CAAC;IACvB;IAEA,OAAOD,MAAM;EACf,CAAC,MAAM,IAAIE,uBAAa,CAACC,GAAG,CAACP,KAAK,CAAC,EAAE;IACnC,OAAOD,MAAM,EAAES,SAAS,EAAEC,IAAI,CAAEC,CAAM,IAAKA,CAAC,CAACV,KAAK,CAAC,KAAKC,SAAS,CAAC;EACpE,CAAC,MAAM;IACL,OAAOF,MAAM,GAAGC,KAAK,CAAC;EACxB;AACF;AAEO,SAASW,cAAcA,CAACC,KAAU,EAAE;EACzC,IAAIA,KAAK,KAAKX,SAAS,EAAE;IACvB;EACF;EAEA,MAAMG,MAA+B,GAAG;IAAE,CAACS,0BAAe,GAAG;EAAK,CAAC;EAEnE,MAAMC,MAAM,GAAGF,KAA4B;EAE3C,KAAK,MAAM,CAACA,KAAK,EAAEG,IAAI,CAAC,IAAID,MAAM,EAAE;IAClCV,MAAM,CAACW,IAAI,CAAC,GAAGH,KAAK;EACtB;EAEA,OAAOR,MAAM;AACf;AAEO,SAASY,UAAUA,CACxBZ,MAA2B,EAC3BW,IAAY,EACZH,KAAU,EACV;EACA;EACA;EACA;EACA,IAAIA,KAAK,KAAKX,SAAS,EAAE;IACvB;EACF,CAAC,MAAM,IAAIW,KAAK,KAAK,IAAI,EAAE;IACzBA,KAAK,GAAGX,SAAS;EACnB;EAEA,IAAIK,uBAAa,CAACC,GAAG,CAACQ,IAAI,CAAC,EAAE;IAC3B,IAAI,CAACb,KAAK,CAACC,OAAO,CAACC,MAAM,CAACI,SAAS,CAAC,EAAE;MACpCJ,MAAM,CAACI,SAAS,GAAG,EAAE;IACvB;IAEA,MAAMS,cAAyC,GAAGb,MAAM,CAACI,SAAS;;IAElE;IACAJ,MAAM,CAACI,SAAS,GAAGS,cAAc,CAACC,MAAM,CAAER,CAAC,IAAK,EAAEK,IAAI,IAAIL,CAAC,CAAC,CAAC;IAE7D,IAAIR,KAAK,CAACC,OAAO,CAACS,KAAK,CAAC,EAAE;MACxBR,MAAM,CAACI,SAAS,CAACW,IAAI,CAAC,GAAGP,KAAK,CAAC;IACjC,CAAC,MAAM;MACLR,MAAM,CAACI,SAAS,CAACW,IAAI,CAACP,KAAK,CAAC;IAC9B;IACA;EACF,CAAC,MAAM,IAAI,OAAOA,KAAK,KAAK,QAAQ,IAAIA,KAAK,IAAIC,0BAAe,IAAID,KAAK,EAAE;IACzE,OAAOA,KAAK,CAACC,0BAAe,CAAC;IAC7BO,MAAM,CAACC,MAAM,CAACjB,MAAM,EAAEQ,KAAK,CAAC;IAC5B;EACF;EAEAR,MAAM,CAACW,IAAI,CAAC,GAAGH,KAAK;AACtB;AAEO,SAASU,WAAWA,CACzBlB,MAA2B,EAC3BJ,KAA4C,EAC5CY,KAAU,EACV;EACA,IAAI,OAAOZ,KAAK,KAAK,QAAQ,EAAE;IAC7BI,MAAM,CAACJ,KAAK,CAAC,GAAGY,KAAK;IACrB,OAAOR,MAAM;EACf;EAEA,KAAK,IAAImB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGvB,KAAK,CAACwB,MAAM,GAAG,CAAC,EAAED,CAAC,EAAE,EAAE;IACzC,MAAMlB,IAAI,GAAGL,KAAK,CAACuB,CAAC,CAAE;IACtBnB,MAAM,CAACC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnBD,MAAM,GAAGA,MAAM,CAACC,IAAI,CAAC;EACvB;EAEAD,MAAM,CAACJ,KAAK,CAACA,KAAK,CAACwB,MAAM,GAAG,CAAC,CAAC,CAAE,GAAGZ,KAAK;EAExC,OAAOR,MAAM;AACf","ignoreList":[]}

package/dist/module/compiler/atRules.js

@@ -45,7 +45,16 @@ function isPropAtRule(rule) {
   return rule.type === "unknown" && rule.value.name === "prop";
 }
 export function parsePropAtRule(rules) {
-  const mapping = {};
+  // Include any default mapping here
+  const mapping = {
+    "caret-color": ["cursorColor"],
+    "fill": ["fill"],
+    "stroke": ["stroke"],
+    "stroke-width": ["strokeWidth"],
+    "-webkit-line-clamp": ["numberOfLines"],
+    "-rn-ripple-color": ["android_ripple", "color"],
+    "-rn-ripple-style": ["android_ripple", "borderless"]
+  };
   if (!rules) return mapping;
   for (const rule of rules) {
     if (!isPropAtRule(rule)) continue;
@@ -75,13 +84,17 @@ function propAtRuleBlock(token, mapping = {}) {
   const [from, to] = splitByDelimiter(token, item => {
     return item.value.type === "colon";
   });
-  if (!from || from.length !== 1 || !to) {
+  if (!from || from.length !== 1) {
     return mapping;
   }
   const fromToken = from[0];
   if (!fromToken || fromToken.value.type !== "ident") {
     return mapping;
   }
+  if (!to) {
+    mapping["*"] = toRNProperty(fromToken.value.value);
+    return mapping;
+  }
   mapping[toRNProperty(fromToken.value.value)] = to.flatMap((item, index) => {
     switch (item.value.type) {
       case "delim":

package/dist/module/compiler/atRules.js.map

@@ -1 +1 @@
-{"version":3,"names":["toRNProperty","splitByDelimiter","maybeMutateReactNativeOptions","rule","builder","type","value","name","declarations","body","declaration","property","forEach","token","setOptions","isPropAtRule","parsePropAtRule","rules","mapping","prelude","length","filter","item","propAtRuleBlock","block","blocks","blockRules","from","to","fromToken","flatMap","index"],"sourceRoot":"../../../src","sources":["compiler/atRules.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["toRNProperty","splitByDelimiter","maybeMutateReactNativeOptions","rule","builder","type","value","name","declarations","body","declaration","property","forEach","token","setOptions","isPropAtRule","parsePropAtRule","rules","mapping","prelude","length","filter","item","propAtRuleBlock","block","blocks","blockRules","from","to","fromToken","flatMap","index"],"sourceRoot":"../../../src","sources":["compiler/atRules.ts"],"mappings":"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","ignoreList":[]}

package/dist/module/compiler/compiler.types.js.map

@@ -1 +1 @@
-{"version":3,"names":["VAR_SYMBOL"],"sourceRoot":"../../../src","sources":["compiler/compiler.types.ts"],"mappings":";;AAAA;;AAIA,SAASA,UAAU,QAAQ,iCAA8B;;AAkBzD;AACA;AACA;;AAkBA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AA0FA;;AAeA;;AAMA;;AAwCS;;AAMkE;;AAI3E;;AAUA;;AAEA;AACA;AACA;AACA;AACA;;AAIA;;AAKA;;AAEA;;AAGA;AACA;AACA;;AAKA;AACA;AACA","ignoreList":[]}
+{"version":3,"names":["VAR_SYMBOL"],"sourceRoot":"../../../src","sources":["compiler/compiler.types.ts"],"mappings":";;AAAA;;AAIA,SAASA,UAAU,QAAQ,iCAA8B;;AAkBzD;AACA;AACA;;AAkBA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAwFA;;AAeA;;AAMA;;AAwCS;;AAMkE;;AAI3E;;AAUA;;AAEA;AACA;AACA;AACA;AACA;;AAIA;;AAKA;;AAEA;;AAGA;AACA;AACA;;AAKA;AACA;AACA","ignoreList":[]}

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,
@@ -80,7 +82,7 @@ const parsers = {
   "border-width": parseBorderWidth,
   "bottom": parseSizeDeclaration,
   "box-shadow": parseBoxShadow,
-  "caret-color": parseColorOrAuto,
+  "caret-color": parseColorOrAutoDeclaration,
   "color": parseFontColorDeclaration,
   "column-gap": parseGap,
   "container": parseContainer,
@@ -199,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);
   }
@@ -440,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":
@@ -491,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
@@ -535,7 +543,8 @@ function parseZIndex({
     return;
   }
 }
-function parseContainerType(_value, _builder) {
+function parseContainerType(_declaration, builder) {
+  builder.addContainer(["___default___"]);
   return;
 }
 function parseContainerName({
@@ -550,7 +559,7 @@ function parseContainer({
   builder.addContainer(value.name.type === "none" ? false : value.name.value);
   return;
 }
-export function parseDeclarationUnparsed(declaration, builder) {
+export function parseUnparsedDeclaration(declaration, builder) {
   let property = declaration.value.propertyId.property;
   if (!(property in parsers)) {
     builder.addWarning("property", property);
@@ -571,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);
@@ -588,22 +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.setWarningProperty(property);
-    builder.addDescriptor(property, parseUnparsed(declaration.value.value, builder, allowAuto.has(property)));
-  } else if (property === "-webkit-line-clamp") {
-    builder.addMapping({
-      [property]: ["numberOfLines"]
-    });
-    builder.addDescriptor(property, parseUnparsed(declaration.value.value, builder, allowAuto.has(property)));
+  if (property === "-webkit-line-clamp") {
+    builder.addDescriptor(property, parseUnparsed(declaration.value.value, builder, property));
+  } else if (property === "-rn-ripple-style") {
+    builder.addDescriptor(property, parseUnparsed(declaration.value.value, builder, property) === "borderless");
+  } else if (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;
   }
@@ -617,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 [];
@@ -630,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;
   }
@@ -663,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;
@@ -671,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];
         }
@@ -685,51 +700,51 @@ export function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
     case "function":
       {
         switch (tokenOrValue.value.name) {
-          case "translate":
-          case "rotate":
-          case "rotateX":
-          case "rotateY":
-          case "skewX":
-          case "skewY":
-          case "scale":
-          case "scaleX":
-          case "scaleY":
-          case "translateX":
-          case "translateY":
-            tokenOrValue.value.name = `@${tokenOrValue.value.name}`;
-            return unparsedFunction(tokenOrValue, builder);
           case "blur":
           case "brightness":
           case "contrast":
           case "cubic-bezier":
           case "drop-shadow":
           case "fontScale":
+          case "getPixelSizeForLayoutSize":
           case "grayscale":
           case "hsl":
           case "hsla":
           case "hue-rotate":
           case "invert":
-          case "linear-gradient":
           case "opacity":
           case "pixelScale":
-          case "pixelSizeForLayoutSize":
           case "platformColor":
-          case "radial-gradient":
           case "rgb":
           case "rgba":
+          case "rotate":
+          case "rotateX":
+          case "rotateY":
           case "roundToNearestPixel":
           case "saturate":
+          case "scale":
+          case "scaleX":
+          case "scaleY":
           case "sepia":
           case "shadow":
+          case "skewX":
+          case "skewY":
           case "steps":
-            return unparsedFunction(tokenOrValue, builder);
+          case "translate":
+          case "translateX":
+          case "translateY":
+            return unparsedFunction(tokenOrValue, builder, property, allowAuto);
+          case "linear-gradient":
+          case "radial-gradient":
+            // These are special as React Native requires the '-' in their name
+            return [{}, tokenOrValue.value.name, reduceParseUnparsed(tokenOrValue.value.arguments, builder, property, allowAuto)];
           case "hairlineWidth":
             return [{}, tokenOrValue.value.name, []];
           case "calc":
           case "max":
           case "min":
           case "clamp":
-            return parseCalcFn(tokenOrValue.value.name, tokenOrValue.value.arguments, builder);
+            return parseCalcFn(tokenOrValue.value.name, tokenOrValue.value.arguments, builder, property);
           default:
             {
               builder.addWarning("value", `${tokenOrValue.value.name}()`);
@@ -761,6 +776,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;
             }
@@ -778,11 +795,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":
@@ -846,7 +869,9 @@ export function parseLength(length, builder) {
           } else if (length.value === -Infinity) {
             return -9999;
           } else {
-            return round(length.value);
+            // Normalize large values to safe integers, e.g. `calc(infinity * 1px)`
+            const value = Math.max(Math.min(length.value, Number.MAX_SAFE_INTEGER), Number.MIN_SAFE_INTEGER);
+            return round(value);
           }
         }
       case "rem":
@@ -1001,7 +1026,7 @@ export function parseSize(size, builder, options, {
   }
   return;
 }
-export function parseColorOrAuto({
+export function parseColorOrAutoDeclaration({
   value
 }, builder) {
   if (value.type === "auto") {
@@ -1683,9 +1708,6 @@ export function parseSVGPaint({
   } else {
     return;
   }
-  builder.addMapping({
-    [property]: [property]
-  });
   builder.addDescriptor(property, parsedValue);
 }
 export function round(number) {
@@ -1700,7 +1722,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":
@@ -1709,7 +1731,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":
@@ -1723,14 +1745,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()) {
@@ -1744,7 +1766,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;
           }
@@ -1813,7 +1835,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":
@@ -1854,20 +1876,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;
@@ -2026,7 +2048,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;
@@ -2083,6 +2105,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;
     }