feat: inline css variables

Author: marklawlor

src/__tests__/compiler/compiler.test.tsx

@@ -236,11 +236,16 @@ test.skip("animations", () => {
 });
 
 test("breaks apart comma separated variables", () => {
-  const compiled = compile(`
+  const compiled = compile(
+    `
     :root { 
       --test: blue, green;
     }
-  `);
+  `,
+    {
+      inlineVariables: false,
+    },
+  );
 
   expect(compiled.stylesheet()).toStrictEqual({
     vr: [["test", [[["blue", "green"]]]]],

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/transform.test.tsx

@@ -56,7 +56,7 @@ describe("scale", () => {
     ).getByTestId(testID);
 
     expect(component.props.style).toStrictEqual({
-      transform: [{ scale: "2%" }],
+      transform: [{ scaleX: "2%" }, { scaleY: "2%" }],
     });
   });
 

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; }
@@ -166,13 +166,13 @@ test("can apply and set new variables", () => {
   );
 
   expect(screen.getByTestId(testIDs.one).props.style).toStrictEqual({
-    color: "red",
+    color: "#f00",
   });
   expect(screen.getByTestId(testIDs.two).props.style).toStrictEqual({
-    color: "red",
+    color: "#f00",
   });
   expect(screen.getByTestId(testIDs.three).props.style).toStrictEqual({
-    color: "green",
+    color: "#008000",
   });
 });
 
@@ -199,7 +199,7 @@ test("variables will be inherited", () => {
   );
 
   expect(screen.getByTestId(testIDs.three).props.style).toStrictEqual({
-    color: "green",
+    color: "#008000",
   });
 });
 
@@ -212,7 +212,7 @@ test("useUnsafeVariable", () => {
   render(<View testID={testID} className="test" />);
   const component = screen.getByTestId(testID);
 
-  expect(component.props.style).toStrictEqual({ color: "red" });
+  expect(component.props.style).toStrictEqual({ color: "#f00" });
 });
 
 test("ratio values", () => {
@@ -224,7 +224,7 @@ test("ratio values", () => {
   render(<View testID={testID} className="test" />);
   const component = screen.getByTestId(testID);
 
-  expect(component.props.style).toStrictEqual({ aspectRatio: "16 / 9" });
+  expect(component.props.style).toStrictEqual({ aspectRatio: "16/9" });
 });
 
 test("VariableContextProvider", () => {

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

@@ -60,7 +60,12 @@ describe("Interactivity - Caret Color", () => {
   });
   test("caret-current", async () => {
     expect(await renderCurrentTest()).toStrictEqual({
-      props: { style: {} },
+      props: {
+        cursorColor: {
+          semantic: ["label", "labelColor"],
+        },
+        style: {},
+      },
     });
   });
   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,22 +69,59 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
    *
    * Due to the above issue, we run lightningcss twice
    */
+
+  const vars = new Map<string, UniqueVarInfo>();
+
+  const firstPassVisitor: Visitor<CustomAtRules> = {};
+
+  if (options.inlineRem !== false) {
+    firstPassVisitor.Length = (length) => {
+      if (length.unit !== "rem" || options.inlineRem === false) {
+        return length;
+      }
+
+      return {
+        unit: "px",
+        value: round(length.value * (options.inlineRem ?? 14)),
+      };
+    };
+  }
+
+  if (options.inlineVariables !== false) {
+    const exclusionList: string[] = options.inlineVariables?.exclude ?? [];
+
+    firstPassVisitor.Declaration = (decl) => {
+      if (
+        decl.property === "custom" &&
+        decl.value.name.startsWith("--") &&
+        !exclusionList.includes(decl.value.name)
+      ) {
+        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);
+      }
+    };
+    firstPassVisitor.StyleSheetExit = (sheet) => {
+      for (const [name, info] of vars) {
+        if (info.count !== 1) {
+          vars.delete(name);
+        }
+      }
+      return inlineVariables(sheet, vars);
+    };
+  }
+
   const { code: firstPass } = lightningcss({
     code: typeof code === "string" ? new TextEncoder().encode(code) : code,
     include: Features.DoublePositionGradients | Features.ColorFunction,
     exclude: Features.VendorPrefixes,
-    visitor: {
-      Length(length) {
-        if (length.unit !== "rem" || options.inlineRem === false) {
-          return length;
-        }
-
-        return {
-          unit: "px",
-          value: round(length.value * (options.inlineRem ?? 14)),
-        };
-      },
-    },
+    visitor: firstPassVisitor,
     filename: options.filename ?? "style.css",
     projectRoot: options.projectRoot ?? process.cwd(),
   });

src/compiler/compiler.types.ts

@@ -1,13 +1,17 @@
 /* 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";
 
 export interface CompilerOptions {
   filename?: string;
   projectRoot?: string;
   inlineRem?: number | false;
+  inlineVariables?: false | InlineVariableOptions;
   selectorPrefix?: string;
   stylesheetOrder?: number;
   features?: FeatureFlagRecord;
@@ -16,6 +20,10 @@ export interface CompilerOptions {
   colorPrecision?: number;
 }
 
+export interface InlineVariableOptions {
+  exclude?: `--${string}`[];
+}
+
 /**
  * A `react-native-css` StyleSheet
  */
@@ -151,6 +159,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(