feat: currentcolor (#29)

Author: marklawlor

src/compiler/__tests__/@prop.test.tsx

@@ -21,6 +21,7 @@ test("@prop single", () => {
                 myBackgroundColor: "#00f",
               },
             ],
+            v: [["__rn-css-color", "#f00"]],
             s: [1, 1],
           },
         ],
@@ -51,6 +52,7 @@ test("@prop single, nested value", () => {
               ["#00f", ["myBackgroundColor", "nested"]],
             ],
             s: [1, 1],
+            v: [["__rn-css-color", "#f00"]],
           },
         ],
       ],
@@ -79,6 +81,7 @@ test("@prop single, top level", () => {
               },
               ["#00f", ["^", "myBackgroundColor"]],
             ],
+            v: [["__rn-css-color", "#f00"]],
             s: [1, 1],
           },
         ],
@@ -108,6 +111,7 @@ test("@prop single, top level, nested", () => {
               },
               ["#00f", ["^", "myBackgroundColor", "test"]],
             ],
+            v: [["__rn-css-color", "#f00"]],
             s: [1, 1],
           },
         ],
@@ -138,6 +142,7 @@ test("@prop single, top level, nested", () => {
               ["#00f", ["^", "myBackgroundColor", "test"]],
             ],
             s: [1, 1],
+            v: [["__rn-css-color", "#f00"]],
           },
         ],
       ],
@@ -169,6 +174,7 @@ test("@prop multiple", () => {
                 myColor: "#f00",
               },
             ],
+            v: [["__rn-css-color", "#f00"]],
             s: [1, 1],
           },
         ],

src/compiler/__tests__/compiler.test.tsx

@@ -18,6 +18,7 @@ test("hello world", () => {
               },
             ],
             s: [1, 1],
+            v: [["__rn-css-color", "#f00"]],
           },
         ],
       ],
@@ -128,6 +129,7 @@ test("multiple rules with same selector", () => {
               },
             ],
             s: [2, 1],
+            v: [["__rn-css-color", "#f00"]],
           },
           {
             d: [
@@ -139,6 +141,7 @@ test("multiple rules with same selector", () => {
               h: 1,
             },
             s: [1, 2],
+            v: [["__rn-css-color", "#008000"]],
           },
         ],
       ],

src/compiler/attributes.test.ts

@@ -19,6 +19,7 @@ test("multiple classes", () => {
               },
             ],
             s: [1, 2],
+            v: [["__rn-css-color", "#f00"]],
           },
         ],
       ],

src/compiler/compiler.types.ts

@@ -117,16 +117,31 @@ export type StyleFunction =
       Record<never, never>,
       string, // string
     ]
+  | readonly [
+      Record<never, never>,
+      string, // string
+    ]
   | [
       Record<never, never>,
       string, // string
       StyleDescriptor, // arguments
     ]
+  | readonly [
+      Record<never, never>,
+      string, // string
+      StyleDescriptor, // arguments
+    ]
   | [
       Record<never, never>,
       string, // string
       StyleDescriptor, // arguments
       1, // Should process after styles have been calculated
+    ]
+  | readonly [
+      Record<never, never>,
+      string, // string
+      StyleDescriptor, // arguments
+      1, // Should process after styles have been calculated
     ];
 
 /******************************    Variables    *******************************/

src/compiler/declarations.ts

@@ -130,7 +130,7 @@ const parsers: {
   "bottom": parseSizeDeclaration,
   "box-shadow": parseBoxShadow,
   "caret-color": parseColorOrAuto,
-  "color": parseColorDeclaration,
+  "color": parseFontColorDeclaration,
   "column-gap": parseGap,
   "container": parseContainer,
   "container-name": parseContainerName,
@@ -836,6 +836,10 @@ export function parseDeclarationUnparsed(
     if (property === "font-size") {
       builder.addDescriptor("--__rn-css-em", value);
     }
+
+    if (property === "color") {
+      builder.addDescriptor("--__rn-css-current-color", value);
+    }
   }
 }
 
