react-native-css 0.0.0-nightly.d48061c → 0.0.0-nightly.da5ce0f

package/dist/module/compiler/declarations.js

@@ -3,6 +3,7 @@
 // cSpell:ignore rcap,vmin,svmin,lvmin,dvmin,cqmin,vmax,svmax,lvmax,dvmax,cqmax,currentcolor,oklab,oklch,prophoto,squircle,oldstyle,nums
 
 import Color from "colorjs.io";
+import { isStyleFunction } from "../utilities/index.js";
 import { parseEasingFunction, parseIterationCount } from "./keyframes.js";
 import { toRNProperty } from "./selectors.js";
 const CommaSeparator = Symbol("CommaSeparator");
@@ -264,23 +265,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({
@@ -535,11 +538,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
@@ -607,7 +606,9 @@ export function parseUnparsedDeclaration(declaration, builder) {
       builder.addDescriptor("--__rn-css-em", value);
     }
     if (property === "color") {
-      builder.addDescriptor("--__rn-css-current-color", value);
+      if (!isStyleFunction(value) || value[1] !== "var" || value[2] !== "-css-color") {
+        builder.addDescriptor("--__rn-css-color", value);
+      }
     }
   }
 }
@@ -700,7 +701,7 @@ export function parseUnparsed(tokenOrValue, builder, property, allowAuto = allow
     } else if (tokenOrValue === "false") {
       return false;
     } else if (tokenOrValue === "currentcolor") {
-      return [{}, "var", "__rn-css-current-color"];
+      return [{}, "var", "__rn-css-color"];
     } else {
       return tokenOrValue;
     }
@@ -711,8 +712,13 @@ export function parseUnparsed(tokenOrValue, builder, property, allowAuto = allow
   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") && isStyleFunction(args)) {
+      return [args];
+    } else {
+      return args;
+    }
   }
   switch (tokenOrValue.type) {
     case "unresolved-color":
@@ -776,6 +782,8 @@ export function parseUnparsed(tokenOrValue, builder, property, allowAuto = allow
           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}()`);
@@ -801,7 +809,7 @@ export function parseUnparsed(tokenOrValue, builder, property, allowAuto = allow
               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;
@@ -1074,7 +1082,9 @@ export function parseColorOrAutoDeclaration({
 }
 export 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));
+  }
 }
 export function parseColorDeclaration(declaration, builder) {
   builder.addDescriptor(declaration.property, parseColor(declaration.value, builder));
@@ -1093,7 +1103,7 @@ export 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 = {
@@ -1363,7 +1373,7 @@ export 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;
       }
@@ -1384,8 +1394,8 @@ export 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));
 }
 export function parseTextDecorationStyle(declaration, builder) {
@@ -1593,16 +1603,20 @@ export function parseLengthOrCoercePercentageToRuntime(value, builder) {
 }
 export 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") {
@@ -1625,12 +1639,12 @@ export 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);
   }
 }
 export function parseBoxSizing(declaration, builder) {
@@ -1798,7 +1812,10 @@ 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, 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":
@@ -1819,6 +1836,54 @@ export function parseCalcFn(name, tokens, builder, property) {
   }
   return;
 }
+export 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]];
+}
 export function parseCalcArguments([...args], builder, property) {
   const parsed = [];
   for (const arg of args) {
@@ -2128,13 +2193,13 @@ 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"), " "]]);
 }