feat: inline css variables

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

@@ -61,15 +61,13 @@ test("@prop target unparsed", () => {
         "my-class",
         [
           {
-            d: [[[{}, "var", "color-black", 1], ["test"], 1]],
-            dv: 1,
-            s: [2, 1],
-            v: [["__rn-css-current-color", [{}, "var", "color-black", 1]]],
+            d: [["#000", ["test"]]],
+            s: [1, 1],
+            v: [["__rn-css-color", "#000"]],
           },
         ],
       ],
     ],
-    vr: [["color-black", [["#000"]]]],
   });
 
   render(<View testID={testID} className="my-class" />);

src/__tests__/compiler/compiler.test.tsx

@@ -27,12 +27,17 @@ test("hello world", () => {
 });
 
 test("reads global CSS variables", () => {
-  const compiled = compile(`
+  const compiled = compile(
+    `
 @layer theme {
   :root, :host {
     --color-red-500: oklch(63.7% 0.237 25.331);
   }
-}`);
+}`,
+    {
+      inlineVariables: false,
+    },
+  );
 
   expect(compiled.stylesheet()).toStrictEqual({
     vr: [["color-red-500", [["#fb2c36"]]]],
@@ -236,11 +241,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/box-shadow.test.tsx

@@ -49,43 +49,43 @@ test("shadow values - multiple nested variables", () => {
     boxShadow: [
       {
         blurRadius: 0,
-        color: "red",
+        color: "#f00",
         offsetX: 0,
         offsetY: 20,
         spreadDistance: 0,
       },
 
       {
         blurRadius: 0,
-        color: "green",
+        color: "#008000",
         offsetX: 0,
         offsetY: 30,
         spreadDistance: 0,
       },
       {
         blurRadius: 0,
-        color: "purple",
+        color: "#800080",
         offsetX: 0,
         offsetY: 40,
         spreadDistance: 0,
       },
       {
         blurRadius: 0,
-        color: "yellow",
+        color: "#ff0",
         offsetX: 0,
         offsetY: 50,
         spreadDistance: 0,
       },
       {
         blurRadius: 0,
-        color: "orange",
+        color: "#ffa500",
         offsetX: 0,
         offsetY: 60,
         spreadDistance: 0,
       },
       {
         blurRadius: 0,
-        color: "gray",
+        color: "#808080",
         offsetX: 0,
         offsetY: 70,
         spreadDistance: 0,

src/__tests__/native/calc.test.tsx

@@ -139,7 +139,6 @@ test("calc(var(--variable) + 20%)", () => {
   expect(component.type).toBe("View");
   expect(component.props).toStrictEqual({
     children: undefined,
-    style: {},
     testID,
   });
 });
@@ -159,7 +158,6 @@ test("calc(var(--percent) + 20px)", () => {
   expect(component.type).toBe("View");
   expect(component.props).toStrictEqual({
     children: undefined,
-    style: {},
     testID,
   });
 });
@@ -185,7 +183,7 @@ test("calc & colors", () => {
   expect(component.props).toStrictEqual({
     children: undefined,
     style: {
-      backgroundColor: "hsl(120, 90%, 80%)",
+      backgroundColor: "#9efa9e",
     },
     testID,
   });

src/__tests__/native/colors.test.tsx

@@ -45,7 +45,7 @@ describe("hsl", () => {
     expect(component.type).toBe("View");
     expect(component.props).toStrictEqual({
       children: undefined,
-      style: { color: "hsl(0, 84.2%, 60.2%)" },
+      style: { color: "#ef4444" },
       testID,
     });
   });
@@ -62,7 +62,7 @@ describe("hsl", () => {
     expect(component.type).toBe("View");
     expect(component.props).toStrictEqual({
       children: undefined,
-      style: { color: "hsl(0, 84.2%, 60.2%)" },
+      style: { color: "#ef4444" },
       testID,
     });
   });
@@ -113,7 +113,7 @@ describe("hsla", () => {
     expect(component.type).toBe("View");
     expect(component.props).toStrictEqual({
       children: undefined,
-      style: { color: "hsla(0, 84.2%, 60.2%, 60%)" },
+      style: { color: "#ef444499" },
       testID,
     });
   });
@@ -130,7 +130,7 @@ describe("hsla", () => {
     expect(component.type).toBe("View");
     expect(component.props).toStrictEqual({
       children: undefined,
-      style: { color: "hsla(0, 84.2%, 60.2%, 60%)" },
+      style: { color: "#ef444499" },
       testID,
     });
   });
@@ -160,7 +160,7 @@ describe("currentcolor", () => {
     expect(component.type).toBe("View");
     expect(component.props).toStrictEqual({
       children: undefined,
-      style: { color: "red", backgroundColor: "red" },
+      style: { color: "#f00", backgroundColor: "#f00" },
       testID,
     });
   });

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; }
@@ -142,7 +142,7 @@ test(":root variables", () => {
     <View testID={testID} className="my-class" />,
   ).getByTestId(testID);
 
-  expect(component.props.style).toStrictEqual({ color: "red" });
+  expect(component.props.style).toStrictEqual({ color: "#f00" });
 });
 
 test("can apply and set new variables", () => {
@@ -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", () => {
@@ -269,5 +269,5 @@ test("variable overriding with classes", () => {
   );
 
   const component = screen.getByTestId(testID);
-  expect(component.props.style).toStrictEqual({ color: "red" });
+  expect(component.props.style).toStrictEqual({ color: "#f00" });
 });