Minor cleanup of StyleSheet

packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap

@@ -63,7 +63,8 @@ Object {
     "property": "scrollbarWidth",
     "rules": Array [
       ".r-scrollbarWidth-2eszeu::-webkit-scrollbar{display:none}",
-      ".r-scrollbarWidth-2eszeu{overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;}",
+      ".r-scrollbarWidth-2eszeu{overflow:-moz-scrollbars-none;-ms-overflow-style:none;}",
+      ".r-scrollbarWidth-2eszeu{scrollbar-width:none;}",
     ],
     "value": "none",
   },

packages/react-native-web/src/exports/StyleSheet/compile.js

@@ -133,6 +133,7 @@ function createAtomicRules(identifier: string, property, value): Rules {
       break;
     }
 
+    // Equivalent to using '::placeholder'
     case 'placeholderTextColor': {
       const block = createDeclarationBlock({ color: value, opacity: 1 });
       rules.push(
@@ -144,19 +145,8 @@ function createAtomicRules(identifier: string, property, value): Rules {
       break;
     }
 
-    // Polyfill for draft spec
+    // Polyfill for additional 'pointer-events' values
-    // https://drafts.csswg.org/css-scrollbars-1/
+    // See d13f78622b233a0afc0c7a200c0a0792c8ca9e58
-    case 'scrollbarWidth': {
-      if (value === 'none') {
-        rules.push(
-          `${selector}::-webkit-scrollbar{display:none}`,
-          `${selector}{overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;}`
-        );
-      }
-      break;
-    }
-
-    // See #513
     case 'pointerEvents': {
       let finalValue = value;
       if (value === 'auto' || value === 'box-only') {
@@ -177,6 +167,20 @@ function createAtomicRules(identifier: string, property, value): Rules {
       break;
     }
 
+    // Polyfill for draft spec
+    // 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;}`
+        );
+      }
+      const block = createDeclarationBlock({ [property]: value });
+      rules.push(`${selector}${block}`);
+      break;
+    }
+
     default: {
       const block = createDeclarationBlock({ [property]: value });
       rules.push(`${selector}${block}`);
@@ -253,7 +257,7 @@ function createKeyframes(keyframes) {
  */
 function processKeyframesValue(keyframesValue) {
   if (typeof keyframesValue === 'number') {
-    throw new Error('Invalid CSS keyframes type');
+    throw new Error(`Invalid CSS keyframes type: ${typeof keyframesValue}`);
   }
 
   const animationNames = [];

packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js

@@ -26,16 +26,13 @@ import modality from './modality';
 import { STYLE_ELEMENT_ID, STYLE_GROUPS } from './constants';
 
 export default function createStyleResolver() {
-  let inserted, sheet, lookup;
+  let inserted, sheet, cache;
   const resolved = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
 
   const init = () => {
     inserted = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
     sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(STYLE_ELEMENT_ID));
-    lookup = {
+    cache = {};
-      byClassName: {},
-      byProp: {}
-    };
     modality(rule => sheet.insert(rule, STYLE_GROUPS.modality));
     initialRules.forEach(rule => {
       sheet.insert(rule, STYLE_GROUPS.reset);
@@ -44,17 +41,15 @@ export default function createStyleResolver() {
 
   init();
 
-  function addToLookup(className, prop, value) {
+  function addToCache(className, prop, value) {
-    if (!lookup.byProp[prop]) {
+    if (!cache[prop]) {
-      lookup.byProp[prop] = {};
+      cache[prop] = {};
     }
-    lookup.byProp[prop][value] = className;
+    cache[prop][value] = className;
-    lookup.byClassName[className] = { prop, value };
   }
 
   function getClassName(prop, value) {
     const val = stringifyValueWithProperty(value, prop);
-    const cache = lookup.byProp;
     return cache[prop] && cache[prop].hasOwnProperty(val) && cache[prop][val];
   }
 
@@ -66,7 +61,7 @@ export default function createStyleResolver() {
       const results = atomic(style);
       Object.keys(results).forEach(key => {
         const { identifier, property, rules, value } = results[key];
-        addToLookup(identifier, property, value);
+        addToCache(identifier, property, value);
         rules.forEach(rule => {
           const group = STYLE_GROUPS.custom[property] || STYLE_GROUPS.atomic;
           sheet.insert(rule, group);