feat: inline css variables

Author: marklawlor

src/__tests__/native/text-shadow.test.ios.tsx

@@ -5,13 +5,18 @@ import { registerCSS, testID } from "react-native-css/jest";
 describe("text-shadow", () => {
   test("<offsetX> <offsetY>", () => {
     registerCSS(
-      `.my-class { --my-var: 10px 10px; text-shadow: var(--my-var); }`,
+      `.my-class { 
+        --my-var: 10px 10px; 
+        text-shadow: var(--my-var); 
+      }`,
     );
 
     render(<Text testID={testID} className="my-class" />);
 
     expect(screen.getByTestId(testID).props.style).toStrictEqual({
-      textShadowColor: "black",
+      textShadowColor: {
+        semantic: ["label", "labelColor"],
+      },
       textShadowOffset: {
         height: 10,
         width: 10,
@@ -28,7 +33,7 @@ describe("text-shadow", () => {
     render(<Text testID={testID} className="my-class" />);
 
     expect(screen.getByTestId(testID).props.style).toStrictEqual({
-      textShadowColor: "red",
+      textShadowColor: "#f00",
       textShadowOffset: {
         height: 10,
         width: 10,
@@ -45,7 +50,7 @@ describe("text-shadow", () => {
     render(<Text testID={testID} className="my-class" />);
 
     expect(screen.getByTestId(testID).props.style).toStrictEqual({
-      textShadowColor: "red",
+      textShadowColor: "#f00",
       textShadowOffset: {
         height: 10,
         width: 10,

src/__tests__/native/variables.test.tsx

@@ -20,7 +20,7 @@ test("inline variable", () => {
   });
 });
 
-test("combined inline variable", () => {
+test("combined inline variables", () => {
   registerCSS(`
     .my-class-1 { width: var(--my-var); }
     .my-class-2 { --my-var: 10px; }

src/__tests__/vendor/tailwind/interactivity.test.tsx

@@ -60,7 +60,11 @@ describe("Interactivity - Caret Color", () => {
   });
   test("caret-current", async () => {
     expect(await renderCurrentTest()).toStrictEqual({
-      props: { style: {} },
+      props: {
+        cursorColor: {
+          semantic: ["label", "labelColor"],
+        },
+      },
     });
   });
   test("caret-white", async () => {

src/__tests__/vendor/tailwind/typography.test.tsx

@@ -313,7 +313,11 @@ describe("Typography - Text Color", () => {
   test("text-current", async () => {
     expect(await renderCurrentTest()).toStrictEqual({
       props: {
-        style: {},
+        style: {
+          color: {
+            semantic: ["label", "labelColor"],
+          },
+        },
       },
     });
   });

src/compiler/compiler.ts

@@ -14,9 +14,14 @@ import {
 } from "lightningcss";
 
 import { maybeMutateReactNativeOptions, parsePropAtRule } from "./atRules";
-import type { CompilerOptions, ContainerQuery } from "./compiler.types";
+import type {
+  CompilerOptions,
+  ContainerQuery,
+  UniqueVarInfo,
+} from "./compiler.types";
 import { parseContainerCondition } from "./container-query";
 import { parseDeclaration, round } from "./declarations";
+import { inlineVariables } from "./inline-variables";
 import { extractKeyFrames } from "./keyframes";
 import { parseMediaQuery } from "./media-query";
 import { StylesheetBuilder } from "./stylesheet";
@@ -64,6 +69,9 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
    *
    * Due to the above issue, we run lightningcss twice
    */
+
+  const vars = new Map<string, UniqueVarInfo>();
+
   const { code: firstPass } = lightningcss({
     code: typeof code === "string" ? new TextEncoder().encode(code) : code,
     include: Features.DoublePositionGradients | Features.ColorFunction,
@@ -79,6 +87,27 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
           value: round(length.value * (options.inlineRem ?? 14)),
         };
       },
+      Declaration(decl) {
+        if (decl.property === "custom" && decl.value.name.startsWith("--")) {
+          const entry = vars.get(decl.value.name) ?? {
+            count: 0,
+            value: [
+              ...decl.value.value,
+              { type: "token", value: { type: "white-space", value: " " } },
+            ],
+          };
+          entry.count++;
+          vars.set(decl.value.name, entry);
+        }
+      },
+      StyleSheetExit(sheet) {
+        for (const [name, info] of vars) {
+          if (info.count !== 1) {
+            vars.delete(name);
+          }
+        }
+        return inlineVariables(sheet, vars);
+      },
     },
     filename: options.filename ?? "style.css",
     projectRoot: options.projectRoot ?? process.cwd(),

src/compiler/compiler.types.ts

@@ -1,6 +1,9 @@
 /* eslint-disable */
 import type { Debugger } from "debug";
-import type { MediaFeatureNameFor_MediaFeatureId } from "lightningcss";
+import type {
+  MediaFeatureNameFor_MediaFeatureId,
+  TokenOrValue,
+} from "lightningcss";
 
 import { VAR_SYMBOL } from "../runtime/native/reactivity";
 
@@ -151,6 +154,8 @@ export type InlineVariable = {
   [key: string]: unknown | undefined;
 };
 
+export type UniqueVarInfo = { count: number; value: TokenOrValue[] };
+
 /******************************   Animations  ******************************/
 
 export type Animation = [string, AnimationKeyframes[]];

src/compiler/declarations.ts

@@ -35,6 +35,7 @@ import type {
   Translate,
   UnresolvedColor,
 } from "lightningcss";
+import { isStyleFunction } from "react-native-css/runtime/utils";
 
 import type {
   StyleDescriptor,
@@ -966,7 +967,13 @@ export function parseUnparsedDeclaration(
     }
 
     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);
+      }
     }
   }
 }
@@ -1125,7 +1132,7 @@ export function parseUnparsed(
     } else if (tokenOrValue === "false") {
       return false;
     } else if (tokenOrValue === "currentcolor") {
-      return [{}, "var", "__rn-css-current-color"] as const;
+      return [{}, "var", "__rn-css-color"] as const;
     } else {
       return tokenOrValue;
     }
@@ -1255,7 +1262,7 @@ export function parseUnparsed(
             builder.addWarning("value", value);
             return;
           } else if (value === "currentcolor") {
-            return [{}, "var", "__rn-css-current-color"] as const;
+            return [{}, "var", "__rn-css-color"] as const;
           }
 
           if (value === "true") {
@@ -1579,10 +1586,15 @@ export function parseFontColorDeclaration(
 ) {
   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(
@@ -1609,7 +1621,7 @@ export function parseColor(cssColor: CssColor, builder: StylesheetBuilder) {
 
   switch (cssColor.type) {
     case "currentcolor":
-      return [{}, "var", "__rn-css-current-color"] as const;
+      return [{}, "var", "__rn-css-color"] as const;
     case "light-dark": {
       const extraRule: StyleRule = {
         s: [],
@@ -1982,11 +1994,11 @@ export function parseTextShadow(
     parseColor(textShadow.color, builder),
   );
   builder.addDescriptor(
-    "textShadowOffset.width",
+    "*.textShadowOffset.width",
     parseLength(textShadow.xOffset, builder),
   );
   builder.addDescriptor(
-    "textShadowOffset.height",
+    "*.textShadowOffset.height",
     parseLength(textShadow.yOffset, builder),
   );
   builder.addDescriptor(

src/compiler/inline-variables.ts

@@ -0,0 +1,104 @@
+import type { Declaration, DeclarationBlock, StyleSheet } from "lightningcss";
+
+import type { UniqueVarInfo } from "./compiler.types";
+
+export function inlineVariables(
+  stylesheet: StyleSheet,
+  vars: Map<string, UniqueVarInfo>,
+) {
+  stylesheet.rules = stylesheet.rules.map(function checkRule(rule) {
+    switch (rule.type) {
+      case "custom":
+      case "font-face":
+      case "font-palette-values":
+      case "font-feature-values":
+      case "namespace":
+      case "layer-statement":
+      case "property":
+      case "view-transition":
+      case "ignored":
+      case "unknown":
+      case "import":
+      case "page":
+      case "counter-style":
+      case "moz-document":
+      case "nesting":
+      case "viewport":
+      case "custom-media":
+      case "scope":
+      case "starting-style":
+        return rule;
+
+      case "media":
+        rule.value.rules = rule.value.rules.map((rule) => checkRule(rule));
+        return rule;
+      case "keyframes":
+        return rule;
+      case "style":
+        rule.value.declarations = replaceDeclarationBlock(
+          rule.value.declarations,
+          vars,
+        );
+        return rule;
+      case "nested-declarations":
+      case "supports":
+      case "layer-block":
+      case "container":
+        return rule;
+    }
+  });
+
+  return stylesheet;
+}
+
+function replaceDeclarationBlock(
+  block: DeclarationBlock | undefined,
+  vars: Map<string, UniqueVarInfo>,
+) {
+  if (!block) return;
+
+  block.declarations = block.declarations
+    ?.map((decl) => {
+      return replaceDeclaration(decl, vars);
+    })
+    .filter((d) => !!d);
+
+  block.importantDeclarations = block.importantDeclarations
+    ?.map((decl) => {
+      return replaceDeclaration(decl, vars);
+    })
+    .filter((d) => !!d);
+
+  return block;
+}
+
+function replaceDeclaration(
+  declaration: Declaration,
+  vars: Map<string, UniqueVarInfo>,
+) {
+  if (
+    declaration.property !== "unparsed" &&
+    declaration.property !== "custom"
+  ) {
+    return declaration;
+  }
+
+  if (declaration.property === "custom" && vars.has(declaration.value.name)) {
+    return;
+  }
+
+  declaration.value.value = declaration.value.value.flatMap((part) => {
+    if (part.type === "var") {
+      const varInfo = vars.get(part.value.name.ident);
+
+      if (!varInfo) {
+        return part;
+      }
+
+      return varInfo.value;
+    }
+    return part;
+  });
+
+  return declaration;
+}

src/compiler/stylesheet.ts

@@ -391,6 +391,10 @@ export class StylesheetBuilder {
     let propPath: string | string[] | undefined =
       this.mapping[rawProperty] ?? this.mapping[property] ?? this.mapping["*"];
 
+    if (typeof property === "string" && property.includes(".")) {
+      propPath = property.split(".");
+    }
+
     if (Array.isArray(propPath)) {
       const [first, second] = propPath;
 

src/style-collection/root.ts

@@ -1,3 +1,5 @@
+import { Platform, PlatformColor } from "react-native";
+
 import type { StyleDescriptor, VariableValue } from "react-native-css/compiler";
 
 import { testMediaQuery } from "../runtime/native/conditions/media-query";
@@ -35,3 +37,12 @@ export const rootVariables = rootVariableFamily();
 export const universalVariables = rootVariableFamily();
 
 rootVariables("__rn-css-rem").set([[14]]);
+// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+rootVariables("__rn-css-color").set([
+  [
+    Platform.OS === "ios"
+      ? PlatformColor("label", "labelColor")
+      : PlatformColor("?attr/textColorPrimary", "SystemBaseHighColor"),
+  ],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+] as any);