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

Fixes #2606

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/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 });