feat: rename prop atRule to natievMapping

Author: marklawlor

src/__tests__/compiler/@prop.test.tsx …tests__/compiler/@nativeMapping.test.tsxsrc/__tests__/compiler/@prop.test.tsx renamed to src/__tests__/compiler/@nativeMapping.test.tsx src/__tests__/compiler/@prop.test.tsx renamed to src/__tests__/compiler/@nativeMapping.test.tsx

@@ -7,10 +7,10 @@ import {
   testID,
 } from "react-native-css/jest";
 
-test("@prop target (nested @media)", () => {
+test("@nativeMapping target (nested @media)", () => {
   const compiled = registerCSS(`
     .my-class { 
-      @prop test; 
+      @nativeMapping test; 
       @media all {
         color: #00f;
       }
@@ -43,10 +43,10 @@ test("@prop target (nested @media)", () => {
   });
 });
 
-test("@prop target (nested @media and nested declarations)", () => {
+test("@nativeMapping target (nested @media and nested declarations)", () => {
   const compiled = registerCSS(`
     .my-class { 
-      @prop test; 
+      @nativeMapping test; 
       @media all {
         & {
           color: #00f;
@@ -81,14 +81,14 @@ test("@prop target (nested @media and nested declarations)", () => {
   });
 });
 
-test("@prop target unparsed", () => {
+test("@nativeMapping target unparsed", () => {
   const compiled = registerCSS(`
     :root {
       --color-black: #000;
     }
 
     .my-class { 
-      @prop test; 
+      @nativeMapping test; 
       color: var(--color-black);
     }
   `);
@@ -119,12 +119,12 @@ test("@prop target unparsed", () => {
   });
 });
 
-test("@prop value: target", () => {
+test("@nativeMapping value: target", () => {
   const compiled = registerCSS(`
     .my-class { 
       color: red; 
       background-color: blue; 
-      @prop background-color: myBackgroundColor;
+      @nativeMapping background-color: myBackgroundColor;
     }
   `);
 
@@ -161,12 +161,12 @@ test("@prop value: target", () => {
   });
 });
 
-test("@prop value: nested target", () => {
+test("@nativeMapping value: nested target", () => {
   const compiled = compile(`
     .test { 
       color: red; 
       background-color: blue; 
-      @prop background-color: myBackgroundColor.nested;
+      @nativeMapping background-color: myBackgroundColor.nested;
     }
   `);
 
@@ -191,12 +191,12 @@ test("@prop value: nested target", () => {
   });
 });
 
-test("@prop value: wildcard target", () => {
+test("@nativeMapping value: wildcard target", () => {
   const compiled = compile(`
     .test { 
       color: red; 
       background-color: blue; 
-      @prop background-color: &.myBackgroundColor;
+      @nativeMapping background-color: &.myBackgroundColor;
     }
   `);
 
@@ -221,12 +221,12 @@ test("@prop value: wildcard target", () => {
   });
 });
 
-test("@prop value: wildcard nested target", () => {
+test("@nativeMapping value: wildcard nested target", () => {
   const compiled = registerCSS(`
     .my-class { 
       color: red; 
       background-color: blue; 
-      @prop background-color: &.myBackgroundColor.test;
+      @nativeMapping background-color: &.myBackgroundColor.test;
     }
   `);
 
@@ -261,12 +261,12 @@ test("@prop value: wildcard nested target", () => {
   });
 });
 
-test("@prop multiple", () => {
+test("@nativeMapping multiple", () => {
   const compiled = compileWithAutoDebug(`
     .test { 
       color: red; 
       background-color: oklab(40.1% 0.1143 0.045); 
-      @prop {
+      @nativeMapping {
         background-color: &.myBackgroundColor;
         color: &.myColor;
       }
@@ -294,10 +294,10 @@ test("@prop multiple", () => {
   });
 });
 
-test("@prop dot notation shorthand", () => {
+test("@nativeMapping dot notation shorthand", () => {
   const compiled = registerCSS(`
     .my-class { 
-      @prop test.nested; 
+      @nativeMapping test.nested; 
       @media all {
         color: red;
       }
@@ -332,10 +332,10 @@ test("@prop dot notation shorthand", () => {
   });
 });
 
-test("@prop dot notation, escaped", () => {
+test("@nativeMapping dot notation, escaped", () => {
   const compiled = registerCSS(`
     .my-class { 
-      @prop test\\.nested; 
+      @nativeMapping test\\.nested; 
       @media all {
         color: red;
       }

src/compiler/atRules.ts

@@ -47,11 +47,11 @@ export function maybeMutateReactNativeOptions(
 }
 
 /***********************************************
- * @prop                                       *
+ * @nativeMapping                                       *
  ***********************************************/
 
-function isPropAtRule(rule: Rule | PropAtRule): rule is PropAtRule {
-  return rule.type === "unknown" && rule.value.name === "prop";
+function isNativeMappingAtRule(rule: Rule | PropAtRule): rule is PropAtRule {
+  return rule.type === "unknown" && rule.value.name === "nativeMapping";
 }
 
 export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
@@ -71,14 +71,14 @@ export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
   if (!rules) return mapping;
 
   for (const rule of rules) {
-    if (!isPropAtRule(rule)) continue;
+    if (!isNativeMappingAtRule(rule)) continue;
 
     if (rule.value.prelude.length > 0) {
       const prelude = rule.value.prelude.filter((item) => {
         return item.value.type !== "white-space";
       });
 
-      propAtRuleBlock(prelude, mapping);
+      nativeMappingAtRuleBlock(prelude, mapping);
     } else if (rule.value.block) {
       // Remove all whitespace tokens
       const blocks = rule.value.block.filter((item) => {
@@ -91,23 +91,23 @@ export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
       });
 
       for (const block of blockRules) {
-        propAtRuleBlock(block, mapping);
+        nativeMappingAtRuleBlock(block, mapping);
       }
     }
   }
 
   return mapping;
 }
 
-function propAtRuleBlock(
+function nativeMappingAtRuleBlock(
   token: Extract<TokenOrValue, { type: "token" }>[],
   mapping: StyleRuleMapping = {},
 ): StyleRuleMapping {
   let [from, to] = splitByDelimiter(token, (item) => {
     return item.value.type === "colon";
   });
 
-  // @props <to>; (has no from value)
+  // @nativeMapping <to>; (has no from value)
   if (!to) {
     to = from;
     from = [

src/compiler/stylesheet.ts

@@ -56,7 +56,7 @@ export class StylesheetBuilder {
     private ruleTemplate: StyleRule = {
       s: [],
     },
-    // Any default mapping should be included in the @prop parsing
+    // Any default mapping should be included in the @nativeMapping parsing
     private mapping: StyleRuleMapping = {},
     public descriptorProperty?: string,
     private shared: {