@@ -940,6 +944,8 @@ export function parseUnparsed(
       return true;
     } else if (tokenOrValue === "false") {
       return false;
+    } else if (tokenOrValue === "currentcolor") {
+      return [{}, "var", "__rn-css-current-color"] as const;
     } else {
       return tokenOrValue;
     }
@@ -1033,6 +1039,8 @@ export function parseUnparsed(
           if (value === "inherit") {
             builder.addWarning("value", value);
             return;
+          } else if (value === "currentcolor") {
+            return [{}, "var", "__rn-css-current-color"] as const;
           }
 
           if (value === "true") {
@@ -1324,11 +1332,26 @@ export function parseColorOrAuto(
   }
 }
 
+export function parseFontColorDeclaration(
+  declaration: Extract<Declaration, { value: CssColor }>,
+  builder: StylesheetBuilder,
+) {
+  parseColorDeclaration(declaration, builder);
+
+  builder.addDescriptor(
+    "--__rn-css-color",
+    parseColor(declaration.value, builder),
+  );
+}
+
 export function parseColorDeclaration(
-  declaration: { value: CssColor },
+  declaration: Extract<Declaration, { value: CssColor }>,
   builder: StylesheetBuilder,
 ) {
-  return parseColor(declaration.value, builder);
+  builder.addDescriptor(
+    declaration.property,
+    parseColor(declaration.value, builder),
+  );
 }
 
 export function parseColor(cssColor: CssColor, builder: StylesheetBuilder) {
@@ -1345,8 +1368,7 @@ export function parseColor(cssColor: CssColor, builder: StylesheetBuilder) {
 
   switch (cssColor.type) {
     case "currentcolor":
-      builder.addWarning("value", cssColor.type);
-      return;
+      return [{}, "var", "__rn-css-current-color"] as const;
     case "light-dark":
       // TODO: Handle light-dark colors
       return;

src/compiler/inheritance.test.ts

@@ -23,6 +23,7 @@ test("nested classes", () => {
           {
             cq: [{ n: "my-class" }],
             d: [{ color: "#f00" }],
+            v: [["__rn-css-color", "#f00"]],
             s: [1, 2],
           },
         ],
@@ -63,6 +64,7 @@ test("multiple tiers classes", () => {
           {
             cq: [{ n: "one" }, { n: "two" }],
             d: [{ color: "#f00" }],
+            v: [["__rn-css-color", "#f00"]],
             s: [1, 3],
           },
         ],
@@ -109,6 +111,7 @@ test("tiers with multiple classes", () => {
               },
             ],
             d: [{ color: "#f00" }],
+            v: [["__rn-css-color", "#f00"]],
             s: [1, 4],
           },
         ],

src/runtime/native/__tests__/grouping.test.tsx

@@ -37,7 +37,7 @@ test("groups", () => {
 test("group - active", () => {
   registerCSS(
     `.group\\/item:active .my-class {
-      color: red;
+      background-color: red;
     }`,
   );
 
@@ -54,7 +54,7 @@ test("group - active", () => {
 
   fireEvent(parent, "pressIn");
 
-  expect(child.props.style).toStrictEqual({ color: "#f00" });
+  expect(child.props.style).toStrictEqual({ backgroundColor: "#f00" });
 });
 
 test.skip("group - active (animated)", () => {

src/runtime/native/__tests__/media-query.test.tsx

@@ -149,7 +149,7 @@ test("not all", () => {
   // It is the same as max-width: 639px
   registerCSS(`
 @media not all and (min-width: 640px) {
-  .my-class { color: red; }
+  .my-class { background-color: red; }
 }`);
   // Make larger than 640
   act(() => {
@@ -173,7 +173,7 @@ test("not all", () => {
   });
 
   expect(component.props.style).toStrictEqual({
-    color: "#f00",
+    backgroundColor: "#f00",
   });
 });