[fix] Correctly propagate pointer-events: auto to children when set to box-none

Corrects `pointer-events: box-none` behavior to match what's described
at https://reactnative.dev/docs/view#pointerevents

Fix #2606
Close #2789

Author: hassankhan

packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap

@@ -16,7 +16,7 @@ exports[`AppRegistry runApplication styles roots in different documents 1`] = `
   ".r-bottom-1p0dtai {bottom: 0px;}",
   ".r-left-1d2f490 {left: 0px;}",
   ".r-pointerEvents-105ug2t {pointer-events: auto !important;}",
-  ".r-pointerEvents-12vffkv>* {pointer-events: auto;}",
+  ".r-pointerEvents-12vffkv * {pointer-events: auto;}",
   ".r-pointerEvents-12vffkv {pointer-events: none !important;}",
   ".r-pointerEvents-633pao {pointer-events: none !important;}",
   ".r-pointerEvents-ah5dr5>* {pointer-events: none;}",
@@ -43,7 +43,7 @@ exports[`AppRegistry runApplication styles roots in different documents 2`] = `
   ".r-bottom-1p0dtai {bottom: 0px;}",
   ".r-left-1d2f490 {left: 0px;}",
   ".r-pointerEvents-105ug2t {pointer-events: auto !important;}",
-  ".r-pointerEvents-12vffkv>* {pointer-events: auto;}",
+  ".r-pointerEvents-12vffkv * {pointer-events: auto;}",
   ".r-pointerEvents-12vffkv {pointer-events: none !important;}",
   ".r-pointerEvents-633pao {pointer-events: none !important;}",
   ".r-pointerEvents-ah5dr5>* {pointer-events: none;}",

packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js

@@ -61,7 +61,7 @@ describe('AppRegistry', () => {
         .r-left-1d2f490{left:0px;}
         .r-maxWidth-dnmrzs{max-width:100%;}
         .r-pointerEvents-105ug2t{pointer-events:auto!important;}
-        .r-pointerEvents-12vffkv>*{pointer-events:auto;}
+        .r-pointerEvents-12vffkv * {pointer-events:auto;}
         .r-pointerEvents-12vffkv{pointer-events:none!important;}
         .r-pointerEvents-633pao{pointer-events:none!important;}
         .r-pointerEvents-ah5dr5>*{pointer-events:none;}
@@ -119,7 +119,7 @@ describe('AppRegistry', () => {
         .r-left-1d2f490{left:0px;}
         .r-maxWidth-dnmrzs{max-width:100%;}
         .r-pointerEvents-105ug2t{pointer-events:auto!important;}
-        .r-pointerEvents-12vffkv>*{pointer-events:auto;}
+        .r-pointerEvents-12vffkv * {pointer-events:auto;}
         .r-pointerEvents-12vffkv{pointer-events:none!important;}
         .r-pointerEvents-633pao{pointer-events:none!important;}
         .r-pointerEvents-ah5dr5>*{pointer-events:none;}
@@ -170,7 +170,7 @@ describe('AppRegistry', () => {
         .r-left-1d2f490{left:0px;}
         .r-maxWidth-dnmrzs{max-width:100%;}
         .r-pointerEvents-105ug2t{pointer-events:auto!important;}
-        .r-pointerEvents-12vffkv>*{pointer-events:auto;}
+        .r-pointerEvents-12vffkv * {pointer-events:auto;}
         .r-pointerEvents-12vffkv{pointer-events:none!important;}
         .r-pointerEvents-633pao{pointer-events:none!important;}
         .r-pointerEvents-ah5dr5>*{pointer-events:none;}

packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-test.js

@@ -176,6 +176,30 @@ describe('StyleSheet/compile', () => {
         ]
       `);
     });
+
+    test('when parent is pointer-events=box-none, pointer-events=auto applied to children', () => {
+      const result = atomic({
+        pointerEvents: 'box-none'
+      });
+
+      expect(result).toMatchInlineSnapshot(`
+        [
+          {
+            "$$css": true,
+            "pointerEvents": "r-pointerEvents-12vffkv",
+          },
+          [
+            [
+              [
+                ".r-pointerEvents-12vffkv * {pointer-events:auto;}",
+                ".r-pointerEvents-12vffkv{pointer-events:none!important;}",
+              ],
+              3,
+            ],
+          ],
+        ]
+      `);
+    });
   });
 
   describe('classic', () => {

packages/react-native-web/src/exports/StyleSheet/compiler/index.js

@@ -391,7 +391,7 @@ function createAtomicRules(identifier: string, property, value): Rules {
         finalValue = 'none!important';
         if (value === 'box-none') {
           const block = createDeclarationBlock({ pointerEvents: 'auto' });
-          rules.push(`${selector}>*${block}`);
+          rules.push(`${selector} * ${block}`);
         }
       }
       const block = createDeclarationBlock({ pointerEvents: finalValue });