From d8ee51e32633b106fb6c8e7f5f73af50c113017b Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Tue, 6 Oct 2020 11:38:17 -0700
Subject: [PATCH] [fix] CSS scrollbarWidth

The previous code wasn't inserting the W3C rule because it had the same selector as the rule for proprietary styles. However, the Firefox value isn't supported anymore, and the Edge value is unnecessary as Edge uses Blink now. This patch removes the non-WebKit fallback styles for this property.

Fix #1760
---
 .../StyleSheet/__tests__/__snapshots__/compile-test.js.snap  | 1 -
 packages/react-native-web/src/exports/StyleSheet/compile.js  | 5 +----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap
index d5eea8fd..fa31d103 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap
@@ -63,7 +63,6 @@ Object {
     "property": "scrollbarWidth",
     "rules": Array [
       ".r-scrollbarWidth-2eszeu::-webkit-scrollbar{display:none}",
-      ".r-scrollbarWidth-2eszeu{overflow:-moz-scrollbars-none;-ms-overflow-style:none;}",
       ".r-scrollbarWidth-2eszeu{scrollbar-width:none;}",
     ],
     "value": "none",
diff --git a/packages/react-native-web/src/exports/StyleSheet/compile.js b/packages/react-native-web/src/exports/StyleSheet/compile.js
index 035af6d1..98de852a 100644
--- a/packages/react-native-web/src/exports/StyleSheet/compile.js
+++ b/packages/react-native-web/src/exports/StyleSheet/compile.js
@@ -171,10 +171,7 @@ function createAtomicRules(identifier: string, property, value): Rules {
     // https://drafts.csswg.org/css-scrollbars-1/
     case 'scrollbarWidth': {
       if (value === 'none') {
-        rules.push(
-          `${selector}::-webkit-scrollbar{display:none}`,
-          `${selector}{overflow:-moz-scrollbars-none;-ms-overflow-style:none;}`
-        );
+        rules.push(`${selector}::-webkit-scrollbar{display:none}`);
       }
       const block = createDeclarationBlock({ [property]: value });
       rules.push(`${selector}${block}`);