react-native-css 3.0.0-nightly.8dd703d → 3.0.0-nightly.9c84741

package/src/compiler/declarations.ts

@@ -7,6 +7,7 @@ import type {
   BorderStyle,
   ColorOrAuto,
   CssColor,
+  CustomProperty,
   Declaration,
   DimensionPercentageFor_LengthValue,
   EnvironmentVariable,
@@ -101,6 +102,7 @@ const parsers: {
   "border-block-end-width": parseBorderSideWidthDeclaration,
   "border-block-start": parseBorderBlockStart,
   "border-block-start-color": parseColorDeclaration,
+  "border-block-start-style": parseBorderStyleDeclaration,
   "border-block-start-width": parseBorderSideWidthDeclaration,
   "border-block-style": parseBorderBlockStyle,
   "border-block-width": parseBorderBlockWidth,
@@ -238,6 +240,7 @@ const parsers: {
   "translate": parseTranslate,
   "user-select": parseUserSelect,
   "vertical-align": parseVerticalAlign,
+  "visibility": parseVisibility,
   "width": parseSizeDeclaration,
   "z-index": parseZIndex,
 };
@@ -435,18 +438,14 @@ function parseBorderBlock(
   { value }: DeclarationType<"border-block">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor("border-top-color", parseColor(value.color, builder));
+  builder.addDescriptor("border-block-color", parseColor(value.color, builder));
   builder.addDescriptor(
-    "border-bottom-color",
-    parseColor(value.color, builder),
-  );
-  builder.addDescriptor(
-    "border-top-width",
+    "border-block-width",
     parseBorderSideWidth(value.width, builder),
   );
   builder.addDescriptor(
-    "border-bottom-width",
-    parseBorderSideWidth(value.width, builder),
+    "border-block-style",
+    parseBorderStyle(value.style, builder),
   );
 }
 
@@ -454,9 +453,12 @@ function parseBorderBlockStart(
   { value }: DeclarationType<"border-block-start">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor("border-top-color", parseColor(value.color, builder));
   builder.addDescriptor(
-    "border-top-width",
+    "border-block-start-color",
+    parseColor(value.color, builder),
+  );
+  builder.addDescriptor(
+    "border-block-start-width",
     parseBorderSideWidth(value.width, builder),
   );
 }
@@ -466,11 +468,11 @@ function parseBorderBlockEnd(
   builder: StylesheetBuilder,
 ) {
   builder.addDescriptor(
-    "border-bottom-color",
+    "border-block-end-color",
     parseColor(value.color, builder),
   );
   builder.addDescriptor(
-    "border-bottom-width",
+    "border-block-end-width",
     parseBorderSideWidth(value.width, builder),
   );
 }
@@ -479,38 +481,54 @@ function parseBorderInline(
   { value }: DeclarationType<"border-inline">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor("border-left-color", parseColor(value.color, builder));
-  builder.addDescriptor("border-right-color", parseColor(value.color, builder));
   builder.addDescriptor(
-    "border-left-width",
-    parseBorderSideWidth(value.width, builder),
+    "border-inline-color",
+    parseColor(value.color, builder),
   );
   builder.addDescriptor(
-    "border-right-width",
+    "border-inline-width",
     parseBorderSideWidth(value.width, builder),
   );
+  builder.addDescriptor(
+    "border-inline-style",
+    parseBorderStyle(value.style, builder),
+  );
 }
 
 function parseBorderInlineStart(
   { value }: DeclarationType<"border-inline-start">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor("border-left-color", parseColor(value.color, builder));
   builder.addDescriptor(
-    "border-left-width",
+    "border-inline-start-color",
+    parseColor(value.color, builder),
+  );
+  builder.addDescriptor(
+    "border-inline-start-width",
     parseBorderSideWidth(value.width, builder),
   );
+  builder.addDescriptor(
+    "border-inline-start-style",
+    parseBorderStyle(value.style, builder),
+  );
 }
 
 function parseBorderInlineEnd(
   { value }: DeclarationType<"border-inline-end">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor("border-right-color", parseColor(value.color, builder));
   builder.addDescriptor(
-    "border-right-width",
+    "border-inline-end-color",
+    parseColor(value.color, builder),
+  );
+  builder.addDescriptor(
+    "border-inline-end-width",
     parseBorderSideWidth(value.width, builder),
   );
+  builder.addDescriptor(
+    "border-inline-end-style",
+    parseBorderStyle(value.style, builder),
+  );
 }
 
 export function parseBorderInlineWidth(
@@ -518,13 +536,9 @@ export function parseBorderInlineWidth(
   builder: StylesheetBuilder,
 ) {
   builder.addDescriptor(
-    "border-left-width",
+    "border-inline-width",
     parseBorderSideWidth(declaration.value.start, builder),
   );
-  builder.addDescriptor(
-    "border-right-width",
-    parseBorderSideWidth(declaration.value.end, builder),
-  );
 }
 
 export function parseBorderInlineStyle(
@@ -537,16 +551,23 @@ export function parseBorderInlineStyle(
 ) {
   if (typeof declaration.value === "string") {
     builder.addDescriptor(
-      "border-style",
+      declaration.property,
       parseBorderStyle(declaration.value, builder),
     );
   } else if (declaration.value.start === declaration.value.end) {
     builder.addDescriptor(
-      "border-style",
+      declaration.property,
       parseBorderStyle(declaration.value.start, builder),
     );
   } else {
-    builder.addWarning("property", "border-inline-style");
+    builder.addDescriptor(
+      "border-inline-start-style",
+      parseBorderStyle(declaration.value.start, builder),
+    );
+    builder.addDescriptor(
+      "border-inline-end-style",
+      parseBorderStyle(declaration.value.end, builder),
+    );
   }
 }
 
@@ -955,6 +976,12 @@ export function parseCustomDeclaration(
       parseUnparsed(declaration.value.value, builder, property) ===
         "borderless",
     );
+  } else if (property === "object-fit") {
+    // https://github.com/parcel-bundler/lightningcss/issues/1046
+    parseObjectFit(declaration.value, builder);
+  } else if (property === "object-position") {
+    // https://github.com/parcel-bundler/lightningcss/issues/1047
+    parseObjectPosition(declaration.value, builder);
   } else if (
     validProperties.has(property) ||
     property.startsWith("--") ||
@@ -1119,43 +1146,53 @@ export function parseUnparsed(
     }
     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":
-          return unparsedFunction(tokenOrValue, builder, property, allowAuto);
         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 "getPixelSizeForLayoutSize":
         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":
+        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":
@@ -1188,7 +1225,7 @@ export function parseUnparsed(
             return;
           }
 
-          if (value === "inherit") {
+          if (value === "inherit" || value === "initial") {
             builder.addWarning("value", value);
             return;
           } else if (value === "currentcolor") {
@@ -1993,12 +2030,9 @@ export function parseOverflow(
 }
 
 export function parseBorderStyleDeclaration(
-  declaration: DeclarationType<
-    | "border-style"
-    | "border-left-style"
-    | "border-right-style"
-    | "border-top-style"
-    | "border-bottom-style"
+  declaration: Extract<
+    DeclarationType<Declaration["property"]>,
+    { value: LineStyle | BorderStyle }
   >,
   builder: StylesheetBuilder,
 ) {
@@ -2036,27 +2070,29 @@ export function parseBorderBlockWidth(
   declaration: DeclarationType<"border-block-width">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor(
-    "border-top-width",
-    parseBorderSideWidth(declaration.value.start, builder),
-  );
-  builder.addDescriptor(
-    "border-bottom-width",
-    parseBorderSideWidth(declaration.value.end, builder),
-  );
+  const start = parseBorderSideWidth(declaration.value.start, builder);
+  const end = parseBorderSideWidth(declaration.value.end, builder);
+
+  if (start === end) {
+    builder.addDescriptor("border-block-width", start);
+  } else {
+    builder.addDescriptor("border-block-start-width", start);
+    builder.addDescriptor("border-block-end-width", end);
+  }
 }
 
 function parseBorderBlockStyle(
   declaration: DeclarationType<"border-block-style">,
   builder: StylesheetBuilder,
 ) {
-  if (declaration.value.start === declaration.value.end) {
-    builder.addDescriptor(
-      "border-style",
-      parseBorderStyle(declaration.value.start, builder),
-    );
+  const start = parseBorderStyle(declaration.value.start, builder);
+  const end = parseBorderStyle(declaration.value.end, builder);
+
+  if (start == end) {
+    builder.addDescriptor("border-block-style", start);
   } else {
-    builder.addWarning("property", "border-block-style");
+    builder.addDescriptor("border-block-start-style", start);
+    builder.addDescriptor("border-block-end-style", end);
   }
 }
 
@@ -2073,21 +2109,10 @@ export function parseBorderSideWidthDeclaration(
   >,
   builder: StylesheetBuilder,
 ) {
-  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);
-  }
+  builder.addDescriptor(
+    declaration.property,
+    parseBorderSideWidth(declaration.value, builder),
+  );
 }
 
 export function parseBorderSideWidth(
@@ -2536,9 +2561,7 @@ export function parseCalcArguments(
 ) {
   const parsed: StyleDescriptor[] = [];
 
-  let mode: "number" | "percentage" | undefined;
-
-  for (const [currentIndex, arg] of args.entries()) {
+  for (const arg of args) {
     switch (arg.type) {
       case "env": {
         parsed.push(parseEnv(arg.value, builder));
@@ -2558,11 +2581,9 @@ export function parseCalcArguments(
       }
       case "length": {
         const value = parseLength(arg.value, builder);
-
         if (value !== undefined) {
           parsed.push(value);
         }
-
         break;
       }
       case "color":
@@ -2585,49 +2606,19 @@ export function parseCalcArguments(
             }
             break;
           case "percentage":
-            mode ??= "percentage";
-            if (mode !== "percentage") return;
-            parsed.push(`${arg.value.value * 100}%`);
+            parsed.push(`${round(arg.value.value * 100)}%`);
             break;
           case "number": {
-            mode ??= "number";
-            if (mode !== "number") return;
-            parsed.push(arg.value.value);
+            parsed.push(round(arg.value.value));
             break;
           }
           case "parenthesis-block": {
-            /**
-             * If we have a parenthesis block, we just treat it as a nested calc function
-             * Because there could be multiple parenthesis blocks, this is recursive
-             */
-            let closeParenthesisIndex = -1;
-            for (let index = args.length - 1; index > 0; index--) {
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              const value = args[index]!;
-              if (
-                value.type === "token" &&
-                value.value.type === "close-parenthesis"
-              ) {
-                closeParenthesisIndex = index;
-                break;
-              }
-            }
-
-            if (closeParenthesisIndex === -1) {
-              return;
-            }
-
-            const innerCalcArgs = args
-              // Extract the inner calcArgs including the parenthesis. This mutates args
-              .splice(currentIndex, closeParenthesisIndex - currentIndex + 1)
-              // Then drop the surrounding parenthesis
-              .slice(1, -1);
-
-            parsed.push(parseCalcFn("calc", innerCalcArgs, builder, property));
-
+            parsed.push("(");
             break;
           }
           case "close-parenthesis":
+            parsed.push(")");
+            break;
           case "string":
           case "function":
           case "ident":
@@ -2809,7 +2800,12 @@ export function addTransitionValue(
         declaration.property,
         declaration.value
           .map((v) => v.property)
-          .filter((v) => v in parsers || v === "all" || v === "none")
+          .filter(
+            (v) =>
+              (v in parsers && !["visibility"].includes(v)) ||
+              v === "all" ||
+              v === "none",
+          )
           .map((v) => toRNProperty(v)),
       );
       return;
@@ -3008,6 +3004,46 @@ function parseGradientItem(
   }
 }
 
+function parseObjectFit(
+  declaration: CustomProperty,
+  builder: StylesheetBuilder,
+) {
+  builder.addMapping({
+    "object-fit": "contentFit",
+  });
+  builder.addDescriptor(
+    "object-fit",
+    parseUnparsed(declaration.value, builder, "object-fit"),
+  );
+}
+
+function parseObjectPosition(
+  declaration: CustomProperty,
+  builder: StylesheetBuilder,
+) {
+  builder.addMapping({
+    "object-position": "contentPosition",
+  });
+  builder.addDescriptor("object-position", [
+    {},
+    "join",
+    [parseUnparsed(declaration.value, builder, "object-position"), " "],
+  ]);
+}
+
+function parseVisibility(
+  declaration: DeclarationType<"visibility">,
+  builder: StylesheetBuilder,
+) {
+  if (declaration.value === "visible") {
+    builder.addDescriptor("opacity", 1);
+  } else if (declaration.value === "hidden") {
+    builder.addDescriptor("opacity", 0);
+  } else {
+    builder.addWarning("value", declaration.value);
+  }
+}
+
 function parseFilter(
   declaration: DeclarationType<"filter">,
   builder: StylesheetBuilder,

package/src/compiler/inheritance.test.ts

@@ -12,7 +12,7 @@ test("nested classes", () => {
         "my-class",
         [
           {
-            c: ["my-class"],
+            c: ["g:my-class"],
             s: [0],
           },
         ],
@@ -21,7 +21,7 @@ test("nested classes", () => {
         "test",
         [
           {
-            cq: [{ n: "my-class" }],
+            cq: [{ n: "g:my-class" }],
             d: [{ color: "#f00" }],
             v: [["__rn-css-color", "#f00"]],
             s: [1, 2],
@@ -44,7 +44,7 @@ test("multiple tiers classes", () => {
         "one",
         [
           {
-            c: ["one"],
+            c: ["g:one"],
             s: [0],
           },
         ],
@@ -53,7 +53,7 @@ test("multiple tiers classes", () => {
         "two",
         [
           {
-            c: ["two"],
+            c: ["g:two"],
             s: [0],
           },
         ],
@@ -62,7 +62,7 @@ test("multiple tiers classes", () => {
         "test",
         [
           {
-            cq: [{ n: "one" }, { n: "two" }],
+            cq: [{ n: "g:one" }, { n: "g:two" }],
             d: [{ color: "#f00" }],
             v: [["__rn-css-color", "#f00"]],
             s: [1, 3],
@@ -85,7 +85,7 @@ test("tiers with multiple classes", () => {
         "one",
         [
           {
-            c: ["one"],
+            c: ["g:one"],
             s: [0],
           },
         ],
@@ -94,7 +94,7 @@ test("tiers with multiple classes", () => {
         "three",
         [
           {
-            c: ["three.two"],
+            c: ["g:three.two"],
             s: [0],
             aq: [["a", "className", "*=", "two"]],
           },
@@ -105,9 +105,9 @@ test("tiers with multiple classes", () => {
         [
           {
             cq: [
-              { n: "one" },
+              { n: "g:one" },
               {
-                n: "three.two",
+                n: "g:three.two",
               },
             ],
             d: [{ color: "#f00" }],

package/src/compiler/pseudo-elements.ts

@@ -0,0 +1,54 @@
+import { isStyleFunction } from "../runtime/utils";
+import type { StyleDeclaration, StyleRule } from "./compiler.types";
+
+export function modifyRuleForSelection(rule: StyleRule): StyleRule | undefined {
+  if (!rule.d) {
+    return;
+  }
+
+  rule.d = rule.d.flatMap((declaration): StyleDeclaration[] => {
+    return modifyStyleDeclaration(declaration, "color", "selectionColor");
+  });
+
+  return rule;
+}
+
+export function modifyRuleForPlaceholder(
+  rule: StyleRule,
+): StyleRule | undefined {
+  if (!rule.d) {
+    return;
+  }
+
+  rule.d = rule.d.flatMap((declaration): StyleDeclaration[] => {
+    return modifyStyleDeclaration(declaration, "color", "placeholderTextColor");
+  });
+
+  return rule;
+}
+
+function modifyStyleDeclaration(
+  declaration: StyleDeclaration,
+  from: string,
+  to: string,
+): StyleDeclaration[] {
+  if (Array.isArray(declaration)) {
+    if (isStyleFunction(declaration) && declaration[2] === from) {
+      declaration = [...declaration] as StyleDeclaration;
+      declaration[2] = [to];
+      return [declaration];
+    } else if (declaration[1] === from) {
+      declaration = [...declaration] as StyleDeclaration;
+      declaration[1] = [to];
+      return [declaration];
+    }
+  } else if (typeof declaration === "object") {
+    const { color: selectionColor, ...rest } = declaration;
+
+    if (selectionColor) {
+      return [rest, [selectionColor, [to]]] as StyleDeclaration[];
+    }
+  }
+
+  return [declaration];
+}