diff --git a/src/compiler/__tests__/@prop.test.tsx b/src/compiler/__tests__/@prop.test.tsx
index 988da47..eb25ca5 100644
--- a/src/compiler/__tests__/@prop.test.tsx
+++ b/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();
+ const component = screen.getByTestId(testID);
+
+ expect(component.props).toStrictEqual({
+ testID,
+ children: undefined,
+ test: "#000",
+ style: {},
+ });
+});
+
test("@prop value: target", () => {
const compiled = registerCSS(`
.my-class {
diff --git a/src/compiler/__tests__/declarations.test.tsx b/src/compiler/__tests__/declarations.test.tsx
index 669821d..2ded1c5 100644
--- a/src/compiler/__tests__/declarations.test.tsx
+++ b/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) => {
diff --git a/src/compiler/compiler.types.ts b/src/compiler/compiler.types.ts
index cfe927d..6a7f1cd 100644
--- a/src/compiler/compiler.types.ts
+++ b/src/compiler/compiler.types.ts
@@ -99,10 +99,8 @@ export type StyleDeclaration =
| Record
/** 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
diff --git a/src/compiler/stylesheet.ts b/src/compiler/stylesheet.ts
index 5a2f3aa..6a4e8aa 100644
--- a/src/compiler/stylesheet.ts
+++ b/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 = {};