fix: anonymous @prop usage

Author: marklawlor

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

@@ -293,3 +293,41 @@ test("@prop multiple", () => {
     ],
   });
 });
+
+test("@prop dot notation", () => {
+  const compiled = registerCSS(`
+    .my-class { 
+      @prop test.nested; 
+      @media all {
+        color: red;
+      }
+    }
+  `);
+
+  expect(compiled.stylesheet()).toStrictEqual({
+    s: [
+      [
+        "my-class",
+        [
+          {
+            d: [["#f00", ["test", "nested"]]],
+            v: [["__rn-css-color", "#f00"]],
+            s: [2, 1],
+          },
+        ],
+      ],
+    ],
+  });
+
+  render(<View testID={testID} className="my-class" />);
+  const component = screen.getByTestId(testID);
+
+  expect(component.props).toStrictEqual({
+    children: undefined,
+    style: {},
+    test: {
+      nested: "#f00",
+    },
+    testID: "react-native-css",
+  });
+});

src/compiler/atRules.ts

@@ -103,10 +103,22 @@ function propAtRuleBlock(
   token: Extract<TokenOrValue, { type: "token" }>[],
   mapping: StyleRuleMapping = {},
 ): StyleRuleMapping {
-  const [from, to] = splitByDelimiter(token, (item) => {
+  let [from, to] = splitByDelimiter(token, (item) => {
     return item.value.type === "colon";
   });
 
+  // @props <to>; (has no from value)
+  if (!to && from) {
+    to = from;
+    from = [
+      {
+        type: "token",
+        value: { type: "ident", value: "*" },
+      },
+    ];
+  }
+
+  // We can only map from a single property
   if (!from || from.length !== 1) {
     return mapping;
   }