diff --git a/.watchmanconfig b/.watchmanconfig
new file mode 100644
index 00000000..0967ef42
--- /dev/null
+++ b/.watchmanconfig
@@ -0,0 +1 @@
+{}
diff --git a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap
index 5fe49c57..ba46fa39 100644
--- a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap
@@ -17,7 +17,7 @@ exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
       Object {
         "animationDuration": "0.75s",
         "animationIterationCount": "infinite",
-        "animationName": Array [
+        "animationKeyframes": Array [
           Object {
             "0%": Object {
               "transform": Array [
@@ -97,7 +97,7 @@ exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
       Object {
         "animationDuration": "0.75s",
         "animationIterationCount": "infinite",
-        "animationName": Array [
+        "animationKeyframes": Array [
           Object {
             "0%": Object {
               "transform": Array [
@@ -211,7 +211,7 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
       Object {
         "animationDuration": "0.75s",
         "animationIterationCount": "infinite",
-        "animationName": Array [
+        "animationKeyframes": Array [
           Object {
             "0%": Object {
               "transform": Array [
@@ -290,7 +290,7 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
       Object {
         "animationDuration": "0.75s",
         "animationIterationCount": "infinite",
-        "animationName": Array [
+        "animationKeyframes": Array [
           Object {
             "0%": Object {
               "transform": Array [
@@ -370,7 +370,7 @@ exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
       Object {
         "animationDuration": "0.75s",
         "animationIterationCount": "infinite",
-        "animationName": Array [
+        "animationKeyframes": Array [
           Object {
             "0%": Object {
               "transform": Array [
@@ -448,7 +448,7 @@ exports[`components/ActivityIndicator prop "size" is a number 1`] = `
       Object {
         "animationDuration": "0.75s",
         "animationIterationCount": "infinite",
-        "animationName": Array [
+        "animationKeyframes": Array [
           Object {
             "0%": Object {
               "transform": Array [
diff --git a/packages/react-native-web/src/exports/ActivityIndicator/index.js b/packages/react-native-web/src/exports/ActivityIndicator/index.js
index 76d81634..68d62ea6 100644
--- a/packages/react-native-web/src/exports/ActivityIndicator/index.js
+++ b/packages/react-native-web/src/exports/ActivityIndicator/index.js
@@ -86,7 +86,7 @@ const styles = StyleSheet.create({
   },
   animation: {
     animationDuration: '0.75s',
-    animationName: [
+    animationKeyframes: [
       {
         '0%': { transform: [{ rotate: '0deg' }] },
         '100%': { transform: [{ rotate: '360deg' }] }
diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
index d5b6eb6f..8bcfdeac 100644
--- a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
@@ -11,10 +11,13 @@ exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`]
 exports[`AppRegistry getApplication returns "element" and "getStyleElement" 2`] = `
 "<style id=\\"react-native-stylesheet\\">@media all {
 [stylesheet-group=\\"0\\"]{}
-:focus:not([data-rn-focusvisible-x92cna]){outline: none;}
 html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
 body{margin:0;}
 button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
 input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+}
+@media all {
+[stylesheet-group=\\"0.1\\"]{}
+:focus:not([data-focusvisible-polyfill]){outline: none;}
 }</style>"
 `;
diff --git a/packages/react-native-web/src/exports/Picker/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Picker/__tests__/__snapshots__/index-test.js.snap
index a5a042ce..0d7419ca 100644
--- a/packages/react-native-web/src/exports/Picker/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/Picker/__tests__/__snapshots__/index-test.js.snap
@@ -10,7 +10,7 @@ exports[`components/Picker prop "children" items 1`] = `
 
 exports[`components/Picker prop "children" renders items 1`] = `
 <select
-  className="rn-fontFamily-14xgk7a rn-fontSize-7cikom rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw"
+  className="rn-fontFamily-1qd0xha rn-fontSize-7cikom rn-margin-crgep1"
   data-focusable={true}
   onChange={[Function]}
 >
diff --git a/packages/react-native-web/src/exports/ProgressBar/index.js b/packages/react-native-web/src/exports/ProgressBar/index.js
index 61926d3c..08e35d24 100644
--- a/packages/react-native-web/src/exports/ProgressBar/index.js
+++ b/packages/react-native-web/src/exports/ProgressBar/index.js
@@ -94,7 +94,7 @@ const styles = StyleSheet.create({
   },
   animation: {
     animationDuration: '1s',
-    animationName: [
+    animationKeyframes: [
       {
         '0%': { transform: [{ translateX: '-100%' }] },
         '100%': { transform: [{ translateX: '400%' }] }
diff --git a/packages/react-native-web/src/exports/StyleSheet/ReactNativeStyleResolver.js b/packages/react-native-web/src/exports/StyleSheet/ReactNativeStyleResolver.js
index 69e576f2..cf5898c2 100644
--- a/packages/react-native-web/src/exports/StyleSheet/ReactNativeStyleResolver.js
+++ b/packages/react-native-web/src/exports/StyleSheet/ReactNativeStyleResolver.js
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2016-present, Nicolas Gallagher.
+ * Copyright (c) Nicolas Gallagher.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -13,13 +13,17 @@
  */
 
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
-import createReactDOMStyle from './createReactDOMStyle';
+import createCSSStyleSheet from './createCSSStyleSheet';
+import createCompileableStyle from './createCompileableStyle';
+import createOrderedCSSStyleSheet from './createOrderedCSSStyleSheet';
 import flattenArray from '../../modules/flattenArray';
 import flattenStyle from './flattenStyle';
 import I18nManager from '../I18nManager';
 import i18nStyle from './i18nStyle';
-import { prefixInlineStyles } from '../../modules/prefixStyles';
-import StyleSheetManager from './StyleSheetManager';
+import { atomic, inline, stringifyValueWithProperty } from './compile';
+import initialRules from './initialRules';
+import modality from './modality';
+import { STYLE_ELEMENT_ID, STYLE_GROUPS } from './constants';
 
 const emptyObject = {};
 
@@ -27,33 +31,65 @@ export default class ReactNativeStyleResolver {
   _init() {
     this.cache = { ltr: {}, rtl: {}, rtlNoSwap: {} };
     this.injectedCache = { ltr: {}, rtl: {}, rtlNoSwap: {} };
-    this.styleSheetManager = new StyleSheetManager();
+    this.sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(STYLE_ELEMENT_ID));
+    this._lookupCache = {
+      byClassName: {},
+      byProp: {}
+    };
   }
 
   constructor() {
     this._init();
+    modality(rule => this.sheet.insert(rule, STYLE_GROUPS.modality));
+    initialRules.forEach(rule => {
+      this.sheet.insert(rule, STYLE_GROUPS.reset);
+    });
+  }
+
+  _addToCache(className, prop, value) {
+    const cache = this._lookupCache;
+    if (!cache.byProp[prop]) {
+      cache.byProp[prop] = {};
+    }
+    cache.byProp[prop][value] = className;
+    cache.byClassName[className] = { prop, value };
+  }
+
+  getClassName(prop, value) {
+    const val = stringifyValueWithProperty(value, prop);
+    const cache = this._lookupCache.byProp;
+    return cache[prop] && cache[prop].hasOwnProperty(val) && cache[prop][val];
+  }
+
+  getDeclaration(className) {
+    const cache = this._lookupCache.byClassName;
+    return cache[className] || emptyObject;
   }
 
   getStyleSheet() {
     // reset state on the server so critical css is always the result
-    const sheet = this.styleSheetManager.getStyleSheet();
+    const textContent = this.sheet.getTextContent();
     if (!canUseDOM) {
       this._init();
     }
-    return sheet;
+    return {
+      id: STYLE_ELEMENT_ID,
+      textContent
+    };
   }
 
   _injectRegisteredStyle(id) {
     const { doLeftAndRightSwapInRTL, isRTL } = I18nManager;
     const dir = isRTL ? (doLeftAndRightSwapInRTL ? 'rtl' : 'rtlNoSwap') : 'ltr';
     if (!this.injectedCache[dir][id]) {
-      const style = flattenStyle(id);
-      const domStyle = createReactDOMStyle(i18nStyle(style));
-      Object.keys(domStyle).forEach(styleProp => {
-        const value = domStyle[styleProp];
-        if (value != null) {
-          this.styleSheetManager.injectDeclaration(styleProp, value);
-        }
+      const style = createCompileableStyle(i18nStyle(flattenStyle(id)));
+      const results = atomic(style);
+      Object.values(results).forEach(({ identifier, property, rules, value }) => {
+        this._addToCache(identifier, property, value);
+        rules.forEach(rule => {
+          const group = STYLE_GROUPS.custom[property] || STYLE_GROUPS.atomic;
+          this.sheet.insert(rule, group);
+        });
       });
       this.injectedCache[dir][id] = true;
     }
@@ -91,7 +127,7 @@ export default class ReactNativeStyleResolver {
         isArrayOfNumbers = false;
       } else {
         if (isArrayOfNumbers) {
-          cacheKey += (id + '-');
+          cacheKey += id + '-';
         }
         this._injectRegisteredStyle(id);
       }
@@ -113,7 +149,7 @@ export default class ReactNativeStyleResolver {
     // Preserves unrecognized class names.
     const { classList: rnClassList, style: rnStyle } = rdomClassList.reduce(
       (styleProps, className) => {
-        const { prop, value } = this.styleSheetManager.getDeclaration(className);
+        const { prop, value } = this.getDeclaration(className);
         if (prop) {
           styleProps.style[prop] = value;
         } else {
@@ -138,7 +174,7 @@ export default class ReactNativeStyleResolver {
     // Next class names take priority over current inline styles
     const style = { ...rdomStyle };
     rdomClassListNext.forEach(className => {
-      const { prop } = this.styleSheetManager.getDeclaration(className);
+      const { prop } = this.getDeclaration(className);
       if (style[prop]) {
         style[prop] = '';
       }
@@ -154,45 +190,50 @@ export default class ReactNativeStyleResolver {
    */
   _resolveStyle(style) {
     const flatStyle = flattenStyle(style);
-    const domStyle = createReactDOMStyle(i18nStyle(flatStyle));
+    const localizedStyle = createCompileableStyle(i18nStyle(flatStyle));
 
-    const props = Object.keys(domStyle).reduce(
-      (props, styleProp) => {
-        const value = domStyle[styleProp];
-        if (value != null) {
-          const className = this.styleSheetManager.getClassName(styleProp, value);
-          if (className) {
-            props.classList.push(className);
-          } else {
-            // Certain properties and values are not transformed by 'createReactDOMStyle' as they
-            // require more complex transforms into multiple CSS rules. Here we assume that StyleManager
-            // can bind these styles to a className, and prevent them becoming invalid inline-styles.
-            if (
-              styleProp === 'pointerEvents' ||
-              styleProp === 'placeholderTextColor' ||
-              styleProp === 'animationName'
-            ) {
-              const className = this.styleSheetManager.injectDeclaration(styleProp, value);
-              if (className) {
-                props.classList.push(className);
-              }
+    const props = Object.keys(localizedStyle)
+      .sort()
+      .reduce(
+        (props, styleProp) => {
+          const value = localizedStyle[styleProp];
+          if (value != null) {
+            const className = this.getClassName(styleProp, value);
+            if (className) {
+              props.classList.push(className);
             } else {
-              if (!props.style) {
-                props.style = {};
+              // Certain properties and values are not transformed by 'createReactDOMStyle' as they
+              // require more complex transforms into multiple CSS rules. Here we assume that StyleManager
+              // can bind these styles to a className, and prevent them becoming invalid inline-styles.
+              if (
+                styleProp === 'pointerEvents' ||
+                styleProp === 'placeholderTextColor' ||
+                styleProp === 'animationKeyframes'
+              ) {
+                const a = atomic({ [styleProp]: value });
+                Object.values(a).forEach(({ identifier, rules }) => {
+                  props.classList.push(identifier);
+                  rules.forEach(rule => {
+                    this.sheet.insert(rule, STYLE_GROUPS.atomic);
+                  });
+                });
+              } else {
+                if (!props.style) {
+                  props.style = {};
+                }
+                // 4x slower render
+                props.style[styleProp] = value;
               }
-              // 4x slower render
-              props.style[styleProp] = value;
             }
           }
-        }
-        return props;
-      },
-      { classList: [] }
-    );
+          return props;
+        },
+        { classList: [] }
+      );
 
     props.className = classListToString(props.classList);
     if (props.style) {
-      props.style = prefixInlineStyles(props.style);
+      props.style = inline(props.style);
     }
     return props;
   }
diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js b/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js
deleted file mode 100644
index beaa607b..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * Copyright (c) 2016-present, Nicolas Gallagher.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @noflow
- */
-
-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
-import createAtomicRules from './createAtomicRules';
-import hash from '../../vendor/hash';
-import initialRules from './initialRules';
-import createOrderedCSSStyleSheet from './createOrderedCSSStyleSheet';
-import modality from './modality';
-
-const emptyObject = {};
-const STYLE_ELEMENT_ID = 'react-native-stylesheet';
-
-const createClassName = (prop, value) => {
-  const hashed = hash(prop + normalizeValue(value));
-  return process.env.NODE_ENV !== 'production' ? `rn-${prop}-${hashed}` : `rn-${hashed}`;
-};
-
-const createCSSStyleSheet = () => {
-  const id = STYLE_ELEMENT_ID;
-
-  let element;
-  element = document.getElementById(id);
-  if (!element) {
-    element = document.createElement('style');
-    element.setAttribute('id', id);
-    const head = document.head;
-    if (head) {
-      head.insertBefore(element, head.firstChild);
-    }
-  }
-  return element.sheet;
-};
-
-const normalizeValue = value => (typeof value === 'object' ? JSON.stringify(value) : value);
-
-export default class StyleSheetManager {
-  _cache = {
-    byClassName: {},
-    byProp: {}
-  };
-
-  constructor() {
-    this._sheet = createOrderedCSSStyleSheet(canUseDOM ? createCSSStyleSheet() : null);
-    modality(rule => this._sheet.insert(rule, 0));
-    initialRules.forEach(rule => {
-      this._sheet.insert(rule, 0);
-    });
-  }
-
-  getClassName(prop, value) {
-    const val = normalizeValue(value);
-    const cache = this._cache.byProp;
-    return cache[prop] && cache[prop].hasOwnProperty(val) && cache[prop][val];
-  }
-
-  getDeclaration(className) {
-    const cache = this._cache.byClassName;
-    return cache[className] || emptyObject;
-  }
-
-  getStyleSheet() {
-    const textContent = this._sheet.getTextContent();
-
-    return {
-      id: STYLE_ELEMENT_ID,
-      textContent
-    };
-  }
-
-  injectDeclaration(prop, value): string {
-    const val = normalizeValue(value);
-    let className = this.getClassName(prop, val);
-    if (!className) {
-      className = createClassName(prop, val);
-      this._addToCache(className, prop, val);
-      const rules = createAtomicRules(`.${className}`, prop, value);
-      rules.forEach(rule => {
-        this._sheet.insert(rule, 1);
-      });
-    }
-    return className;
-  }
-
-  _addToCache(className, prop, value) {
-    const cache = this._cache;
-    if (!cache.byProp[prop]) {
-      cache.byProp[prop] = {};
-    }
-    cache.byProp[prop][value] = className;
-    cache.byClassName[className] = { prop, value };
-  }
-}
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/StyleSheetManager-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/StyleSheetManager-test.js
deleted file mode 100644
index f6979495..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/StyleSheetManager-test.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/* eslint-env jasmine, jest */
-
-import StyleSheetManager from '../StyleSheetManager';
-
-let styleSheetManager;
-
-describe('StyleSheet/StyleSheetManager', () => {
-  beforeEach(() => {
-    styleSheetManager = new StyleSheetManager();
-  });
-
-  test('getClassName', () => {
-    expect(styleSheetManager.getClassName('pointerEvents', 'box-only')).toMatchSnapshot();
-    const className = styleSheetManager.injectDeclaration('width', '100px');
-    expect(styleSheetManager.getClassName('width', '100px')).toEqual(className);
-  });
-
-  test('getDeclaration', () => {
-    const className = styleSheetManager.injectDeclaration('width', '100px');
-    expect(styleSheetManager.getDeclaration(className)).toEqual({
-      prop: 'width',
-      value: '100px'
-    });
-  });
-
-  test('getStyleSheet', () => {
-    expect(styleSheetManager.getStyleSheet()).toEqual(
-      expect.objectContaining({
-        id: expect.any(String),
-        textContent: expect.any(String)
-      })
-    );
-  });
-
-  test('injectDeclaration', () => {
-    styleSheetManager._sheet.insertRuleOnce = (rule, position) => {
-      // check for regressions in CSS write path (e.g., 0 => 0px)
-      expect(rule.indexOf('-webkit-flex-shrink:0;')).not.toEqual(-1);
-    };
-    styleSheetManager.injectDeclaration('flexShrink', 0);
-  });
-});
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/ReactNativeStyleResolver-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/ReactNativeStyleResolver-test.js.snap
index fe72af72..d985f74b 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/ReactNativeStyleResolver-test.js.snap
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/ReactNativeStyleResolver-test.js.snap
@@ -34,60 +34,42 @@ Object {
 exports[`StyleSheet/ReactNativeStyleResolver resolve with register, resolves to className 1`] = `
 Object {
   "classList": Array [
-    "rn-borderTopColor-3vzq9n",
-    "rn-borderRightColor-ycnuvz",
-    "rn-borderBottomColor-wqks8h",
-    "rn-borderLeftColor-3se2kx",
-    "rn-borderTopWidth-13yce4e",
-    "rn-borderRightWidth-fnigne",
-    "rn-borderBottomWidth-ndvcnb",
-    "rn-borderLeftWidth-gxnn5r",
+    "rn-borderColor-4a18lf",
+    "rn-borderWidth-1yadl64",
     "rn-left-1tsx3h3",
     "rn-opacity-icoktb",
     "rn-position-u8s1d",
     "rn-width-b8lwoo",
   ],
-  "className": "rn-borderTopColor-3vzq9n rn-borderRightColor-ycnuvz rn-borderBottomColor-wqks8h rn-borderLeftColor-3se2kx rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-b8lwoo",
+  "className": "rn-borderColor-4a18lf rn-borderWidth-1yadl64 rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-b8lwoo",
 }
 `;
 
 exports[`StyleSheet/ReactNativeStyleResolver resolve with register, resolves to className 2`] = `
 Object {
   "classList": Array [
-    "rn-borderTopColor-3vzq9n",
-    "rn-borderRightColor-ycnuvz",
-    "rn-borderBottomColor-wqks8h",
-    "rn-borderLeftColor-3se2kx",
-    "rn-borderTopWidth-13yce4e",
-    "rn-borderRightWidth-fnigne",
-    "rn-borderBottomWidth-ndvcnb",
-    "rn-borderLeftWidth-gxnn5r",
+    "rn-borderColor-4a18lf",
+    "rn-borderWidth-1yadl64",
     "rn-left-1tsx3h3",
     "rn-opacity-icoktb",
     "rn-position-u8s1d",
     "rn-width-l0gwng",
   ],
-  "className": "rn-borderTopColor-3vzq9n rn-borderRightColor-ycnuvz rn-borderBottomColor-wqks8h rn-borderLeftColor-3se2kx rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-l0gwng",
+  "className": "rn-borderColor-4a18lf rn-borderWidth-1yadl64 rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-l0gwng",
 }
 `;
 
 exports[`StyleSheet/ReactNativeStyleResolver resolve with register, resolves to className 3`] = `
 Object {
   "classList": Array [
-    "rn-borderTopColor-3vzq9n",
-    "rn-borderRightColor-ycnuvz",
-    "rn-borderBottomColor-wqks8h",
-    "rn-borderLeftColor-3se2kx",
-    "rn-borderTopWidth-13yce4e",
-    "rn-borderRightWidth-fnigne",
-    "rn-borderBottomWidth-ndvcnb",
-    "rn-borderLeftWidth-gxnn5r",
+    "rn-borderColor-4a18lf",
+    "rn-borderWidth-1yadl64",
     "rn-left-1tsx3h3",
     "rn-opacity-icoktb",
     "rn-position-u8s1d",
     "rn-width-b8lwoo",
   ],
-  "className": "rn-borderTopColor-3vzq9n rn-borderRightColor-ycnuvz rn-borderBottomColor-wqks8h rn-borderLeftColor-3se2kx rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-b8lwoo",
+  "className": "rn-borderColor-4a18lf rn-borderWidth-1yadl64 rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-b8lwoo",
 }
 `;
 
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetManager-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetManager-test.js.snap
deleted file mode 100644
index 427fbd54..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetManager-test.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyleSheet/StyleSheetManager getClassName 1`] = `undefined`;
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
new file mode 100644
index 00000000..8c838305
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap
@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyleSheet/compile atomic converts style to atomic CSS 1`] = `
+Object {
+  "rn-animationDirection-1kmv48j": Object {
+    "identifier": "rn-animationDirection-1kmv48j",
+    "property": "animationDirection",
+    "rules": Array [
+      ".rn-animationDirection-1kmv48j { -webkit-animation-direction: alternate, alternate-reverse; animation-direction: alternate, alternate-reverse; }",
+    ],
+    "value": "[\\"alternate\\",\\"alternate-reverse\\"]",
+  },
+  "rn-animationKeyframes-zacbmr": Object {
+    "identifier": "rn-animationKeyframes-zacbmr",
+    "property": "animationKeyframes",
+    "rules": Array [
+      ".rn-animationKeyframes-zacbmr { -webkit-animation-name: r-animation-8jhqzh, r-animation-5azpl5; animation-name: r-animation-8jhqzh, r-animation-5azpl5; }",
+      "@-webkit-keyframes r-animation-8jhqzh {
+0% { top: 0px; }
+50% { top: 5px; }
+100% { top: 10px; }
+}",
+      "@keyframes r-animation-8jhqzh {
+0% { top: 0px; }
+50% { top: 5px; }
+100% { top: 10px; }
+}",
+      "@-webkit-keyframes r-animation-5azpl5 {
+from { left: 0px; }
+to { left: 10px; }
+}",
+      "@keyframes r-animation-5azpl5 {
+from { left: 0px; }
+to { left: 10px; }
+}",
+    ],
+    "value": "[{\\"0%\\":{\\"top\\":0},\\"50%\\":{\\"top\\":5},\\"100%\\":{\\"top\\":10}},{\\"from\\":{\\"left\\":0},\\"to\\":{\\"left\\":10}}]",
+  },
+  "rn-fontFamily-1qd0xha": Object {
+    "identifier": "rn-fontFamily-1qd0xha",
+    "property": "fontFamily",
+    "rules": Array [
+      ".rn-fontFamily-1qd0xha { font-family: system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif; }",
+    ],
+    "value": "System",
+  },
+  "rn-marginHorizontal-vlx1xi": Object {
+    "identifier": "rn-marginHorizontal-vlx1xi",
+    "property": "marginHorizontal",
+    "rules": Array [
+      ".rn-marginHorizontal-vlx1xi { margin-left: 10px; margin-right: 10px; }",
+    ],
+    "value": "10px",
+  },
+  "rn-placeholderTextColor-1418aci": Object {
+    "identifier": "rn-placeholderTextColor-1418aci",
+    "property": "placeholderTextColor",
+    "rules": Array [
+      ".rn-placeholderTextColor-1418aci::-webkit-input-placeholder { color: rgba(128,128,128,1.00); opacity: 1; }",
+      ".rn-placeholderTextColor-1418aci::-moz-placeholder { color: rgba(128,128,128,1.00); opacity: 1; }",
+      ".rn-placeholderTextColor-1418aci:-ms-input-placeholder { color: rgba(128,128,128,1.00); opacity: 1; }",
+      ".rn-placeholderTextColor-1418aci::placeholder { color: rgba(128,128,128,1.00); opacity: 1; }",
+    ],
+    "value": "gray",
+  },
+  "rn-pointerEvents-ah5dr5": Object {
+    "identifier": "rn-pointerEvents-ah5dr5",
+    "property": "pointerEvents",
+    "rules": Array [
+      ".rn-pointerEvents-ah5dr5 > * { pointer-events: none; }",
+      ".rn-pointerEvents-ah5dr5 { pointer-events: auto !important; }",
+    ],
+    "value": "box-only",
+  },
+  "rn-transform-1ehiua4": Object {
+    "identifier": "rn-transform-1ehiua4",
+    "property": "transform",
+    "rules": Array [
+      ".rn-transform-1ehiua4 { -webkit-transform: translateX(50px); transform: translateX(50px); }",
+    ],
+    "value": "[{\\"translateX\\":50,\\"scale\\":-1}]",
+  },
+}
+`;
+
+exports[`StyleSheet/compile classic converts style to classic CSS 1`] = `
+Object {
+  "css-text-1jr0ypv": Object {
+    "identifier": "css-text-1jr0ypv",
+    "rules": Array [
+      "@-webkit-keyframes r-animation-8jhqzh {
+0% { top: 0px; }
+50% { top: 5px; }
+100% { top: 10px; }
+}",
+      "@keyframes r-animation-8jhqzh {
+0% { top: 0px; }
+50% { top: 5px; }
+100% { top: 10px; }
+}",
+      "@-webkit-keyframes r-animation-5azpl5 {
+from { left: 0px; }
+to { left: 10px; }
+}",
+      "@keyframes r-animation-5azpl5 {
+from { left: 0px; }
+to { left: 10px; }
+}",
+      ".css-text-1jr0ypv { -webkit-animation-direction: alternate, alternate-reverse; -webkit-animation-name: r-animation-8jhqzh, r-animation-5azpl5; -webkit-transform: translateX(50px); animation-direction: alternate, alternate-reverse; animation-name: r-animation-8jhqzh, r-animation-5azpl5; font: 14px system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif; margin-left: 10px; margin-right: 10px; transform: translateX(50px); }",
+    ],
+  },
+}
+`;
+
+exports[`StyleSheet/compile inline converts style to inline styles 1`] = `
+Object {
+  "WebkitFlexBasis": "auto",
+  "WebkitFlexShrink": 1,
+  "display": "flex",
+  "flexBasis": "auto",
+  "flexShrink": 1,
+  "marginLeft": "10px",
+  "marginRight": "10px",
+  "msFlexNegative": 1,
+  "msFlexPreferredSize": "auto",
+}
+`;
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createAtomicRules.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createAtomicRules.js.snap
deleted file mode 100644
index 1a5c1b5f..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createAtomicRules.js.snap
+++ /dev/null
@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyleSheet/createAtomicRules transforms custom "animationName" declaration 1`] = `
-Array [
-  "@-webkit-keyframes rn-anim-2k74q5{0%{top:0px}50%{top:5px}100%{top:10px}}",
-  "@keyframes rn-anim-2k74q5{0%{top:0px}50%{top:5px}100%{top:10px}}",
-  "@-webkit-keyframes rn-anim-zc91cv{from{left:0px}to{left:10px}}",
-  "@keyframes rn-anim-zc91cv{from{left:0px}to{left:10px}}",
-  ".test{-webkit-animation-name:rn-anim-2k74q5,rn-anim-zc91cv;animation-name:rn-anim-2k74q5,rn-anim-zc91cv}",
-]
-`;
-
-exports[`StyleSheet/createAtomicRules transforms custom "placeholderTextColor" declaration 1`] = `
-Array [
-  "@media all {.test::-webkit-input-placeholder{color:gray;opacity:1}.test::-moz-placeholder{color:gray;opacity:1}.test:-ms-input-placeholder{color:gray;opacity:1}.test::placeholder{color:gray;opacity:1}}",
-]
-`;
-
-exports[`StyleSheet/createAtomicRules transforms custom "pointerEvents" declaration 1`] = `
-Array [
-  ".test > *{pointer-events:none}",
-  ".test{pointer-events:auto !important}",
-]
-`;
-
-exports[`StyleSheet/createAtomicRules transforms standard declarations to a single rule 1`] = `
-Array [
-  ".test{margin:0px}",
-]
-`;
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createRuleBlock-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createRuleBlock-test.js.snap
deleted file mode 100644
index 27f6f997..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createRuleBlock-test.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyleSheet/createRuleBlock generates correct css 1`] = `"-webkit-transition-duration:0.1s;border-width-left:2px;border-width-right:3px;box-shadow:1px 1px 1px 1px #000;position:absolute;transition-duration:0.1s"`;
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/compile-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/compile-test.js
new file mode 100644
index 00000000..4d2c7fe8
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/compile-test.js
@@ -0,0 +1,67 @@
+/* eslint-env jasmine, jest */
+
+'use strict';
+
+import { atomic, classic, inline } from '../compile';
+
+describe('StyleSheet/compile', () => {
+  describe('atomic', () => {
+    test('converts style to atomic CSS', () => {
+      const result = atomic({
+        animationDirection: ['alternate', 'alternate-reverse'],
+        animationKeyframes: [
+          { '0%': { top: 0 }, '50%': { top: 5 }, '100%': { top: 10 } },
+          { from: { left: 0 }, to: { left: 10 } }
+        ],
+        fontFamily: 'System',
+        marginHorizontal: 10,
+        placeholderTextColor: 'gray',
+        pointerEvents: 'box-only',
+        transform: [
+          {
+            translateX: 50,
+            scale: -1
+          }
+        ]
+      });
+
+      expect(result).toMatchSnapshot();
+    });
+  });
+
+  describe('classic', () => {
+    test('converts style to classic CSS', () => {
+      const result = classic(
+        {
+          animationDirection: ['alternate', 'alternate-reverse'],
+          animationKeyframes: [
+            { '0%': { top: 0 }, '50%': { top: 5 }, '100%': { top: 10 } },
+            { from: { left: 0 }, to: { left: 10 } }
+          ],
+          marginHorizontal: 10,
+          font: '14px System',
+          transform: [
+            {
+              translateX: 50,
+              scale: -1
+            }
+          ]
+        },
+        'text'
+      );
+      expect(result).toMatchSnapshot();
+    });
+  });
+
+  describe('inline', () => {
+    test('converts style to inline styles', () => {
+      const result = inline({
+        marginHorizontal: 10,
+        display: 'flex',
+        flexShrink: 1
+      });
+
+      expect(result).toMatchSnapshot();
+    });
+  });
+});
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/createAtomicRules.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/createAtomicRules.js
deleted file mode 100644
index 2cce2e90..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/createAtomicRules.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/* eslint-env jasmine, jest */
-
-import createAtomicRules from '../createAtomicRules';
-
-describe('StyleSheet/createAtomicRules', () => {
-  test('transforms standard declarations to a single rule', () => {
-    expect(createAtomicRules('.test', 'margin', 0)).toMatchSnapshot();
-  });
-
-  test('transforms custom "animationName" declaration', () => {
-    const value = [
-      { '0%': { top: 0 }, '50%': { top: 5 }, '100%': { top: 10 } },
-      { from: { left: 0 }, to: { left: 10 } }
-    ];
-    expect(createAtomicRules('.test', 'animationName', value)).toMatchSnapshot();
-  });
-
-  test('transforms custom "pointerEvents" declaration', () => {
-    expect(createAtomicRules('.test', 'pointerEvents', 'box-only')).toMatchSnapshot();
-  });
-
-  test('transforms custom "placeholderTextColor" declaration', () => {
-    expect(createAtomicRules('.test', 'placeholderTextColor', 'gray')).toMatchSnapshot();
-  });
-});
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/createCompileableStyle-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/createCompileableStyle-test.js
new file mode 100644
index 00000000..f4fc7954
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/createCompileableStyle-test.js
@@ -0,0 +1,120 @@
+/* eslint-env jasmine, jest */
+
+import createCompileableStyle from '../createCompileableStyle';
+
+const ignoreableStyle = {
+  borderWidthLeft: 2,
+  borderWidth: 1,
+  borderWidthRight: 3,
+  display: 'flex',
+  marginVertical: 0,
+  opacity: 0,
+  resizeMode: 'contain'
+};
+
+describe('StyleSheet/createCompileableStyle', () => {
+  test('forwards valid styles', () => {
+    const noop = createCompileableStyle(ignoreableStyle);
+    expect(noop).toEqual(ignoreableStyle);
+  });
+
+  describe('preprocesses multiple shadow styles into a single declaration', () => {
+    test('shadowColor only', () => {
+      const style = { shadowColor: 'red' };
+      const resolved = createCompileableStyle(style);
+
+      expect(resolved).toEqual({
+        boxShadow: '0px 0px 0px rgba(255,0,0,1.00)'
+      });
+    });
+
+    test('shadowColor and shadowOpacity only', () => {
+      expect(createCompileableStyle({ shadowColor: 'red', shadowOpacity: 0.5 })).toEqual({
+        boxShadow: '0px 0px 0px rgba(255,0,0,0.50)'
+      });
+    });
+
+    test('shadowOffset only', () => {
+      expect(createCompileableStyle({ shadowOffset: { width: 1, height: 2 } })).toEqual({
+        boxShadow: '1px 2px 0px rgba(0,0,0,1.00)'
+      });
+    });
+
+    test('shadowRadius only', () => {
+      expect(createCompileableStyle({ shadowRadius: 5 })).toEqual({
+        boxShadow: '0px 0px 5px rgba(0,0,0,1.00)'
+      });
+    });
+
+    test('shadowOffset, shadowRadius, shadowColor', () => {
+      expect(
+        createCompileableStyle({
+          shadowColor: 'rgba(50,60,70,0.5)',
+          shadowOffset: { width: 1, height: 2 },
+          shadowOpacity: 0.5,
+          shadowRadius: 3
+        })
+      ).toEqual({
+        boxShadow: '1px 2px 3px rgba(50,60,70,0.25)'
+      });
+    });
+  });
+
+  describe('preprocesses multiple textShadow styles into a single declaration', () => {
+    test('textShadowColor only', () => {
+      expect(createCompileableStyle({ textShadowColor: 'red' })).toEqual({});
+    });
+
+    test('textShadowOffset only', () => {
+      expect(createCompileableStyle({ textShadowOffset: { width: 1, height: 2 } })).toEqual({});
+    });
+
+    test('textShadowRadius only', () => {
+      expect(createCompileableStyle({ textShadowRadius: 5 })).toEqual({});
+    });
+
+    test('textShadowColor and textShadowOffset only', () => {
+      expect(
+        createCompileableStyle({
+          textShadowColor: 'red',
+          textShadowOffset: { width: 0, height: 0 }
+        })
+      ).toEqual({});
+      expect(
+        createCompileableStyle({
+          textShadowColor: 'red',
+          textShadowOffset: { width: -1, height: 0 }
+        })
+      ).toEqual({
+        textShadow: '-1px 0px 0px rgba(255,0,0,1.00)'
+      });
+      expect(
+        createCompileableStyle({
+          textShadowColor: 'red',
+          textShadowOffset: { width: 1, height: 2 }
+        })
+      ).toEqual({
+        textShadow: '1px 2px 0px rgba(255,0,0,1.00)'
+      });
+    });
+
+    test('textShadowColor and textShadowRadius only', () => {
+      expect(createCompileableStyle({ textShadowColor: 'red', textShadowRadius: 0 })).toEqual({});
+      expect(createCompileableStyle({ textShadowColor: 'red', textShadowRadius: 5 })).toEqual({
+        textShadow: '0px 0px 5px rgba(255,0,0,1.00)'
+      });
+    });
+
+    test('textShadowColor, textShadowOffset, textShadowRadius', () => {
+      expect(
+        createCompileableStyle({
+          textShadowColor: 'rgba(50,60,70,0.50)',
+          textShadowOffset: { width: 5, height: 10 },
+          textShadowRadius: 15
+        })
+      ).toEqual({
+        textShadow: '5px 10px 15px rgba(50,60,70,0.50)'
+      });
+    });
+  });
+});
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js
index 77bf7147..1eb78a87 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js
@@ -160,48 +160,6 @@ describe('StyleSheet/createReactDOMStyle', () => {
     });
   });
 
-  describe('shadow styles', () => {
-    test('shadowColor only', () => {
-      const style = { shadowColor: 'red' };
-      const resolved = createReactDOMStyle(style);
-
-      expect(resolved).toEqual({
-        boxShadow: '0px 0px 0px rgba(255,0,0,1.00)'
-      });
-    });
-
-    test('shadowColor and shadowOpacity only', () => {
-      expect(createReactDOMStyle({ shadowColor: 'red', shadowOpacity: 0.5 })).toEqual({
-        boxShadow: '0px 0px 0px rgba(255,0,0,0.50)'
-      });
-    });
-
-    test('shadowOffset only', () => {
-      expect(createReactDOMStyle({ shadowOffset: { width: 1, height: 2 } })).toEqual({
-        boxShadow: '1px 2px 0px rgba(0,0,0,1.00)'
-      });
-    });
-
-    test('shadowRadius only', () => {
-      expect(createReactDOMStyle({ shadowRadius: 5 })).toEqual({
-        boxShadow: '0px 0px 5px rgba(0,0,0,1.00)'
-      });
-    });
-
-    test('shadowOffset, shadowRadius, shadowColor', () => {
-      expect(
-        createReactDOMStyle({
-          shadowColor: 'rgba(50,60,70,0.5)',
-          shadowOffset: { width: 1, height: 2 },
-          shadowOpacity: 0.5,
-          shadowRadius: 3
-        })
-      ).toEqual({
-        boxShadow: '1px 2px 3px rgba(50,60,70,0.25)'
-      });
-    });
-  });
-
   test('textAlignVertical', () => {
     expect(
       createReactDOMStyle({
@@ -212,94 +170,13 @@ describe('StyleSheet/createReactDOMStyle', () => {
     });
   });
 
-  describe('textDecoration styles', () => {
-    test('textDecorationColor only', () => {
-      expect(
-        createReactDOMStyle({
-          textDecorationColor: 'red'
-        })
-      ).toEqual({});
-    });
-
-    test('textDecorationLine only', () => {
-      expect(
-        createReactDOMStyle({
-          textDecorationLine: 'underline'
-        })
-      ).toEqual({
-        textDecoration: 'underline'
-      });
-    });
-
-    test('textDecorationStyle only', () => {
-      expect(
-        createReactDOMStyle({
-          textDecorationStyle: 'dashed'
-        })
-      ).toEqual({});
-    });
-
-    test('textDecorationColor, textDecorationLine, textDecorationStyle', () => {
-      expect(
-        createReactDOMStyle({
-          textDecorationColor: 'red',
-          textDecorationLine: 'underline',
-          textDecorationStyle: 'dashed'
-        })
-      ).toEqual({
-        textDecoration: 'underline',
-        textDecorationColor: 'rgba(255,0,0,1.00)',
-        textDecorationStyle: 'dashed'
-      });
-    });
-  });
-
-  describe('textShadow styles', () => {
-    test('textShadowColor only', () => {
-      expect(createReactDOMStyle({ textShadowColor: 'red' })).toEqual({});
-    });
-
-    test('textShadowOffset only', () => {
-      expect(createReactDOMStyle({ textShadowOffset: { width: 1, height: 2 } })).toEqual({});
-    });
-
-    test('textShadowRadius only', () => {
-      expect(createReactDOMStyle({ textShadowRadius: 5 })).toEqual({});
-    });
-
-    test('textShadowColor and textShadowOffset only', () => {
-      expect(
-        createReactDOMStyle({ textShadowColor: 'red', textShadowOffset: { width: 0, height: 0 } })
-      ).toEqual({});
-      expect(
-        createReactDOMStyle({ textShadowColor: 'red', textShadowOffset: { width: -1, height: 0 } })
-      ).toEqual({
-        textShadow: '-1px 0px 0px rgba(255,0,0,1.00)'
-      });
-      expect(
-        createReactDOMStyle({ textShadowColor: 'red', textShadowOffset: { width: 1, height: 2 } })
-      ).toEqual({
-        textShadow: '1px 2px 0px rgba(255,0,0,1.00)'
-      });
-    });
-
-    test('textShadowColor and textShadowRadius only', () => {
-      expect(createReactDOMStyle({ textShadowColor: 'red', textShadowRadius: 0 })).toEqual({});
-      expect(createReactDOMStyle({ textShadowColor: 'red', textShadowRadius: 5 })).toEqual({
-        textShadow: '0px 0px 5px rgba(255,0,0,1.00)'
-      });
-    });
-
-    test('textShadowColor, textShadowOffset, textShadowRadius', () => {
-      expect(
-        createReactDOMStyle({
-          textShadowColor: 'rgba(50,60,70,0.50)',
-          textShadowOffset: { width: 5, height: 10 },
-          textShadowRadius: 15
-        })
-      ).toEqual({
-        textShadow: '5px 10px 15px rgba(50,60,70,0.50)'
-      });
+  test('textDecorationLine', () => {
+    expect(
+      createReactDOMStyle({
+        textDecorationLine: 'underline'
+      })
+    ).toEqual({
+      textDecoration: 'underline'
     });
   });
 
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/createRuleBlock-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/createRuleBlock-test.js
deleted file mode 100644
index 0b020206..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/createRuleBlock-test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/* eslint-env jasmine, jest */
-
-import createRuleBlock from '../createRuleBlock';
-
-describe('StyleSheet/createRuleBlock', () => {
-  test('generates correct css', () => {
-    const style = {
-      boxShadow: '1px 1px 1px 1px #000',
-      borderWidthLeft: 2,
-      borderWidthRight: 3,
-      position: 'absolute',
-      transitionDuration: '0.1s'
-    };
-    expect(createRuleBlock(style)).toMatchSnapshot();
-  });
-});
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js
index 0f18ea44..b39d7b07 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js
@@ -24,13 +24,28 @@ describe('StyleSheet', () => {
 
   describe('compose', () => {
     test('returns array when neither style is falsey', () => {
-      expect(StyleSheet.compose(1, 2)).toEqual([1, 2]);
+      expect(
+        StyleSheet.compose(
+          1,
+          2
+        )
+      ).toEqual([1, 2]);
     });
     test('returns style1 when style2 is falsey', () => {
-      expect(StyleSheet.compose(1, null)).toBe(1);
+      expect(
+        StyleSheet.compose(
+          1,
+          null
+        )
+      ).toBe(1);
     });
     test('returns style2 when style1 is falsey', () => {
-      expect(StyleSheet.compose(null, 2)).toBe(2);
+      expect(
+        StyleSheet.compose(
+          null,
+          2
+        )
+      ).toBe(2);
     });
   });
 
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/normalizeValue-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/normalizeValue-test.js
deleted file mode 100644
index 41900c2e..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/normalizeValue-test.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/* eslint-env jasmine, jest */
-
-import normalizeValue from '../normalizeValue';
-
-describe('StyleSheet/normalizeValue', () => {
-  test('normalizes property values requiring units', () => {
-    expect(normalizeValue('margin', 0)).toEqual('0px');
-  });
-  test('ignores unitless property values', () => {
-    expect(normalizeValue('flexGrow', 1)).toEqual(1);
-    expect(normalizeValue('scale', 2)).toEqual(2);
-  });
-});
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/normalizeValueWithProperty-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/normalizeValueWithProperty-test.js
new file mode 100644
index 00000000..db09c27b
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/normalizeValueWithProperty-test.js
@@ -0,0 +1,20 @@
+/* eslint-env jasmine, jest */
+
+import normalizeValueWithProperty from '../normalizeValueWithProperty';
+
+describe('StyleSheet/normalizeValueWithProperty', () => {
+  test('normalizes property values requiring units', () => {
+    expect(normalizeValueWithProperty(0, 'margin')).toEqual('0px');
+  });
+  test('normalizes colors', () => {
+    expect(normalizeValueWithProperty('red', 'color')).toEqual('rgba(255,0,0,1.00)');
+  });
+  test('ignores unitless property values', () => {
+    expect(normalizeValueWithProperty(1, 'flexGrow')).toEqual(1);
+    expect(normalizeValueWithProperty(2, 'scale')).toEqual(2);
+  });
+  test('ignores objects and arrays', () => {
+    expect(normalizeValueWithProperty([])).toEqual([]);
+    expect(normalizeValueWithProperty({})).toEqual({});
+  });
+});
diff --git a/packages/react-native-web/src/exports/StyleSheet/compile.js b/packages/react-native-web/src/exports/StyleSheet/compile.js
new file mode 100644
index 00000000..11cdfa40
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/compile.js
@@ -0,0 +1,262 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+import createReactDOMStyle from './createReactDOMStyle';
+import hash from '../../vendor/hash';
+import hyphenateStyleName from 'hyphenate-style-name';
+import normalizeValueWithProperty from './normalizeValueWithProperty';
+import prefixStyles, { prefixInlineStyles } from '../../modules/prefixStyles';
+
+type Value = Object | Array<any> | string | number;
+type Style = { [key: string]: Value };
+type Rule = string;
+type Rules = Array<Rule>;
+type RulesData = {|
+  property?: string,
+  value?: string,
+  identifier: string,
+  rules: Rules
+|};
+type CompilerOutput = { [key: string]: RulesData };
+
+const cache = {
+  get(property, value) {
+    if (
+      cache[property] != null &&
+      cache[property].hasOwnProperty(value) &&
+      cache[property][value] != null
+    ) {
+      return cache[property][value];
+    }
+  },
+  set(property, value, object) {
+    if (cache[property] == null) {
+      cache[property] = {};
+    }
+    return (cache[property][value] = object);
+  }
+};
+
+/**
+ * Compile style to atomic CSS rules.
+ */
+export function atomic(style: Style): CompilerOutput {
+  return Object.keys(style)
+    .sort()
+    .reduce((acc, property) => {
+      const value = style[property];
+      if (value != null) {
+        const valueString = stringifyValueWithProperty(value, property);
+        const cachedResult = cache.get(property, valueString);
+        if (cachedResult != null) {
+          const { identifier } = cachedResult;
+          acc[identifier] = cachedResult;
+        } else {
+          const identifier = createIdentifier('rn', property, value);
+          const rules = createAtomicRules(identifier, property, value);
+          const cachedResult = cache.set(property, valueString, {
+            property,
+            value: stringifyValueWithProperty(value, property),
+            identifier,
+            rules
+          });
+          acc[identifier] = cachedResult;
+        }
+      }
+      return acc;
+    }, {});
+}
+
+/**
+ * Compile simple style object to classic CSS rules.
+ * No support for 'placeholderTextColor' or 'pointerEvents'.
+ */
+export function classic(style: Style, name: string): CompilerOutput {
+  const identifier = createIdentifier('css', name, style);
+  const { animationKeyframes, ...rest } = style;
+
+  const rules = [];
+  const selector = `.${identifier}`;
+  let animationName;
+  if (animationKeyframes != null) {
+    const { animationNames, rules: keyframesRules } = processKeyframesValue(animationKeyframes);
+    animationName = animationNames.join(', ');
+    rules.push(...keyframesRules);
+  }
+  const block = createDeclarationBlock({ ...rest, animationName });
+  rules.push(`${selector} ${block}`);
+
+  return { [identifier]: { identifier, rules } };
+}
+
+/**
+ * Compile simple style object to inline DOM styles.
+ * No support for 'animationKeyframes', 'placeholderTextColor', or 'pointerEvents'.
+ */
+export function inline(style: Style) {
+  return prefixInlineStyles(createReactDOMStyle(style));
+}
+
+/**
+ * Create a value string that normalizes different input values with a common
+ * output.
+ */
+export function stringifyValueWithProperty(value: Value, property: ?string) {
+  // e.g., 0 => '0px', 'black' => 'rgba(0,0,0,1)'
+  const normalizedValue = normalizeValueWithProperty(value, property);
+  return typeof normalizedValue !== 'string' ? JSON.stringify(normalizedValue) : normalizedValue;
+}
+
+/**
+ * Create the Atomic CSS rules needed for a given StyleSheet rule.
+ * Translates StyleSheet declarations to CSS.
+ */
+function createAtomicRules(identifier: string, property, value): Rules {
+  const rules = [];
+  const selector = `.${identifier}`;
+
+  // Handle non-standard properties and object values that require multiple
+  // CSS rules to be created.
+  switch (property) {
+    case 'animationKeyframes': {
+      const { animationNames, rules: keyframesRules } = processKeyframesValue(value);
+      const block = createDeclarationBlock({ animationName: animationNames.join(', ') });
+      rules.push(`${selector} ${block}`, ...keyframesRules);
+      break;
+    }
+
+    case 'placeholderTextColor': {
+      const block = createDeclarationBlock({ color: value, opacity: 1 });
+      rules.push(
+        `${selector}::-webkit-input-placeholder ${block}`,
+        `${selector}::-moz-placeholder ${block}`,
+        `${selector}:-ms-input-placeholder ${block}`,
+        `${selector}::placeholder ${block}`
+      );
+      break;
+    }
+
+    // See #513
+    case 'pointerEvents': {
+      let finalValue = value;
+      if (value === 'auto' || value === 'box-only') {
+        finalValue = 'auto !important';
+        if (value === 'box-only') {
+          const block = createDeclarationBlock({ [property]: 'none' });
+          rules.push(`${selector} > * ${block}`);
+        }
+      } else if (value === 'none' || value === 'box-none') {
+        finalValue = 'none !important';
+        if (value === 'box-none') {
+          const block = createDeclarationBlock({ [property]: 'auto' });
+          rules.push(`${selector} > * ${block}`);
+        }
+      }
+      const block = createDeclarationBlock({ [property]: finalValue });
+      rules.push(`${selector} ${block}`);
+      break;
+    }
+
+    default: {
+      const block = createDeclarationBlock({ [property]: value });
+      rules.push(`${selector} ${block}`);
+      break;
+    }
+  }
+
+  return rules;
+}
+
+/**
+ * Creates a CSS declaration block from a StyleSheet object.
+ */
+function createDeclarationBlock(style: Style) {
+  const domStyle = prefixStyles(createReactDOMStyle(style));
+  const declarationsString = Object.keys(domStyle)
+    .map(property => {
+      const value = domStyle[property];
+      const prop = hyphenateStyleName(property);
+      // The prefixer may return an array of values:
+      // { display: [ '-webkit-flex', 'flex' ] }
+      // to represent "fallback" declarations
+      // { display: -webkit-flex; display: flex; }
+      if (Array.isArray(value)) {
+        return value.map(v => `${prop}: ${v}`).join(';');
+      } else {
+        return `${prop}: ${value}`;
+      }
+    })
+    // Once properties are hyphenated, this will put the vendor
+    // prefixed and short-form properties first in the list.
+    .sort()
+    .join('; ');
+
+  return `{ ${declarationsString}; }`;
+}
+
+/**
+ * An identifier is associated with a unique set of styles.
+ */
+function createIdentifier(prefix, name, value) {
+  const hashedString = hash(name + stringifyValueWithProperty(value, name));
+  return process.env.NODE_ENV !== 'production'
+    ? `${prefix}-${name}-${hashedString}`
+    : `${prefix}-${hashedString}`;
+}
+
+/**
+ * Create individual CSS keyframes rules.
+ */
+function createKeyframes(keyframes) {
+  const prefixes = ['-webkit-', ''];
+  const identifier = createIdentifier('r', 'animation', keyframes);
+
+  const steps =
+    '{\n' +
+    Object.keys(keyframes)
+      .map(stepName => {
+        const rule = keyframes[stepName];
+        const block = createDeclarationBlock(rule);
+        return `${stepName} ${block}`;
+      })
+      .join('\n') +
+    '\n}';
+
+  const rules = prefixes.map(prefix => {
+    return `@${prefix}keyframes ${identifier} ${steps}`;
+  });
+  return { identifier, rules };
+}
+
+/**
+ * Create CSS keyframes rules and names from a StyleSheet keyframes object.
+ */
+function processKeyframesValue(keyframesValue) {
+  if (typeof keyframesValue === 'number') {
+    throw new Error('Invalid CSS keyframes type');
+  }
+
+  const animationNames = [];
+  const rules = [];
+  const value = Array.isArray(keyframesValue) ? keyframesValue : [keyframesValue];
+
+  value.forEach(keyframes => {
+    if (typeof keyframes === 'string') {
+      // Support external animation libraries (identifiers only)
+      animationNames.push(keyframes);
+    } else {
+      // Create rules for each of the keyframes
+      const { identifier, rules: keyframesRules } = createKeyframes(keyframes);
+      animationNames.push(identifier);
+      rules.push(...keyframesRules);
+    }
+  });
+
+  return { animationNames, rules };
+}
diff --git a/packages/react-native-web/src/exports/StyleSheet/constants.js b/packages/react-native-web/src/exports/StyleSheet/constants.js
new file mode 100644
index 00000000..cca49e3d
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/constants.js
@@ -0,0 +1,25 @@
+export const STYLE_ELEMENT_ID = 'react-native-stylesheet';
+
+export const STYLE_GROUPS = {
+  reset: 0,
+  modality: 0.1,
+  classic: 1,
+  atomic: 2.2,
+  custom: {
+    borderColor: 2,
+    borderRadius: 2,
+    borderStyle: 2,
+    borderWidth: 2,
+    display: 2,
+    flex: 2,
+    margin: 2,
+    overflow: 2,
+    overscrollBehavior: 2,
+    padding: 2,
+
+    marginHorizontal: 2.1,
+    marginVertical: 2.1,
+    paddingHorizontal: 2.1,
+    paddingVertical: 2.1
+  }
+};
diff --git a/packages/react-native-web/src/exports/StyleSheet/createAtomicRules.js b/packages/react-native-web/src/exports/StyleSheet/createAtomicRules.js
deleted file mode 100644
index da2a0ceb..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/createAtomicRules.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import createKeyframesRules from './createKeyframesRules';
-import createRuleBlock from './createRuleBlock';
-
-const createAtomicRules = (selector, prop, value) => {
-  const rules = [];
-
-  // Handle custom properties and custom values that require additional rules
-  // to be created.
-  switch (prop) {
-    // See #513
-    case 'pointerEvents': {
-      let val = value;
-      if (value === 'auto' || value === 'box-only') {
-        val = 'auto !important';
-        if (value === 'box-only') {
-          const block = createRuleBlock({ [prop]: 'none' });
-          rules.push(`${selector} > *{${block}}`);
-        }
-      } else if (value === 'none' || value === 'box-none') {
-        val = 'none !important';
-        if (value === 'box-none') {
-          const block = createRuleBlock({ [prop]: 'auto' });
-          rules.push(`${selector} > *{${block}}`);
-        }
-      }
-      const block = createRuleBlock({ [prop]: val });
-      rules.push(`${selector}{${block}}`);
-      break;
-    }
-
-    case 'placeholderTextColor': {
-      const block = createRuleBlock({ color: value, opacity: 1 });
-      rules.push(
-        '@media all {' +
-          `${selector}::-webkit-input-placeholder{${block}}` +
-          `${selector}::-moz-placeholder{${block}}` +
-          `${selector}:-ms-input-placeholder{${block}}` +
-          `${selector}::placeholder{${block}}` +
-          '}'
-      );
-      break;
-    }
-
-    case 'animationName': {
-      if (typeof value === 'string') {
-        // add a className referencing the animation
-        const block = createRuleBlock({ [prop]: value });
-        rules.push(`${selector}{${block}}`);
-      } else {
-        const animationNames = [];
-
-        // add the keyframes needed to implement each value
-        value.forEach(keyframes => {
-          if (typeof keyframes === 'string') {
-            animationNames.push(keyframes);
-          } else {
-            const { identifier, rules: keyframesRules } = createKeyframesRules(keyframes);
-            keyframesRules.forEach(rule => {
-              rules.push(rule);
-            });
-            animationNames.push(identifier);
-          }
-        });
-
-        // add a className referencing the animation identifiers
-        const block = createRuleBlock({ [prop]: animationNames.join(',') });
-        rules.push(`${selector}{${block}}`);
-      }
-
-      break;
-    }
-
-    default: {
-      const block = createRuleBlock({ [prop]: value });
-      rules.push(`${selector}{${block}}`);
-    }
-  }
-
-  return rules;
-};
-
-export default createAtomicRules;
diff --git a/packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js b/packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js
new file mode 100644
index 00000000..fab09042
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+
+// $FlowFixMe: HTMLStyleElement is incorrectly typed - https://github.com/facebook/flow/issues/2696
+export default function createCSSStyleSheet(id: string): ?CSSStyleSheet {
+  if (canUseDOM) {
+    const element = document.getElementById(id);
+    if (element != null) {
+      // $FlowFixMe: HTMLElement is incorrectly typed
+      return element.sheet;
+    } else {
+      const element = document.createElement('style');
+      element.setAttribute('id', id);
+      const head = document.head;
+      if (head) {
+        head.insertBefore(element, head.firstChild);
+      }
+      return element.sheet;
+    }
+  } else {
+    return null;
+  }
+}
diff --git a/packages/react-native-web/src/exports/StyleSheet/createCompileableStyle.js b/packages/react-native-web/src/exports/StyleSheet/createCompileableStyle.js
new file mode 100644
index 00000000..fcd59daf
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/createCompileableStyle.js
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+import normalizeValueWithProperty from './normalizeValueWithProperty';
+import resolveShadowValue from './resolveShadowValue';
+
+const defaultOffset = { height: 0, width: 0 };
+
+function boxShadowReducer(resolvedStyle, style) {
+  const { boxShadow } = style;
+  const shadow = resolveShadowValue(style);
+  if (shadow != null) {
+    resolvedStyle.boxShadow = boxShadow ? `${boxShadow}, ${shadow}` : shadow;
+  }
+}
+
+function textShadowReducer(resolvedStyle, style) {
+  const { textShadowColor, textShadowOffset, textShadowRadius } = style;
+  const { height, width } = textShadowOffset || defaultOffset;
+  const radius = textShadowRadius || 0;
+  const offsetX = normalizeValueWithProperty(width);
+  const offsetY = normalizeValueWithProperty(height);
+  const blurRadius = normalizeValueWithProperty(radius);
+  const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor');
+
+  if (color && (height !== 0 || width !== 0 || radius !== 0)) {
+    resolvedStyle.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`;
+  }
+}
+
+const createCompileableStyle = (styles: Object) => {
+  const {
+    shadowColor,
+    shadowOffset,
+    shadowOpacity,
+    shadowRadius,
+    textShadowColor,
+    textShadowOffset,
+    textShadowRadius,
+    ...nextStyles
+  } = styles;
+
+  if (
+    shadowColor != null ||
+    shadowOffset != null ||
+    shadowOpacity != null ||
+    shadowRadius != null
+  ) {
+    boxShadowReducer(nextStyles, styles);
+  }
+
+  if (textShadowColor != null || textShadowOffset != null || textShadowRadius != null) {
+    textShadowReducer(nextStyles, styles);
+  }
+  return nextStyles;
+};
+
+export default createCompileableStyle;
diff --git a/packages/react-native-web/src/exports/StyleSheet/createKeyframesRules.js b/packages/react-native-web/src/exports/StyleSheet/createKeyframesRules.js
deleted file mode 100644
index 537f5d54..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/createKeyframesRules.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import createRuleBlock from './createRuleBlock';
-import createReactDOMStyle from './createReactDOMStyle';
-import i18nStyle from './i18nStyle';
-import hash from '../../vendor/hash';
-
-const hashObject = obj => hash(JSON.stringify(obj));
-
-const createIdentifier = obj => {
-  const hashed = hashObject(obj);
-  return process.env.NODE_ENV !== 'production' ? `rn-anim-${hashed}` : `rn-${hashed}`;
-};
-
-const prefixes = ['-webkit-', ''];
-
-const makeBlock = rule => {
-  const domStyle = createReactDOMStyle(i18nStyle(rule));
-  return createRuleBlock(domStyle);
-};
-
-const makeSteps = keyframes =>
-  Object.keys(keyframes)
-    .map(stepName => {
-      const rule = keyframes[stepName];
-      const block = makeBlock(rule);
-      return `${stepName}{${block}}`;
-    })
-    .join('');
-
-const createKeyframesRules = (keyframes: Object): Array<String> => {
-  const identifier = createIdentifier(keyframes);
-  const rules = prefixes.map(prefix => {
-    return `@${prefix}keyframes ${identifier}{${makeSteps(keyframes)}}`;
-  });
-  return { identifier, rules };
-};
-
-export default createKeyframesRules;
diff --git a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
index fc4394fb..e41890d5 100644
--- a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
+++ b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2016-present, Nicolas Gallagher.
+ * Copyright (c) Nicolas Gallagher.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -7,9 +7,7 @@
  * @noflow
  */
 
-import normalizeColor from '../../modules/normalizeColor';
-import normalizeValue from './normalizeValue';
-import resolveShadowValue from './resolveShadowValue';
+import normalizeValueWithProperty from './normalizeValueWithProperty';
 
 /**
  * The browser implements the CSS cascade, where the order of properties is a
@@ -44,16 +42,6 @@ const styleShortFormProperties = {
   writingDirection: ['direction']
 };
 
-const colorProps = {
-  backgroundColor: true,
-  borderColor: true,
-  borderTopColor: true,
-  borderRightColor: true,
-  borderBottomColor: true,
-  borderLeftColor: true,
-  color: true
-};
-
 const borderWidthProps = {
   borderWidth: true,
   borderTopWidth: true,
@@ -66,57 +54,6 @@ const monospaceFontStack = 'monospace, monospace';
 const systemFontStack =
   'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif';
 
-const defaultOffset = { height: 0, width: 0 };
-
-/**
- * Shadow
- */
-
-const resolveShadow = (resolvedStyle, style) => {
-  const { boxShadow } = style;
-  const shadow = resolveShadowValue(style);
-  resolvedStyle.boxShadow = boxShadow ? `${boxShadow}, ${shadow}` : shadow;
-};
-
-/**
- * Text Decoration
- */
-
-const resolveTextDecoration = (resolvedStyle, style) => {
-  const { textDecorationColor, textDecorationLine, textDecorationStyle } = style;
-  const color = normalizeColor(textDecorationColor);
-
-  if (textDecorationLine) {
-    // use 'text-decoration' for browsers that support CSS2 text-decoration (e.g., IE, Edge)
-    resolvedStyle.textDecoration = textDecorationLine;
-
-    if (textDecorationColor) {
-      resolvedStyle.textDecorationColor = color;
-    }
-    if (textDecorationStyle) {
-      resolvedStyle.textDecorationStyle = textDecorationStyle;
-    }
-  }
-};
-
-/**
- * Text Shadow
- */
-
-const resolveTextShadow = (resolvedStyle, style) => {
-  const { textShadowColor, textShadowOffset, textShadowRadius } = style;
-  const { height, width } = textShadowOffset || defaultOffset;
-  const radius = textShadowRadius || 0;
-  const offsetX = normalizeValue(null, width);
-  const offsetY = normalizeValue(null, height);
-  const blurRadius = normalizeValue(null, radius);
-  const color = normalizeColor(textShadowColor);
-
-  if (color && (height !== 0 || width !== 0 || radius !== 0)) {
-    resolvedStyle.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`;
-  }
-};
-
 /**
  * Transform
  */
@@ -125,7 +62,7 @@ const resolveTextShadow = (resolvedStyle, style) => {
 // { translateX: 20 } => 'translateX(20px)'
 const mapTransform = transform => {
   const type = Object.keys(transform)[0];
-  const value = normalizeValue(type, transform[type]);
+  const value = normalizeValueWithProperty(transform[type], type);
   return `${type}(${value})`;
 };
 
@@ -149,174 +86,143 @@ const resolveTransform = (resolvedStyle, style) => {
  * Reducer
  */
 
-const createReducer = (style, styleProps) => {
-  let hasResolvedShadow = false;
-  let hasResolvedTextDecoration = false;
-  let hasResolvedTextShadow = false;
-
-  return (resolvedStyle, prop) => {
-    let value = normalizeValue(prop, style[prop]);
-
-    // Make sure the default border width is explicitly set to '0' to avoid
-    // falling back to any unwanted user-agent styles.
-    if (borderWidthProps[prop]) {
-      value = value == null ? normalizeValue(null, 0) : value;
-    }
-
-    // Normalize color values
-    if (colorProps[prop]) {
-      value = normalizeColor(value);
-    }
-
-    // Ignore everything else with a null value
-    if (value == null) {
-      return resolvedStyle;
-    }
-
-    switch (prop) {
-      // Ignore some React Native styles
-      case 'aspectRatio':
-      case 'elevation':
-      case 'overlayColor':
-      case 'resizeMode':
-      case 'tintColor': {
-        break;
-      }
-
-      // TODO: remove once this issue is fixed
-      // https://github.com/rofrischmann/inline-style-prefixer/issues/159
-      case 'backgroundClip': {
-        if (value === 'text') {
-          resolvedStyle.backgroundClip = value;
-          resolvedStyle.WebkitBackgroundClip = value;
-        }
-        break;
-      }
-
-      case 'display': {
-        resolvedStyle.display = value;
-        // A flex container in React Native has these defaults which should be
-        // set only if there is no otherwise supplied flex style.
-        if (style.display === 'flex' && style.flex == null) {
-          if (style.flexShrink == null) {
-            resolvedStyle.flexShrink = 0;
-          }
-          if (style.flexBasis == null) {
-            resolvedStyle.flexBasis = 'auto';
-          }
-        }
-        break;
-      }
-
-      // The 'flex' property value in React Native must be a positive integer,
-      // 0, or -1.
-      case 'flex': {
-        if (value > 0) {
-          resolvedStyle.flexGrow = value;
-          resolvedStyle.flexShrink = 1;
-          resolvedStyle.flexBasis = '0%';
-        } else if (value === 0) {
-          resolvedStyle.flexGrow = 0;
-          resolvedStyle.flexShrink = 0;
-          resolvedStyle.flexBasis = '0%';
-        } else if (value === -1) {
-          resolvedStyle.flexGrow = 0;
-          resolvedStyle.flexShrink = 1;
-          resolvedStyle.flexBasis = 'auto';
-        }
-        break;
-      }
-
-      case 'fontFamily': {
-        if (value.indexOf('System') > -1) {
-          const stack = value.split(/\s*,\s*/);
-          stack[stack.indexOf('System')] = systemFontStack;
-          resolvedStyle.fontFamily = stack.join(', ');
-        } else if (value === 'monospace') {
-          resolvedStyle.fontFamily = monospaceFontStack;
-        } else {
-          resolvedStyle.fontFamily = value;
-        }
-        break;
-      }
-
-      case 'fontVariant': {
-        if (Array.isArray(value) && value.length > 0) {
-          resolvedStyle.fontVariant = value.join(' ');
-        }
-        break;
-      }
-
-      case 'shadowColor':
-      case 'shadowOffset':
-      case 'shadowOpacity':
-      case 'shadowRadius': {
-        if (!hasResolvedShadow) {
-          resolveShadow(resolvedStyle, style);
-        }
-        hasResolvedShadow = true;
-        break;
-      }
-
-      case 'textAlignVertical': {
-        resolvedStyle.verticalAlign = value === 'center' ? 'middle' : value;
-        break;
-      }
-
-      case 'textDecorationColor':
-      case 'textDecorationLine':
-      case 'textDecorationStyle': {
-        if (!hasResolvedTextDecoration) {
-          resolveTextDecoration(resolvedStyle, style);
-        }
-        hasResolvedTextDecoration = true;
-        break;
-      }
-
-      case 'textShadowColor':
-      case 'textShadowOffset':
-      case 'textShadowRadius': {
-        if (!hasResolvedTextShadow) {
-          resolveTextShadow(resolvedStyle, style);
-        }
-        hasResolvedTextShadow = true;
-        break;
-      }
-
-      case 'transform':
-      case 'transformMatrix': {
-        resolveTransform(resolvedStyle, style);
-        break;
-      }
-
-      default: {
-        const longFormProperties = styleShortFormProperties[prop];
-        if (longFormProperties) {
-          longFormProperties.forEach((longForm, i) => {
-            // The value of any longform property in the original styles takes
-            // precedence over the shortform's value.
-            if (styleProps.indexOf(longForm) === -1) {
-              resolvedStyle[longForm] = value;
-            }
-          });
-        } else {
-          resolvedStyle[prop] = value;
-        }
-      }
-    }
-
-    return resolvedStyle;
-  };
-};
-
 const createReactDOMStyle = style => {
   if (!style) {
     return emptyObject;
   }
-  const styleProps = Object.keys(style);
-  const sortedStyleProps = styleProps.sort();
-  const reducer = createReducer(style, styleProps);
-  const resolvedStyle = sortedStyleProps.reduce(reducer, {});
+
+  const resolvedStyle = {};
+
+  Object.keys(style)
+    .sort()
+    .forEach(prop => {
+      let value = normalizeValueWithProperty(style[prop], prop);
+
+      // Make sure the default border width is explicitly set to '0' to avoid
+      // falling back to any unwanted user-agent styles.
+      if (borderWidthProps[prop]) {
+        value = value == null ? normalizeValueWithProperty(0) : value;
+      }
+
+      // Ignore everything else with a null value
+      if (value == null) {
+        return;
+      }
+
+      switch (prop) {
+        // Ignore some React Native styles
+        case 'aspectRatio':
+        case 'elevation':
+        case 'overlayColor':
+        case 'resizeMode':
+        case 'tintColor': {
+          break;
+        }
+
+        // TODO: remove once this issue is fixed
+        // https://github.com/rofrischmann/inline-style-prefixer/issues/159
+        case 'backgroundClip': {
+          if (value === 'text') {
+            resolvedStyle.backgroundClip = value;
+            resolvedStyle.WebkitBackgroundClip = value;
+          }
+          break;
+        }
+
+        case 'display': {
+          resolvedStyle.display = value;
+          // A flex container in React Native has these defaults which should be
+          // set only if there is no otherwise supplied flex style.
+          if (style.display === 'flex' && style.flex == null) {
+            if (style.flexShrink == null) {
+              resolvedStyle.flexShrink = 0;
+            }
+            if (style.flexBasis == null) {
+              resolvedStyle.flexBasis = 'auto';
+            }
+          }
+          break;
+        }
+
+        // The 'flex' property value in React Native must be a positive integer,
+        // 0, or -1.
+        case 'flex': {
+          if (value > 0) {
+            resolvedStyle.flexGrow = value;
+            resolvedStyle.flexShrink = 1;
+            resolvedStyle.flexBasis = '0%';
+          } else if (value === 0) {
+            resolvedStyle.flexGrow = 0;
+            resolvedStyle.flexShrink = 0;
+            resolvedStyle.flexBasis = '0%';
+          } else if (value === -1) {
+            resolvedStyle.flexGrow = 0;
+            resolvedStyle.flexShrink = 1;
+            resolvedStyle.flexBasis = 'auto';
+          }
+          break;
+        }
+
+        case 'font': {
+          resolvedStyle[prop] = value.replace('System', systemFontStack);
+          break;
+        }
+
+        case 'fontFamily': {
+          if (value.indexOf('System') > -1) {
+            const stack = value.split(/,\s*/);
+            stack[stack.indexOf('System')] = systemFontStack;
+            resolvedStyle[prop] = stack.join(', ');
+          } else if (value === 'monospace') {
+            resolvedStyle[prop] = monospaceFontStack;
+          } else {
+            resolvedStyle[prop] = value;
+          }
+          break;
+        }
+
+        case 'fontVariant': {
+          if (Array.isArray(value) && value.length > 0) {
+            resolvedStyle.fontVariant = value.join(' ');
+          }
+          break;
+        }
+
+        case 'textAlignVertical': {
+          resolvedStyle.verticalAlign = value === 'center' ? 'middle' : value;
+          break;
+        }
+
+        case 'textDecorationLine': {
+          // use 'text-decoration' for browsers that only support CSS2
+          // text-decoration (e.g., IE, Edge)
+          resolvedStyle.textDecoration = value;
+          break;
+        }
+
+        case 'transform':
+        case 'transformMatrix': {
+          resolveTransform(resolvedStyle, style);
+          break;
+        }
+
+        default: {
+          const longFormProperties = styleShortFormProperties[prop];
+          if (longFormProperties) {
+            longFormProperties.forEach((longForm, i) => {
+              // The value of any longform property in the original styles takes
+              // precedence over the shortform's value.
+              if (typeof style[longForm] === 'undefined') {
+                resolvedStyle[longForm] = value;
+              }
+            });
+          } else {
+            resolvedStyle[prop] = Array.isArray(value) ? value.join(', ') : value;
+          }
+        }
+      }
+    });
+
   return resolvedStyle;
 };
 
diff --git a/packages/react-native-web/src/exports/StyleSheet/createRuleBlock.js b/packages/react-native-web/src/exports/StyleSheet/createRuleBlock.js
deleted file mode 100644
index 34e5b5c3..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/createRuleBlock.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright (c) 2016-present, Nicolas Gallagher.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @noflow
- */
-
-import hyphenateStyleName from 'hyphenate-style-name';
-import mapKeyValue from '../../modules/mapKeyValue';
-import normalizeValue from './normalizeValue';
-import prefixStyles from '../../modules/prefixStyles';
-
-const createDeclarationString = (prop, val) => {
-  const name = hyphenateStyleName(prop);
-  const value = normalizeValue(prop, val);
-  if (Array.isArray(val)) {
-    return val.map(v => `${name}:${v}`).join(';');
-  }
-  return `${name}:${value}`;
-};
-
-/**
- * Generates valid CSS rule body from a JS object
- *
- * createRuleBlock({ width: 20, color: 'blue' });
- * // => 'color:blue;width:20px'
- */
-const createRuleBlock = style =>
-  mapKeyValue(prefixStyles(style), createDeclarationString)
-    .sort()
-    .join(';');
-
-export default createRuleBlock;
diff --git a/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js b/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/react-native-web/src/exports/StyleSheet/modality.js b/packages/react-native-web/src/exports/StyleSheet/modality.js
index bb7b276c..b3170153 100644
--- a/packages/react-native-web/src/exports/StyleSheet/modality.js
+++ b/packages/react-native-web/src/exports/StyleSheet/modality.js
@@ -19,12 +19,8 @@
  */
 
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
-import hash from '../../vendor/hash';
 
-const focusVisibleAttributeName =
-  'data-rn-' +
-  (process.env.NODE_ENV !== 'production' ? 'focusvisible-' : '') +
-  hash('focusvisible');
+const focusVisibleAttributeName = 'data-focusvisible-polyfill';
 
 const rule = `:focus:not([${focusVisibleAttributeName}]){outline: none;}`;
 
diff --git a/packages/react-native-web/src/exports/StyleSheet/normalizeValue.js b/packages/react-native-web/src/exports/StyleSheet/normalizeValue.js
deleted file mode 100644
index 72b367b8..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/normalizeValue.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2016-present, Nicolas Gallagher.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @noflow
- */
-
-import unitlessNumbers from '../../modules/unitlessNumbers';
-
-const normalizeValue = (property: string, value) => {
-  if (!unitlessNumbers[property] && typeof value === 'number') {
-    value = `${value}px`;
-  }
-  return value;
-};
-
-export default normalizeValue;
diff --git a/packages/react-native-web/src/exports/StyleSheet/normalizeValueWithProperty.js b/packages/react-native-web/src/exports/StyleSheet/normalizeValueWithProperty.js
new file mode 100644
index 00000000..fec021f2
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/normalizeValueWithProperty.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+import unitlessNumbers from '../../modules/unitlessNumbers';
+import normalizeColor from '../../modules/normalizeColor';
+
+const colorProps = {
+  backgroundColor: true,
+  borderColor: true,
+  borderTopColor: true,
+  borderRightColor: true,
+  borderBottomColor: true,
+  borderLeftColor: true,
+  color: true,
+  shadowColor: true,
+  textDecorationColor: true,
+  textShadowColor: true
+};
+
+export default function normalizeValueWithProperty(value: any, property?: ?string) {
+  if ((property == null || !unitlessNumbers[property]) && typeof value === 'number') {
+    value = `${value}px`;
+  } else if (property != null && colorProps[property]) {
+    value = normalizeColor(value);
+  }
+  return value;
+}
diff --git a/packages/react-native-web/src/exports/StyleSheet/resolveShadowValue.js b/packages/react-native-web/src/exports/StyleSheet/resolveShadowValue.js
index 2126d597..c585add7 100644
--- a/packages/react-native-web/src/exports/StyleSheet/resolveShadowValue.js
+++ b/packages/react-native-web/src/exports/StyleSheet/resolveShadowValue.js
@@ -8,16 +8,16 @@
  */
 
 import normalizeColor from '../../modules/normalizeColor';
-import normalizeValue from './normalizeValue';
+import normalizeValueWithProperty from './normalizeValueWithProperty';
 
 const defaultOffset = { height: 0, width: 0 };
 
 const resolveShadowValue = (style: Object) => {
   const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style;
   const { height, width } = shadowOffset || defaultOffset;
-  const offsetX = normalizeValue(null, width);
-  const offsetY = normalizeValue(null, height);
-  const blurRadius = normalizeValue(null, shadowRadius || 0);
+  const offsetX = normalizeValueWithProperty(width);
+  const offsetY = normalizeValueWithProperty(height);
+  const blurRadius = normalizeValueWithProperty(shadowRadius || 0);
   const color = normalizeColor(shadowColor || 'black', shadowOpacity);
   if (color) {
     return `${offsetX} ${offsetY} ${blurRadius} ${color}`;
diff --git a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap
index 4ff86733..d0d30875 100644
--- a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`components/Text prop "onPress" 1`] = `
 <div
-  className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-cursor-1loqt21 rn-display-1471scf rn-fontFamily-14xgk7a rn-fontSize-1b43r93 rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640 rn-lineHeight-t9a87b rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
+  className="rn-borderWidth-1yadl64 rn-boxSizing-deolkf rn-color-homxoj rn-cursor-1loqt21 rn-display-1471scf rn-fontFamily-1qd0xha rn-fontSize-1b43r93 rn-fontStyle-o11vmf rn-fontVariant-1kfwfc5 rn-fontWeight-gul640 rn-lineHeight-t9a87b rn-margin-crgep1 rn-padding-t60dpp rn-textDecorationLine-13wfysu rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
   data-focusable={true}
   dir="auto"
   onClick={[Function]}
@@ -13,14 +13,14 @@ exports[`components/Text prop "onPress" 1`] = `
 
 exports[`components/Text prop "selectable" 1`] = `
 <div
-  className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-1471scf rn-fontFamily-14xgk7a rn-fontSize-1b43r93 rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640 rn-lineHeight-t9a87b rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
+  className="rn-borderWidth-1yadl64 rn-boxSizing-deolkf rn-color-homxoj rn-display-1471scf rn-fontFamily-1qd0xha rn-fontSize-1b43r93 rn-fontStyle-o11vmf rn-fontVariant-1kfwfc5 rn-fontWeight-gul640 rn-lineHeight-t9a87b rn-margin-crgep1 rn-padding-t60dpp rn-textDecorationLine-13wfysu rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
   dir="auto"
 />
 `;
 
 exports[`components/Text prop "selectable" 2`] = `
 <div
-  className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-1471scf rn-fontFamily-14xgk7a rn-fontSize-1b43r93 rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640 rn-lineHeight-t9a87b rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-userSelect-lrvibr rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
+  className="rn-borderWidth-1yadl64 rn-boxSizing-deolkf rn-color-homxoj rn-display-1471scf rn-fontFamily-1qd0xha rn-fontSize-1b43r93 rn-fontStyle-o11vmf rn-fontVariant-1kfwfc5 rn-fontWeight-gul640 rn-lineHeight-t9a87b rn-margin-crgep1 rn-padding-t60dpp rn-textDecorationLine-13wfysu rn-userSelect-lrvibr rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
   dir="auto"
 />
 `;
diff --git a/packages/react-native-web/src/modules/AnimationPropTypes/index.js b/packages/react-native-web/src/modules/AnimationPropTypes/index.js
index b62f3e0f..ee909ab8 100644
--- a/packages/react-native-web/src/modules/AnimationPropTypes/index.js
+++ b/packages/react-native-web/src/modules/AnimationPropTypes/index.js
@@ -9,19 +9,27 @@
 
 import { arrayOf, number, object, oneOf, oneOfType, string } from 'prop-types';
 
+const animationDirectionEnum = ['alternate', 'alternate-reverse', 'normal', 'reverse'];
+const animationFillModeEnum = ['none', 'forwards', 'backwards', 'both'];
+const animationPlayStateEnum = ['paused', 'running'];
+
 const AnimationPropTypes = {
-  animationDelay: string,
-  animationDirection: oneOf(['alternate', 'alternate-reverse', 'normal', 'reverse']),
-  animationDuration: string,
-  animationFillMode: oneOf(['none', 'forwards', 'backwards', 'both']),
-  animationIterationCount: oneOfType([number, oneOf(['infinite'])]),
-  animationName: oneOfType([string, arrayOf(oneOfType([string, object]))]),
-  animationPlayState: oneOf(['paused', 'running']),
-  animationTimingFunction: string,
-  transitionDelay: string,
-  transitionDuration: string,
-  transitionProperty: string,
-  transitionTimingFunction: string
+  animationDelay: oneOfType([string, arrayOf(string)]),
+  animationDirection: oneOfType([oneOf(animationDirectionEnum), arrayOf(animationDirectionEnum)]),
+  animationDuration: oneOfType([string, arrayOf(string)]),
+  animationFillMode: oneOfType([oneOf(animationFillModeEnum), arrayOf(animationFillModeEnum)]),
+  animationIterationCount: oneOfType([
+    number,
+    oneOf(['infinite']),
+    arrayOf(oneOfType([number, oneOf(['infinite'])]))
+  ]),
+  animationKeyframes: oneOfType([string, object, arrayOf(oneOfType([string, object]))]),
+  animationPlayState: oneOfType([oneOf(animationPlayStateEnum), arrayOf(animationPlayStateEnum)]),
+  animationTimingFunction: oneOfType([string, arrayOf(string)]),
+  transitionDelay: oneOfType([string, arrayOf(string)]),
+  transitionDuration: oneOfType([string, arrayOf(string)]),
+  transitionProperty: oneOfType([string, arrayOf(string)]),
+  transitionTimingFunction: oneOfType([string, arrayOf(string)])
 };
 
 export default AnimationPropTypes;
diff --git a/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap
index c392263b..0ac71b9a 100644
--- a/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap
@@ -4,8 +4,8 @@ exports[`modules/createDOMProps includes "rel" values for "a" elements (to secur
 
 exports[`modules/createDOMProps includes cursor style for "button" role 1`] = `"rn-cursor-1loqt21"`;
 
-exports[`modules/createDOMProps includes reset styles for "a" elements 1`] = `"rn-backgroundColor-1niwhzg rn-color-homxoj rn-textDecoration-bauka4"`;
+exports[`modules/createDOMProps includes reset styles for "a" elements 1`] = `"rn-backgroundColor-1niwhzg rn-color-homxoj rn-textDecorationLine-13wfysu"`;
 
-exports[`modules/createDOMProps includes reset styles for "button" elements 1`] = `"rn-appearance-30o5oe rn-backgroundColor-1niwhzg rn-color-homxoj rn-fontFamily-poiln3 rn-fontSize-7cikom rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640 rn-lineHeight-t9a87b rn-textAlign-1ttztb7"`;
+exports[`modules/createDOMProps includes reset styles for "button" elements 1`] = `"rn-appearance-30o5oe rn-backgroundColor-1niwhzg rn-color-homxoj rn-fontFamily-poiln3 rn-fontSize-7cikom rn-fontStyle-o11vmf rn-fontVariant-1kfwfc5 rn-fontWeight-gul640 rn-lineHeight-t9a87b rn-textAlign-1ttztb7"`;
 
 exports[`modules/createDOMProps includes reset styles for "ul" elements 1`] = `"rn-listStyle-1ebb2ja"`;
diff --git a/packages/website/storybook/1-components/View/ViewScreen.js b/packages/website/storybook/1-components/View/ViewScreen.js
index effa0e7e..458bac41 100644
--- a/packages/website/storybook/1-components/View/ViewScreen.js
+++ b/packages/website/storybook/1-components/View/ViewScreen.js
@@ -347,8 +347,8 @@ const stylePropTypes = [
   },
   {
     label: 'web',
-    name: 'animationName',
-    typeInfo: 'string | Array<Object>'
+    name: 'animationKeyframes',
+    typeInfo: 'Array<Object|string>'
   },
   {
     label: 'web',
diff --git a/scripts/babel/preset.js b/scripts/babel/preset.js
index c6448e14..57942333 100644
--- a/scripts/babel/preset.js
+++ b/scripts/babel/preset.js
@@ -31,7 +31,7 @@ const createConfig = ({ modules }) => ({
     '@babel/plugin-transform-flow-strip-types',
     ['babel-plugin-transform-react-remove-prop-types', { mode: 'wrap' }],
     ['@babel/plugin-proposal-class-properties', { loose: true }],
-    ['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }],
+    ['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }]
   ].concat(modules ? ['babel-plugin-add-module-exports'] : [])
 });