fix: escaped characters in @prop

Author: marklawlor

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

@@ -294,7 +294,7 @@ test("@prop multiple", () => {
   });
 });
 
-test("@prop dot notation", () => {
+test("@prop dot notation shorthand", () => {
   const compiled = registerCSS(`
     .my-class { 
       @prop test.nested; 
@@ -331,3 +331,41 @@ test("@prop dot notation", () => {
     testID: "react-native-css",
   });
 });
+
+test("@prop dot notation, escaped", () => {
+  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

@@ -108,7 +108,7 @@ function propAtRuleBlock(
   });
 
   // @props <to>; (has no from value)
-  if (!to && from) {
+  if (!to) {
     to = from;
     from = [
       {
@@ -119,7 +119,7 @@ function propAtRuleBlock(
   }
 
   // We can only map from a single property
-  if (!from || from.length !== 1) {
+  if (!from || from.length !== 1 || !to) {
     return mapping;
   }
 
@@ -128,17 +128,12 @@ function propAtRuleBlock(
     return mapping;
   }
 
-  if (!to) {
-    mapping["*"] = toRNProperty(fromToken.value.value);
-    return mapping;
-  }
-
   mapping[toRNProperty(fromToken.value.value)] = to.flatMap((item, index) => {
     switch (item.value.type) {
       case "delim":
         return index === 0 && item.value.value === "*" ? ["*"] : [];
       case "ident":
-        return [toRNProperty(item.value.value)];
+        return item.value.value.split(".").map((part) => toRNProperty(part));
       default:
         return [];
     }