fix: @prop with unparsed declarations (#97)

Author: marklawlor

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

@@ -40,6 +40,46 @@ test("@prop target (nested @media)", () => {
   });
 });
 
+test("@prop target unparsed", () => {
+  const compiled = registerCSS(`
+    :root {
+      --color-black: #000;
+    }
+
+    .my-class { 
+      @prop test; 
+      color: var(--color-black);
+    }
+  `);
+
+  expect(compiled.stylesheet()).toStrictEqual({
+    s: [
+      [
+        "my-class",
+        [
+          {
+            d: [[[{}, "var", "color-black", 1], ["test"], 1]],
+            dv: 1,
+            s: [2, 1],
+            v: [["__rn-css-current-color", [{}, "var", "color-black", 1]]],
+          },
+        ],
+      ],
+    ],
+    vr: [["color-black", [["#000"]]]],
+  });
+
+  render(<View testID={testID} className="my-class" />);
+  const component = screen.getByTestId(testID);
+
+  expect(component.props).toStrictEqual({
+    testID,
+    children: undefined,
+    test: "#000",
+    style: {},
+  });
+});
+
 test("@prop value: target", () => {
   const compiled = registerCSS(`
     .my-class { 

src/compiler/__tests__/declarations.test.tsx

@@ -6,10 +6,10 @@ const tests = [
   ["-rn-ripple-style: borderless;", [{ d: [[true, ["android_ripple", "borderless"]]], s: [1, 1] }]],
   ["caret-color: black", [{ d: [["#000", ["cursorColor"]]], s: [1, 1] }]],
   ["fill: black;", [{ d: [["#000", ["fill"]]], s: [1, 1] }]],
-  ["stroke: black;", [{ d: [["#000", ["stroke"]]], s: [1, 1] }]],
-  ["stroke-width: 1px;", [{ d: [[1, ["strokeWidth"]]], s: [1, 1] }]],
   ["rotate: 3deg;", [{ d: [[[{}, "rotateZ", "3deg"], "rotateZ"]], s: [1, 1] }]],
   ["rotate: x 3deg;", [{ d: [[[{}, "rotateX", "3deg"], "rotateX"]], s: [1, 1] }]],
+  ["stroke-width: 1px;", [{ d: [[1, ["strokeWidth"]]], s: [1, 1] }]],
+  ["stroke: black;", [{ d: [["#000", ["stroke"]]], s: [1, 1] }]],
 ] as const;
 
 test.each(tests)("declarations for %s", (declarations, expected) => {

src/compiler/compiler.types.ts

@@ -99,10 +99,8 @@ export type StyleDeclaration =
   | Record<string, StyleDescriptor>
   /** A style that needs to be set  */
   | [StyleDescriptor, string | string[]]
-  /** A value that can only be computed at runtime */
-  | [StyleFunction, string | string[]]
   /** A value that can only be computed at runtime, and only after styles have been calculated */
-  | [StyleFunction, string | string[], 1];
+  | [StyleDescriptor, string | string[], 1];
 
 export type StyleDescriptor =
   | string

src/compiler/stylesheet.ts

@@ -410,22 +410,21 @@ export class StylesheetBuilder {
       propPath = property;
     }
 
-    if (isStyleFunction(value)) {
+    if (forceTuple && !Array.isArray(propPath)) {
+      propPath = [propPath];
+    }
+
+    if (isStyleFunction(value) || Array.isArray(propPath)) {
       if (delayed) {
         declarations.push([value, propPath, 1]);
       } else {
         declarations.push([value, propPath]);
       }
-    } else if (forceTuple || Array.isArray(propPath)) {
-      declarations.push([
-        value,
-        Array.isArray(propPath) ? propPath : [propPath],
-      ]);
     } else if (Array.isArray(value) && value.some(isStyleFunction)) {
       declarations.push([value, propPath]);
     } else if (typeof value === "string" && keywords.has(value)) {
       declarations.push([value, propPath]);
-    } else {
+    } else if (typeof propPath === "string") {
       let staticDeclarationRecord = staticDeclarations.get(declarations);
       if (!staticDeclarationRecord) {
         staticDeclarationRecord = {};