react-native-css 3.0.0-nightly.61014be → 3.0.0-nightly.67b5d08

package/src/compiler/inheritance.test.ts

@@ -6,13 +6,13 @@ test("nested classes", () => {
   color: red;
 }`);
 
-  expect(compiled).toStrictEqual({
+  expect(compiled.stylesheet()).toStrictEqual({
     s: [
       [
         "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],
@@ -38,13 +38,13 @@ test("multiple tiers classes", () => {
   color: red;
 }`);
 
-  expect(compiled).toStrictEqual({
+  expect(compiled.stylesheet()).toStrictEqual({
     s: [
       [
         "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],
@@ -79,13 +79,13 @@ test("tiers with multiple classes", () => {
   color: red;
 }`);
 
-  expect(compiled).toStrictEqual({
+  expect(compiled.stylesheet()).toStrictEqual({
     s: [
       [
         "one",
         [
           {
-            c: ["one"],
+            c: ["g:one"],
             s: [0],
           },
         ],
@@ -94,8 +94,9 @@ test("tiers with multiple classes", () => {
         "three",
         [
           {
-            c: ["three"],
+            c: ["g:three.two"],
             s: [0],
+            aq: [["a", "className", "*=", "two"]],
           },
         ],
       ],
@@ -104,10 +105,9 @@ test("tiers with multiple classes", () => {
         [
           {
             cq: [
-              { n: "one" },
+              { n: "g:one" },
               {
-                a: [["a", "className", "*=", "two"]],
-                n: "three",
+                n: "g:three.two",
               },
             ],
             d: [{ color: "#f00" }],

package/src/compiler/keyframes.ts

@@ -30,7 +30,7 @@ export function parseEasingFunction(
       case "cubic-bezier":
         return [
           {},
-          "cubic-bezier",
+          "cubicBezier",
           [value.x1, value.y1, value.x2, value.y2],
         ] as const;
       case "steps":

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];
+}