fix: change wildcard to nesting in @prop

Author: marklawlor

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

@@ -196,7 +196,7 @@ test("@prop value: wildcard target", () => {
     .test { 
       color: red; 
       background-color: blue; 
-      @prop background-color: *.myBackgroundColor;
+      @prop background-color: &.myBackgroundColor;
     }
   `);
 
@@ -226,7 +226,7 @@ test("@prop value: wildcard nested target", () => {
     .my-class { 
       color: red; 
       background-color: blue; 
-      @prop background-color: *.myBackgroundColor.test;
+      @prop background-color: &.myBackgroundColor.test;
     }
   `);
 
@@ -240,7 +240,7 @@ test("@prop value: wildcard nested target", () => {
               {
                 color: "#f00",
               },
-              ["#00f", ["*", "myBackgroundColor", "test"]],
+              ["#00f", ["&", "myBackgroundColor", "test"]],
             ],
             v: [["__rn-css-color", "#f00"]],
             s: [1, 1],
@@ -267,8 +267,8 @@ test("@prop multiple", () => {
       color: red; 
       background-color: oklab(40.1% 0.1143 0.045); 
       @prop {
-        background-color: *.myBackgroundColor;
-        color: *.myColor;
+        background-color: &.myBackgroundColor;
+        color: &.myColor;
       }
     }
   `);

src/compiler/atRules.ts

@@ -128,16 +128,22 @@ function propAtRuleBlock(
     return mapping;
   }
 
-  mapping[toRNProperty(fromToken.value.value)] = to.flatMap((item, index) => {
+  let value: string | string[] = to.flatMap((item, index) => {
     switch (item.value.type) {
       case "delim":
-        return index === 0 && item.value.value === "*" ? ["*"] : [];
+        return index === 0 && item.value.value === "&" ? ["&"] : [];
       case "ident":
         return item.value.value.split(".").map((part) => toRNProperty(part));
       default:
         return [];
     }
   });
 
+  if (value.length === 2 && value[0] === "&" && value[1]) {
+    value = value[1];
+  }
+
+  mapping[toRNProperty(fromToken.value.value)] = value;
+
   return mapping;
 }

src/compiler/declarations.ts

@@ -1984,11 +1984,11 @@ export function parseTextShadow(
     parseColor(textShadow.color, builder),
   );
   builder.addDescriptor(
-    "*.textShadowOffset.width",
+    "&.textShadowOffset.width",
     parseLength(textShadow.xOffset, builder),
   );
   builder.addDescriptor(
-    "*.textShadowOffset.height",
+    "&.textShadowOffset.height",
     parseLength(textShadow.yOffset, builder),
   );
   builder.addDescriptor(
@@ -2374,27 +2374,27 @@ export function parseBoxShadow(
 ) {
   for (const [index, shadow] of value.entries()) {
     builder.addDescriptor(
-      `*.boxShadow.[${index}].color`,
+      `&.boxShadow.[${index}].color`,
       parseColor(shadow.color, builder),
     );
     builder.addDescriptor(
-      `*.boxShadow.[${index}].offsetX`,
+      `&.boxShadow.[${index}].offsetX`,
       parseLength(shadow.xOffset, builder),
     );
     builder.addDescriptor(
-      `*.boxShadow.[${index}].offsetY`,
+      `&.boxShadow.[${index}].offsetY`,
       parseLength(shadow.yOffset, builder),
     );
     builder.addDescriptor(
-      `*.boxShadow.[${index}].blurRadius`,
+      `&.boxShadow.[${index}].blurRadius`,
       parseLength(shadow.blur, builder),
     );
     builder.addDescriptor(
-      `*.boxShadow.[${index}].spreadDistance`,
+      `&.boxShadow.[${index}].spreadDistance`,
       parseLength(shadow.spread, builder),
     );
     builder.addDescriptor(
-      `*.boxShadow.[${index}].inset`,
+      `&.boxShadow.[${index}].inset`,
       shadow.inset ? true : undefined,
     );
   }
@@ -3088,7 +3088,7 @@ function parseObjectFit(
   builder: StylesheetBuilder,
 ) {
   builder.addMapping({
-    "object-fit": "contentFit",
+    "object-fit": ["contentFit"],
   });
   builder.addDescriptor(
     "object-fit",
@@ -3101,7 +3101,7 @@ function parseObjectPosition(
   builder: StylesheetBuilder,
 ) {
   builder.addMapping({
-    "object-position": "contentPosition",
+    "object-position": ["contentPosition"],
   });
   builder.addDescriptor("object-position", [
     {},

src/compiler/stylesheet.ts

@@ -403,12 +403,10 @@ export class StylesheetBuilder {
       } else {
         forceTuple = true;
       }
-    } else if (propPath) {
-      forceTuple = true;
-    } else {
-      propPath = property;
     }
 
+    propPath ??= property;
+
     if (forceTuple && !Array.isArray(propPath)) {
       propPath = [propPath];
     }

src/native/styles/calculate-props.ts

@@ -129,7 +129,7 @@ export function applyDeclarations(
         const final = rest.pop();
 
         if (final) {
-          if (first !== "*") {
+          if (first !== "&") {
             topLevelTarget[first] ??= {};
             target = topLevelTarget[first];
           }