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

package/dist/commonjs/compiler/atRules.js

@@ -49,7 +49,16 @@ function isPropAtRule(rule) {
   return rule.type === "unknown" && rule.value.name === "prop";
 }
 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;
@@ -79,13 +88,17 @@ function propAtRuleBlock(token, mapping = {}) {
   const [from, to] = (0, _splitByDelimiter.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["*"] = (0, _selectors.toRNProperty)(fromToken.value.value);
+    return mapping;
+  }
   mapping[(0, _selectors.toRNProperty)(fromToken.value.value)] = to.flatMap((item, index) => {
     switch (item.value.type) {
       case "delim":

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

@@ -1 +1 @@
-{"version":3,"names":["_selectors","require","_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","splitByDelimiter","from","to","fromToken","toRNProperty","flatMap","index"],"sourceRoot":"../../../src","sources":["compiler/atRules.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_selectors","require","_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","splitByDelimiter","from","to","fromToken","toRNProperty","flatMap","index"],"sourceRoot":"../../../src","sources":["compiler/atRules.ts"],"mappings":"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","ignoreList":[]}

package/dist/commonjs/compiler/declarations.js

@@ -25,10 +25,9 @@ exports.parseCalcArguments = parseCalcArguments;
 exports.parseCalcFn = parseCalcFn;
 exports.parseColor = parseColor;
 exports.parseColorDeclaration = parseColorDeclaration;
-exports.parseColorOrAuto = parseColorOrAuto;
+exports.parseColorOrAutoDeclaration = parseColorOrAutoDeclaration;
+exports.parseCustomDeclaration = parseCustomDeclaration;
 exports.parseDeclaration = parseDeclaration;
-exports.parseDeclarationCustom = parseDeclarationCustom;
-exports.parseDeclarationUnparsed = parseDeclarationUnparsed;
 exports.parseDimension = parseDimension;
 exports.parseDimensionPercentageFor_LengthValue = parseDimensionPercentageFor_LengthValue;
 exports.parseDisplay = parseDisplay;
@@ -68,6 +67,7 @@ exports.parseTextShadow = parseTextShadow;
 exports.parseTime = parseTime;
 exports.parseTranslateProp = parseTranslateProp;
 exports.parseUnparsed = parseUnparsed;
+exports.parseUnparsedDeclaration = parseUnparsedDeclaration;
 exports.parseUnresolvedColor = parseUnresolvedColor;
 exports.parseUserSelect = parseUserSelect;
 exports.parseVerticalAlign = parseVerticalAlign;
@@ -84,7 +84,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,
@@ -155,7 +157,7 @@ const parsers = {
   "border-width": parseBorderWidth,
   "bottom": parseSizeDeclaration,
   "box-shadow": parseBoxShadow,
-  "caret-color": parseColorOrAuto,
+  "caret-color": parseColorOrAutoDeclaration,
   "color": parseFontColorDeclaration,
   "column-gap": parseGap,
   "container": parseContainer,
@@ -274,9 +276,9 @@ 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);
   }
@@ -515,26 +517,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":
@@ -566,9 +568,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
@@ -610,7 +618,8 @@ function parseZIndex({
     return;
   }
 }
-function parseContainerType(_value, _builder) {
+function parseContainerType(_declaration, builder) {
+  builder.addContainer(["___default___"]);
   return;
 }
 function parseContainerName({
@@ -625,7 +634,7 @@ function parseContainer({
   builder.addContainer(value.name.type === "none" ? false : value.name.value);
   return;
 }
-function parseDeclarationUnparsed(declaration, builder) {
+function parseUnparsedDeclaration(declaration, builder) {
   let property = declaration.value.propertyId.property;
   if (!(property in parsers)) {
     builder.addWarning("property", property);
@@ -646,14 +655,14 @@ 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", [{}, `@${(0, _selectors.toRNProperty)(property)}`, args]);
+      builder.addDescriptor("animation", [{}, property, args]);
     } else {
-      builder.addDescriptor(property, [{}, `@${(0, _selectors.toRNProperty)(property)}`, args, 1]);
+      builder.addDescriptor(property, [{}, (0, _selectors.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);
@@ -663,22 +672,20 @@ function parseDeclarationUnparsed(declaration, builder) {
     }
   }
 }
-function parseDeclarationCustom(declaration, builder) {
+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);
   }
 }
-function reduceParseUnparsed(tokenOrValues, builder) {
-  const result = tokenOrValues.map(tokenOrValue => parseUnparsed(tokenOrValue, builder)).filter(v => v !== undefined);
+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;
   }
@@ -692,6 +699,9 @@ 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 [];
@@ -705,21 +715,26 @@ 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;
 }
-function unparsedFunction(token, builder) {
-  return [{}, token.value.name, reduceParseUnparsed(token.value.arguments, builder)];
+function unparsedFunction(token, builder, property, allowAuto) {
+  return [{}, (0, _selectors.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
  */
-function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
+function parseUnparsed(tokenOrValue, builder, property, allowAuto = allowAutoProperties.has(property)) {
   if (tokenOrValue === undefined || tokenOrValue === null) {
     return;
   }
@@ -738,7 +753,7 @@ 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;
@@ -746,12 +761,12 @@ 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];
         }
@@ -760,51 +775,51 @@ 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}()`);
@@ -836,6 +851,8 @@ 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;
             }
@@ -853,11 +870,17 @@ 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":
@@ -921,7 +944,9 @@ 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":
@@ -1076,7 +1101,7 @@ function parseSize(size, builder, options, {
   }
   return;
 }
-function parseColorOrAuto({
+function parseColorOrAutoDeclaration({
   value
 }, builder) {
   if (value.type === "auto") {
@@ -1758,9 +1783,6 @@ function parseSVGPaint({
   } else {
     return;
   }
-  builder.addMapping({
-    [property]: [property]
-  });
   builder.addDescriptor(property, parsedValue);
 }
 function round(number) {
@@ -1775,7 +1797,7 @@ function parseDimensionPercentageFor_LengthValue(value, builder) {
     return parseLength(value.value, builder);
   }
 }
-const allowAuto = new Set(["pointer-events"]);
+const allowAutoProperties = new Set(["pointer-events"]);
 function parseEnv(value, builder) {
   switch (value.name.type) {
     case "ua":
@@ -1784,7 +1806,7 @@ 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":
@@ -1798,14 +1820,14 @@ function parseEnv(value, builder) {
   }
   return;
 }
-function parseCalcFn(name, tokens, builder) {
-  const args = parseCalcArguments(tokens, builder);
+function parseCalcFn(name, tokens, builder, property) {
+  const args = parseCalcArguments(tokens, builder, property);
   if (args) {
     return [{}, name, args];
   }
   return;
 }
-function parseCalcArguments([...args], builder) {
+function parseCalcArguments([...args], builder, property) {
   const parsed = [];
   let mode;
   for (const [currentIndex, arg] of args.entries()) {
@@ -1819,7 +1841,7 @@ 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;
           }
@@ -1888,7 +1910,7 @@ 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":
@@ -1929,20 +1951,20 @@ function parseTranslateProp(value, prop, builder) {
   }
   return parseLength(value[prop], builder);
 }
-function parseUnresolvedColor(color, builder) {
+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;
@@ -2101,7 +2123,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;
@@ -2158,6 +2180,7 @@ function parseFilter(declaration, builder) {
           [value.type]: parseAngle(value.value, builder)
         };
       case "drop-shadow":
+        return [{}, (0, _selectors.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;
     }