[fix] Correctly propagate pointer-events to children

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

Fixes #2794

Author: hassankhan

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

@@ -18,8 +18,9 @@ exports[`AppRegistry runApplication styles roots in different documents 1`] = `
   ".r-pointerEvents-105ug2t {pointer-events: auto !important;}",
   ".r-pointerEvents-12vffkv * {pointer-events: auto;}",
   ".r-pointerEvents-12vffkv {pointer-events: none !important;}",
+  ".r-pointerEvents-633pao * {pointer-events: none;}",
   ".r-pointerEvents-633pao {pointer-events: none !important;}",
-  ".r-pointerEvents-ah5dr5>* {pointer-events: none;}",
+  ".r-pointerEvents-ah5dr5 * {pointer-events: none;}",
   ".r-pointerEvents-ah5dr5 {pointer-events: auto !important;}",
   ".r-position-u8s1d {position: absolute;}",
   ".r-right-zchlnj {right: 0px;}",
@@ -45,8 +46,9 @@ exports[`AppRegistry runApplication styles roots in different documents 2`] = `
   ".r-pointerEvents-105ug2t {pointer-events: auto !important;}",
   ".r-pointerEvents-12vffkv * {pointer-events: auto;}",
   ".r-pointerEvents-12vffkv {pointer-events: none !important;}",
+  ".r-pointerEvents-633pao * {pointer-events: none;}",
   ".r-pointerEvents-633pao {pointer-events: none !important;}",
-  ".r-pointerEvents-ah5dr5>* {pointer-events: none;}",
+  ".r-pointerEvents-ah5dr5 * {pointer-events: none;}",
   ".r-pointerEvents-ah5dr5 {pointer-events: auto !important;}",
   ".r-position-u8s1d {position: absolute;}",
   ".r-right-zchlnj {right: 0px;}",

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

@@ -63,8 +63,9 @@ describe('AppRegistry', () => {
         .r-pointerEvents-105ug2t{pointer-events:auto!important;}
         .r-pointerEvents-12vffkv * {pointer-events:auto;}
         .r-pointerEvents-12vffkv{pointer-events:none!important;}
+        .r-pointerEvents-633pao * {pointer-events:none;}
         .r-pointerEvents-633pao{pointer-events:none!important;}
-        .r-pointerEvents-ah5dr5>*{pointer-events:none;}
+        .r-pointerEvents-ah5dr5 * {pointer-events:none;}
         .r-pointerEvents-ah5dr5{pointer-events:auto!important;}
         .r-position-u8s1d{position:absolute;}
         .r-right-zchlnj{right:0px;}
@@ -121,8 +122,9 @@ describe('AppRegistry', () => {
         .r-pointerEvents-105ug2t{pointer-events:auto!important;}
         .r-pointerEvents-12vffkv * {pointer-events:auto;}
         .r-pointerEvents-12vffkv{pointer-events:none!important;}
+        .r-pointerEvents-633pao * {pointer-events:none;}
         .r-pointerEvents-633pao{pointer-events:none!important;}
-        .r-pointerEvents-ah5dr5>*{pointer-events:none;}
+        .r-pointerEvents-ah5dr5 * {pointer-events:none;}
         .r-pointerEvents-ah5dr5{pointer-events:auto!important;}
         .r-position-u8s1d{position:absolute;}
         .r-right-zchlnj{right:0px;}
@@ -172,8 +174,9 @@ describe('AppRegistry', () => {
         .r-pointerEvents-105ug2t{pointer-events:auto!important;}
         .r-pointerEvents-12vffkv * {pointer-events:auto;}
         .r-pointerEvents-12vffkv{pointer-events:none!important;}
+        .r-pointerEvents-633pao * {pointer-events:none;}
         .r-pointerEvents-633pao{pointer-events:none!important;}
-        .r-pointerEvents-ah5dr5>*{pointer-events:none;}
+        .r-pointerEvents-ah5dr5 * {pointer-events:none;}
         .r-pointerEvents-ah5dr5{pointer-events:auto!important;}
         .r-position-u8s1d{position:absolute;}
         .r-right-zchlnj{right:0px;}

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

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

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

@@ -379,20 +379,23 @@ function createAtomicRules(identifier: string, property, value): Rules {
 
     // Polyfill for additional 'pointer-events' values
     // See d13f78622b233a0afc0c7a200c0a0792c8ca9e58
+    // See https://reactnative.dev/docs/view#pointerevents
     case 'pointerEvents': {
       let finalValue = value;
-      if (value === 'auto' || value === 'box-only') {
+      if (value === 'auto') {
         finalValue = 'auto!important';
-        if (value === 'box-only') {
-          const block = createDeclarationBlock({ pointerEvents: 'none' });
-          rules.push(`${selector}>*${block}`);
-        }
-      } else if (value === 'none' || value === 'box-none') {
+      } else if (value === 'none') {
         finalValue = 'none!important';
-        if (value === 'box-none') {
-          const block = createDeclarationBlock({ pointerEvents: 'auto' });
-          rules.push(`${selector} * ${block}`);
-        }
+        const block = createDeclarationBlock({ pointerEvents: 'none' });
+        rules.push(`${selector} * ${block}`);
+      } else if (value === 'box-none') {
+        finalValue = 'none!important';
+        const block = createDeclarationBlock({ pointerEvents: 'auto' });
+        rules.push(`${selector} * ${block}`);
+      } else if (value === 'box-only') {
+        finalValue = 'auto!important';
+        const block = createDeclarationBlock({ pointerEvents: 'none' });
+        rules.push(`${selector} * ${block}`);
       }
       const block = createDeclarationBlock({ pointerEvents: finalValue });
       rules.push(`${selector}${block}`);