From b27c9820dbffe1e5a3ffc87d62b1c9c167dbae8c Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Mon, 28 Feb 2022 12:19:33 -0800
Subject: [PATCH] [change] StyleSheet rewrite

* Improves React Native compatibility by making StyleSheet.create the identify function.
* Improves React 18 support by inserting styles on eval.
* Supports use with multiple windows (i.e., iframes) and shadow roots.
* Supports nested LTR/RTL layouts.
* Supports 3rd party compilers and extraction to static CSS.
* Fixes static and dynamic short/longform deduplication.
* Reduces browser support: Safari 10.1+, Chromium Edge, no IE, no legacy Android browsers.
* Removes automatic vendor-prefixing of inline styles (for better perf).
* Removes focus-visible polyfill as modern browsers no longer show focus rings for mouse interactions.

Close #2208
Fix #2138
Fix #2196
Fix #2007
Fix #1517
---
 flow-typed/npm/styleq.js                      |  34 ++
 .../src/__tests__/index-test.js               |  16 +-
 .../__snapshots__/index-test.js.snap          |  48 +--
 .../__snapshots__/index-test.js.snap          |  36 --
 .../AppRegistry/__tests__/index-test.js       | 126 ++++---
 .../AppRegistry/__tests__/index-test.node.js  | 141 ++++++++
 .../exports/AppRegistry/renderApplication.js  |   4 +-
 .../__snapshots__/index-test.js.snap          |  22 +-
 .../__snapshots__/index-test.js.snap          |  36 +-
 .../__snapshots__/index-test.js.snap          |  19 -
 .../Dimensions/__tests__/index-test.js        |  25 +-
 .../I18nManager/__tests__/index-test.js       |  30 --
 .../src/exports/I18nManager/index.js          |  10 +-
 .../__snapshots__/index-test.js.snap          | 108 +++---
 .../src/exports/Image/index.js                |  30 +-
 .../__tests__/{index.js => index-test.js}     |  11 +-
 .../src/exports/ImageBackground/index.js      |   2 +-
 .../__tests__/{index.js => index-test.js}     |   7 +-
 .../__snapshots__/index-test.js.snap          |  47 ++-
 .../__snapshots__/index-test.js.snap          |   8 +-
 .../StyleSheet/ReactNativePropRegistry.js     |  43 ---
 .../src/exports/StyleSheet/StyleSheet.js      |  65 ----
 .../__snapshots__/compile-test.js.snap        | 105 ------
 .../createOrderedCSSStyleSheet-test.js.snap   |  65 ----
 .../createReactDOMStyle-test.js.snap          |  66 ----
 .../createStyleResolver-test.js.snap          | 203 -----------
 .../__snapshots__/flattenStyle-test.js.snap   |  28 --
 .../StyleSheet/__tests__/compile-test.js      |  68 ----
 ...s => compiler-createReactDOMStyle-test.js} |  88 ++++-
 .../__tests__/compiler-preprocess-test.js     | 294 +++++++++++++++
 .../StyleSheet/__tests__/compiler-test.js     | 170 +++++++++
 .../__tests__/createCompileableStyle-test.js  | 120 -------
 .../__tests__/createStyleResolver-test.js     | 109 ------
 ...=> dom-createOrderedCSSStyleSheet-test.js} | 107 ++++--
 .../exports/StyleSheet/__tests__/dom-test.js  |  60 ++++
 .../StyleSheet/__tests__/dom-test.node.js     |  34 ++
 .../StyleSheet/__tests__/flattenStyle-test.js |  39 --
 .../StyleSheet/__tests__/i18nStyle-test.js    | 253 -------------
 .../StyleSheet/__tests__/index-test.js        | 334 ++++++++++++++++--
 .../normalizeValueWithProperty-test.js        |  20 --
 .../StyleSheet/__tests__/validate-test.js     |  42 +++
 .../compiler/createReactDOMStyle.js           | 200 +++++++++++
 .../src/exports/StyleSheet/compiler/hash.js   |  60 ++++
 .../StyleSheet/compiler/hyphenateStyleName.js |  27 ++
 .../{compile.js => compiler/index.js}         | 125 +++----
 .../StyleSheet/compiler/normalizeColor.js     |  31 ++
 .../normalizeValueWithProperty.js             |   4 +-
 .../{i18nStyle.js => compiler/preprocess.js}  | 106 ++++--
 .../{ => compiler}/resolveShadowValue.js      |   2 +-
 .../StyleSheet/compiler/unitlessNumbers.js    |  76 ++++
 .../src/exports/StyleSheet/constants.js       |  59 ----
 .../exports/StyleSheet/createCSSStyleSheet.js |  31 --
 .../StyleSheet/createCompileableStyle.js      |  70 ----
 .../exports/StyleSheet/createReactDOMStyle.js | 190 ----------
 .../exports/StyleSheet/createStyleResolver.js | 254 -------------
 .../src/exports/StyleSheet/css.js             |  26 --
 .../StyleSheet/dom/createCSSStyleSheet.js     |  42 +++
 .../{ => dom}/createOrderedCSSStyleSheet.js   |  24 +-
 .../src/exports/StyleSheet/dom/index.js       |  85 +++++
 .../src/exports/StyleSheet/flattenStyle.js    |  47 ---
 .../src/exports/StyleSheet/index.js           | 177 +++++++++-
 .../src/exports/StyleSheet/initialRules.js    |  20 --
 .../src/exports/StyleSheet/modality.js        | 275 --------------
 .../src/exports/StyleSheet/styleResolver.js   |  12 -
 .../src/exports/StyleSheet/validate.js        |  31 +-
 .../__snapshots__/index-test.js.snap          |  12 +-
 .../__snapshots__/index-test.js.snap          |  50 +--
 .../src/exports/Text/index.js                 |  81 +++--
 .../src/exports/TextInput/index.js            |  28 +-
 .../__snapshots__/index-test.js.snap          |  54 +--
 .../src/exports/View/index.js                 |  31 +-
 .../src/exports/render/index.js               |  17 +-
 .../src/modules/RTLContext/index.js           |  15 +
 .../src/modules/createDOMProps/index.js       |  55 +--
 .../src/modules/flattenArray/index.js         |  27 --
 .../Animated/nodes/AnimatedStyle.js           |   4 +-
 scripts/inline-style-prefixer/create.js       |  19 +-
 77 files changed, 2558 insertions(+), 2882 deletions(-)
 create mode 100644 flow-typed/npm/styleq.js
 delete mode 100644 packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
 create mode 100644 packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js
 delete mode 100644 packages/react-native-web/src/exports/Dimensions/__tests__/__snapshots__/index-test.js.snap
 rename packages/react-native-web/src/exports/ImageBackground/__tests__/{index.js => index-test.js} (78%)
 rename packages/react-native-web/src/exports/Modal/__tests__/{index.js => index-test.js} (99%)
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/ReactNativePropRegistry.js
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/StyleSheet.js
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createOrderedCSSStyleSheet-test.js.snap
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createStyleResolver-test.js.snap
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/flattenStyle-test.js.snap
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/compile-test.js
 rename packages/react-native-web/src/exports/StyleSheet/__tests__/{createReactDOMStyle-test.js => compiler-createReactDOMStyle-test.js} (64%)
 create mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-preprocess-test.js
 create mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-test.js
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/createCompileableStyle-test.js
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/createStyleResolver-test.js
 rename packages/react-native-web/src/exports/StyleSheet/__tests__/{createOrderedCSSStyleSheet-test.js => dom-createOrderedCSSStyleSheet-test.js} (50%)
 create mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/dom-test.js
 create mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/dom-test.node.js
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/flattenStyle-test.js
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/i18nStyle-test.js
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/normalizeValueWithProperty-test.js
 create mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/validate-test.js
 create mode 100644 packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js
 create mode 100644 packages/react-native-web/src/exports/StyleSheet/compiler/hash.js
 create mode 100644 packages/react-native-web/src/exports/StyleSheet/compiler/hyphenateStyleName.js
 rename packages/react-native-web/src/exports/StyleSheet/{compile.js => compiler/index.js} (73%)
 create mode 100644 packages/react-native-web/src/exports/StyleSheet/compiler/normalizeColor.js
 rename packages/react-native-web/src/exports/StyleSheet/{ => compiler}/normalizeValueWithProperty.js (87%)
 rename packages/react-native-web/src/exports/StyleSheet/{i18nStyle.js => compiler/preprocess.js} (57%)
 rename packages/react-native-web/src/exports/StyleSheet/{ => compiler}/resolveShadowValue.js (94%)
 create mode 100644 packages/react-native-web/src/exports/StyleSheet/compiler/unitlessNumbers.js
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/constants.js
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/createCompileableStyle.js
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/css.js
 create mode 100644 packages/react-native-web/src/exports/StyleSheet/dom/createCSSStyleSheet.js
 rename packages/react-native-web/src/exports/StyleSheet/{ => dom}/createOrderedCSSStyleSheet.js (90%)
 create mode 100644 packages/react-native-web/src/exports/StyleSheet/dom/index.js
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/flattenStyle.js
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/initialRules.js
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/modality.js
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/styleResolver.js
 create mode 100644 packages/react-native-web/src/modules/RTLContext/index.js
 delete mode 100644 packages/react-native-web/src/modules/flattenArray/index.js

diff --git a/flow-typed/npm/styleq.js b/flow-typed/npm/styleq.js
new file mode 100644
index 00000000..a77fadf9
--- /dev/null
+++ b/flow-typed/npm/styleq.js
@@ -0,0 +1,34 @@
+type CompiledStyle = {
+  $$css: boolean,
+  [key: string]: string,
+};
+
+type InlineStyle = {
+  [key: string]: mixed,
+};
+
+type EitherStyle = CompiledStyle | InlineStyle;
+
+type StylesArray<+T> = T | $ReadOnlyArray<StylesArray<T>>;
+type Styles = StylesArray<CompiledStyle | InlineStyle | false>;
+type Style<+T = EitherStyle> = StylesArray<false | ?T>;
+
+type StyleqOptions = {
+  disableCache?: boolean,
+  disableMix?: boolean,
+  transform?: (CompiledStyle) => CompiledStyle,
+};
+
+type StyleqResult = [string, InlineStyle | null];
+type Styleq = (styles: Styles) => StyleqResult;
+
+type IStyleq = {
+  (...styles: $ReadOnlyArray<Styles>): StyleqResult,
+  factory: (options?: StyleqOptions) => Styleq,
+};
+
+declare module "styleq" {
+  declare module.exports: {
+    styleq: IStyleq
+  };
+}
diff --git a/packages/dom-event-testing-library/src/__tests__/index-test.js b/packages/dom-event-testing-library/src/__tests__/index-test.js
index faa040e7..58518479 100644
--- a/packages/dom-event-testing-library/src/__tests__/index-test.js
+++ b/packages/dom-event-testing-library/src/__tests__/index-test.js
@@ -1,5 +1,3 @@
-/* eslint-env jasmine, jest */
-
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
@@ -49,7 +47,7 @@ describe('createEventTarget', () => {
     const target = createEventTarget(node);
     expect(target.node).toEqual(node);
     expect(Object.keys(target)).toMatchInlineSnapshot(`
-      Array [
+      [
         "node",
         "blur",
         "click",
@@ -331,9 +329,7 @@ describe('createEventTarget', () => {
   });
 
   /**
-   * Complex event sequences
-   *
-   * ...coming soon
+   * TODO: Complex event sequences
    */
 
   /**
@@ -343,24 +339,28 @@ describe('createEventTarget', () => {
   test('.setBoundingClientRect()', () => {
     const target = createEventTarget(node);
     expect(node.getBoundingClientRect()).toMatchInlineSnapshot(`
-      Object {
+      {
         "bottom": 0,
         "height": 0,
         "left": 0,
         "right": 0,
         "top": 0,
         "width": 0,
+        "x": 0,
+        "y": 0,
       }
     `);
     target.setBoundingClientRect({ x: 10, y: 20, width: 100, height: 200 });
     expect(node.getBoundingClientRect()).toMatchInlineSnapshot(`
-      Object {
+      {
         "bottom": 220,
         "height": 200,
         "left": 10,
         "right": 110,
         "top": 20,
         "width": 100,
+        "x": 10,
+        "y": 20,
       }
     `);
   });
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 5a4bbcb8..51d701c6 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
@@ -5,11 +5,11 @@ exports[`components/ActivityIndicator prop "accessibilityLabel" value is set 1`]
   aria-label="accessibility label"
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
 >
   <div
-    class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -42,11 +42,11 @@ exports[`components/ActivityIndicator prop "accessibilityLiveRegion" value is se
   aria-live="polite"
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
 >
   <div
-    class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -78,11 +78,11 @@ exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
 >
   <div
-    class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationPlayState-1abnn5w r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-visibility-11j9u27 r-width-19wmn03"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
   >
     <svg
       height="100%"
@@ -114,11 +114,11 @@ exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
 >
   <div
-    class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -175,13 +175,13 @@ exports[`components/ActivityIndicator prop "dataSet" value is set 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
   data-one="one"
   data-two="two"
   role="progressbar"
 >
   <div
-    class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -213,11 +213,11 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
 >
   <div
-    class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationPlayState-1abnn5w r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w"
   >
     <svg
       height="100%"
@@ -249,11 +249,11 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
 >
   <div
-    class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationPlayState-1abnn5w r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-visibility-11j9u27 r-width-19wmn03"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
   >
     <svg
       height="100%"
@@ -285,12 +285,12 @@ exports[`components/ActivityIndicator prop "nativeID" value is set 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
   id="123"
   role="progressbar"
 >
   <div
-    class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -322,11 +322,11 @@ exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
 >
   <div
-    class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-1r8g8re r-width-1acpoxo"
+    class="css-view-175oi2r r-height-1r8g8re r-width-1acpoxo r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -358,11 +358,11 @@ exports[`components/ActivityIndicator prop "size" is a number 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
 >
   <div
-    class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+    class="css-view-175oi2r r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
     style="height: 30px; width: 30px;"
   >
     <svg
@@ -395,12 +395,12 @@ exports[`components/ActivityIndicator prop "style" value is set 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
   style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;"
 >
   <div
-    class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -432,12 +432,12 @@ exports[`components/ActivityIndicator prop "testID" value is set 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
   data-testid="123"
   role="progressbar"
 >
   <div
-    class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
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
deleted file mode 100644
index 20f919ca..00000000
--- a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
+++ /dev/null
@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AppRegistry getApplication "getStyleElement" produces styles that are a function of rendering "element" 1`] = `
-"[stylesheet-group=\\"0\\"]{}
-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-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
-[stylesheet-group=\\"0.1\\"]{}
-:focus:not([data-focusvisible-polyfill]){outline: none;}
-[stylesheet-group=\\"1\\"]{}
-.css-view-1dbjc4n{-ms-flex-align:stretch;-ms-flex-direction:column;-ms-flex-negative:0;-ms-flex-preferred-size:auto;-webkit-align-items:stretch;-webkit-box-align:stretch;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-basis:auto;-webkit-flex-direction:column;-webkit-flex-shrink:0;align-items:stretch;border:0 solid black;box-sizing:border-box;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-height:0px;min-width:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;position:relative;z-index:0;}
-[stylesheet-group=\\"2\\"]{}
-.r-flex-13awgt0{-ms-flex:1 1 0%;-webkit-flex:1;flex:1;}
-[stylesheet-group=\\"2.2\\"]{}
-.r-pointerEvents-12vffkv>*{pointer-events:auto;}
-.r-pointerEvents-12vffkv{pointer-events:none!important;}"
-`;
-
-exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`] = `
-<AppContainer
-  rootTag={Object {}}
->
-  <NoopComponent />
-</AppContainer>
-`;
-
-exports[`AppRegistry getApplication returns "element" and "getStyleElement" 2`] = `
-"<style id=\\"react-native-stylesheet\\">[stylesheet-group=\\"0\\"]{}
-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-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
-[stylesheet-group=\\"0.1\\"]{}
-:focus:not([data-focusvisible-polyfill]){outline: none;}</style>"
-`;
diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js
index 80809405..bde49cbc 100644
--- a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js
@@ -1,76 +1,16 @@
-/* eslint-env jasmine, jest */
+/**
+ * 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.
+ */
 
 import AppRegistry from '..';
-import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
 import React from 'react';
-import ReactDOMServer from 'react-dom/server';
-import { render } from '@testing-library/react';
-import StyleSheet from '../../StyleSheet';
-import Text from '../../Text';
-import View from '../../View';
 
-const canUseDOM = ExecutionEnvironment.canUseDOM;
-const NoopComponent = () => <div />;
+const NoopComponent = () => React.createElement('div');
 
 describe('AppRegistry', () => {
-  describe('getApplication', () => {
-    beforeEach(() => {
-      ExecutionEnvironment.canUseDOM = false;
-    });
-
-    afterEach(() => {
-      ExecutionEnvironment.canUseDOM = canUseDOM;
-    });
-
-    test('does not throw when missing appParameters', () => {
-      AppRegistry.registerComponent('App', () => NoopComponent);
-      expect(() => AppRegistry.getApplication('App')).not.toThrow();
-    });
-
-    test('returns "element" and "getStyleElement"', () => {
-      AppRegistry.registerComponent('App', () => NoopComponent);
-      const { element, getStyleElement } = AppRegistry.getApplication('App', {});
-      const styleElement = ReactDOMServer.renderToStaticMarkup(getStyleElement());
-
-      expect(element).toMatchSnapshot();
-      expect(styleElement).toMatchSnapshot();
-    });
-
-    test('"getStyleElement" adds props to <style>', () => {
-      const nonce = '2Bz9RM/UHvBbmo3jK/PbYZ==';
-      AppRegistry.registerComponent('App', () => NoopComponent);
-      const { getStyleElement } = AppRegistry.getApplication('App', {});
-      const styleElement = getStyleElement({ nonce });
-      expect(styleElement.props.nonce).toBe(nonce);
-    });
-
-    test('"getStyleElement" produces styles that are a function of rendering "element"', () => {
-      const getApplicationStyles = (appName) => {
-        const { element, getStyleElement } = AppRegistry.getApplication(appName, {});
-        render(element);
-        return getStyleElement().props.dangerouslySetInnerHTML.__html;
-      };
-
-      const styles = StyleSheet.create({ root: { borderWidth: 1234, backgroundColor: 'purple' } });
-      const RootComponent = () => <View />;
-      const AlternativeComponent = () => <Text style={styles.root} />;
-
-      // First render "RootComponent"
-      AppRegistry.registerComponent('App', () => RootComponent);
-      const first = getApplicationStyles('App');
-      expect(first).toMatchSnapshot();
-
-      // Second render "AlternativeComponent"
-      AppRegistry.registerComponent('AlternativeApp', () => AlternativeComponent);
-      const second = getApplicationStyles('AlternativeApp');
-      expect(first).not.toEqual(second);
-
-      // Third render "RootComponent" again
-      const third = getApplicationStyles('App');
-      expect(third).toEqual(first);
-    });
-  });
-
   describe('runApplication', () => {
     let rootTag;
 
@@ -90,5 +30,57 @@ describe('AppRegistry', () => {
       AppRegistry.runApplication('App', { initialProps: {}, rootTag, callback });
       expect(callback).toHaveBeenCalledTimes(1);
     });
+
+    test('styles roots in different documents', () => {
+      AppRegistry.registerComponent('App', () => NoopComponent);
+      AppRegistry.runApplication('App', { initialProps: {}, rootTag });
+
+      // Create iframe context
+      const iframe = document.createElement('iframe');
+      document.body.appendChild(iframe);
+
+      const iframeRootTag = document.createElement('div');
+      iframeRootTag.id = 'react-iframe-root';
+      iframe.contentWindow.document.body.appendChild(iframeRootTag);
+
+      // Run in iframe
+      AppRegistry.registerComponent('App', () => NoopComponent);
+      AppRegistry.runApplication('App', { initialProps: {}, rootTag: iframeRootTag });
+
+      const iframedoc = iframeRootTag.ownerDocument;
+      expect(iframedoc).toBe(iframe.contentWindow.document);
+      expect(iframedoc).not.toBe(document);
+
+      const cssText = Array.prototype.slice
+        .call(iframedoc.getElementById('react-native-stylesheet').sheet.cssRules)
+        .map((cssRule) => cssRule.cssText);
+
+      expect(cssText).toMatchInlineSnapshot(`
+        [
+          "[stylesheet-group=\\"0\\"] {}",
+          "body {margin: 0;}",
+          "button::-moz-focus-inner,input::-moz-focus-inner {border: 0; padding: 0;}",
+          "html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0);}",
+          "input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration {display: none;}",
+          "[stylesheet-group=\\"1\\"] {}",
+          ".css-view-175oi2r {align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0;}",
+          "[stylesheet-group=\\"2\\"] {}",
+          ".r-display-xoduu5 {display: inline-flex;}",
+          ".r-flex-13awgt0 {flex: 1;}",
+          "[stylesheet-group=\\"2.2\\"] {}",
+          ".r-bottom-1p0dtai {bottom: 0px;}",
+          ".r-left-1d2f490 {left: 0px;}",
+          ".r-pointerEvents-105ug2t {pointer-events: auto !important;}",
+          ".r-pointerEvents-12vffkv>* {pointer-events: auto;}",
+          ".r-pointerEvents-12vffkv {pointer-events: none !important;}",
+          ".r-pointerEvents-633pao {pointer-events: none !important;}",
+          ".r-pointerEvents-ah5dr5>* {pointer-events: none;}",
+          ".r-pointerEvents-ah5dr5 {pointer-events: auto !important;}",
+          ".r-position-u8s1d {position: absolute;}",
+          ".r-right-zchlnj {right: 0px;}",
+          ".r-top-ipm5af {top: 0px;}",
+        ]
+      `);
+    });
   });
 });
diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js
new file mode 100644
index 00000000..1c2408fd
--- /dev/null
+++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js
@@ -0,0 +1,141 @@
+/**
+ * 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.
+ */
+
+import AppRegistry from '..';
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import StyleSheet from '../../StyleSheet';
+import View from '../../View';
+
+const NoopComponent = () => React.createElement('div');
+
+describe('AppRegistry', () => {
+  describe('getApplication', () => {
+    test('does not throw when missing appParameters', () => {
+      AppRegistry.registerComponent('App', () => NoopComponent);
+      expect(() => AppRegistry.getApplication('App')).not.toThrow();
+    });
+
+    test('returns "element" and "getStyleElement"', () => {
+      AppRegistry.registerComponent('App', () => NoopComponent);
+      const { element, getStyleElement } = AppRegistry.getApplication('App', {});
+      const styleElement = ReactDOMServer.renderToStaticMarkup(getStyleElement());
+
+      expect(element).toMatchInlineSnapshot(`
+        <AppContainer
+          rootTag={{}}
+        >
+          <NoopComponent />
+        </AppContainer>
+      `);
+      expect(styleElement).toMatchInlineSnapshot(`
+        "<style id=\\"react-native-stylesheet\\">[stylesheet-group=\\"0\\"]{}
+        body{margin:0;}
+        button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+        html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+        input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+        [stylesheet-group=\\"1\\"]{}
+        .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
+        [stylesheet-group=\\"2\\"]{}
+        .r-display-xoduu5{display:inline-flex;}
+        .r-flex-13awgt0{flex:1;}
+        [stylesheet-group=\\"2.2\\"]{}
+        .r-bottom-1p0dtai{bottom:0px;}
+        .r-left-1d2f490{left:0px;}
+        .r-pointerEvents-105ug2t{pointer-events:auto!important;}
+        .r-pointerEvents-12vffkv>*{pointer-events:auto;}
+        .r-pointerEvents-12vffkv{pointer-events:none!important;}
+        .r-pointerEvents-633pao{pointer-events:none!important;}
+        .r-pointerEvents-ah5dr5>*{pointer-events:none;}
+        .r-pointerEvents-ah5dr5{pointer-events:auto!important;}
+        .r-position-u8s1d{position:absolute;}
+        .r-right-zchlnj{right:0px;}
+        .r-top-ipm5af{top:0px;}</style>"
+      `);
+    });
+
+    test('"getStyleElement" adds props to <style>', () => {
+      const nonce = '2Bz9RM/UHvBbmo3jK/PbYZ==';
+      AppRegistry.registerComponent('App', () => NoopComponent);
+      const { getStyleElement } = AppRegistry.getApplication('App', {});
+      const styleElement = getStyleElement({ nonce });
+      expect(styleElement.props.nonce).toBe(nonce);
+    });
+
+    test('"getStyleElement" contains style updates', () => {
+      const getApplicationStyles = (appName) => {
+        const { getStyleElement } = AppRegistry.getApplication(appName, {});
+        return getStyleElement().props.dangerouslySetInnerHTML.__html;
+      };
+
+      // First render "RootComponent"
+      const RootComponent = () => React.createElement(View);
+      AppRegistry.registerComponent('App', () => RootComponent);
+      const first = getApplicationStyles('App');
+      expect(first).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        body{margin:0;}
+        button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+        html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+        input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+        [stylesheet-group=\\"1\\"]{}
+        .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
+        [stylesheet-group=\\"2\\"]{}
+        .r-display-xoduu5{display:inline-flex;}
+        .r-flex-13awgt0{flex:1;}
+        [stylesheet-group=\\"2.2\\"]{}
+        .r-bottom-1p0dtai{bottom:0px;}
+        .r-left-1d2f490{left:0px;}
+        .r-pointerEvents-105ug2t{pointer-events:auto!important;}
+        .r-pointerEvents-12vffkv>*{pointer-events:auto;}
+        .r-pointerEvents-12vffkv{pointer-events:none!important;}
+        .r-pointerEvents-633pao{pointer-events:none!important;}
+        .r-pointerEvents-ah5dr5>*{pointer-events:none;}
+        .r-pointerEvents-ah5dr5{pointer-events:auto!important;}
+        .r-position-u8s1d{position:absolute;}
+        .r-right-zchlnj{right:0px;}
+        .r-top-ipm5af{top:0px;}"
+      `);
+
+      // Second render "AlternativeComponent"
+      const styles = StyleSheet.create({ root: { borderWidth: 1234, backgroundColor: 'purple' } });
+      const AlternativeComponent = () => React.createElement(View, { style: styles.root });
+      AppRegistry.registerComponent('AlternativeApp', () => AlternativeComponent);
+      const second = getApplicationStyles('AlternativeApp');
+      expect(second).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        body{margin:0;}
+        button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+        html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+        input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+        [stylesheet-group=\\"1\\"]{}
+        .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
+        [stylesheet-group=\\"2\\"]{}
+        .r-borderWidth-1bee2fs{border-bottom-width:1234px;border-left-width:1234px;border-right-width:1234px;border-top-width:1234px;}
+        .r-display-xoduu5{display:inline-flex;}
+        .r-flex-13awgt0{flex:1;}
+        [stylesheet-group=\\"2.2\\"]{}
+        .r-backgroundColor-aot4c7{background-color:rgba(128,0,128,1.00);}
+        .r-bottom-1p0dtai{bottom:0px;}
+        .r-left-1d2f490{left:0px;}
+        .r-pointerEvents-105ug2t{pointer-events:auto!important;}
+        .r-pointerEvents-12vffkv>*{pointer-events:auto;}
+        .r-pointerEvents-12vffkv{pointer-events:none!important;}
+        .r-pointerEvents-633pao{pointer-events:none!important;}
+        .r-pointerEvents-ah5dr5>*{pointer-events:none;}
+        .r-pointerEvents-ah5dr5{pointer-events:auto!important;}
+        .r-position-u8s1d{position:absolute;}
+        .r-right-zchlnj{right:0px;}
+        .r-top-ipm5af{top:0px;}"
+      `);
+
+      // Third render "RootComponent" again
+      const third = getApplicationStyles('App');
+      expect(third).toEqual(second);
+    });
+  });
+});
diff --git a/packages/react-native-web/src/exports/AppRegistry/renderApplication.js b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
index 4ea3c427..a99f0a0e 100644
--- a/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
+++ b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
@@ -13,7 +13,7 @@ import type { ComponentType, Node } from 'react';
 import AppContainer from './AppContainer';
 import invariant from 'fbjs/lib/invariant';
 import render, { hydrate } from '../render';
-import styleResolver from '../StyleSheet/styleResolver';
+import StyleSheet from '../StyleSheet';
 import React from 'react';
 
 export default function renderApplication<Props: Object>(
@@ -52,7 +52,7 @@ export function getApplication(
   );
   // Don't escape CSS text
   const getStyleElement = (props) => {
-    const sheet = styleResolver.getStyleSheet();
+    const sheet = StyleSheet.getSheet();
     return (
       <style {...props} dangerouslySetInnerHTML={{ __html: sheet.textContent }} id={sheet.id} />
     );
diff --git a/packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap
index f0c0e578..c7bc9d0b 100644
--- a/packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap
@@ -3,13 +3,13 @@
 exports[`components/Button prop "accessibilityLabel" 1`] = `
 <div
   aria-label="accessibility label"
-  class="css-cursor-18t94o4 css-view-1dbjc4n r-backgroundColor-14sbq61 r-borderRadius-1jkafct r-cursor-1loqt21 r-touchAction-1otgn73 r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
+  class="css-view-175oi2r r-transitionProperty-1i6wzkk r-userSelect-lrvibr r-cursor-1loqt21 r-touchAction-1otgn73 r-backgroundColor-14sbq61 r-borderRadius-1jkafct"
   role="button"
   style="transition-duration: 0s;"
   tabindex="0"
 >
   <div
-    class="css-text-901oao r-color-jwli3a r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
+    class="css-text-1rynq56 r-color-jwli3a r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
     dir="auto"
   />
 </div>
@@ -17,13 +17,13 @@ exports[`components/Button prop "accessibilityLabel" 1`] = `
 
 exports[`components/Button prop "color" 1`] = `
 <div
-  class="css-cursor-18t94o4 css-view-1dbjc4n r-borderRadius-1jkafct r-cursor-1loqt21 r-touchAction-1otgn73 r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
+  class="css-view-175oi2r r-transitionProperty-1i6wzkk r-userSelect-lrvibr r-cursor-1loqt21 r-touchAction-1otgn73 r-borderRadius-1jkafct"
   role="button"
-  style="background-color: rgb(0, 0, 255); transition-duration: 0s;"
+  style="transition-duration: 0s; background-color: rgb(0, 0, 255);"
   tabindex="0"
 >
   <div
-    class="css-text-901oao r-color-jwli3a r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
+    class="css-text-1rynq56 r-color-jwli3a r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
     dir="auto"
   />
 </div>
@@ -32,13 +32,13 @@ exports[`components/Button prop "color" 1`] = `
 exports[`components/Button prop "disabled" 1`] = `
 <div
   aria-disabled="true"
-  class="css-view-1dbjc4n r-backgroundColor-11mpjr4 r-borderRadius-1jkafct r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
+  class="css-view-175oi2r r-transitionProperty-1i6wzkk r-userSelect-lrvibr r-borderRadius-1jkafct r-backgroundColor-11mpjr4"
   role="button"
   style="transition-duration: 0s;"
   tabindex="-1"
 >
   <div
-    class="css-text-901oao r-color-c68hjy r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
+    class="css-text-1rynq56 r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw r-color-c68hjy"
     dir="auto"
   />
 </div>
@@ -46,14 +46,14 @@ exports[`components/Button prop "disabled" 1`] = `
 
 exports[`components/Button prop "testID" 1`] = `
 <div
-  class="css-cursor-18t94o4 css-view-1dbjc4n r-backgroundColor-14sbq61 r-borderRadius-1jkafct r-cursor-1loqt21 r-touchAction-1otgn73 r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
+  class="css-view-175oi2r r-transitionProperty-1i6wzkk r-userSelect-lrvibr r-cursor-1loqt21 r-touchAction-1otgn73 r-backgroundColor-14sbq61 r-borderRadius-1jkafct"
   data-testid="123"
   role="button"
   style="transition-duration: 0s;"
   tabindex="0"
 >
   <div
-    class="css-text-901oao r-color-jwli3a r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
+    class="css-text-1rynq56 r-color-jwli3a r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
     dir="auto"
   />
 </div>
@@ -61,13 +61,13 @@ exports[`components/Button prop "testID" 1`] = `
 
 exports[`components/Button prop "title" 1`] = `
 <div
-  class="css-cursor-18t94o4 css-view-1dbjc4n r-backgroundColor-14sbq61 r-borderRadius-1jkafct r-cursor-1loqt21 r-touchAction-1otgn73 r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
+  class="css-view-175oi2r r-transitionProperty-1i6wzkk r-userSelect-lrvibr r-cursor-1loqt21 r-touchAction-1otgn73 r-backgroundColor-14sbq61 r-borderRadius-1jkafct"
   role="button"
   style="transition-duration: 0s;"
   tabindex="0"
 >
   <div
-    class="css-text-901oao r-color-jwli3a r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
+    class="css-text-1rynq56 r-color-jwli3a r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
     dir="auto"
   >
     Click me
diff --git a/packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap
index 2c16e7a3..4a47dd91 100644
--- a/packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap
@@ -3,13 +3,13 @@
 exports[`CheckBox prop "accessibilityLabel" value is set 1`] = `
 <div
   aria-label="accessibility label"
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
+  class="css-view-175oi2r r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
 >
   <div
-    class="css-view-1dbjc4n r-alignItems-1awozwy r-backgroundColor-14lw9ot r-borderColor-1awa8pu r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
+    class="css-view-175oi2r r-alignItems-1awozwy r-backgroundColor-14lw9ot r-borderColor-1awa8pu r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
   />
   <input
-    class="r-bottom-1p0dtai r-cursor-1ei5mc7 r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu"
+    class="r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-cursor-1ei5mc7"
     type="checkbox"
   />
 </div>
@@ -17,15 +17,15 @@ exports[`CheckBox prop "accessibilityLabel" value is set 1`] = `
 
 exports[`CheckBox prop "color" value is set 1`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
+  class="css-view-175oi2r r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
 >
   <div
-    class="css-view-1dbjc4n r-alignItems-1awozwy r-backgroundImage-rs94m5 r-backgroundRepeat-u6sd8q r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
+    class="css-view-175oi2r r-alignItems-1awozwy r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu r-backgroundImage-rs94m5 r-backgroundRepeat-u6sd8q"
     style="background-color: rgb(173, 216, 230); border-top-color: rgba(173,216,230,1.00); border-right-color: rgba(173,216,230,1.00); border-bottom-color: rgba(173,216,230,1.00); border-left-color: rgba(173,216,230,1.00);"
   />
   <input
     checked=""
-    class="r-bottom-1p0dtai r-cursor-1ei5mc7 r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu"
+    class="r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-cursor-1ei5mc7"
     type="checkbox"
   />
 </div>
@@ -33,15 +33,15 @@ exports[`CheckBox prop "color" value is set 1`] = `
 
 exports[`CheckBox prop "dataSet" value is set 1`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
+  class="css-view-175oi2r r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
   data-one="one"
   data-two="two"
 >
   <div
-    class="css-view-1dbjc4n r-alignItems-1awozwy r-backgroundColor-14lw9ot r-borderColor-1awa8pu r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
+    class="css-view-175oi2r r-alignItems-1awozwy r-backgroundColor-14lw9ot r-borderColor-1awa8pu r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
   />
   <input
-    class="r-bottom-1p0dtai r-cursor-1ei5mc7 r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu"
+    class="r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-cursor-1ei5mc7"
     type="checkbox"
   />
 </div>
@@ -49,14 +49,14 @@ exports[`CheckBox prop "dataSet" value is set 1`] = `
 
 exports[`CheckBox prop "nativeID" value is set 1`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
+  class="css-view-175oi2r r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
   id="123"
 >
   <div
-    class="css-view-1dbjc4n r-alignItems-1awozwy r-backgroundColor-14lw9ot r-borderColor-1awa8pu r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
+    class="css-view-175oi2r r-alignItems-1awozwy r-backgroundColor-14lw9ot r-borderColor-1awa8pu r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
   />
   <input
-    class="r-bottom-1p0dtai r-cursor-1ei5mc7 r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu"
+    class="r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-cursor-1ei5mc7"
     type="checkbox"
   />
 </div>
@@ -64,14 +64,14 @@ exports[`CheckBox prop "nativeID" value is set 1`] = `
 
 exports[`CheckBox prop "style" value is set 1`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
+  class="css-view-175oi2r r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
   style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;"
 >
   <div
-    class="css-view-1dbjc4n r-alignItems-1awozwy r-backgroundColor-14lw9ot r-borderColor-1awa8pu r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
+    class="css-view-175oi2r r-alignItems-1awozwy r-backgroundColor-14lw9ot r-borderColor-1awa8pu r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
   />
   <input
-    class="r-bottom-1p0dtai r-cursor-1ei5mc7 r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu"
+    class="r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-cursor-1ei5mc7"
     type="checkbox"
   />
 </div>
@@ -79,14 +79,14 @@ exports[`CheckBox prop "style" value is set 1`] = `
 
 exports[`CheckBox prop "testID" value is set 1`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
+  class="css-view-175oi2r r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
   data-testid="123"
 >
   <div
-    class="css-view-1dbjc4n r-alignItems-1awozwy r-backgroundColor-14lw9ot r-borderColor-1awa8pu r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
+    class="css-view-175oi2r r-alignItems-1awozwy r-backgroundColor-14lw9ot r-borderColor-1awa8pu r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
   />
   <input
-    class="r-bottom-1p0dtai r-cursor-1ei5mc7 r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu"
+    class="r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-cursor-1ei5mc7"
     type="checkbox"
   />
 </div>
diff --git a/packages/react-native-web/src/exports/Dimensions/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Dimensions/__tests__/__snapshots__/index-test.js.snap
deleted file mode 100644
index 0f9539f3..00000000
--- a/packages/react-native-web/src/exports/Dimensions/__tests__/__snapshots__/index-test.js.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`apis/Dimensions get 1`] = `
-Object {
-  "fontScale": 1,
-  "height": 0,
-  "scale": 1,
-  "width": 0,
-}
-`;
-
-exports[`apis/Dimensions get 2`] = `
-Object {
-  "fontScale": 1,
-  "height": 768,
-  "scale": 1,
-  "width": 1024,
-}
-`;
diff --git a/packages/react-native-web/src/exports/Dimensions/__tests__/index-test.js b/packages/react-native-web/src/exports/Dimensions/__tests__/index-test.js
index 283e6f93..3a14073f 100644
--- a/packages/react-native-web/src/exports/Dimensions/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Dimensions/__tests__/index-test.js
@@ -1,11 +1,30 @@
-/* eslint-env jasmine, jest */
+/**
+ * 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.
+ */
 
 import Dimensions from '..';
 
 describe('apis/Dimensions', () => {
   test('get', () => {
-    expect(Dimensions.get('screen')).toMatchSnapshot();
-    expect(Dimensions.get('window')).toMatchSnapshot();
+    expect(Dimensions.get('screen')).toMatchInlineSnapshot(`
+      {
+        "fontScale": 1,
+        "height": 0,
+        "scale": 1,
+        "width": 0,
+      }
+    `);
+    expect(Dimensions.get('window')).toMatchInlineSnapshot(`
+      {
+        "fontScale": 1,
+        "height": 768,
+        "scale": 1,
+        "width": 1024,
+      }
+    `);
   });
 
   test('set', () => {
diff --git a/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js b/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js
index 09a1b063..ba68b08d 100644
--- a/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js
@@ -38,21 +38,6 @@ describe('apis/I18nManager', () => {
         expect(getDocumentDir()).toEqual('rtl');
       });
     });
-
-    describe('swapLeftAndRightInRTL', () => {
-      afterEach(() => {
-        I18nManager.swapLeftAndRightInRTL(true);
-      });
-
-      test('when set to false, "doLeftAndRightSwapInRTL" is false', () => {
-        I18nManager.swapLeftAndRightInRTL(false);
-        expect(I18nManager.getConstants().doLeftAndRightSwapInRTL).toBe(false);
-      });
-      test('when set to true, "doLeftAndRightSwapInRTL" is true', () => {
-        I18nManager.swapLeftAndRightInRTL(true);
-        expect(I18nManager.getConstants().doLeftAndRightSwapInRTL).toBe(true);
-      });
-    });
   });
 
   describe('preferred language is RTL', () => {
@@ -104,20 +89,5 @@ describe('apis/I18nManager', () => {
         expect(getDocumentDir()).toEqual('rtl');
       });
     });
-
-    describe('swapLeftAndRightInRTL', () => {
-      afterEach(() => {
-        I18nManager.swapLeftAndRightInRTL(true);
-      });
-
-      test('when set to false, "doLeftAndRightSwapInRTL" is false', () => {
-        I18nManager.swapLeftAndRightInRTL(false);
-        expect(I18nManager.getConstants().doLeftAndRightSwapInRTL).toBe(false);
-      });
-      test('when set to true, "doLeftAndRightSwapInRTL" is true', () => {
-        I18nManager.swapLeftAndRightInRTL(true);
-        expect(I18nManager.getConstants().doLeftAndRightSwapInRTL).toBe(true);
-      });
-    });
   });
 });
diff --git a/packages/react-native-web/src/exports/I18nManager/index.js b/packages/react-native-web/src/exports/I18nManager/index.js
index e8b53a75..39912f76 100644
--- a/packages/react-native-web/src/exports/I18nManager/index.js
+++ b/packages/react-native-web/src/exports/I18nManager/index.js
@@ -14,16 +14,13 @@ type I18nManagerStatus = {
   allowRTL: (allowRTL: boolean) => void,
   forceRTL: (forceRTL: boolean) => void,
   getConstants: () => Constants,
-  setPreferredLanguageRTL: (setRTL: boolean) => void,
-  swapLeftAndRightInRTL: (flipStyles: boolean) => void
+  setPreferredLanguageRTL: (setRTL: boolean) => void
 };
 
 type Constants = {
-  doLeftAndRightSwapInRTL: boolean,
   isRTL: boolean
 };
 
-let doLeftAndRightSwapInRTL = true;
 let isPreferredLanguageRTL = false;
 let isRTLAllowed = true;
 let isRTLForced = false;
@@ -53,14 +50,11 @@ const I18nManager: I18nManagerStatus = {
     onDirectionChange();
   },
   getConstants(): Constants {
-    return { doLeftAndRightSwapInRTL, isRTL: isRTL() };
+    return { isRTL: isRTL() };
   },
   setPreferredLanguageRTL(bool) {
     isPreferredLanguageRTL = bool;
     onDirectionChange();
-  },
-  swapLeftAndRightInRTL(bool) {
-    doLeftAndRightSwapInRTL = bool;
   }
 };
 
diff --git a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap
index bf1367a0..04b41e3e 100644
--- a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap
@@ -3,10 +3,10 @@
 exports[`components/Image prop "accessibilityLabel" 1`] = `
 <div
   aria-label="accessibilityLabel"
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
     style="background-image: url(https://google.com/favicon.ico);"
   />
   <img
@@ -20,10 +20,10 @@ exports[`components/Image prop "accessibilityLabel" 1`] = `
 
 exports[`components/Image prop "blurRadius" 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
     style="background-image: url(https://google.com/favicon.ico); filter: blur(5px);"
   />
   <img
@@ -37,11 +37,11 @@ exports[`components/Image prop "blurRadius" 1`] = `
 
 exports[`components/Image prop "defaultSource" does not override "height" and "width" styles 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
   style="height: 20px; width: 40px;"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
     style="background-image: url(https://google.com/favicon.ico);"
   />
   <img
@@ -55,11 +55,11 @@ exports[`components/Image prop "defaultSource" does not override "height" and "w
 
 exports[`components/Image prop "defaultSource" sets "height" and "width" styles if missing 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
   style="height: 10px; width: 20px;"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
     style="background-image: url(https://google.com/favicon.ico);"
   />
   <img
@@ -73,10 +73,10 @@ exports[`components/Image prop "defaultSource" sets "height" and "width" styles
 
 exports[`components/Image prop "defaultSource" sets background image when value is a string 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
     style="background-image: url(https://google.com/favicon.ico);"
   />
   <img
@@ -90,10 +90,10 @@ exports[`components/Image prop "defaultSource" sets background image when value
 
 exports[`components/Image prop "defaultSource" sets background image when value is an object 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
     style="background-image: url(https://google.com/favicon.ico);"
   />
   <img
@@ -107,10 +107,10 @@ exports[`components/Image prop "defaultSource" sets background image when value
 
 exports[`components/Image prop "draggable" 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
     style="background-image: url(https://google.com/favicon.ico);"
   />
   <img
@@ -124,92 +124,92 @@ exports[`components/Image prop "draggable" 1`] = `
 
 exports[`components/Image prop "focusable" 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
   tabindex="0"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
   />
 </div>
 `;
 
 exports[`components/Image prop "nativeID" 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
   id="nativeID"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
   />
 </div>
 `;
 
 exports[`components/Image prop "resizeMode" value "contain" 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-ehq7j7 r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
   />
 </div>
 `;
 
 exports[`components/Image prop "resizeMode" value "cover" 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
   />
 </div>
 `;
 
 exports[`components/Image prop "resizeMode" value "none" 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-p9m3gb r-backgroundRepeat-u6sd8q r-backgroundSize-1sxrcry r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundPosition-1mrlafo r-backgroundSize-1sxrcry"
   />
 </div>
 `;
 
 exports[`components/Image prop "resizeMode" value "repeat" 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-p9m3gb r-backgroundRepeat-17leim2 r-backgroundSize-1sxrcry r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundPosition-1mrlafo r-backgroundRepeat-17leim2 r-backgroundSize-1sxrcry"
   />
 </div>
 `;
 
 exports[`components/Image prop "resizeMode" value "stretch" 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-x3cy2q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-x3cy2q"
   />
 </div>
 `;
 
 exports[`components/Image prop "resizeMode" value "undefined" 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
   />
 </div>
 `;
 
 exports[`components/Image prop "source" is correctly updated only when loaded if defaultSource provided 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
     style="background-image: url(https://testing.com/preview.jpg);"
   />
   <img
@@ -223,10 +223,10 @@ exports[`components/Image prop "source" is correctly updated only when loaded if
 
 exports[`components/Image prop "source" is correctly updated only when loaded if defaultSource provided 2`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
     style="background-image: url(https://testing.com/fullSize.jpg);"
   />
   <img
@@ -240,10 +240,10 @@ exports[`components/Image prop "source" is correctly updated only when loaded if
 
 exports[`components/Image prop "source" is correctly updated when missing in initial render 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
     style="background-image: url(https://testing.com/img.jpg);"
   />
   <img
@@ -257,10 +257,10 @@ exports[`components/Image prop "source" is correctly updated when missing in ini
 
 exports[`components/Image prop "source" is not set immediately if the image has not already been loaded 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
     style="background-image: url(https://google.com/favicon.ico);"
   />
   <img
@@ -274,10 +274,10 @@ exports[`components/Image prop "source" is not set immediately if the image has
 
 exports[`components/Image prop "source" is set immediately if the image has already been loaded 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
     style="background-image: url(https://google.com/favicon.ico);"
   />
   <img
@@ -291,10 +291,10 @@ exports[`components/Image prop "source" is set immediately if the image has alre
 
 exports[`components/Image prop "source" is set immediately if the image has already been loaded 2`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
     style="background-image: url(https://twitter.com/favicon.ico);"
   />
   <img
@@ -308,10 +308,10 @@ exports[`components/Image prop "source" is set immediately if the image has alre
 
 exports[`components/Image prop "source" is set immediately if the image was preloaded 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
     style="background-image: url(https://yahoo.com/favicon.ico);"
   />
   <img
@@ -325,10 +325,10 @@ exports[`components/Image prop "source" is set immediately if the image was prel
 
 exports[`components/Image prop "style" removes other unsupported View styles 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
     style="filter: url(#tint-57);"
   />
   <svg
@@ -353,20 +353,20 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
 
 exports[`components/Image prop "style" supports "resizeMode" property 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-ehq7j7 r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
   />
 </div>
 `;
 
 exports[`components/Image prop "style" supports "shadow" properties (convert to filter) 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
     style="filter: drop-shadow(1px 1px 0px rgba(255,0,0,1.00));"
   />
 </div>
@@ -374,10 +374,10 @@ exports[`components/Image prop "style" supports "shadow" properties (convert to
 
 exports[`components/Image prop "style" supports "tintcolor" property (convert to filter) 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
     style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-56);"
   />
   <img
@@ -408,11 +408,11 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
 
 exports[`components/Image prop "testID" 1`] = `
 <div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
   data-testid="testID"
 >
   <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
   />
 </div>
 `;
diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js
index 7cbde9f5..3297388a 100644
--- a/packages/react-native-web/src/exports/Image/index.js
+++ b/packages/react-native-web/src/exports/Image/index.js
@@ -12,9 +12,8 @@ import type { ImageProps } from './types';
 
 import * as React from 'react';
 import createElement from '../createElement';
-import css from '../StyleSheet/css';
 import { getAssetByID } from '../../modules/AssetRegistry';
-import resolveShadowValue from '../StyleSheet/resolveShadowValue';
+import { createBoxShadowValue } from '../StyleSheet/compiler/preprocess';
 import ImageLoader from '../../modules/ImageLoader';
 import PixelRatio from '../PixelRatio';
 import StyleSheet from '../StyleSheet';
@@ -45,7 +44,7 @@ function createTintColorSVG(tintColor, id) {
 }
 
 function getFlatStyle(style, blurRadius, filterId) {
-  const flatStyle = { ...StyleSheet.flatten(style) };
+  const flatStyle = StyleSheet.flatten(style);
   const { filter, resizeMode, shadowOffset, tintColor } = flatStyle;
 
   // Add CSS filters
@@ -60,7 +59,7 @@ function getFlatStyle(style, blurRadius, filterId) {
     filters.push(`blur(${blurRadius}px)`);
   }
   if (shadowOffset) {
-    const shadowString = resolveShadowValue(flatStyle);
+    const shadowString = createBoxShadowValue(flatStyle);
     if (shadowString) {
       filters.push(`drop-shadow(${shadowString})`);
     }
@@ -201,7 +200,7 @@ const Image: React.AbstractComponent<ImageProps, React.ElementRef<typeof View>>
     const hiddenImage = displayImageUri
       ? createElement('img', {
           alt: accessibilityLabel || '',
-          classList: [classes.accessibilityImage],
+          style: styles.accessibilityImage$raw,
           draggable: draggable || false,
           ref: hiddenImageRef,
           src: displayImageUri
@@ -323,16 +322,6 @@ ImageWithStatics.queryCache = function (uris) {
   return ImageLoader.queryCache(uris);
 };
 
-const classes = css.create({
-  accessibilityImage: {
-    ...StyleSheet.absoluteFillObject,
-    height: '100%',
-    opacity: 0,
-    width: '100%',
-    zIndex: -1
-  }
-});
-
 const styles = StyleSheet.create({
   root: {
     flexBasis: 'auto',
@@ -351,6 +340,13 @@ const styles = StyleSheet.create({
     height: '100%',
     width: '100%',
     zIndex: -1
+  },
+  accessibilityImage$raw: {
+    ...StyleSheet.absoluteFillObject,
+    height: '100%',
+    opacity: 0,
+    width: '100%',
+    zIndex: -1
   }
 });
 
@@ -365,11 +361,11 @@ const resizeModeStyles = StyleSheet.create({
     backgroundSize: 'cover'
   },
   none: {
-    backgroundPosition: '0 0',
+    backgroundPosition: '0',
     backgroundSize: 'auto'
   },
   repeat: {
-    backgroundPosition: '0 0',
+    backgroundPosition: '0',
     backgroundRepeat: 'repeat',
     backgroundSize: 'auto'
   },
diff --git a/packages/react-native-web/src/exports/ImageBackground/__tests__/index.js b/packages/react-native-web/src/exports/ImageBackground/__tests__/index-test.js
similarity index 78%
rename from packages/react-native-web/src/exports/ImageBackground/__tests__/index.js
rename to packages/react-native-web/src/exports/ImageBackground/__tests__/index-test.js
index eb1e925b..62330d73 100644
--- a/packages/react-native-web/src/exports/ImageBackground/__tests__/index.js
+++ b/packages/react-native-web/src/exports/ImageBackground/__tests__/index-test.js
@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * 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.
+ */
 
 import ImageBackground from '..';
 import React from 'react';
@@ -25,7 +30,9 @@ describe('components/ImageBackground', () => {
     test('sets the style of the underlying Image', () => {
       const imageStyle = { width: 40, height: 60 };
       const { container } = render(<ImageBackground imageStyle={imageStyle} />);
-      expect(findImage(container).getAttribute('style')).toBe('height: 60px; width: 40px;');
+      expect(
+        findImage(container).getAttribute('style').includes('width: 40px; height: 60px;')
+      ).toBe(true);
     });
   });
 
diff --git a/packages/react-native-web/src/exports/ImageBackground/index.js b/packages/react-native-web/src/exports/ImageBackground/index.js
index a939292c..58219aca 100644
--- a/packages/react-native-web/src/exports/ImageBackground/index.js
+++ b/packages/react-native-web/src/exports/ImageBackground/index.js
@@ -41,7 +41,6 @@ const ImageBackground: React.AbstractComponent<
         {...rest}
         ref={imageRef}
         style={[
-          StyleSheet.absoluteFill,
           {
             // Temporary Workaround:
             // Current (imperfect yet) implementation of <Image> overwrites width and height styles
@@ -54,6 +53,7 @@ const ImageBackground: React.AbstractComponent<
             height,
             zIndex: -1
           },
+          StyleSheet.absoluteFill,
           imageStyle
         ]}
       />
diff --git a/packages/react-native-web/src/exports/Modal/__tests__/index.js b/packages/react-native-web/src/exports/Modal/__tests__/index-test.js
similarity index 99%
rename from packages/react-native-web/src/exports/Modal/__tests__/index.js
rename to packages/react-native-web/src/exports/Modal/__tests__/index-test.js
index ea1e4fba..c2b7f934 100644
--- a/packages/react-native-web/src/exports/Modal/__tests__/index.js
+++ b/packages/react-native-web/src/exports/Modal/__tests__/index-test.js
@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * 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.
+ */
 
 import Modal from '..';
 import React from 'react';
diff --git a/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap
index 036d49d0..ac13d8ea 100644
--- a/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap
@@ -2,22 +2,21 @@
 
 exports[`components/Pressable default 1`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   tabindex="0"
 />
 `;
 
 exports[`components/Pressable focus interaction 1`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   tabindex="0"
 />
 `;
 
 exports[`components/Pressable focus interaction 2`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
-  data-focusvisible-polyfill="true"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   style="outline: focus-ring;"
   tabindex="0"
 >
@@ -29,7 +28,7 @@ exports[`components/Pressable focus interaction 2`] = `
 
 exports[`components/Pressable focus interaction 3`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   style=""
   tabindex="0"
 />
@@ -37,14 +36,14 @@ exports[`components/Pressable focus interaction 3`] = `
 
 exports[`components/Pressable hover interaction 1`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   tabindex="0"
 />
 `;
 
 exports[`components/Pressable hover interaction 2`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   style="outline: hover-ring;"
   tabindex="0"
 >
@@ -56,7 +55,7 @@ exports[`components/Pressable hover interaction 2`] = `
 
 exports[`components/Pressable hover interaction 3`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   style=""
   tabindex="0"
 />
@@ -64,14 +63,14 @@ exports[`components/Pressable hover interaction 3`] = `
 
 exports[`components/Pressable press interaction (keyboard) 1`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   tabindex="0"
 />
 `;
 
 exports[`components/Pressable press interaction (keyboard) 2`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   style="outline: press-ring;"
   tabindex="0"
 >
@@ -85,14 +84,14 @@ exports[`components/Pressable press interaction (keyboard) 3`] = `null`;
 
 exports[`components/Pressable press interaction (pointer) 1`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   tabindex="0"
 />
 `;
 
 exports[`components/Pressable press interaction (pointer) 2`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   style="outline: press-ring;"
   tabindex="0"
 >
@@ -104,7 +103,7 @@ exports[`components/Pressable press interaction (pointer) 2`] = `
 
 exports[`components/Pressable press interaction (pointer) 3`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   style=""
   tabindex="0"
 />
@@ -113,7 +112,7 @@ exports[`components/Pressable press interaction (pointer) 3`] = `
 exports[`components/Pressable prop "accessibilityLabel" value is set 1`] = `
 <div
   aria-label="label"
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   tabindex="0"
 />
 `;
@@ -121,14 +120,14 @@ exports[`components/Pressable prop "accessibilityLabel" value is set 1`] = `
 exports[`components/Pressable prop "accessibilityLiveRegion" value is set 1`] = `
 <div
   aria-live="polite"
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   tabindex="0"
 />
 `;
 
 exports[`components/Pressable prop "accessibilityRole" value alters HTML element 1`] = `
 <article
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   role="article"
   tabindex="0"
 />
@@ -136,7 +135,7 @@ exports[`components/Pressable prop "accessibilityRole" value alters HTML element
 
 exports[`components/Pressable prop "accessibilityRole" value is "button" 1`] = `
 <div
-  class="css-cursor-18t94o4 css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   role="button"
   tabindex="0"
 />
@@ -144,7 +143,7 @@ exports[`components/Pressable prop "accessibilityRole" value is "button" 1`] = `
 
 exports[`components/Pressable prop "accessibilityRole" value is set 1`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   role="presentation"
   tabindex="0"
 />
@@ -153,21 +152,21 @@ exports[`components/Pressable prop "accessibilityRole" value is set 1`] = `
 exports[`components/Pressable prop "disabled" 1`] = `
 <div
   aria-disabled="true"
-  class="css-view-1dbjc4n"
+  class="css-view-175oi2r"
   tabindex="-1"
 />
 `;
 
 exports[`components/Pressable prop "href" 1`] = `
 <a
-  class="css-reset-4rbku5 css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   href="#href"
 />
 `;
 
 exports[`components/Pressable prop "nativeID" value is set 1`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   id="nativeID"
   tabindex="0"
 />
@@ -175,14 +174,14 @@ exports[`components/Pressable prop "nativeID" value is set 1`] = `
 
 exports[`components/Pressable prop "pointerEvents" 1`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-pointerEvents-ah5dr5 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73 r-pointerEvents-ah5dr5"
   tabindex="0"
 />
 `;
 
 exports[`components/Pressable prop "style" value is set 1`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;"
   tabindex="0"
 />
@@ -190,7 +189,7 @@ exports[`components/Pressable prop "style" value is set 1`] = `
 
 exports[`components/Pressable prop "testID" value is set 1`] = `
 <div
-  class="css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   data-testid="123"
   tabindex="0"
 />
diff --git a/packages/react-native-web/src/exports/ScrollView/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/ScrollView/__tests__/__snapshots__/index-test.js.snap
index 6aa3dea5..a3a526ce 100644
--- a/packages/react-native-web/src/exports/ScrollView/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/ScrollView/__tests__/__snapshots__/index-test.js.snap
@@ -5,11 +5,11 @@ exports[`components/ScrollView prop "refreshControl" with 1`] = `
   id="refresh-control"
 >
   <div
-    class="css-view-1dbjc4n r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-1sncvnh"
+    class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-1sncvnh"
     style="background-color: rgb(255, 0, 0);"
   >
     <div
-      class="css-view-1dbjc4n"
+      class="css-view-175oi2r"
     />
   </div>
 </div>
@@ -17,11 +17,11 @@ exports[`components/ScrollView prop "refreshControl" with 1`] = `
 
 exports[`components/ScrollView prop "refreshControl" without 1`] = `
 <div
-  class="css-view-1dbjc4n r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-1sncvnh"
+  class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-1sncvnh"
   style="background-color: rgb(255, 0, 0);"
 >
   <div
-    class="css-view-1dbjc4n"
+    class="css-view-175oi2r"
   />
 </div>
 `;
diff --git a/packages/react-native-web/src/exports/StyleSheet/ReactNativePropRegistry.js b/packages/react-native-web/src/exports/StyleSheet/ReactNativePropRegistry.js
deleted file mode 100644
index 8476911f..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/ReactNativePropRegistry.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright (c) Nicolas Gallagher.
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-const emptyObject = {};
-const objects = {};
-const prefix = 'r';
-let uniqueID = 1;
-
-const createKey = (id) => `${prefix}-${id}`;
-
-export default class ReactNativePropRegistry {
-  static register(object: Object): number {
-    const id = uniqueID++;
-    if (process.env.NODE_ENV !== 'production') {
-      Object.freeze(object);
-    }
-    const key = createKey(id);
-    objects[key] = object;
-    return id;
-  }
-
-  static getByID(id: number): Object {
-    if (!id) {
-      // Used in the style={[condition && id]} pattern,
-      // we want it to be a no-op when the value is false or null
-      return emptyObject;
-    }
-    const key = createKey(id);
-    const object = objects[key];
-    if (!object) {
-      console.warn('Invalid style with id `' + id + '`. Skipping ...');
-      return emptyObject;
-    }
-    return object;
-  }
-}
diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleSheet.js b/packages/react-native-web/src/exports/StyleSheet/StyleSheet.js
deleted file mode 100644
index 92343517..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/StyleSheet.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * 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
- */
-
-import ReactNativePropRegistry from './ReactNativePropRegistry';
-import flattenStyle from './flattenStyle';
-import validate from './validate';
-
-const absoluteFillObject = {
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  top: 0,
-  bottom: 0
-};
-const absoluteFill: number = ReactNativePropRegistry.register(absoluteFillObject);
-
-const StyleSheet = {
-  absoluteFill,
-  absoluteFillObject,
-  compose(style1: any, style2: any): any {
-    if (process.env.NODE_ENV !== 'production') {
-      /* eslint-disable prefer-rest-params */
-      const len = arguments.length;
-      if (len > 2) {
-        const readableStyles = [...arguments].map((a) => flattenStyle(a));
-        throw new Error(
-          `StyleSheet.compose() only accepts 2 arguments, received ${len}: ${JSON.stringify(
-            readableStyles
-          )}`
-        );
-      }
-      /* eslint-enable prefer-rest-params */
-    }
-
-    if (style1 && style2) {
-      return [style1, style2];
-    } else {
-      return style1 || style2;
-    }
-  },
-  create(styles: Object): {| [key: string]: number |} {
-    const result = {};
-    Object.keys(styles).forEach((key) => {
-      if (process.env.NODE_ENV !== 'production') {
-        validate(key, styles);
-      }
-      const id = styles[key] && ReactNativePropRegistry.register(styles[key]);
-      result[key] = id;
-    });
-    return result;
-  },
-  flatten: flattenStyle,
-
-  // `hairlineWidth` is not implemented using screen density as browsers may
-  // round sub-pixel values down to `0`, causing the line not to be rendered.
-  hairlineWidth: 1
-};
-
-export default StyleSheet;
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
deleted file mode 100644
index fa31d103..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap
+++ /dev/null
@@ -1,105 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyleSheet/compile atomic converts style to atomic CSS 1`] = `
-Object {
-  "r-animationDirection-1kmv48j": Object {
-    "identifier": "r-animationDirection-1kmv48j",
-    "property": "animationDirection",
-    "rules": Array [
-      ".r-animationDirection-1kmv48j{-webkit-animation-direction:alternate,alternate-reverse;animation-direction:alternate,alternate-reverse;}",
-    ],
-    "value": "[\\"alternate\\",\\"alternate-reverse\\"]",
-  },
-  "r-animationKeyframes-zacbmr": Object {
-    "identifier": "r-animationKeyframes-zacbmr",
-    "property": "animationKeyframes",
-    "rules": Array [
-      ".r-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}}]",
-  },
-  "r-fontFamily-1qd0xha": Object {
-    "identifier": "r-fontFamily-1qd0xha",
-    "property": "fontFamily",
-    "rules": Array [
-      ".r-fontFamily-1qd0xha{font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;}",
-    ],
-    "value": "System",
-  },
-  "r-marginHorizontal-vlx1xi": Object {
-    "identifier": "r-marginHorizontal-vlx1xi",
-    "property": "marginHorizontal",
-    "rules": Array [
-      ".r-marginHorizontal-vlx1xi{margin-left:10px;margin-right:10px;}",
-    ],
-    "value": "10px",
-  },
-  "r-placeholderTextColor-1418aci": Object {
-    "identifier": "r-placeholderTextColor-1418aci",
-    "property": "placeholderTextColor",
-    "rules": Array [
-      ".r-placeholderTextColor-1418aci::-webkit-input-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
-      ".r-placeholderTextColor-1418aci::-moz-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
-      ".r-placeholderTextColor-1418aci:-ms-input-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
-      ".r-placeholderTextColor-1418aci::placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
-    ],
-    "value": "gray",
-  },
-  "r-pointerEvents-ah5dr5": Object {
-    "identifier": "r-pointerEvents-ah5dr5",
-    "property": "pointerEvents",
-    "rules": Array [
-      ".r-pointerEvents-ah5dr5>*{pointer-events:none;}",
-      ".r-pointerEvents-ah5dr5{pointer-events:auto!important;}",
-    ],
-    "value": "box-only",
-  },
-  "r-scrollbarWidth-2eszeu": Object {
-    "identifier": "r-scrollbarWidth-2eszeu",
-    "property": "scrollbarWidth",
-    "rules": Array [
-      ".r-scrollbarWidth-2eszeu::-webkit-scrollbar{display:none}",
-      ".r-scrollbarWidth-2eszeu{scrollbar-width:none;}",
-    ],
-    "value": "none",
-  },
-  "r-transform-1ehiua4": Object {
-    "identifier": "r-transform-1ehiua4",
-    "property": "transform",
-    "rules": Array [
-      ".r-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 -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;margin-left:10px;margin-right:10px;transform:translateX(50px);}",
-    ],
-  },
-}
-`;
-
-exports[`StyleSheet/compile inline converts style to inline styles 1`] = `
-Object {
-  "WebkitFlexShrink": 1,
-  "display": "flex",
-  "flexShrink": 1,
-  "marginLeft": "10px",
-  "marginRight": "10px",
-  "msFlexNegative": 1,
-}
-`;
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createOrderedCSSStyleSheet-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createOrderedCSSStyleSheet-test.js.snap
deleted file mode 100644
index b227a2ae..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createOrderedCSSStyleSheet-test.js.snap
+++ /dev/null
@@ -1,65 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`createOrderedCSSStyleSheet #insert deduplication for same group 1`] = `""`;
-
-exports[`createOrderedCSSStyleSheet #insert deduplication for same group 2`] = `
-"[stylesheet-group=\\"0\\"]{}
-.one {}"
-`;
-
-exports[`createOrderedCSSStyleSheet #insert deduplication for same group 3`] = `
-"[stylesheet-group=\\"0\\"]{}
-.one {}"
-`;
-
-exports[`createOrderedCSSStyleSheet #insert insertion order for different groups 1`] = `
-"[stylesheet-group=\\"1\\"]{}
-.one {}
-[stylesheet-group=\\"2.2\\"]{}
-.two {}
-[stylesheet-group=\\"3\\"]{}
-.three {}
-[stylesheet-group=\\"4\\"]{}
-.four-1 {}
-.four-2 {}
-[stylesheet-group=\\"9.9\\"]{}
-.nine-1 {}
-.nine-2 {}
-[stylesheet-group=\\"10\\"]{}
-.ten {}
-[stylesheet-group=\\"20\\"]{}
-.twenty {}
-[stylesheet-group=\\"20.2\\"]{}
-.twenty-point2 {}"
-`;
-
-exports[`createOrderedCSSStyleSheet #insert insertion order for same group 1`] = `""`;
-
-exports[`createOrderedCSSStyleSheet #insert insertion order for same group 2`] = `
-"[stylesheet-group=\\"0\\"]{}
-.one {}"
-`;
-
-exports[`createOrderedCSSStyleSheet #insert insertion order for same group 3`] = `
-"[stylesheet-group=\\"0\\"]{}
-.one {}
-.two {}"
-`;
-
-exports[`createOrderedCSSStyleSheet #insert insertion order for same group 4`] = `
-"[stylesheet-group=\\"0\\"]{}
-.one {}
-.two {}
-.three {}"
-`;
-
-exports[`createOrderedCSSStyleSheet client-side hydration from SSR CSS 1`] = `
-"[stylesheet-group=\\"1\\"] {}
-.one {width: 10px;}
-[stylesheet-group=\\"2\\"] {}
-.two-1 {height: 20px;}
-.two-2 {color: red;}
-@keyframes anim { 
-  0% {opacity: 1;} 
-}"
-`;
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap
deleted file mode 100644
index 8b231fea..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap
+++ /dev/null
@@ -1,66 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyleSheet/createReactDOMStyle fontFamily "Noto, BlinkMacSystemFont" 1`] = `
-Object {
-  "fontFamily": "Noto,BlinkMacSystemFont",
-}
-`;
-
-exports[`StyleSheet/createReactDOMStyle fontFamily "Noto, System" 1`] = `
-Object {
-  "fontFamily": "Noto,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
-}
-`;
-
-exports[`StyleSheet/createReactDOMStyle fontFamily "Noto, System" 2`] = `
-Object {
-  "font": "14px Noto, -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
-}
-`;
-
-exports[`StyleSheet/createReactDOMStyle fontFamily "System" 1`] = `
-Object {
-  "fontFamily": "-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
-}
-`;
-
-exports[`StyleSheet/createReactDOMStyle fontFamily "System" 2`] = `
-Object {
-  "font": "14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
-}
-`;
-
-exports[`StyleSheet/createReactDOMStyle fontFamily "monospace" 1`] = `
-Object {
-  "fontFamily": "monospace,monospace",
-}
-`;
-
-exports[`StyleSheet/createReactDOMStyle fontFamily general case 1`] = `
-Object {
-  "fontFamily": "Georgia, Times, serif",
-}
-`;
-
-exports[`StyleSheet/createReactDOMStyle shortform -> longform 1`] = `
-Object {
-  "borderBottomColor": "rgba(255,255,255,1.00)",
-  "borderBottomStyle": "solid",
-  "borderBottomWidth": "1px",
-  "borderLeftStyle": "solid",
-  "borderLeftWidth": "0px",
-  "borderRightStyle": "solid",
-  "borderRightWidth": "0px",
-  "borderTopStyle": "solid",
-  "borderTopWidth": "0px",
-  "boxSizing": "border-box",
-  "marginBottom": "25px",
-  "marginLeft": "10px",
-  "marginRight": "10px",
-  "marginTop": "50px",
-  "overflowX": "hidden",
-  "overflowY": "hidden",
-  "overscrollBehaviorX": "contain",
-  "overscrollBehaviorY": "contain",
-}
-`;
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createStyleResolver-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createStyleResolver-test.js.snap
deleted file mode 100644
index 957cd3a4..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createStyleResolver-test.js.snap
+++ /dev/null
@@ -1,203 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyleSheet/createStyleResolver resolve resolves inline-style pointerEvents to classname 1`] = `
-Object {
-  "classList": Array [
-    "r-pointerEvents-12vffkv",
-  ],
-  "className": "r-pointerEvents-12vffkv",
-}
-`;
-
-exports[`StyleSheet/createStyleResolver resolve with register before RTL, resolves to correct className 1`] = `
-Object {
-  "classList": Array [
-    "r-marginRight-zso239",
-    "r-right-1bnbe1j",
-    "r-textAlign-1ff274t",
-  ],
-  "className": "r-marginRight-zso239 r-right-1bnbe1j r-textAlign-1ff274t",
-}
-`;
-
-exports[`StyleSheet/createStyleResolver resolve with register before RTL, resolves to correct className 2`] = `
-Object {
-  "classList": Array [
-    "r-left-2s0hu9",
-    "r-marginLeft-1n0xq6e",
-    "r-textAlign-fdjqy7",
-  ],
-  "className": "r-left-2s0hu9 r-marginLeft-1n0xq6e r-textAlign-fdjqy7",
-}
-`;
-
-exports[`StyleSheet/createStyleResolver resolve with register, resolves to className 1`] = `
-Object {
-  "classList": Array [
-    "r-borderColor-4a18lf",
-    "r-borderWidth-1yadl64",
-    "r-left-1tsx3h3",
-    "r-opacity-icoktb",
-    "r-position-u8s1d",
-    "r-width-b8lwoo",
-  ],
-  "className": "r-borderColor-4a18lf r-borderWidth-1yadl64 r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d r-width-b8lwoo",
-}
-`;
-
-exports[`StyleSheet/createStyleResolver resolve with register, resolves to className 2`] = `
-Object {
-  "classList": Array [
-    "r-borderColor-4a18lf",
-    "r-borderWidth-1yadl64",
-    "r-left-1tsx3h3",
-    "r-opacity-icoktb",
-    "r-position-u8s1d",
-    "r-width-l0gwng",
-  ],
-  "className": "r-borderColor-4a18lf r-borderWidth-1yadl64 r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d r-width-l0gwng",
-}
-`;
-
-exports[`StyleSheet/createStyleResolver resolve with register, resolves to className 3`] = `
-Object {
-  "classList": Array [
-    "r-borderColor-4a18lf",
-    "r-borderWidth-1yadl64",
-    "r-left-1tsx3h3",
-    "r-opacity-icoktb",
-    "r-position-u8s1d",
-    "r-width-b8lwoo",
-  ],
-  "className": "r-borderColor-4a18lf r-borderWidth-1yadl64 r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d r-width-b8lwoo",
-}
-`;
-
-exports[`StyleSheet/createStyleResolver resolve with register, resolves to mixed 1`] = `
-Object {
-  "classList": Array [
-    "r-left-1tsx3h3",
-    "r-opacity-icoktb",
-    "r-position-u8s1d",
-  ],
-  "className": "r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d",
-  "style": Object {
-    "borderBottomColor": "rgba(255,0,0,1.00)",
-    "borderBottomWidth": "0px",
-    "borderLeftColor": "rgba(255,0,0,1.00)",
-    "borderLeftWidth": "0px",
-    "borderRightColor": "rgba(255,0,0,1.00)",
-    "borderRightWidth": "0px",
-    "borderTopColor": "rgba(255,0,0,1.00)",
-    "borderTopWidth": "0px",
-    "width": "100px",
-  },
-}
-`;
-
-exports[`StyleSheet/createStyleResolver resolve with register, resolves to mixed 2`] = `
-Object {
-  "classList": Array [
-    "r-left-1tsx3h3",
-    "r-opacity-icoktb",
-    "r-position-u8s1d",
-    "r-width-l0gwng",
-  ],
-  "className": "r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d r-width-l0gwng",
-  "style": Object {
-    "borderBottomColor": "rgba(255,0,0,1.00)",
-    "borderBottomWidth": "0px",
-    "borderLeftColor": "rgba(255,0,0,1.00)",
-    "borderLeftWidth": "0px",
-    "borderRightColor": "rgba(255,0,0,1.00)",
-    "borderRightWidth": "0px",
-    "borderTopColor": "rgba(255,0,0,1.00)",
-    "borderTopWidth": "0px",
-  },
-}
-`;
-
-exports[`StyleSheet/createStyleResolver resolve with register, resolves to mixed 3`] = `
-Object {
-  "classList": Array [
-    "r-left-1tsx3h3",
-    "r-opacity-icoktb",
-    "r-position-u8s1d",
-  ],
-  "className": "r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d",
-  "style": Object {
-    "borderBottomColor": "rgba(255,0,0,1.00)",
-    "borderBottomWidth": "0px",
-    "borderLeftColor": "rgba(255,0,0,1.00)",
-    "borderLeftWidth": "0px",
-    "borderRightColor": "rgba(255,0,0,1.00)",
-    "borderRightWidth": "0px",
-    "borderTopColor": "rgba(255,0,0,1.00)",
-    "borderTopWidth": "0px",
-    "width": "100px",
-  },
-}
-`;
-
-exports[`StyleSheet/createStyleResolver resolve without register, resolves to inline styles 1`] = `
-Object {
-  "classList": Array [],
-  "className": "",
-  "style": Object {
-    "borderBottomColor": "rgba(255,0,0,1.00)",
-    "borderBottomWidth": "0px",
-    "borderLeftColor": "rgba(255,0,0,1.00)",
-    "borderLeftWidth": "0px",
-    "borderRightColor": "rgba(255,0,0,1.00)",
-    "borderRightWidth": "0px",
-    "borderTopColor": "rgba(255,0,0,1.00)",
-    "borderTopWidth": "0px",
-    "left": "50px",
-    "opacity": 0.5,
-    "position": "absolute",
-    "width": "100px",
-  },
-}
-`;
-
-exports[`StyleSheet/createStyleResolver resolve without register, resolves to inline styles 2`] = `
-Object {
-  "classList": Array [],
-  "className": "",
-  "style": Object {
-    "borderBottomColor": "rgba(255,0,0,1.00)",
-    "borderBottomWidth": "0px",
-    "borderLeftColor": "rgba(255,0,0,1.00)",
-    "borderLeftWidth": "0px",
-    "borderRightColor": "rgba(255,0,0,1.00)",
-    "borderRightWidth": "0px",
-    "borderTopColor": "rgba(255,0,0,1.00)",
-    "borderTopWidth": "0px",
-    "left": "50px",
-    "opacity": 0.5,
-    "position": "absolute",
-    "width": "200px",
-  },
-}
-`;
-
-exports[`StyleSheet/createStyleResolver resolve without register, resolves to inline styles 3`] = `
-Object {
-  "classList": Array [],
-  "className": "",
-  "style": Object {
-    "borderBottomColor": "rgba(255,0,0,1.00)",
-    "borderBottomWidth": "0px",
-    "borderLeftColor": "rgba(255,0,0,1.00)",
-    "borderLeftWidth": "0px",
-    "borderRightColor": "rgba(255,0,0,1.00)",
-    "borderRightWidth": "0px",
-    "borderTopColor": "rgba(255,0,0,1.00)",
-    "borderTopWidth": "0px",
-    "left": "50px",
-    "opacity": 0.5,
-    "position": "absolute",
-    "width": "100px",
-  },
-}
-`;
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/flattenStyle-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/flattenStyle-test.js.snap
deleted file mode 100644
index 0142c5a0..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/flattenStyle-test.js.snap
+++ /dev/null
@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyleSheet/flattenStyle should merge style objects 1`] = `
-Object {
-  "opacity": 1,
-  "order": 2,
-}
-`;
-
-exports[`StyleSheet/flattenStyle should override style properties 1`] = `
-Object {
-  "backgroundColor": "#023c69",
-  "order": null,
-}
-`;
-
-exports[`StyleSheet/flattenStyle should overwrite properties with \`undefined\` 1`] = `
-Object {
-  "backgroundColor": undefined,
-}
-`;
-
-exports[`StyleSheet/flattenStyle should recursively flatten arrays 1`] = `
-Object {
-  "opacity": 1,
-  "order": 3,
-}
-`;
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
deleted file mode 100644
index f1e763b1..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/compile-test.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/* 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',
-        scrollbarWidth: 'none',
-        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__/createReactDOMStyle-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-createReactDOMStyle-test.js
similarity index 64%
rename from packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js
rename to packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-createReactDOMStyle-test.js
index ccd57e8e..143d681e 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-createReactDOMStyle-test.js
@@ -1,6 +1,11 @@
-/* eslint-env jasmine, jest */
+/**
+ * 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.
+ */
 
-import createReactDOMStyle from '../createReactDOMStyle';
+import createReactDOMStyle from '../compiler/createReactDOMStyle';
 
 const reactNativeStyle = {
   boxShadow: '1px 1px 1px 1px #000',
@@ -15,14 +20,14 @@ const reactNativeStyle = {
   resizeMode: 'contain'
 };
 
-describe('StyleSheet/createReactDOMStyle', () => {
+describe('compiler/createReactDOMStyle', () => {
   test('noop on DOM styles', () => {
     const firstStyle = createReactDOMStyle(reactNativeStyle);
     const secondStyle = createReactDOMStyle(firstStyle);
     expect(firstStyle).toEqual(secondStyle);
   });
 
-  test('shortform -> longform', () => {
+  test('shortform -> longform for inline styles', () => {
     const style = {
       borderStyle: 'solid',
       boxSizing: 'border-box',
@@ -33,10 +38,38 @@ describe('StyleSheet/createReactDOMStyle', () => {
       marginVertical: 25,
       margin: 10,
       overflow: 'hidden',
-      overscrollBehavior: 'contain'
+      overscrollBehavior: 'contain',
+      paddingLeft: 50,
+      paddingHorizontal: 25,
+      padding: 10
     };
 
-    expect(createReactDOMStyle(style)).toMatchSnapshot();
+    expect(createReactDOMStyle(style, true)).toMatchInlineSnapshot(`
+      {
+        "borderBottomColor": "rgba(255,255,255,1.00)",
+        "borderBottomStyle": "solid",
+        "borderBottomWidth": "1px",
+        "borderLeftStyle": "solid",
+        "borderLeftWidth": "0px",
+        "borderRightStyle": "solid",
+        "borderRightWidth": "0px",
+        "borderTopStyle": "solid",
+        "borderTopWidth": "0px",
+        "boxSizing": "border-box",
+        "marginBottom": "25px",
+        "marginLeft": "10px",
+        "marginRight": "10px",
+        "marginTop": "50px",
+        "overflowX": "hidden",
+        "overflowY": "hidden",
+        "overscrollBehaviorX": "contain",
+        "overscrollBehaviorY": "contain",
+        "paddingBottom": "10px",
+        "paddingLeft": "50px",
+        "paddingRight": "25px",
+        "paddingTop": "10px",
+      }
+    `);
   });
 
   test('aspectRatio', () => {
@@ -101,25 +134,54 @@ describe('StyleSheet/createReactDOMStyle', () => {
 
   describe('fontFamily', () => {
     test('general case', () => {
-      expect(createReactDOMStyle({ fontFamily: 'Georgia, Times, serif' })).toMatchSnapshot();
+      expect(createReactDOMStyle({ fontFamily: 'Georgia, Times, serif' })).toMatchInlineSnapshot(`
+        {
+          "fontFamily": "Georgia, Times, serif",
+        }
+      `);
     });
 
     test('"monospace"', () => {
-      expect(createReactDOMStyle({ fontFamily: 'monospace' })).toMatchSnapshot();
+      expect(createReactDOMStyle({ fontFamily: 'monospace' })).toMatchInlineSnapshot(`
+        {
+          "fontFamily": "monospace,monospace",
+        }
+      `);
     });
 
     test('"System"', () => {
-      expect(createReactDOMStyle({ fontFamily: 'System' })).toMatchSnapshot();
-      expect(createReactDOMStyle({ font: '14px System' })).toMatchSnapshot();
+      expect(createReactDOMStyle({ fontFamily: 'System' })).toMatchInlineSnapshot(`
+        {
+          "fontFamily": "-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
+        }
+      `);
+      expect(createReactDOMStyle({ font: '14px System' })).toMatchInlineSnapshot(`
+        {
+          "font": "14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
+        }
+      `);
     });
 
     test('"Noto, System"', () => {
-      expect(createReactDOMStyle({ fontFamily: 'Noto, System' })).toMatchSnapshot();
-      expect(createReactDOMStyle({ font: '14px Noto, System' })).toMatchSnapshot();
+      expect(createReactDOMStyle({ fontFamily: 'Noto, System' })).toMatchInlineSnapshot(`
+        {
+          "fontFamily": "Noto,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
+        }
+      `);
+      expect(createReactDOMStyle({ font: '14px Noto, System' })).toMatchInlineSnapshot(`
+        {
+          "font": "14px Noto, -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
+        }
+      `);
     });
 
     test('"Noto, BlinkMacSystemFont"', () => {
-      expect(createReactDOMStyle({ fontFamily: 'Noto, BlinkMacSystemFont' })).toMatchSnapshot();
+      expect(createReactDOMStyle({ fontFamily: 'Noto, BlinkMacSystemFont' }))
+        .toMatchInlineSnapshot(`
+        {
+          "fontFamily": "Noto,BlinkMacSystemFont",
+        }
+      `);
     });
   });
 
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-preprocess-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-preprocess-test.js
new file mode 100644
index 00000000..2a3eb440
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-preprocess-test.js
@@ -0,0 +1,294 @@
+/**
+ * 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.
+ */
+
+import preprocess from '../compiler/preprocess';
+
+describe('StyleSheet/preprocess', () => {
+  describe('logical style polyfill', () => {
+    [false, true].forEach((isRTL) => {
+      const dir = isRTL ? 'rtl' : 'ltr';
+
+      test(`ignores "left" properties for ${dir}`, () => {
+        const initial = {
+          borderLeftColor: 'red',
+          borderLeftStyle: 'solid',
+          borderLeftWidth: 1,
+          left: 1,
+          marginLeft: 5,
+          paddingLeft: 10
+        };
+        expect(preprocess(initial, isRTL)).toEqual(initial);
+      });
+
+      test(`ignores "right" properties for ${dir}`, () => {
+        const initial = {
+          borderRightColor: 'red',
+          borderRightStyle: 'solid',
+          borderRightWidth: 1,
+          right: 1,
+          marginRight: 5,
+          paddingRight: 10
+        };
+        expect(preprocess(initial, isRTL)).toEqual(initial);
+      });
+
+      test(`ignores "left" values for ${dir}`, () => {
+        const initial = {
+          clear: 'left',
+          float: 'left',
+          textAlign: 'left',
+          transitionProperty: 'left'
+        };
+        expect(preprocess(initial, isRTL)).toEqual(initial);
+      });
+
+      test(`ignores "right" values for ${dir}`, () => {
+        const initial = {
+          clear: 'right',
+          float: 'right',
+          textAlign: 'right',
+          transitionProperty: 'right'
+        };
+        expect(preprocess(initial, isRTL)).toEqual(initial);
+      });
+
+      test(`converts "start" properties for ${dir}`, () => {
+        const initial = {
+          borderStartColor: 'red',
+          borderStartStyle: 'solid',
+          borderStartWidth: 1,
+          start: 1,
+          marginStart: 5,
+          paddingStart: 10
+        };
+
+        const expectedLTR = {
+          borderLeftColor: 'red',
+          borderLeftStyle: 'solid',
+          borderLeftWidth: 1,
+          left: 1,
+          marginLeft: 5,
+          paddingLeft: 10
+        };
+        const expectedRTL = {
+          borderRightColor: 'red',
+          borderRightStyle: 'solid',
+          borderRightWidth: 1,
+          right: 1,
+          marginRight: 5,
+          paddingRight: 10
+        };
+        expect(preprocess(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
+      });
+
+      test(`converts "end" properties for ${dir}`, () => {
+        const initial = {
+          borderEndColor: 'red',
+          borderEndStyle: 'solid',
+          borderEndWidth: 1,
+          end: 1,
+          marginEnd: 5,
+          paddingEnd: 10
+        };
+
+        const expectedLTR = {
+          borderRightColor: 'red',
+          borderRightStyle: 'solid',
+          borderRightWidth: 1,
+          right: 1,
+          marginRight: 5,
+          paddingRight: 10
+        };
+        const expectedRTL = {
+          borderLeftColor: 'red',
+          borderLeftStyle: 'solid',
+          borderLeftWidth: 1,
+          left: 1,
+          marginLeft: 5,
+          paddingLeft: 10
+        };
+        expect(preprocess(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
+      });
+
+      test(`converts "start" values for ${dir}`, () => {
+        const initial = {
+          clear: 'start',
+          float: 'start',
+          textAlign: 'start',
+          transitionProperty: 'start'
+        };
+
+        const expectedLTR = {
+          clear: 'left',
+          float: 'left',
+          textAlign: 'left',
+          transitionProperty: 'left'
+        };
+        const expectedRTL = {
+          clear: 'right',
+          float: 'right',
+          textAlign: 'right',
+          transitionProperty: 'right'
+        };
+        expect(preprocess(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
+      });
+
+      test(`converts "end" values for ${dir}`, () => {
+        const initial = {
+          clear: 'end',
+          float: 'end',
+          textAlign: 'end',
+          transitionProperty: 'end'
+        };
+
+        const expectedLTR = {
+          clear: 'right',
+          float: 'right',
+          textAlign: 'right',
+          transitionProperty: 'right'
+        };
+        const expectedRTL = {
+          clear: 'left',
+          float: 'left',
+          textAlign: 'left',
+          transitionProperty: 'left'
+        };
+        expect(preprocess(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
+      });
+
+      test('end/start properties take precedence over left/right', () => {
+        const initialLTR = {
+          borderStartWidth: 10,
+          borderLeftWidth: 0,
+          end: 10,
+          right: 0,
+          marginStart: 10,
+          marginLeft: 0
+        };
+        const expectedLTR = {
+          borderLeftWidth: 10,
+          marginLeft: 10,
+          right: 10
+        };
+
+        const initialRTL = {
+          borderStartWidth: 10,
+          borderRightWidth: 0,
+          end: 10,
+          left: 0,
+          marginStart: 10,
+          marginRight: 0
+        };
+        const expectedRTL = {
+          borderRightWidth: 10,
+          marginRight: 10,
+          left: 10
+        };
+        expect(preprocess(isRTL ? initialRTL : initialLTR, isRTL)).toEqual(
+          isRTL ? expectedRTL : expectedLTR
+        );
+      });
+    });
+  });
+
+  describe('preprocesses multiple shadow styles into a single declaration', () => {
+    test('shadowColor only', () => {
+      expect(preprocess({ shadowColor: 'red' })).toEqual({
+        boxShadow: '0px 0px 0px rgba(255,0,0,1.00)'
+      });
+    });
+
+    test('shadowColor and shadowOpacity only', () => {
+      expect(preprocess({ shadowColor: 'red', shadowOpacity: 0.5 })).toEqual({
+        boxShadow: '0px 0px 0px rgba(255,0,0,0.50)'
+      });
+    });
+
+    test('shadowOffset only', () => {
+      expect(preprocess({ shadowOffset: { width: 1, height: 2 } })).toEqual({
+        boxShadow: '1px 2px 0px rgba(0,0,0,1.00)'
+      });
+    });
+
+    test('shadowRadius only', () => {
+      expect(preprocess({ shadowRadius: 5 })).toEqual({
+        boxShadow: '0px 0px 5px rgba(0,0,0,1.00)'
+      });
+    });
+
+    test('shadowOffset, shadowRadius, shadowColor', () => {
+      expect(
+        preprocess({
+          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(preprocess({ textShadowColor: 'red' })).toEqual({});
+    });
+
+    test('textShadowOffset only', () => {
+      expect(preprocess({ textShadowOffset: { width: 1, height: 2 } })).toEqual({});
+    });
+
+    test('textShadowRadius only', () => {
+      expect(preprocess({ textShadowRadius: 5 })).toEqual({});
+    });
+
+    test('textShadowColor and textShadowOffset only', () => {
+      expect(
+        preprocess({
+          textShadowColor: 'red',
+          textShadowOffset: { width: 0, height: 0 }
+        })
+      ).toEqual({});
+      expect(
+        preprocess({
+          textShadowColor: 'red',
+          textShadowOffset: { width: -1, height: 0 }
+        })
+      ).toEqual({
+        textShadow: '-1px 0px 0px rgba(255,0,0,1.00)'
+      });
+      expect(
+        preprocess({
+          textShadowColor: 'red',
+          textShadowOffset: { width: 1, height: 2 }
+        })
+      ).toEqual({
+        textShadow: '1px 2px 0px rgba(255,0,0,1.00)'
+      });
+    });
+
+    test('textShadowColor and textShadowRadius only', () => {
+      expect(preprocess({ textShadowColor: 'red', textShadowRadius: 0 })).toEqual({});
+      expect(preprocess({ textShadowColor: 'red', textShadowRadius: 5 })).toEqual({
+        textShadow: '0px 0px 5px rgba(255,0,0,1.00)'
+      });
+    });
+
+    test('textShadowColor, textShadowOffset, textShadowRadius', () => {
+      expect(
+        preprocess({
+          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__/compiler-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-test.js
new file mode 100644
index 00000000..10956da9
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-test.js
@@ -0,0 +1,170 @@
+/**
+ * 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.
+ */
+
+import { atomic, classic, inline } from '../compiler';
+
+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',
+        scrollbarWidth: 'none',
+        pointerEvents: 'box-only',
+        transform: [
+          {
+            translateX: 50,
+            scale: -1
+          }
+        ]
+      });
+
+      expect(result).toMatchInlineSnapshot(`
+        [
+          {
+            "$$css": true,
+            "animationDirection": "r-animationDirection-1kmv48j",
+            "animationKeyframes": "r-animationKeyframes-zacbmr",
+            "fontFamily": "r-fontFamily-1qd0xha",
+            "marginHorizontal": "r-marginHorizontal-vlx1xi",
+            "placeholderTextColor": "r-placeholderTextColor-1418aci",
+            "pointerEvents": "r-pointerEvents-ah5dr5",
+            "scrollbarWidth": "r-scrollbarWidth-2eszeu",
+            "transform": "r-transform-1ehiua4",
+          },
+          [
+            [
+              [
+                ".r-animationDirection-1kmv48j{animation-direction:alternate,alternate-reverse;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-animationKeyframes-zacbmr{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;}}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-fontFamily-1qd0xha{font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-marginHorizontal-vlx1xi{margin-left:10px;margin-right:10px;}",
+              ],
+              2.1,
+            ],
+            [
+              [
+                ".r-placeholderTextColor-1418aci::-webkit-input-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
+                ".r-placeholderTextColor-1418aci::-moz-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
+                ".r-placeholderTextColor-1418aci:-ms-input-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
+                ".r-placeholderTextColor-1418aci::placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-pointerEvents-ah5dr5>*{pointer-events:none;}",
+                ".r-pointerEvents-ah5dr5{pointer-events:auto!important;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-scrollbarWidth-2eszeu::-webkit-scrollbar{display:none}",
+                ".r-scrollbarWidth-2eszeu{scrollbar-width:none;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-transform-1ehiua4{transform:translateX(50px);}",
+              ],
+              2.2,
+            ],
+          ],
+        ]
+      `);
+    });
+  });
+
+  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).toMatchInlineSnapshot(`
+        [
+          {
+            "$$css": true,
+            "css-text-1jr0ypv": "css-text-1jr0ypv",
+          },
+          [
+            [
+              [
+                "@-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{animation-direction:alternate,alternate-reverse;animation-name:r-animation-8jhqzh,r-animation-5azpl5;font:14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;margin-left:10px;margin-right:10px;transform:translateX(50px);}",
+              ],
+              1,
+            ],
+          ],
+        ]
+      `);
+    });
+  });
+
+  describe('inline', () => {
+    test('converts style to inline styles', () => {
+      const result = inline({
+        marginHorizontal: 10,
+        display: 'flex',
+        flexShrink: 1
+      });
+
+      expect(result).toMatchInlineSnapshot(`
+        {
+          "display": "flex",
+          "flexShrink": 1,
+          "marginLeft": "10px",
+          "marginRight": "10px",
+        }
+      `);
+    });
+  });
+});
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
deleted file mode 100644
index f4fc7954..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/createCompileableStyle-test.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/* 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__/createStyleResolver-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/createStyleResolver-test.js
deleted file mode 100644
index 97fec84e..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/createStyleResolver-test.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/* eslint-env jasmine, jest */
-
-import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
-import I18nManager from '../../I18nManager';
-import ReactNativePropRegistry from '../ReactNativePropRegistry';
-import createStyleResolver from '../createStyleResolver';
-
-const canUseDOM = ExecutionEnvironment.canUseDOM;
-let styleResolver;
-
-describe('StyleSheet/createStyleResolver', () => {
-  beforeEach(() => {
-    styleResolver = createStyleResolver({ insert() {} });
-  });
-
-  describe('resolve', () => {
-    const styleA = { borderWidth: 0, borderColor: 'red', width: 100 };
-    const styleB = {
-      position: 'absolute',
-      left: 50,
-      opacity: 0.5
-    };
-    const styleC = { width: 200 };
-
-    const testResolve = (a, b, c) => {
-      // no common properties, different resolving order, same result
-      const resolve1 = styleResolver.resolve([a, b]);
-      expect(resolve1).toMatchSnapshot();
-      const resolve2 = styleResolver.resolve([b, a]);
-      expect(resolve1).toEqual(resolve2);
-
-      // common properties, different resolving order, different result
-      const resolve3 = styleResolver.resolve([a, b, c]);
-      expect(resolve3).toMatchSnapshot();
-      const resolve4 = styleResolver.resolve([c, a, b]);
-      expect(resolve4).toMatchSnapshot();
-      expect(resolve3).not.toEqual(resolve4);
-    };
-
-    test('with register, resolves to className', () => {
-      const a = ReactNativePropRegistry.register(styleA);
-      const b = ReactNativePropRegistry.register(styleB);
-      const c = ReactNativePropRegistry.register(styleC);
-      testResolve(a, b, c);
-    });
-
-    test('with register before RTL, resolves to correct className', () => {
-      const a = ReactNativePropRegistry.register({ left: '12.34%' });
-      const b = ReactNativePropRegistry.register({ textAlign: 'left' });
-      const c = ReactNativePropRegistry.register({ marginLeft: 10 });
-      I18nManager.forceRTL(true);
-
-      const resolved1 = styleResolver.resolve([a, b, c]);
-      expect(resolved1).toMatchSnapshot();
-
-      I18nManager.swapLeftAndRightInRTL(false);
-
-      const resolved2 = styleResolver.resolve([a, b, c]);
-      expect(resolved2).toMatchSnapshot();
-
-      I18nManager.swapLeftAndRightInRTL(true);
-      I18nManager.forceRTL(false);
-    });
-
-    test('with register, resolves to mixed', () => {
-      const a = styleA;
-      const b = ReactNativePropRegistry.register(styleB);
-      const c = ReactNativePropRegistry.register(styleC);
-      testResolve(a, b, c);
-    });
-
-    test('without register, resolves to inline styles', () => {
-      testResolve(styleA, styleB, styleC);
-    });
-
-    test('resolves inline-style pointerEvents to classname', () => {
-      expect(styleResolver.resolve({ pointerEvents: 'box-none' })).toMatchSnapshot();
-    });
-
-    test.skip('long form style properties take precedence over shorthand properties', () => {
-      const registeredStyle1 = ReactNativePropRegistry.register({ paddingHorizontal: '40px' });
-      const inlineStyle1 = { padding: '8px', paddingHorizontal: '40px' };
-      expect(styleResolver.resolve([registeredStyle1, inlineStyle1])).toMatchSnapshot();
-
-      const registeredStyle2 = ReactNativePropRegistry.register({ marginVertical: '40px' });
-      const inlineStyle2 = { margin: '8px', marginVertical: '40px' };
-      expect(styleResolver.resolve([registeredStyle2, inlineStyle2])).toMatchSnapshot();
-    });
-
-    describe('sheet', () => {
-      beforeEach(() => {
-        ExecutionEnvironment.canUseDOM = false;
-      });
-
-      afterEach(() => {
-        ExecutionEnvironment.canUseDOM = canUseDOM;
-      });
-
-      test('returns the new sheet once re-initialized', () => {
-        const sheet = styleResolver.sheet;
-
-        // re-initialize the sheet
-        styleResolver.getStyleSheet();
-
-        expect(styleResolver.sheet).not.toBe(sheet);
-      });
-    });
-  });
-});
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/createOrderedCSSStyleSheet-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/dom-createOrderedCSSStyleSheet-test.js
similarity index 50%
rename from packages/react-native-web/src/exports/StyleSheet/__tests__/createOrderedCSSStyleSheet-test.js
rename to packages/react-native-web/src/exports/StyleSheet/__tests__/dom-createOrderedCSSStyleSheet-test.js
index afed0df3..98c5b129 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/createOrderedCSSStyleSheet-test.js
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/dom-createOrderedCSSStyleSheet-test.js
@@ -1,8 +1,11 @@
-/* eslint-env jasmine, jest */
+/**
+ * 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.
+ */
 
-'use strict';
-
-import createOrderedCSSStyleSheet from '../createOrderedCSSStyleSheet';
+import createOrderedCSSStyleSheet from '../dom/createOrderedCSSStyleSheet';
 
 const insertStyleElement = () => {
   const element = document.createElement('style');
@@ -20,28 +23,56 @@ describe('createOrderedCSSStyleSheet', () => {
     test('insertion order for same group', () => {
       const sheet = createOrderedCSSStyleSheet();
 
-      expect(sheet.getTextContent()).toMatchSnapshot();
+      expect(sheet.getTextContent()).toMatchInlineSnapshot('""');
 
-      sheet.insert('.one {}', 0);
-      expect(sheet.getTextContent()).toMatchSnapshot();
+      sheet.insert('.a {}', 0);
+      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        .a {}"
+      `);
 
-      sheet.insert('.two {}', 0);
-      expect(sheet.getTextContent()).toMatchSnapshot();
+      sheet.insert('.b {}', 0);
+      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        .a {}
+        .b {}"
+      `);
 
-      sheet.insert('.three {}', 0);
-      expect(sheet.getTextContent()).toMatchSnapshot();
+      sheet.insert('.c {}', 0);
+      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        .a {}
+        .b {}
+        .c {}"
+      `);
     });
 
     test('deduplication for same group', () => {
       const sheet = createOrderedCSSStyleSheet();
 
-      expect(sheet.getTextContent()).toMatchSnapshot();
+      sheet.insert('.a {}', 0);
+      sheet.insert('.a {}', 0);
+      sheet.insert('.a {}', 0);
 
-      sheet.insert('.one {}', 0);
-      expect(sheet.getTextContent()).toMatchSnapshot();
+      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        .a {}"
+      `);
+    });
 
-      sheet.insert('.one {}', 0);
-      expect(sheet.getTextContent()).toMatchSnapshot();
+    test('order for same group', () => {
+      const sheet = createOrderedCSSStyleSheet();
+
+      sheet.insert('.c {}', 0);
+      sheet.insert('.b {}', 0);
+      sheet.insert('.a {}', 0);
+
+      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        .a {}
+        .b {}
+        .c {}"
+      `);
     });
 
     test('insertion order for different groups', () => {
@@ -58,7 +89,26 @@ describe('createOrderedCSSStyleSheet', () => {
       sheet.insert('.ten {}', 10);
       sheet.insert('.twenty-point2 {}', 20.2);
 
-      expect(sheet.getTextContent()).toMatchSnapshot();
+      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"1\\"]{}
+        .one {}
+        [stylesheet-group=\\"2.2\\"]{}
+        .two {}
+        [stylesheet-group=\\"3\\"]{}
+        .three {}
+        [stylesheet-group=\\"4\\"]{}
+        .four-1 {}
+        .four-2 {}
+        [stylesheet-group=\\"9.9\\"]{}
+        .nine-1 {}
+        .nine-2 {}
+        [stylesheet-group=\\"10\\"]{}
+        .ten {}
+        [stylesheet-group=\\"20\\"]{}
+        .twenty {}
+        [stylesheet-group=\\"20.2\\"]{}
+        .twenty-point2 {}"
+      `);
     });
   });
 
@@ -84,7 +134,16 @@ describe('createOrderedCSSStyleSheet', () => {
       // Add SSR CSS to client style sheet
       element.appendChild(document.createTextNode(textContent));
       const clientSheet = createOrderedCSSStyleSheet(element.sheet);
-      expect(clientSheet.getTextContent()).toMatchSnapshot();
+      expect(clientSheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"1\\"] {}
+        .one {width: 10px;}
+        [stylesheet-group=\\"2\\"] {}
+        .two-1 {height: 20px;}
+        .two-2 {color: red;}
+        @keyframes anim { 
+          0% {opacity: 1;} 
+        }"
+      `);
     });
 
     test('works when the group marker is in single quotes', () => {
@@ -99,12 +158,12 @@ describe('createOrderedCSSStyleSheet', () => {
       const clientSheet = createOrderedCSSStyleSheet(element.sheet);
       clientSheet.insert('.c { color: red }', 0);
       expect(clientSheet.getTextContent()).toMatchInlineSnapshot(`
-"[stylesheet-group='0'] {}
-.a {color: red;}
-.c { color: red }
-[stylesheet-group='1'] {}
-.b {color: red;}"
-`);
+        "[stylesheet-group='0'] {}
+        .a {color: red;}
+        .c { color: red }
+        [stylesheet-group='1'] {}
+        .b {color: red;}"
+      `);
     });
   });
 });
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/dom-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/dom-test.js
new file mode 100644
index 00000000..533b2b8c
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/dom-test.js
@@ -0,0 +1,60 @@
+/**
+ * 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.
+ */
+
+import { createSheet } from '../dom';
+
+describe('createSheet', () => {
+  test('creates a sheet on the client', () => {
+    const sheet = createSheet();
+    expect(sheet.id).toMatchInlineSnapshot(`"react-native-stylesheet"`);
+    expect(typeof sheet.getTextContent()).toBe('string');
+    expect(typeof sheet.insert).toBe('function');
+  });
+
+  test('supports multiple documents with same styles', () => {
+    const sheet = createSheet();
+    sheet.insert('.test-sheet { opacity: 1 }', 3);
+
+    // Iframe -----
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+    const iframeDoc = iframe.contentWindow.document;
+    const iframeRootTag = document.createElement('div');
+    iframeDoc.body.appendChild(iframeRootTag);
+    const iframeSheet = createSheet(iframeRootTag);
+
+    // Did we generate a new sheet?
+    expect(sheet).not.toBe(iframeSheet);
+    expect(iframeSheet.id).toMatchInlineSnapshot(`"react-native-stylesheet"`);
+    expect(typeof iframeSheet.insert).toBe('function');
+    expect(iframeDoc.getElementById('react-native-stylesheet')).not.toBe(null);
+    // Does the content match existing sheets?
+    expect(iframeSheet.getTextContent().includes('test-sheet')).toBe(true);
+    // Does the content update when other sheets are updated?
+    sheet.insert('.test-iframe { opacity: 0 }', 3);
+    expect(iframeSheet.getTextContent().includes('test-iframe')).toBe(true);
+
+    // ShadowDOM -----
+    const div = document.createElement('div');
+    const shadowRoot = div.attachShadow({ mode: 'open' });
+    const shadowRootTag = document.createElement('div');
+    shadowRoot.appendChild(shadowRootTag);
+    document.body.appendChild(shadowRoot);
+    const shadowSheet = createSheet(shadowRootTag);
+
+    // Did we generate a new sheet?
+    expect(sheet).not.toBe(shadowSheet);
+    expect(shadowSheet.id).toMatchInlineSnapshot(`"react-native-stylesheet"`);
+    expect(typeof shadowSheet.insert).toBe('function');
+    // expect(shadowRoot.getElementById('react-native-stylesheet')).not.toBe(null);
+    // Does the content match existing sheets?
+    expect(shadowSheet.getTextContent().includes('test-sheet')).toBe(true);
+    // Does the content update when other sheets are updated?
+    sheet.insert('.test-shadow { opacity: 0 }', 3);
+    expect(shadowSheet.getTextContent().includes('test-shadow')).toBe(true);
+  });
+});
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/dom-test.node.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/dom-test.node.js
new file mode 100644
index 00000000..56d7a9f5
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/dom-test.node.js
@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+
+import { createSheet } from '../dom';
+
+describe('createSheet', () => {
+  test('creates a sheet on the server', () => {
+    const sheet = createSheet();
+    expect(typeof sheet.insert).toBe('function');
+    expect(sheet.id).toMatchInlineSnapshot(`"react-native-stylesheet"`);
+    expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+      "[stylesheet-group=\\"0\\"]{}
+      body{margin:0;}
+      button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+      html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+      input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}"
+    `);
+
+    sheet.insert('.test { opacity: 0 }', 1);
+    expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+      "[stylesheet-group=\\"0\\"]{}
+      body{margin:0;}
+      button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+      html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+      input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+      [stylesheet-group=\\"1\\"]{}
+      .test { opacity: 0 }"
+    `);
+  });
+});
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/flattenStyle-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/flattenStyle-test.js
deleted file mode 100644
index 0fb21a3b..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/flattenStyle-test.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/* eslint-env jasmine, jest */
-
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import flattenStyle from '../flattenStyle';
-
-describe('StyleSheet/flattenStyle', () => {
-  test('should merge style objects', () => {
-    const style = flattenStyle([{ opacity: 1 }, { order: 2 }]);
-    expect(style).toMatchSnapshot();
-  });
-
-  test('should override style properties', () => {
-    const style = flattenStyle([
-      { backgroundColor: '#000', order: 1 },
-      { backgroundColor: '#023c69', order: null }
-    ]);
-    expect(style).toMatchSnapshot();
-  });
-
-  test('should overwrite properties with `undefined`', () => {
-    const style = flattenStyle([{ backgroundColor: '#000' }, { backgroundColor: undefined }]);
-    expect(style).toMatchSnapshot();
-  });
-
-  test('should not fail on falsy values', () => {
-    expect(() => flattenStyle([null, false, undefined])).not.toThrow();
-  });
-
-  test('should recursively flatten arrays', () => {
-    const style = flattenStyle([null, [], [{ order: 2 }, { opacity: 1 }], { order: 3 }]);
-    expect(style).toMatchSnapshot();
-  });
-});
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/i18nStyle-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/i18nStyle-test.js
deleted file mode 100644
index 693f0ea5..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/i18nStyle-test.js
+++ /dev/null
@@ -1,253 +0,0 @@
-/* eslint-env jasmine, jest */
-
-import I18nManager from '../../I18nManager';
-import i18nStyle from '../i18nStyle';
-
-describe('StyleSheet/i18nStyle', () => {
-  describe('isRTL is false', () => {
-    beforeEach(() => {
-      I18nManager.allowRTL(false);
-    });
-
-    afterEach(() => {
-      I18nManager.allowRTL(true);
-    });
-
-    test('converts end/start properties', () => {
-      const initial = {
-        borderStartColor: 'red',
-        start: 1,
-        marginStart: 5,
-        paddingEnd: 10
-      };
-      const expected = {
-        borderLeftColor: 'red',
-        left: 1,
-        marginLeft: 5,
-        paddingRight: 10
-      };
-      expect(i18nStyle(initial)).toEqual(expected);
-    });
-
-    test('converts end/start values', () => {
-      const initial = {
-        float: 'start',
-        textAlign: 'end',
-        transitionProperty: 'marginStart'
-      };
-      const expected = {
-        float: 'left',
-        textAlign: 'right',
-        transitionProperty: 'marginLeft'
-      };
-      expect(i18nStyle(initial)).toEqual(expected);
-    });
-
-    test('noop on left/right properties', () => {
-      const initial = {
-        paddingLeft: 0,
-        left: 0,
-        marginRight: 0,
-        paddingRight: 10
-      };
-      expect(i18nStyle(initial)).toEqual(initial);
-    });
-
-    test('noop on left/right values', () => {
-      const initial = {
-        clear: 'left',
-        float: 'left',
-        textAlign: 'right',
-        textShadowOffset: { width: '1rem', height: 10 },
-        transitionProperty: 'marginLeft'
-      };
-      expect(i18nStyle(initial)).toEqual(initial);
-    });
-
-    test('end/start properties take precedence', () => {
-      const initial = {
-        borderStartWidth: 10,
-        borderLeftWidth: 0,
-        end: 10,
-        right: 0,
-        marginStart: 10,
-        marginLeft: 0
-      };
-      const expected = {
-        borderLeftWidth: 10,
-        marginLeft: 10,
-        right: 10
-      };
-      expect(i18nStyle(initial)).toEqual(expected);
-    });
-  });
-
-  describe('isRTL is true', () => {
-    beforeEach(() => {
-      I18nManager.forceRTL(true);
-    });
-
-    afterEach(() => {
-      I18nManager.forceRTL(false);
-    });
-
-    describe('doLeftAndRightSwapInRTL is false', () => {
-      beforeEach(() => {
-        I18nManager.swapLeftAndRightInRTL(false);
-      });
-
-      afterEach(() => {
-        I18nManager.swapLeftAndRightInRTL(true);
-      });
-
-      test('converts end/start properties', () => {
-        const initial = {
-          borderStartColor: 'red',
-          start: 1,
-          marginStart: 5,
-          paddingEnd: 10
-        };
-        const expected = {
-          borderRightColor: 'red',
-          right: 1,
-          marginRight: 5,
-          paddingLeft: 10
-        };
-        expect(i18nStyle(initial)).toEqual(expected);
-      });
-
-      test('converts end/start values', () => {
-        const initial = {
-          float: 'start',
-          textAlign: 'end',
-          transitionProperty: 'marginStart'
-        };
-        const expected = {
-          float: 'right',
-          textAlign: 'left',
-          transitionProperty: 'marginRight'
-        };
-        expect(i18nStyle(initial)).toEqual(expected);
-      });
-
-      test('noop on left/right properties', () => {
-        const initial = {
-          paddingLeft: 0,
-          left: 0,
-          marginRight: 0,
-          paddingRight: 10
-        };
-        expect(i18nStyle(initial)).toEqual(initial);
-      });
-
-      test('noop on left/right values', () => {
-        const initial = {
-          clear: 'left',
-          float: 'left',
-          textAlign: 'right',
-          textShadowOffset: { width: '1rem', height: 10 },
-          transitionProperty: 'marginLeft'
-        };
-        expect(i18nStyle(initial)).toEqual(initial);
-      });
-
-      test('end/start properties take precedence', () => {
-        const style = {
-          borderStartWidth: 10,
-          borderRightWidth: 0,
-          end: 10,
-          left: 0,
-          marginStart: 10,
-          marginRight: 0
-        };
-        const expected = {
-          borderRightWidth: 10,
-          marginRight: 10,
-          left: 10
-        };
-        expect(i18nStyle(style)).toEqual(expected);
-      });
-    });
-
-    describe('doLeftAndRightSwapInRTL is true', () => {
-      test('converts end/start properties', () => {
-        const initial = {
-          borderStartColor: 'red',
-          start: 1,
-          marginStart: 5,
-          paddingEnd: 10
-        };
-        const expected = {
-          borderRightColor: 'red',
-          right: 1,
-          marginRight: 5,
-          paddingLeft: 10
-        };
-        expect(i18nStyle(initial)).toEqual(expected);
-      });
-
-      test('converts end/start values', () => {
-        const initial = {
-          float: 'start',
-          textAlign: 'end',
-          transitionProperty: 'marginStart'
-        };
-        const expected = {
-          float: 'right',
-          textAlign: 'left',
-          transitionProperty: 'marginRight'
-        };
-        expect(i18nStyle(initial)).toEqual(expected);
-      });
-
-      test('converts left/right properties', () => {
-        const initial = {
-          borderLeftColor: 'red',
-          left: 1,
-          marginLeft: 5,
-          paddingRight: 10
-        };
-        const expected = {
-          borderRightColor: 'red',
-          right: 1,
-          marginRight: 5,
-          paddingLeft: 10
-        };
-        expect(i18nStyle(initial)).toEqual(expected);
-      });
-
-      test('converts left/right values', () => {
-        const initial = {
-          float: 'left',
-          textAlign: 'right',
-          textShadowOffset: { width: '1rem', height: 10 },
-          transitionProperty: 'marginLeft'
-        };
-        const expected = {
-          float: 'right',
-          textAlign: 'left',
-          textShadowOffset: { width: '-1rem', height: 10 },
-          transitionProperty: 'marginRight'
-        };
-        expect(i18nStyle(initial)).toEqual(expected);
-      });
-
-      test('end/start properties take precedence', () => {
-        const style = {
-          borderStartWidth: 10,
-          borderLeftWidth: 0,
-          end: 10,
-          right: 0,
-          marginStart: 10,
-          marginLeft: 0
-        };
-        const expected = {
-          borderRightWidth: 10,
-          marginRight: 10,
-          left: 10
-        };
-        expect(i18nStyle(style)).toEqual(expected);
-      });
-    });
-  });
-});
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 173e7d52..31605619 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
@@ -1,51 +1,327 @@
-/* eslint-env jasmine, jest */
+/**
+ * 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.
+ */
 
-import StyleSheet from '..';
-
-const isPlainObject = (x) => {
-  const toString = Object.prototype.toString;
-  let proto;
-  /* eslint-disable */
-  return (
-    toString.call(x) === '[object Object]' &&
-    ((proto = Object.getPrototypeOf(x)), proto === null || proto === Object.getPrototypeOf({}))
-  );
-  /* eslint-enable */
-};
+import StyleSheet from '../index';
 
 describe('StyleSheet', () => {
+  // test this first because subsequent 'create' calls will change the snapshot
+  test('getSheet', () => {
+    expect(StyleSheet.getSheet()).toMatchInlineSnapshot(`
+      {
+        "id": "react-native-stylesheet",
+        "textContent": "[stylesheet-group=\\"0\\"]{}
+      body{margin:0;}
+      button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+      html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+      input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+      [stylesheet-group=\\"2.2\\"]{}
+      .r-bottom-1p0dtai{bottom:0px;}
+      .r-left-1d2f490{left:0px;}
+      .r-position-u8s1d{position:absolute;}
+      .r-right-zchlnj{right:0px;}
+      .r-top-ipm5af{top:0px;}",
+      }
+    `);
+  });
+
   test('absoluteFill', () => {
-    expect(Number.isInteger(StyleSheet.absoluteFill) === true).toBeTruthy();
+    expect(StyleSheet.absoluteFill).toMatchInlineSnapshot(`
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    `);
   });
 
   test('absoluteFillObject', () => {
-    expect(isPlainObject(StyleSheet.absoluteFillObject) === true).toBeTruthy();
+    expect(StyleSheet.absoluteFillObject).toMatchInlineSnapshot(`
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    `);
   });
 
-  describe('compose', () => {
-    test('returns array when neither style is falsey', () => {
-      expect(StyleSheet.compose(1, 2)).toEqual([1, 2]);
-    });
-    test('returns style1 when style2 is falsey', () => {
-      expect(StyleSheet.compose(1, null)).toBe(1);
-    });
-    test('returns style2 when style1 is falsey', () => {
-      expect(StyleSheet.compose(null, 2)).toBe(2);
-    });
+  test('compose', () => {
+    expect(StyleSheet.compose(1, 2)).toEqual([1, 2]);
+    expect(StyleSheet.compose(1, null)).toBe(1);
+    expect(StyleSheet.compose(null, 2)).toBe(2);
   });
 
   describe('create', () => {
-    test('replaces styles with numbers', () => {
+    test('returns original style objects', () => {
       const style = StyleSheet.create({ root: { position: 'absolute' } });
-      expect(Number.isInteger(style.root) === true).toBeTruthy();
+      expect(style.root).toMatchInlineSnapshot(`
+        {
+          "position": "absolute",
+        }
+      `);
+    });
+
+    test('e2e resolves to classname', () => {
+      const style = StyleSheet.create({ root: { position: 'absolute' } });
+      expect(StyleSheet(style.root)).toMatchInlineSnapshot(`
+        [
+          "r-position-u8s1d",
+          null,
+        ]
+      `);
+    });
+
+    test('e2e flattens shadow style properties', () => {
+      const style = StyleSheet.create({
+        root: {
+          shadowColor: 'rgba(50,60,70,0.5)',
+          shadowOffset: { width: 1, height: 2 },
+          shadowOpacity: 0.5,
+          shadowRadius: 3,
+          textShadowColor: 'rgba(50,60,70,0.50)',
+          textShadowOffset: { width: 5, height: 10 },
+          textShadowRadius: 15
+        }
+      });
+      expect(StyleSheet(style.root)).toMatchInlineSnapshot(`
+        [
+          "r-boxShadow-o3ayyy r-textShadow-1x2q051",
+          null,
+        ]
+      `);
     });
   });
 
-  test('flatten', () => {
-    expect(typeof StyleSheet.flatten === 'function').toBeTruthy();
+  describe('flatten', () => {
+    test('should merge style objects', () => {
+      const style = StyleSheet.flatten([{ opacity: 1 }, { order: 2 }]);
+      expect(style).toMatchInlineSnapshot(`
+        {
+          "opacity": 1,
+          "order": 2,
+        }
+      `);
+    });
+
+    test('should override style properties', () => {
+      const style = StyleSheet.flatten([
+        { backgroundColor: '#000', order: 1 },
+        { backgroundColor: '#023c69', order: null }
+      ]);
+      expect(style).toMatchInlineSnapshot(`
+        {
+          "backgroundColor": "#023c69",
+          "order": null,
+        }
+      `);
+    });
+
+    test('should overwrite properties with `undefined`', () => {
+      const style = StyleSheet.flatten([
+        { backgroundColor: '#000' },
+        { backgroundColor: undefined }
+      ]);
+      expect(style).toMatchInlineSnapshot(`
+        {
+          "backgroundColor": undefined,
+        }
+      `);
+    });
+
+    test('should not fail on falsy values', () => {
+      expect(() => StyleSheet.flatten([null, false, undefined])).not.toThrow();
+    });
+
+    test('should recursively flatten arrays', () => {
+      const style = StyleSheet.flatten([null, [], [{ order: 2 }, { opacity: 1 }], { order: 3 }]);
+      expect(style).toMatchInlineSnapshot(`
+        {
+          "opacity": 1,
+          "order": 3,
+        }
+      `);
+    });
   });
 
   test('hairlineWidth', () => {
     expect(Number.isInteger(StyleSheet.hairlineWidth) === true).toBeTruthy();
   });
+
+  describe('resolve', () => {
+    test('empty', () => {
+      expect(StyleSheet()).toMatchInlineSnapshot(`
+        [
+          "",
+          null,
+        ]
+      `);
+      expect(StyleSheet({})).toMatchInlineSnapshot(`
+        [
+          "",
+          null,
+        ]
+      `);
+      expect(StyleSheet([])).toMatchInlineSnapshot(`
+        [
+          "",
+          null,
+        ]
+      `);
+    });
+
+    test('transforms compiled object to className', () => {
+      expect(
+        StyleSheet([
+          {
+            $$css: true,
+            position: 'position-absolute',
+            opacity: 'opacity-05',
+            width: 'width-200'
+          }
+        ])
+      ).toMatchInlineSnapshot(`
+        [
+          "position-absolute opacity-05 width-200",
+          null,
+        ]
+      `);
+    });
+
+    test('transforms array of compiled objects to className', () => {
+      expect(
+        StyleSheet([
+          {
+            $$css: true,
+            borderWidth: 'borderWidth-0',
+            borderColor: 'borderColor-red',
+            display: 'display-flex',
+            width: 'width-100'
+          },
+          {
+            $$css: true,
+            position: 'position-absolute',
+            opacity: 'opacity-05'
+          },
+          [
+            {
+              $$css: true,
+              width: 'width-200'
+            }
+          ]
+        ])
+      ).toMatchInlineSnapshot(`
+        [
+          "borderWidth-0 borderColor-red display-flex position-absolute opacity-05 width-200",
+          null,
+        ]
+      `);
+    });
+
+    test('dedupes class names and inline styles', () => {
+      const styleACompiled = {
+        $$css: true,
+        backgroundColor: 'backgroundColor-red',
+        display: 'display-block'
+      };
+      const styleBCompiled = {
+        $$css: true,
+        backgroundColor: 'backgroundColor-green',
+        color: 'color-green'
+      };
+      const styleBInline = {
+        backgroundColor: 'rgba(0,0,255,1.00)',
+        color: null
+      };
+
+      const [className1, inlineStyle1] = StyleSheet([styleACompiled, styleBCompiled, styleBInline]);
+      expect(className1).toBe('display-block');
+      expect(inlineStyle1).toEqual({ backgroundColor: 'rgba(0,0,255,1.00)' });
+
+      const [className2, inlineStyle2] = StyleSheet([styleACompiled, styleBInline, styleBCompiled]);
+      expect(className2).toBe('display-block backgroundColor-green color-green');
+      expect(inlineStyle2).toEqual(null);
+    });
+
+    test('long form inline style properties take precedence over static shorthand properties', () => {
+      const styles1 = StyleSheet.create({ test: { paddingHorizontal: '40px' } });
+      const inlineStyle1 = { padding: '8px', paddingHorizontal: '40px' };
+      expect(StyleSheet([styles1.test, inlineStyle1])).toMatchInlineSnapshot(`
+        [
+          "",
+          {
+            "paddingBottom": "8px",
+            "paddingLeft": "40px",
+            "paddingRight": "40px",
+            "paddingTop": "8px",
+          },
+        ]
+      `);
+
+      const styles2 = StyleSheet.create({ test: { marginVertical: '40px' } });
+      const inlineStyle2 = { margin: '8px', marginVertical: '40px' };
+      expect(StyleSheet([styles2.test, inlineStyle2])).toMatchInlineSnapshot(`
+        [
+          "",
+          {
+            "marginBottom": "40px",
+            "marginLeft": "8px",
+            "marginRight": "8px",
+            "marginTop": "40px",
+          },
+        ]
+      `);
+    });
+
+    test('polyfills logical styles', () => {
+      const a = StyleSheet.create({ x: { start: '12.34%' } }).x;
+      const b = StyleSheet.create({ x: { textAlign: 'start' } }).x;
+      const c = StyleSheet.create({ x: { marginEnd: 10 } }).x;
+      const isRTL = true;
+
+      expect(StyleSheet([a, b, c])).toMatchInlineSnapshot(`
+        [
+          "r-left-2s0hu9 r-textAlign-fdjqy7 r-marginRight-zso239",
+          null,
+        ]
+      `);
+      expect(StyleSheet([a, b, c], isRTL)).toMatchInlineSnapshot(`
+        [
+          "r-right-1bnbe1j r-textAlign-1ff274t r-marginLeft-1n0xq6e",
+          null,
+        ]
+      `);
+      // logical wins
+      expect(
+        StyleSheet(
+          [a, b, c, { marginLeft: 1, marginEnd: 0, marginStart: 0, marginRight: 11 }],
+          isRTL
+        )
+      ).toMatchInlineSnapshot(`
+        [
+          "r-right-1bnbe1j r-textAlign-1ff274t",
+          {
+            "marginLeft": "0px",
+            "marginRight": "0px",
+          },
+        ]
+      `);
+      // logical can be nulled
+      expect(StyleSheet([a, b, c, { marginEnd: null, marginLeft: 11 }], isRTL))
+        .toMatchInlineSnapshot(`
+        [
+          "r-right-1bnbe1j r-textAlign-1ff274t",
+          {
+            "marginLeft": "11px",
+          },
+        ]
+      `);
+    });
+  });
 });
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
deleted file mode 100644
index db09c27b..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/normalizeValueWithProperty-test.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/* 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/__tests__/validate-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/validate-test.js
new file mode 100644
index 00000000..6c24fee1
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/validate-test.js
@@ -0,0 +1,42 @@
+/**
+ * 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.
+ */
+
+import { validate } from '../validate';
+
+describe('validate', () => {
+  beforeAll(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterAll(() => {
+    console.error.mockRestore();
+  });
+  afterEach(() => {
+    console.error.mockClear();
+  });
+
+  test('invalid shortform properties', () => {
+    validate({ background: 'red' });
+    validate({ font: 'arial' });
+    validate({ borderTop: '1px solid red' });
+    expect(console.error).toHaveBeenCalled();
+  });
+
+  test('valid shortform values', () => {
+    validate({ flex: 1 });
+    validate({ margin: 10 });
+    validate({ margin: 'calc(10 * 1px)' });
+    validate({ margin: 'calc(10 * calc(10 * 1px))' });
+    expect(console.error).not.toHaveBeenCalled();
+  });
+
+  test('invalid shortform multi-values', () => {
+    validate({ flex: '1 1 25%' });
+    validate({ margin: '10px 20px' });
+    validate({ margin: 'calc(10 * 1px) var(--test)' });
+    expect(console.error).toHaveBeenCalledTimes(3);
+  });
+});
diff --git a/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js b/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js
new file mode 100644
index 00000000..af0fb828
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js
@@ -0,0 +1,200 @@
+/**
+ * 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
+ */
+
+import normalizeValueWithProperty from './normalizeValueWithProperty';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;
+
+type Style = { [key: string]: any };
+
+/**
+ * The browser implements the CSS cascade, where the order of properties is a
+ * factor in determining which styles to paint. React Native is different. It
+ * gives giving precedence to the more specific style property. For example,
+ * the value of `paddingTop` takes precedence over that of `padding`.
+ *
+ * This module creates mutally exclusive style declarations by expanding all of
+ * React Native's supported shortform properties (e.g. `padding`) to their
+ * longfrom equivalents.
+ */
+
+const emptyObject = {};
+
+const supportsCSS3TextDecoration =
+  !canUseDOM ||
+  (window.CSS != null &&
+    window.CSS.supports != null &&
+    (window.CSS.supports('text-decoration-line', 'none') ||
+      window.CSS.supports('-webkit-text-decoration-line', 'none')));
+
+const ignoredProps = {
+  elevation: true,
+  overlayColor: true,
+  resizeMode: true,
+  tintColor: true
+};
+
+const MONOSPACE_FONT_STACK = 'monospace,monospace';
+
+const SYSTEM_FONT_STACK =
+  '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif';
+
+const STYLE_SHORT_FORM_EXPANSIONS = {
+  borderColor: ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'],
+  borderRadius: [
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomRightRadius',
+    'borderBottomLeftRadius'
+  ],
+  borderStyle: ['borderTopStyle', 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle'],
+  borderWidth: ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'],
+  marginHorizontal: ['marginRight', 'marginLeft'],
+  marginVertical: ['marginTop', 'marginBottom'],
+  overflow: ['overflowX', 'overflowY'],
+  overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],
+  paddingHorizontal: ['paddingRight', 'paddingLeft'],
+  paddingVertical: ['paddingTop', 'paddingBottom']
+};
+
+/**
+ * Transform
+ */
+
+// { scale: 2 } => 'scale(2)'
+// { translateX: 20 } => 'translateX(20px)'
+// { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'
+const mapTransform = (transform: Object): string => {
+  const type = Object.keys(transform)[0];
+  const value = transform[type];
+  if (type === 'matrix' || type === 'matrix3d') {
+    return `${type}(${value.join(',')})`;
+  } else {
+    const normalizedValue = normalizeValueWithProperty(value, type);
+    return `${type}(${normalizedValue})`;
+  }
+};
+
+export const createTransformValue = (style: Style): string => {
+  let transform = style.transform;
+  if (Array.isArray(style.transform)) {
+    transform = style.transform.map(mapTransform).join(' ');
+  }
+  return transform;
+};
+
+/**
+ * Reducer
+ */
+
+const createReactDOMStyle = (style: Style, isInline?: boolean): Style => {
+  if (!style) {
+    return emptyObject;
+  }
+
+  const resolvedStyle = {};
+
+  for (const prop in style) {
+    const value = style[prop];
+
+    if (
+      // Ignore everything with a null value
+      value == null ||
+      // Ignore some React Native styles
+      ignoredProps[prop]
+    ) {
+      continue;
+    }
+
+    if (prop === 'aspectRatio') {
+      resolvedStyle[prop] = value.toString();
+    } else if (prop === 'backgroundClip') {
+      // TODO: remove once this issue is fixed
+      // https://github.com/rofrischmann/inline-style-prefixer/issues/159
+      if (value === 'text') {
+        resolvedStyle.backgroundClip = value;
+        resolvedStyle.WebkitBackgroundClip = value;
+      }
+    } else if (prop === 'flex') {
+      if (value === -1) {
+        resolvedStyle.flexGrow = 0;
+        resolvedStyle.flexShrink = 1;
+        resolvedStyle.flexBasis = 'auto';
+      } else {
+        resolvedStyle.flex = value;
+      }
+    } else if (prop === 'font') {
+      resolvedStyle[prop] = value.replace('System', SYSTEM_FONT_STACK);
+    } else if (prop === 'fontFamily') {
+      if (value.indexOf('System') > -1) {
+        const stack = value.split(/,\s*/);
+        stack[stack.indexOf('System')] = SYSTEM_FONT_STACK;
+        resolvedStyle[prop] = stack.join(',');
+      } else if (value === 'monospace') {
+        resolvedStyle[prop] = MONOSPACE_FONT_STACK;
+      } else {
+        resolvedStyle[prop] = value;
+      }
+    } else if (prop === 'fontVariant') {
+      if (Array.isArray(value) && value.length > 0) {
+        resolvedStyle.fontVariant = value.join(' ');
+      }
+    } else if (prop === 'textAlignVertical') {
+      resolvedStyle.verticalAlign = value === 'center' ? 'middle' : value;
+    } else if (prop === 'textDecorationLine') {
+      // use 'text-decoration' for browsers that only support CSS2
+      // text-decoration (e.g., IE, Edge)
+      if (!supportsCSS3TextDecoration) {
+        resolvedStyle.textDecoration = value;
+      } else {
+        resolvedStyle.textDecorationLine = value;
+      }
+    } else if (prop === 'transform' || prop === 'transformMatrix') {
+      resolvedStyle.transform = createTransformValue(style);
+    } else if (prop === 'writingDirection') {
+      resolvedStyle.direction = value;
+    } else {
+      const value = normalizeValueWithProperty(style[prop], prop);
+      const longFormProperties = STYLE_SHORT_FORM_EXPANSIONS[prop];
+      if (isInline && prop === 'margin') {
+        if (style.marginHorizontal == null) {
+          resolvedStyle.marginLeft = value;
+          resolvedStyle.marginRight = value;
+        }
+        if (style.marginVertical == null) {
+          resolvedStyle.marginTop = value;
+          resolvedStyle.marginBottom = value;
+        }
+      } else if (isInline && prop === 'padding') {
+        if (style.paddingHorizontal == null) {
+          resolvedStyle.paddingLeft = value;
+          resolvedStyle.paddingRight = value;
+        }
+        if (style.paddingVertical == null) {
+          resolvedStyle.paddingTop = value;
+          resolvedStyle.paddingBottom = value;
+        }
+      } else if (longFormProperties) {
+        longFormProperties.forEach((longForm, i) => {
+          // The value of any longform property in the original styles takes
+          // precedence over the shortform's value.
+          if (style[longForm] == null) {
+            resolvedStyle[longForm] = value;
+          }
+        });
+      } else {
+        resolvedStyle[prop] = Array.isArray(value) ? value.join(',') : value;
+      }
+    }
+  }
+
+  return resolvedStyle;
+};
+
+export default createReactDOMStyle;
diff --git a/packages/react-native-web/src/exports/StyleSheet/compiler/hash.js b/packages/react-native-web/src/exports/StyleSheet/compiler/hash.js
new file mode 100644
index 00000000..ab87d0d6
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/compiler/hash.js
@@ -0,0 +1,60 @@
+/* eslint-disable */
+
+/**
+ * JS Implementation of MurmurHash2
+ *
+ * @author <a href="mailto:gary.court@gmail.com">Gary Court</a>
+ * @see http://github.com/garycourt/murmurhash-js
+ * @author <a href="mailto:aappleby@gmail.com">Austin Appleby</a>
+ * @see http://sites.google.com/site/murmurhash/
+ *
+ * @param {string} str ASCII only
+ * @param {number} seed Positive integer only
+ * @return {number} 32-bit positive integer hash
+ *
+ * @flow
+ */
+
+function murmurhash2_32_gc(str, seed) {
+  var l = str.length,
+    h = seed ^ l,
+    i = 0,
+    k;
+
+  while (l >= 4) {
+    k =
+      (str.charCodeAt(i) & 0xff) |
+      ((str.charCodeAt(++i) & 0xff) << 8) |
+      ((str.charCodeAt(++i) & 0xff) << 16) |
+      ((str.charCodeAt(++i) & 0xff) << 24);
+
+    k = (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16);
+    k ^= k >>> 24;
+    k = (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16);
+
+    h = ((h & 0xffff) * 0x5bd1e995 + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)) ^ k;
+
+    l -= 4;
+    ++i;
+  }
+
+  switch (l) {
+    case 3:
+      h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+    case 2:
+      h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+    case 1:
+      h ^= str.charCodeAt(i) & 0xff;
+      h = (h & 0xffff) * 0x5bd1e995 + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16);
+  }
+
+  h ^= h >>> 13;
+  h = (h & 0xffff) * 0x5bd1e995 + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16);
+  h ^= h >>> 15;
+
+  return h >>> 0;
+}
+
+const hash = (str: string): string => murmurhash2_32_gc(str, 1).toString(36);
+
+export default hash;
diff --git a/packages/react-native-web/src/exports/StyleSheet/compiler/hyphenateStyleName.js b/packages/react-native-web/src/exports/StyleSheet/compiler/hyphenateStyleName.js
new file mode 100644
index 00000000..d7ec58d5
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/compiler/hyphenateStyleName.js
@@ -0,0 +1,27 @@
+/**
+ * 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
+ */
+
+const uppercasePattern = /[A-Z]/g;
+const msPattern = /^ms-/;
+const cache = {};
+
+function toHyphenLower(match) {
+  return '-' + match.toLowerCase();
+}
+
+function hyphenateStyleName(name: string): string {
+  if (name in cache) {
+    return cache[name];
+  }
+
+  const hName = name.replace(uppercasePattern, toHyphenLower);
+  return (cache[name] = msPattern.test(hName) ? '-' + hName : hName);
+}
+
+export default hyphenateStyleName;
diff --git a/packages/react-native-web/src/exports/StyleSheet/compile.js b/packages/react-native-web/src/exports/StyleSheet/compiler/index.js
similarity index 73%
rename from packages/react-native-web/src/exports/StyleSheet/compile.js
rename to packages/react-native-web/src/exports/StyleSheet/compiler/index.js
index 4928f401..34f6543d 100644
--- a/packages/react-native-web/src/exports/StyleSheet/compile.js
+++ b/packages/react-native-web/src/exports/StyleSheet/compiler/index.js
@@ -8,69 +8,72 @@
  */
 
 import createReactDOMStyle from './createReactDOMStyle';
-import hash from '../../vendor/hash';
-import hyphenateStyleName from 'hyphenate-style-name';
+import hash from './hash';
+import hyphenateStyleName from './hyphenateStyleName';
 import normalizeValueWithProperty from './normalizeValueWithProperty';
-import prefixStyles, { prefixInlineStyles } from '../../modules/prefixStyles';
+import prefixStyles from '../../../modules/prefixStyles';
+import preprocess from './preprocess';
 
 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 };
+type RulesData = [Rules, number];
+type CompiledStyle = { $$css: boolean, [key: string]: string };
+type CompilerOutput = [CompiledStyle, Array<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);
-  }
+const cache = new Map();
+
+const classicGroup = 1;
+const atomicGroup = 2.2;
+const customGroup = {
+  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
 };
 
 /**
  * Compile style to atomic CSS rules.
  */
 export function atomic(style: Style): CompilerOutput {
-  return Object.keys(style)
+  const compiledStyle = { $$css: true };
+  const compiledRules = [];
+
+  Object.keys(style)
     .sort()
-    .reduce((acc, property) => {
-      const value = style[property];
+    .forEach((key) => {
+      const value = style[key];
       if (value != null) {
-        const valueString = stringifyValueWithProperty(value, property);
-        const cachedResult = cache.get(property, valueString);
+        const valueString = stringifyValueWithProperty(value, key);
+        const cacheKey = key + valueString;
+        const cachedResult = cache.get(cacheKey);
         if (cachedResult != null) {
-          const { identifier } = cachedResult;
-          acc[identifier] = cachedResult;
+          compiledStyle[key] = cachedResult[0];
+          compiledRules.push(cachedResult[1]);
         } else {
-          const identifier = createIdentifier('r', property, value);
-          const rules = createAtomicRules(identifier, property, value);
-          const cachedResult = cache.set(property, valueString, {
-            property,
-            value: stringifyValueWithProperty(value, property),
-            identifier,
-            rules
-          });
-          acc[identifier] = cachedResult;
+          const order = customGroup[key] || atomicGroup;
+          const identifier = createIdentifier('r', key, value);
+          const rules = createAtomicRules(identifier, key, value);
+          const orderedRules = [rules, order];
+          compiledStyle[key] = identifier;
+          compiledRules.push(orderedRules);
+          cache.set(cacheKey, [identifier, orderedRules]);
         }
       }
-      return acc;
-    }, {});
+    });
+
+  return [compiledStyle, compiledRules];
 }
 
 /**
@@ -78,31 +81,35 @@ export function atomic(style: Style): CompilerOutput {
  * No support for 'placeholderTextColor', 'scrollbarWidth', or 'pointerEvents'.
  */
 export function classic(style: Style, name: string): CompilerOutput {
-  const identifier = createIdentifier('css', name, style);
-  const { animationKeyframes, ...rest } = style;
+  const compiledStyle = { $$css: true };
+  const compiledRules = [];
 
-  const rules = [];
+  const { animationKeyframes, ...rest } = style;
+  const identifier = createIdentifier('css', name, style);
   const selector = `.${identifier}`;
   let animationName;
   if (animationKeyframes != null) {
-    const { animationNames, rules: keyframesRules } = processKeyframesValue(animationKeyframes);
+    const [animationNames, keyframesRules] = processKeyframesValue(animationKeyframes);
     animationName = animationNames.join(',');
-    rules.push(...keyframesRules);
+    compiledRules.push(...keyframesRules);
   }
   const block = createDeclarationBlock({ ...rest, animationName });
-  rules.push(`${selector}${block}`);
+  compiledRules.push(`${selector}${block}`);
 
-  return { [identifier]: { identifier, rules } };
+  compiledStyle[identifier] = identifier;
+  return [compiledStyle, [[compiledRules, classicGroup]]];
 }
 
 /**
  * Compile simple style object to inline DOM styles.
  * No support for 'animationKeyframes', 'placeholderTextColor', 'scrollbarWidth', or 'pointerEvents'.
  */
-export function inline(style: Style): Object {
-  return prefixInlineStyles(createReactDOMStyle(style));
+export function inline(style: Style): { [key: string]: mixed } {
+  return createReactDOMStyle(style, true);
 }
 
+export { preprocess };
+
 /**
  * Create a value string that normalizes different input values with a common
  * output.
@@ -127,7 +134,7 @@ function createAtomicRules(identifier: string, property, value): Rules {
   // CSS rules to be created.
   switch (property) {
     case 'animationKeyframes': {
-      const { animationNames, rules: keyframesRules } = processKeyframesValue(value);
+      const [animationNames, keyframesRules] = processKeyframesValue(value);
       const block = createDeclarationBlock({ animationName: animationNames.join(',') });
       rules.push(`${selector}${block}`, ...keyframesRules);
       break;
@@ -191,7 +198,7 @@ function createAtomicRules(identifier: string, property, value): Rules {
 /**
  * Creates a CSS declaration block from a StyleSheet object.
  */
-function createDeclarationBlock(style: Style) {
+function createDeclarationBlock(style: Style): string {
   const domStyle = prefixStyles(createReactDOMStyle(style));
   const declarationsString = Object.keys(domStyle)
     .map((property) => {
@@ -218,7 +225,7 @@ function createDeclarationBlock(style: Style) {
 /**
  * An identifier is associated with a unique set of styles.
  */
-function createIdentifier(prefix: string, name: string, value): string {
+function createIdentifier(prefix: string, name: string, value: Value): string {
   const hashedString = hash(name + stringifyValueWithProperty(value, name));
   return process.env.NODE_ENV !== 'production'
     ? `${prefix}-${name}-${hashedString}`
@@ -246,7 +253,7 @@ function createKeyframes(keyframes) {
   const rules = prefixes.map((prefix) => {
     return `@${prefix}keyframes ${identifier}${steps}`;
   });
-  return { identifier, rules };
+  return [identifier, rules];
 }
 
 /**
@@ -267,11 +274,11 @@ function processKeyframesValue(keyframesValue) {
       animationNames.push(keyframes);
     } else {
       // Create rules for each of the keyframes
-      const { identifier, rules: keyframesRules } = createKeyframes(keyframes);
+      const [identifier, keyframesRules] = createKeyframes(keyframes);
       animationNames.push(identifier);
       rules.push(...keyframesRules);
     }
   });
 
-  return { animationNames, rules };
+  return [animationNames, rules];
 }
diff --git a/packages/react-native-web/src/exports/StyleSheet/compiler/normalizeColor.js b/packages/react-native-web/src/exports/StyleSheet/compiler/normalizeColor.js
new file mode 100644
index 00000000..b64ae7a1
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/compiler/normalizeColor.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
+ */
+
+import isWebColor from '../../../modules/isWebColor';
+import processColor from '../../../exports/processColor';
+
+const normalizeColor = (color?: number | string, opacity?: number = 1): void | string => {
+  if (color == null) return;
+
+  if (typeof color === 'string' && isWebColor(color)) {
+    return color;
+  }
+
+  const colorInt = processColor(color);
+  if (colorInt != null) {
+    const r = (colorInt >> 16) & 255;
+    const g = (colorInt >> 8) & 255;
+    const b = colorInt & 255;
+    const a = ((colorInt >> 24) & 255) / 255;
+    const alpha = (a * opacity).toFixed(2);
+    return `rgba(${r},${g},${b},${alpha})`;
+  }
+};
+
+export default normalizeColor;
diff --git a/packages/react-native-web/src/exports/StyleSheet/normalizeValueWithProperty.js b/packages/react-native-web/src/exports/StyleSheet/compiler/normalizeValueWithProperty.js
similarity index 87%
rename from packages/react-native-web/src/exports/StyleSheet/normalizeValueWithProperty.js
rename to packages/react-native-web/src/exports/StyleSheet/compiler/normalizeValueWithProperty.js
index 0166a9ff..825800a5 100644
--- a/packages/react-native-web/src/exports/StyleSheet/normalizeValueWithProperty.js
+++ b/packages/react-native-web/src/exports/StyleSheet/compiler/normalizeValueWithProperty.js
@@ -7,8 +7,8 @@
  * @flow strict-local
  */
 
-import unitlessNumbers from '../../modules/unitlessNumbers';
-import normalizeColor from '../../modules/normalizeColor';
+import unitlessNumbers from './unitlessNumbers';
+import normalizeColor from './normalizeColor';
 
 const colorProps = {
   backgroundColor: true,
diff --git a/packages/react-native-web/src/exports/StyleSheet/i18nStyle.js b/packages/react-native-web/src/exports/StyleSheet/compiler/preprocess.js
similarity index 57%
rename from packages/react-native-web/src/exports/StyleSheet/i18nStyle.js
rename to packages/react-native-web/src/exports/StyleSheet/compiler/preprocess.js
index 02d76874..5172f698 100644
--- a/packages/react-native-web/src/exports/StyleSheet/i18nStyle.js
+++ b/packages/react-native-web/src/exports/StyleSheet/compiler/preprocess.js
@@ -7,8 +7,8 @@
  * @flow
  */
 
-import I18nManager from '../I18nManager';
-import multiplyStyleLengthValue from '../../modules/multiplyStyleLengthValue';
+import normalizeColor from './normalizeColor';
+import normalizeValueWithProperty from './normalizeValueWithProperty';
 
 const emptyObject = {};
 
@@ -75,30 +75,66 @@ const PROPERTIES_VALUE = {
   textAlign: true
 };
 
-// Invert the sign of a numeric-like value
-const additiveInverse = (value: string | number) => multiplyStyleLengthValue(value, -1);
+/**
+ * Shadows
+ */
 
-const i18nStyle = <T: {| [key: string]: any |}>(originalStyle: T): T => {
-  const { doLeftAndRightSwapInRTL, isRTL } = I18nManager.getConstants();
+const defaultOffset = { height: 0, width: 0 };
+
+export const createBoxShadowValue = (style: Object): void | string => {
+  const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style;
+  const { height, width } = shadowOffset || defaultOffset;
+  const offsetX = normalizeValueWithProperty(width);
+  const offsetY = normalizeValueWithProperty(height);
+  const blurRadius = normalizeValueWithProperty(shadowRadius || 0);
+  const color = normalizeColor(shadowColor || 'black', shadowOpacity);
+  if (color != null && offsetX != null && offsetY != null && blurRadius != null) {
+    return `${offsetX} ${offsetY} ${blurRadius} ${color}`;
+  }
+};
+
+export const createTextShadowValue = (style: Object): void | string => {
+  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) &&
+    offsetX != null &&
+    offsetY != null &&
+    blurRadius != null
+  ) {
+    return `${offsetX} ${offsetY} ${blurRadius} ${color}`;
+  }
+};
+
+/**
+ * Preprocess styles
+ */
+const preprocess = <T: {| [key: string]: any |}>(originalStyle: T, isRTL?: boolean): T => {
   const style = originalStyle || emptyObject;
   const frozenProps = {};
   const nextStyle = {};
 
   for (const originalProp in style) {
-    if (!Object.prototype.hasOwnProperty.call(style, originalProp)) {
-      continue;
-    }
     const originalValue = style[originalProp];
     let prop = originalProp;
     let value = originalValue;
 
+    if (!Object.prototype.hasOwnProperty.call(style, originalProp) || originalValue == null) {
+      continue;
+    }
+
     // BiDi flip properties
     if (PROPERTIES_I18N.hasOwnProperty(originalProp)) {
       // convert start/end
       const convertedProp = PROPERTIES_I18N[originalProp];
       prop = isRTL ? PROPERTIES_FLIP[convertedProp] : convertedProp;
-    } else if (isRTL && doLeftAndRightSwapInRTL && (PROPERTIES_FLIP[originalProp]: any)) {
-      prop = PROPERTIES_FLIP[originalProp];
     }
 
     // BiDi flip values
@@ -107,12 +143,6 @@ const i18nStyle = <T: {| [key: string]: any |}>(originalStyle: T): T => {
         value = isRTL ? 'right' : 'left';
       } else if (originalValue === 'end') {
         value = isRTL ? 'left' : 'right';
-      } else if (isRTL && doLeftAndRightSwapInRTL) {
-        if (originalValue === 'left') {
-          value = 'right';
-        } else if (originalValue === 'right') {
-          value = 'left';
-        }
       }
     }
 
@@ -123,20 +153,40 @@ const i18nStyle = <T: {| [key: string]: any |}>(originalStyle: T): T => {
         // convert start/end
         const convertedValue = PROPERTIES_I18N[originalValue];
         value = isRTL ? PROPERTIES_FLIP[convertedValue] : convertedValue;
-      } else if (isRTL && doLeftAndRightSwapInRTL) {
-        const flippedValue = PROPERTIES_FLIP[(originalValue: any)];
-        if (flippedValue != null) {
-          value = flippedValue;
-        }
+      }
+    }
+
+    // Convert shadow styles
+    if (
+      prop === 'shadowColor' ||
+      prop === 'shadowOffset' ||
+      prop === 'shadowOpacity' ||
+      prop === 'shadowRadius'
+    ) {
+      const boxShadowValue = createBoxShadowValue(style);
+      if (boxShadowValue != null && nextStyle.boxShadow == null) {
+        const { boxShadow } = style;
+        prop = 'boxShadow';
+        value = boxShadow ? `${boxShadow}, ${boxShadowValue}` : boxShadowValue;
+      } else {
+        continue;
+      }
+    }
+
+    // Convert text shadow styles
+    if (prop === 'textShadowColor' || prop === 'textShadowOffset' || prop === 'textShadowRadius') {
+      const textShadowValue = createTextShadowValue(style);
+      if (textShadowValue != null && nextStyle.textShadow == null) {
+        const { textShadow } = style;
+        prop = 'textShadow';
+        value = textShadow ? `${textShadow}, ${textShadowValue}` : textShadowValue;
+      } else {
+        continue;
       }
     }
 
     // Create finalized style
-    if (isRTL && prop === 'textShadowOffset') {
-      const invertedValue = additiveInverse((value: any).width);
-      (value: any).width = invertedValue;
-      nextStyle[prop] = value;
-    } else if (!frozenProps[prop]) {
+    if (!frozenProps[prop]) {
       nextStyle[prop] = value;
     }
 
@@ -149,4 +199,4 @@ const i18nStyle = <T: {| [key: string]: any |}>(originalStyle: T): T => {
   return nextStyle;
 };
 
-export default i18nStyle;
+export default preprocess;
diff --git a/packages/react-native-web/src/exports/StyleSheet/resolveShadowValue.js b/packages/react-native-web/src/exports/StyleSheet/compiler/resolveShadowValue.js
similarity index 94%
rename from packages/react-native-web/src/exports/StyleSheet/resolveShadowValue.js
rename to packages/react-native-web/src/exports/StyleSheet/compiler/resolveShadowValue.js
index bd6193cb..7a83f02b 100644
--- a/packages/react-native-web/src/exports/StyleSheet/resolveShadowValue.js
+++ b/packages/react-native-web/src/exports/StyleSheet/compiler/resolveShadowValue.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import normalizeColor from '../../modules/normalizeColor';
+import normalizeColor from './normalizeColor';
 import normalizeValueWithProperty from './normalizeValueWithProperty';
 
 const defaultOffset = { height: 0, width: 0 };
diff --git a/packages/react-native-web/src/exports/StyleSheet/compiler/unitlessNumbers.js b/packages/react-native-web/src/exports/StyleSheet/compiler/unitlessNumbers.js
new file mode 100644
index 00000000..b7ca058c
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/compiler/unitlessNumbers.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const unitlessNumbers = {
+  animationIterationCount: true,
+  aspectRatio: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  flex: true,
+  flexGrow: true,
+  flexOrder: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  fontWeight: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowGap: true,
+  gridRowStart: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnGap: true,
+  gridColumnStart: true,
+  lineClamp: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+  // SVG-related
+  fillOpacity: true,
+  floodOpacity: true,
+  stopOpacity: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  strokeMiterlimit: true,
+  strokeOpacity: true,
+  strokeWidth: true,
+  // transform types
+  scale: true,
+  scaleX: true,
+  scaleY: true,
+  scaleZ: true,
+  // RN properties
+  shadowOpacity: true
+};
+
+/**
+ * Support style names that may come passed in prefixed by adding permutations
+ * of vendor prefixes.
+ */
+const prefixes = ['ms', 'Moz', 'O', 'Webkit'];
+const prefixKey = (prefix: string, key: string) => {
+  return prefix + key.charAt(0).toUpperCase() + key.substring(1);
+};
+Object.keys(unitlessNumbers).forEach((prop) => {
+  prefixes.forEach((prefix) => {
+    unitlessNumbers[prefixKey(prefix, prop)] = unitlessNumbers[prop];
+  });
+});
+
+export default unitlessNumbers;
diff --git a/packages/react-native-web/src/exports/StyleSheet/constants.js b/packages/react-native-web/src/exports/StyleSheet/constants.js
deleted file mode 100644
index 4f5b60f5..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/constants.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * 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.
- *
- * @noflow
- */
-
-export const STYLE_ELEMENT_ID = 'react-native-stylesheet';
-
-export const STYLE_GROUPS = {
-  reset: 0,
-  modality: 0.1,
-  classicReset: 0.5,
-  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
-  }
-};
-
-export const STYLE_SHORT_FORM_EXPANSIONS = {
-  borderColor: ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'],
-  borderRadius: [
-    'borderTopLeftRadius',
-    'borderTopRightRadius',
-    'borderBottomRightRadius',
-    'borderBottomLeftRadius'
-  ],
-  borderStyle: ['borderTopStyle', 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle'],
-  borderWidth: ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'],
-  margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],
-  marginHorizontal: ['marginRight', 'marginLeft'],
-  marginVertical: ['marginTop', 'marginBottom'],
-  overflow: ['overflowX', 'overflowY'],
-  overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],
-  padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
-  paddingHorizontal: ['paddingRight', 'paddingLeft'],
-  paddingVertical: ['paddingTop', 'paddingBottom']
-};
-
-export const MONOSPACE_FONT_STACK = 'monospace,monospace';
-export const SYSTEM_FONT_STACK =
-  '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif';
diff --git a/packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js b/packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js
deleted file mode 100644
index fab09042..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * 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
deleted file mode 100644
index cfdd253f..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/createCompileableStyle.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * 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) &&
-    offsetX != null &&
-    offsetY != null &&
-    blurRadius != null
-  ) {
-    resolvedStyle.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`;
-  }
-}
-
-const createCompileableStyle = (styles: Object): 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/createReactDOMStyle.js b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
deleted file mode 100644
index d822105a..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
+++ /dev/null
@@ -1,190 +0,0 @@
-/**
- * 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.
- *
- * @noflow
- */
-
-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
-import { MONOSPACE_FONT_STACK, SYSTEM_FONT_STACK, STYLE_SHORT_FORM_EXPANSIONS } from './constants';
-import normalizeValueWithProperty from './normalizeValueWithProperty';
-
-/**
- * The browser implements the CSS cascade, where the order of properties is a
- * factor in determining which styles to paint. React Native is different. It
- * gives giving precedence to the more specific style property. For example,
- * the value of `paddingTop` takes precedence over that of `padding`.
- *
- * This module creates mutally exclusive style declarations by expanding all of
- * React Native's supported shortform properties (e.g. `padding`) to their
- * longfrom equivalents.
- */
-
-const emptyObject = {};
-
-const supportsCSS3TextDecoration =
-  !canUseDOM ||
-  (window.CSS != null &&
-    window.CSS.supports != null &&
-    (window.CSS.supports('text-decoration-line', 'none') ||
-      window.CSS.supports('-webkit-text-decoration-line', 'none')));
-
-/**
- * Transform
- */
-
-// { scale: 2 } => 'scale(2)'
-// { translateX: 20 } => 'translateX(20px)'
-// { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'
-const mapTransform = (transform) => {
-  const type = Object.keys(transform)[0];
-  const value = transform[type];
-  if (type === 'matrix' || type === 'matrix3d') {
-    return `${type}(${value.join(',')})`;
-  } else {
-    const normalizedValue = normalizeValueWithProperty(value, type);
-    return `${type}(${normalizedValue})`;
-  }
-};
-
-const resolveTransform = (resolvedStyle, style) => {
-  let transform = style.transform;
-  if (Array.isArray(style.transform)) {
-    transform = style.transform.map(mapTransform).join(' ');
-  }
-  resolvedStyle.transform = transform;
-};
-
-/**
- * Reducer
- */
-
-const createReactDOMStyle = (style) => {
-  if (!style) {
-    return emptyObject;
-  }
-
-  const resolvedStyle = {};
-
-  Object.keys(style)
-    .sort()
-    .forEach((prop) => {
-      const value = normalizeValueWithProperty(style[prop], prop);
-
-      // Ignore everything else with a null value
-      if (value == null) {
-        return;
-      }
-
-      switch (prop) {
-        // Ignore some React Native styles
-        case 'elevation':
-        case 'overlayColor':
-        case 'resizeMode':
-        case 'tintColor': {
-          break;
-        }
-
-        case 'aspectRatio': {
-          resolvedStyle[prop] = value.toString();
-          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;
-        }
-
-        // The 'flex' property value in React Native must be a positive integer,
-        // 0, or -1.
-        case 'flex': {
-          if (value === -1) {
-            resolvedStyle.flexGrow = 0;
-            resolvedStyle.flexShrink = 1;
-            resolvedStyle.flexBasis = 'auto';
-          } else {
-            resolvedStyle.flex = value;
-          }
-          break;
-        }
-
-        case 'font': {
-          resolvedStyle[prop] = value.replace('System', SYSTEM_FONT_STACK);
-          break;
-        }
-
-        case 'fontFamily': {
-          if (value.indexOf('System') > -1) {
-            const stack = value.split(/,\s*/);
-            stack[stack.indexOf('System')] = SYSTEM_FONT_STACK;
-            resolvedStyle[prop] = stack.join(',');
-          } else if (value === 'monospace') {
-            resolvedStyle[prop] = MONOSPACE_FONT_STACK;
-          } 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)
-          if (!supportsCSS3TextDecoration) {
-            resolvedStyle.textDecoration = value;
-          } else {
-            resolvedStyle.textDecorationLine = value;
-          }
-          break;
-        }
-
-        case 'transform':
-        case 'transformMatrix': {
-          resolveTransform(resolvedStyle, style);
-          break;
-        }
-
-        case 'writingDirection': {
-          resolvedStyle.direction = value;
-          break;
-        }
-
-        default: {
-          const longFormProperties = STYLE_SHORT_FORM_EXPANSIONS[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;
-};
-
-export default createReactDOMStyle;
diff --git a/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js b/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js
deleted file mode 100644
index 4c8ceb40..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js
+++ /dev/null
@@ -1,254 +0,0 @@
-/**
- * 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.
- *
- * @noflow
- */
-
-/**
- * WARNING: changes to this file in particular can cause significant changes to
- * the results of render performance benchmarks.
- */
-
-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
-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 { atomic, classic, inline, stringifyValueWithProperty } from './compile';
-import initialRules from './initialRules';
-import modality from './modality';
-import { STYLE_ELEMENT_ID, STYLE_GROUPS } from './constants';
-
-export default function createStyleResolver() {
-  let inserted, sheet, cache;
-  const resolved = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
-
-  const init = () => {
-    inserted = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
-    sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(STYLE_ELEMENT_ID));
-    cache = {};
-    modality((rule) => sheet.insert(rule, STYLE_GROUPS.modality));
-    initialRules.forEach((rule) => {
-      sheet.insert(rule, STYLE_GROUPS.reset);
-    });
-  };
-
-  init();
-
-  function addToCache(className, prop, value) {
-    if (!cache[prop]) {
-      cache[prop] = {};
-    }
-    cache[prop][value] = className;
-  }
-
-  function getClassName(prop, value) {
-    const val = stringifyValueWithProperty(value, prop);
-    return cache[prop] && cache[prop].hasOwnProperty(val) && cache[prop][val];
-  }
-
-  function _injectRegisteredStyle(id) {
-    const { doLeftAndRightSwapInRTL, isRTL } = I18nManager.getConstants();
-    const dir = isRTL ? (doLeftAndRightSwapInRTL ? 'rtl' : 'rtlNoSwap') : 'ltr';
-    if (!inserted[dir][id]) {
-      const style = createCompileableStyle(i18nStyle(flattenStyle(id)));
-      const results = atomic(style);
-      Object.keys(results).forEach((key) => {
-        const { identifier, property, rules, value } = results[key];
-        addToCache(identifier, property, value);
-        rules.forEach((rule) => {
-          const group = STYLE_GROUPS.custom[property] || STYLE_GROUPS.atomic;
-          sheet.insert(rule, group);
-        });
-      });
-      inserted[dir][id] = true;
-    }
-  }
-
-  /**
-   * Resolves a React Native style object to DOM attributes
-   */
-  function resolve(style, classList) {
-    const nextClassList = [];
-    let props = {};
-
-    if (!style && !classList) {
-      return props;
-    }
-
-    if (Array.isArray(classList)) {
-      flattenArray(classList).forEach((identifier) => {
-        if (identifier) {
-          if (inserted.css[identifier] == null && resolved.css[identifier] != null) {
-            const item = resolved.css[identifier];
-            item.rules.forEach((rule) => {
-              sheet.insert(rule, item.group);
-            });
-            inserted.css[identifier] = true;
-          }
-
-          nextClassList.push(identifier);
-        }
-      });
-    }
-
-    if (typeof style === 'number') {
-      // fast and cachable
-      _injectRegisteredStyle(style);
-      const key = createCacheKey(style);
-      props = _resolveStyle(style, key);
-    } else if (!Array.isArray(style)) {
-      // resolve a plain RN style object
-      props = _resolveStyle(style);
-    } else {
-      // flatten the style array
-      // cache resolved props when all styles are registered
-      // otherwise fallback to resolving
-      const flatArray = flattenArray(style);
-      let isArrayOfNumbers = true;
-      let cacheKey = '';
-      for (let i = 0; i < flatArray.length; i++) {
-        const id = flatArray[i];
-        if (typeof id !== 'number') {
-          isArrayOfNumbers = false;
-        } else {
-          if (isArrayOfNumbers) {
-            cacheKey += id + '-';
-          }
-          _injectRegisteredStyle(id);
-        }
-      }
-      const key = isArrayOfNumbers ? createCacheKey(cacheKey) : null;
-      props = _resolveStyle(flatArray, key);
-    }
-
-    nextClassList.push(...props.classList);
-
-    const finalProps = {
-      className: classListToString(nextClassList),
-      classList: nextClassList
-    };
-    if (props.style) {
-      finalProps.style = props.style;
-    }
-
-    return finalProps;
-  }
-
-  /**
-   * Resolves a React Native style object
-   */
-  function _resolveStyle(style, key) {
-    const { doLeftAndRightSwapInRTL, isRTL } = I18nManager.getConstants();
-    const dir = isRTL ? (doLeftAndRightSwapInRTL ? 'rtl' : 'rtlNoSwap') : 'ltr';
-
-    // faster: memoized
-    if (key != null && resolved[dir][key] != null) {
-      return resolved[dir][key];
-    }
-
-    const flatStyle = flattenStyle(style);
-    const localizedStyle = createCompileableStyle(i18nStyle(flatStyle));
-
-    // slower: convert style object to props and cache
-    const props = Object.keys(localizedStyle)
-      .sort()
-      .reduce(
-        (props, styleProp) => {
-          const value = localizedStyle[styleProp];
-          if (value != null) {
-            const className = 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 === 'animationKeyframes' ||
-                styleProp === 'placeholderTextColor' ||
-                styleProp === 'pointerEvents' ||
-                styleProp === 'scrollbarWidth'
-              ) {
-                const a = atomic({ [styleProp]: value });
-                Object.keys(a).forEach((key) => {
-                  const { identifier, rules } = a[key];
-                  props.classList.push(identifier);
-                  rules.forEach((rule) => {
-                    sheet.insert(rule, STYLE_GROUPS.atomic);
-                  });
-                });
-              } else {
-                if (!props.style) {
-                  props.style = {};
-                }
-                // 4x slower render
-                props.style[styleProp] = value;
-              }
-            }
-          }
-          return props;
-        },
-        { classList: [] }
-      );
-
-    if (props.style) {
-      props.style = inline(props.style);
-    }
-
-    if (key != null) {
-      resolved[dir][key] = props;
-    }
-
-    return props;
-  }
-
-  return {
-    getStyleSheet() {
-      const textContent = sheet.getTextContent();
-      // Reset state on the server so critical css is always the result
-      if (!canUseDOM) {
-        init();
-      }
-
-      return {
-        id: STYLE_ELEMENT_ID,
-        textContent
-      };
-    },
-    createCSS(rules, group) {
-      const result = {};
-      Object.keys(rules).forEach((name) => {
-        const style = rules[name];
-        const compiled = classic(style, name);
-
-        Object.keys(compiled).forEach((key) => {
-          const { identifier, rules } = compiled[key];
-          resolved.css[identifier] = { group: group || STYLE_GROUPS.classic, rules };
-          result[name] = identifier;
-        });
-      });
-      return result;
-    },
-    resolve,
-    get sheet() {
-      return sheet;
-    }
-  };
-}
-
-/**
- * Misc helpers
- */
-const createCacheKey = (id) => {
-  const prefix = 'rn';
-  return `${prefix}-${id}`;
-};
-
-const classListToString = (list) => list.join(' ').trim();
diff --git a/packages/react-native-web/src/exports/StyleSheet/css.js b/packages/react-native-web/src/exports/StyleSheet/css.js
deleted file mode 100644
index a6eb4023..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/css.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * 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.
- *
- * @noflow
- */
-
-import styleResolver from './styleResolver';
-
-/**
- * A simple (and dangerous) CSS system.
- * The order of CSS rule insertion is not guaranteed.
- * Avoiding combining 2 or more classes that modify the same property.
- */
-const css = {
-  /**
-   * const classes = css.create({ base: {}, extra: {} })
-   */
-  create(rules, group) {
-    return styleResolver.createCSS(rules, group);
-  }
-};
-
-export default css;
diff --git a/packages/react-native-web/src/exports/StyleSheet/dom/createCSSStyleSheet.js b/packages/react-native-web/src/exports/StyleSheet/dom/createCSSStyleSheet.js
new file mode 100644
index 00000000..33d5672d
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/dom/createCSSStyleSheet.js
@@ -0,0 +1,42 @@
+/**
+ * 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 ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;
+
+// $FlowFixMe: HTMLStyleElement is incorrectly typed - https://github.com/facebook/flow/issues/2696
+export default function createCSSStyleSheet(
+  id: string,
+  rootNode?: Document | ShadowRoot,
+  textContent?: string
+): ?CSSStyleSheet {
+  if (canUseDOM) {
+    const root = rootNode != null ? rootNode : document;
+    let element = root.getElementById(id);
+    if (element == null) {
+      element = document.createElement('style');
+      element.setAttribute('id', id);
+      if (typeof textContent === 'string') {
+        element.appendChild(document.createTextNode(textContent));
+      }
+      if (root instanceof ShadowRoot) {
+        root.insertBefore(element, root.firstChild);
+      } else {
+        const head = root.head;
+        if (head) {
+          head.insertBefore(element, head.firstChild);
+        }
+      }
+    }
+    // $FlowFixMe: HTMLElement is incorrectly typed
+    return element.sheet;
+  } else {
+    return null;
+  }
+}
diff --git a/packages/react-native-web/src/exports/StyleSheet/createOrderedCSSStyleSheet.js b/packages/react-native-web/src/exports/StyleSheet/dom/createOrderedCSSStyleSheet.js
similarity index 90%
rename from packages/react-native-web/src/exports/StyleSheet/createOrderedCSSStyleSheet.js
rename to packages/react-native-web/src/exports/StyleSheet/dom/createOrderedCSSStyleSheet.js
index a16675c2..4f001755 100644
--- a/packages/react-native-web/src/exports/StyleSheet/createOrderedCSSStyleSheet.js
+++ b/packages/react-native-web/src/exports/StyleSheet/dom/createOrderedCSSStyleSheet.js
@@ -10,6 +10,11 @@
 type Groups = { [key: number]: { start: ?number, rules: Array<string> } };
 type Selectors = { [key: string]: boolean };
 
+export type OrderedCSSStyleSheet = {|
+  getTextContent: () => string,
+  insert: (cssText: string, groupValue: number) => void
+|};
+
 const slice = Array.prototype.slice;
 
 /**
@@ -27,12 +32,7 @@ const slice = Array.prototype.slice;
  * https://developer.mozilla.org/en-US/docs/Web/API/CSSMediaRule
  * https://gist.github.com/necolas/aa0c37846ad6bd3b05b727b959e82674
  */
-export default function createOrderedCSSStyleSheet(
-  sheet: ?CSSStyleSheet
-): {|
-  getTextContent: () => string,
-  insert: (cssText: string, groupValue: number) => void
-|} {
+export default function createOrderedCSSStyleSheet(sheet: ?CSSStyleSheet): OrderedCSSStyleSheet {
   const groups: Groups = {};
   const selectors: Selectors = {};
 
@@ -93,6 +93,11 @@ export default function createOrderedCSSStyleSheet(
       return getOrderedGroups(groups)
         .map((group) => {
           const rules = groups[group].rules;
+          // Sorting provides deterministic order of styles in group for
+          // build-time extraction of the style sheet.
+          const marker = rules.shift();
+          rules.sort();
+          rules.unshift(marker);
           return rules.join('\n');
         })
         .join('\n');
@@ -147,8 +152,9 @@ function encodeGroupRule(group) {
   return `[stylesheet-group="${group}"]{}`;
 }
 
+const groupPattern = /["']/g;
 function decodeGroupRule(cssRule) {
-  return Number(cssRule.selectorText.split(/["']/)[1]);
+  return Number(cssRule.selectorText.split(groupPattern)[1]);
 }
 
 function getOrderedGroups(obj: { [key: number]: any }) {
@@ -157,10 +163,10 @@ function getOrderedGroups(obj: { [key: number]: any }) {
     .sort((a, b) => (a > b ? 1 : -1));
 }
 
-const pattern = /\s*([,])\s*/g;
+const selectorPattern = /\s*([,])\s*/g;
 function getSelectorText(cssText) {
   const selector = cssText.split('{')[0].trim();
-  return selector !== '' ? selector.replace(pattern, '$1') : null;
+  return selector !== '' ? selector.replace(selectorPattern, '$1') : null;
 }
 
 function insertRuleAt(root, cssText: string, position: number): boolean {
diff --git a/packages/react-native-web/src/exports/StyleSheet/dom/index.js b/packages/react-native-web/src/exports/StyleSheet/dom/index.js
new file mode 100644
index 00000000..1408dfdc
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/dom/index.js
@@ -0,0 +1,85 @@
+/**
+ * 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 type { OrderedCSSStyleSheet } from './createOrderedCSSStyleSheet';
+
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+import createCSSStyleSheet from './createCSSStyleSheet';
+import createOrderedCSSStyleSheet from './createOrderedCSSStyleSheet';
+
+type Sheet = {
+  ...OrderedCSSStyleSheet,
+  id: string
+};
+
+const defaultId = 'react-native-stylesheet';
+const roots = new WeakMap<Node, number>();
+const sheets = [];
+
+const initialRules = [
+  // minimal top-level reset
+  'html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}',
+  'body{margin:0;}',
+  // minimal form pseudo-element reset
+  'button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}',
+  'input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}'
+];
+
+export function createSheet(root?: HTMLElement, id?: string = defaultId): Sheet {
+  let sheet;
+
+  if (ExecutionEnvironment.canUseDOM) {
+    const rootNode: Node = root != null ? root.getRootNode() : document;
+    // Create the initial style sheet
+    if (sheets.length === 0) {
+      sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(id));
+      initialRules.forEach((rule) => {
+        sheet.insert(rule, 0);
+      });
+      roots.set(rootNode, sheets.length);
+      sheets.push(sheet);
+    } else {
+      const index = roots.get(rootNode);
+      if (index == null) {
+        const initialSheet = sheets[0];
+        // If we're creating a new sheet, populate it with existing styles
+        const textContent = initialSheet != null ? initialSheet.getTextContent() : '';
+        // Cast rootNode to 'any' because Flow types for getRootNode are wrong
+        sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(id, (rootNode: any), textContent));
+        roots.set(rootNode, sheets.length);
+        sheets.push(sheet);
+      } else {
+        sheet = sheets[index];
+      }
+    }
+  } else {
+    // Create the initial style sheet
+    if (sheets.length === 0) {
+      sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(id));
+      initialRules.forEach((rule) => {
+        sheet.insert(rule, 0);
+      });
+      sheets.push(sheet);
+    } else {
+      sheet = sheets[0];
+    }
+  }
+
+  return {
+    getTextContent() {
+      return sheet.getTextContent();
+    },
+    id,
+    insert(cssText: string, groupValue: number) {
+      sheets.forEach((s) => {
+        s.insert(cssText, groupValue);
+      });
+    }
+  };
+}
diff --git a/packages/react-native-web/src/exports/StyleSheet/flattenStyle.js b/packages/react-native-web/src/exports/StyleSheet/flattenStyle.js
deleted file mode 100644
index f4cfbd9c..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/flattenStyle.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Copyright (c) Nicolas Gallagher.
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import ReactNativePropRegistry from './ReactNativePropRegistry';
-import invariant from 'fbjs/lib/invariant';
-
-function getStyle(style) {
-  if (typeof style === 'number') {
-    return ReactNativePropRegistry.getByID(style);
-  }
-  return style;
-}
-
-function flattenStyle(style: ?any): ?Object {
-  if (!style) {
-    return undefined;
-  }
-
-  if (process.env.NODE_ENV !== 'production') {
-    invariant(style !== true, 'style may be false but not true');
-  }
-
-  if (!Array.isArray(style)) {
-    return getStyle(style);
-  }
-
-  const result = {};
-  for (let i = 0, styleLength = style.length; i < styleLength; ++i) {
-    const computedStyle = flattenStyle(style[i]);
-    if (computedStyle) {
-      for (const key in computedStyle) {
-        const value = computedStyle[key];
-        result[key] = value;
-      }
-    }
-  }
-  return result;
-}
-
-export default flattenStyle;
diff --git a/packages/react-native-web/src/exports/StyleSheet/index.js b/packages/react-native-web/src/exports/StyleSheet/index.js
index de7fb439..20af0853 100644
--- a/packages/react-native-web/src/exports/StyleSheet/index.js
+++ b/packages/react-native-web/src/exports/StyleSheet/index.js
@@ -4,15 +4,182 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @noflow
+ * @flow
  */
 
-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
-import StyleSheet from './StyleSheet';
+import { atomic, classic, inline, preprocess } from './compiler';
+import { createSheet } from './dom';
+import { styleq } from 'styleq';
+import { validate } from './validate';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;
+
+const staticStyleMap: WeakMap<Object, Array<Object>> = new WeakMap();
+
+const sheet = createSheet();
+
+function customStyleq(styles, isRTL) {
+  return styleq.factory({
+    transform(style) {
+      if (staticStyleMap.has(style)) {
+        const compiledStyles = staticStyleMap.get(style);
+        if (Array.isArray(compiledStyles)) {
+          return isRTL ? compiledStyles[1] : compiledStyles[0];
+        }
+      }
+      return style;
+    }
+  })(styles);
+}
+
+function compileAndInsert(style) {
+  const [compiledStyle, compiledOrderedRules] = atomic(preprocess(style));
+  const [compiledRTLStyle, compiledRTLOrderedRules] = atomic(preprocess(style, true));
+  [...compiledOrderedRules, ...compiledRTLOrderedRules].forEach(([rules, order]) => {
+    if (sheet != null) {
+      rules.forEach((rule) => {
+        sheet.insert(rule, order);
+      });
+    }
+  });
+  return [compiledStyle, compiledRTLStyle];
+}
+
+function compileAndInsertReset(style, key) {
+  const [compiledStyle, compiledOrderedRules] = classic(style, key);
+  compiledOrderedRules.forEach(([rules, order]) => {
+    if (sheet != null) {
+      rules.forEach((rule) => {
+        sheet.insert(rule, order);
+      });
+    }
+  });
+  return [compiledStyle, compiledStyle];
+}
+
+/* ----- API ----- */
+
+const absoluteFillObject = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0
+};
+
+const absoluteFill = create({ x: { ...absoluteFillObject } }).x;
+
+/**
+ * create
+ */
+function create(styles: Object): {| [key: string]: { [key: string]: any } |} {
+  Object.keys(styles).forEach((key) => {
+    const styleObj = styles[key];
+    if (styleObj != null) {
+      if (key.indexOf('$raw') > -1) {
+        const compiledStyles = compileAndInsertReset(styleObj, key.split('$raw')[0]);
+        staticStyleMap.set(styleObj, compiledStyles);
+      } else {
+        if (process.env.NODE_ENV !== 'production') {
+          validate(styleObj);
+          styles[key] = Object.freeze(styleObj);
+        }
+        const compiledStyles = compileAndInsert(styleObj);
+        staticStyleMap.set(styleObj, compiledStyles);
+      }
+    }
+  });
+  return styles;
+}
+
+/**
+ * compose
+ */
+function compose(style1: any, style2: any): any {
+  if (process.env.NODE_ENV !== 'production') {
+    /* eslint-disable prefer-rest-params */
+    const len = arguments.length;
+    if (len > 2) {
+      const readableStyles = [...arguments].map((a) => flatten(a));
+      throw new Error(
+        `StyleSheet.compose() only accepts 2 arguments, received ${len}: ${JSON.stringify(
+          readableStyles
+        )}`
+      );
+    }
+    /* eslint-enable prefer-rest-params */
+  }
+  if (style1 && style2) {
+    return [style1, style2];
+  } else {
+    return style1 || style2;
+  }
+}
+
+/**
+ * flatten
+ */
+function flatten(...styles: any): { [key: string]: any } {
+  const flatArray = styles.flat(Infinity);
+  const result = {};
+  for (let i = 0; i < flatArray.length; i++) {
+    const style = flatArray[i];
+    if (style != null && typeof style === 'object') {
+      // $FlowFixMe
+      Object.assign(result, style);
+    }
+  }
+  return result;
+}
+
+/**
+ * getSheet
+ */
+function getSheet(): { id: string, textContent: string } {
+  return {
+    id: sheet.id,
+    textContent: sheet.getTextContent()
+  };
+}
+
+/**
+ * resolve
+ */
+type StyleProps = [string, { [key: string]: mixed } | null];
+
+function StyleSheet(styles: any, isRTL?: boolean): StyleProps {
+  const styleProps: StyleProps = customStyleq(styles, isRTL);
+  if (Array.isArray(styleProps) && styleProps[1] != null) {
+    styleProps[1] = inline(preprocess(styleProps[1], isRTL));
+  }
+  return styleProps;
+}
+
+StyleSheet.absoluteFill = absoluteFill;
+StyleSheet.absoluteFillObject = absoluteFillObject;
+StyleSheet.create = create;
+StyleSheet.compose = compose;
+StyleSheet.flatten = flatten;
+StyleSheet.getSheet = getSheet;
+// `hairlineWidth` is not implemented using screen density as browsers may
+// round sub-pixel values down to `0`, causing the line not to be rendered.
+StyleSheet.hairlineWidth = 1;
 
-// allow original component styles to be inspected in React Dev Tools
 if (canUseDOM && window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
   window.__REACT_DEVTOOLS_GLOBAL_HOOK__.resolveRNStyle = StyleSheet.flatten;
 }
 
-export default StyleSheet;
+export type IStyleSheet = {
+  (styles: $ReadOnlyArray<any>, isRTL: boolean): StyleProps,
+  absoluteFill: Object,
+  absoluteFillObject: Object,
+  create: typeof create,
+  compose: typeof compose,
+  flatten: typeof flatten,
+  getSheet: typeof getSheet,
+  hairlineWidth: number
+};
+
+const stylesheet: IStyleSheet = StyleSheet;
+
+export default stylesheet;
diff --git a/packages/react-native-web/src/exports/StyleSheet/initialRules.js b/packages/react-native-web/src/exports/StyleSheet/initialRules.js
deleted file mode 100644
index 317c2d92..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/initialRules.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * 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
- */
-
-const resets = [
-  // minimal top-level reset
-  'html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}',
-  'body{margin:0;}',
-  // minimal form pseudo-element reset
-  'button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}',
-  ('input::-webkit-search-cancel-button,input::-webkit-search-decoration,' +
-    'input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}': string)
-];
-
-export default resets;
diff --git a/packages/react-native-web/src/exports/StyleSheet/modality.js b/packages/react-native-web/src/exports/StyleSheet/modality.js
deleted file mode 100644
index eb9b2040..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/modality.js
+++ /dev/null
@@ -1,275 +0,0 @@
-/**
- * Adapts focus styles based on the user's active input modality (i.e., how
- * they are interacting with the UI right now).
- *
- * Focus styles are only relevant when using the keyboard to interact with the
- * page. If we only show the focus ring when relevant, we can avoid user
- * confusion without compromising accessibility.
- *
- * The script uses two heuristics to determine whether the keyboard is being used:
- *
- * 1. a keydown event occurred immediately before a focus event;
- * 2. a focus event happened on an element which requires keyboard interaction (e.g., a text field);
- *
- * This software or document includes material copied from or derived from https://github.com/WICG/focus-visible.
- * Copyright © 2018 W3C® (MIT, ERCIM, Keio, Beihang).
- * W3C Software Notice and License: https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * @noflow
- */
-
-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
-
-const focusVisibleAttributeName = 'data-focusvisible-polyfill';
-
-const rule = `:focus:not([${focusVisibleAttributeName}]){outline: none;}`;
-
-const modality = (insertRule) => {
-  insertRule(rule);
-
-  if (!canUseDOM) {
-    return;
-  }
-
-  let hadKeyboardEvent = true;
-  let hadFocusVisibleRecently = false;
-  let hadFocusVisibleRecentlyTimeout = null;
-
-  const inputTypesWhitelist = {
-    text: true,
-    search: true,
-    url: true,
-    tel: true,
-    email: true,
-    password: true,
-    number: true,
-    date: true,
-    month: true,
-    week: true,
-    time: true,
-    datetime: true,
-    'datetime-local': true
-  };
-
-  /**
-   * Helper function for legacy browsers and iframes which sometimes focus
-   * elements like document, body, and non-interactive SVG.
-   */
-  function isValidFocusTarget(el) {
-    if (
-      el &&
-      el !== document &&
-      el.nodeName !== 'HTML' &&
-      el.nodeName !== 'BODY' &&
-      'classList' in el &&
-      'contains' in el.classList
-    ) {
-      return true;
-    }
-    return false;
-  }
-
-  /**
-   * Computes whether the given element should automatically trigger the
-   * `focus-visible` attribute being added, i.e. whether it should always match
-   * `:focus-visible` when focused.
-   */
-  function focusTriggersKeyboardModality(el) {
-    const type = el.type;
-    const tagName = el.tagName;
-    const isReadOnly = el.readOnly;
-
-    if (tagName === 'INPUT' && inputTypesWhitelist[type] && !isReadOnly) {
-      return true;
-    }
-
-    if (tagName === 'TEXTAREA' && !isReadOnly) {
-      return true;
-    }
-
-    if (el.isContentEditable) {
-      return true;
-    }
-
-    return false;
-  }
-
-  /**
-   * Add the `focus-visible` attribute to the given element if it was not added by
-   * the author.
-   */
-  function addFocusVisibleAttribute(el) {
-    if (el.hasAttribute(focusVisibleAttributeName)) {
-      return;
-    }
-    el.setAttribute(focusVisibleAttributeName, true);
-  }
-
-  /**
-   * Remove the `focus-visible` attribute from the given element if it was not
-   * originally added by the author.
-   */
-  function removeFocusVisibleAttribute(el) {
-    el.removeAttribute(focusVisibleAttributeName);
-  }
-
-  /**
-   * Remove the `focus-visible` attribute from all elements in the document.
-   */
-  function removeAllFocusVisibleAttributes() {
-    const list = document.querySelectorAll(`[${focusVisibleAttributeName}]`);
-    for (let i = 0; i < list.length; i += 1) {
-      removeFocusVisibleAttribute(list[i]);
-    }
-  }
-
-  /**
-   * Treat `keydown` as a signal that the user is in keyboard modality.
-   * Apply `focus-visible` to any current active element and keep track
-   * of our keyboard modality state with `hadKeyboardEvent`.
-   */
-  function onKeyDown(e) {
-    if (e.key !== 'Tab' && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
-      return;
-    }
-
-    if (isValidFocusTarget(document.activeElement)) {
-      addFocusVisibleAttribute(document.activeElement);
-    }
-
-    hadKeyboardEvent = true;
-  }
-
-  /**
-   * If at any point a user clicks with a pointing device, ensure that we change
-   * the modality away from keyboard.
-   * This avoids the situation where a user presses a key on an already focused
-   * element, and then clicks on a different element, focusing it with a
-   * pointing device, while we still think we're in keyboard modality.
-   * It also avoids the situation where a user presses on an element within a
-   * previously keyboard-focused element (i.e., `e.target` is not the previously
-   * focused element, but one of its descendants) and we need to remove the
-   * focus ring because a `blur` event doesn't occur.
-   */
-  function onPointerDown(e) {
-    if (hadKeyboardEvent === true) {
-      removeAllFocusVisibleAttributes();
-    }
-    hadKeyboardEvent = false;
-  }
-
-  /**
-   * On `focus`, add the `focus-visible` attribute to the target if:
-   * - the target received focus as a result of keyboard navigation, or
-   * - the event target is an element that will likely require interaction
-   *   via the keyboard (e.g. a text box)
-   */
-  function onFocus(e) {
-    // Prevent IE from focusing the document or HTML element.
-    if (!isValidFocusTarget(e.target)) {
-      return;
-    }
-
-    if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) {
-      addFocusVisibleAttribute(e.target);
-    }
-  }
-
-  /**
-   * On `blur`, remove the `focus-visible` attribute from the target.
-   */
-  function onBlur(e) {
-    if (!isValidFocusTarget(e.target)) {
-      return;
-    }
-
-    if (e.target.hasAttribute(focusVisibleAttributeName)) {
-      // To detect a tab/window switch, we look for a blur event followed
-      // rapidly by a visibility change.
-      // If we don't see a visibility change within 100ms, it's probably a
-      // regular focus change.
-      hadFocusVisibleRecently = true;
-      window.clearTimeout(hadFocusVisibleRecentlyTimeout);
-      hadFocusVisibleRecentlyTimeout = window.setTimeout(function () {
-        hadFocusVisibleRecently = false;
-        window.clearTimeout(hadFocusVisibleRecentlyTimeout);
-      }, 100);
-      removeFocusVisibleAttribute(e.target);
-    }
-  }
-
-  /**
-   * If the user changes tabs, keep track of whether or not the previously
-   * focused element had the focus-visible attribute.
-   */
-  function onVisibilityChange(e) {
-    if (document.visibilityState === 'hidden') {
-      // If the tab becomes active again, the browser will handle calling focus
-      // on the element (Safari actually calls it twice).
-      // If this tab change caused a blur on an element with focus-visible,
-      // re-apply the attribute when the user switches back to the tab.
-      if (hadFocusVisibleRecently) {
-        hadKeyboardEvent = true;
-      }
-      addInitialPointerMoveListeners();
-    }
-  }
-
-  /**
-   * Add a group of listeners to detect usage of any pointing devices.
-   * These listeners will be added when the polyfill first loads, and anytime
-   * the window is blurred, so that they are active when the window regains
-   * focus.
-   */
-  function addInitialPointerMoveListeners() {
-    document.addEventListener('mousemove', onInitialPointerMove);
-    document.addEventListener('mousedown', onInitialPointerMove);
-    document.addEventListener('mouseup', onInitialPointerMove);
-    document.addEventListener('pointermove', onInitialPointerMove);
-    document.addEventListener('pointerdown', onInitialPointerMove);
-    document.addEventListener('pointerup', onInitialPointerMove);
-    document.addEventListener('touchmove', onInitialPointerMove);
-    document.addEventListener('touchstart', onInitialPointerMove);
-    document.addEventListener('touchend', onInitialPointerMove);
-  }
-
-  function removeInitialPointerMoveListeners() {
-    document.removeEventListener('mousemove', onInitialPointerMove);
-    document.removeEventListener('mousedown', onInitialPointerMove);
-    document.removeEventListener('mouseup', onInitialPointerMove);
-    document.removeEventListener('pointermove', onInitialPointerMove);
-    document.removeEventListener('pointerdown', onInitialPointerMove);
-    document.removeEventListener('pointerup', onInitialPointerMove);
-    document.removeEventListener('touchmove', onInitialPointerMove);
-    document.removeEventListener('touchstart', onInitialPointerMove);
-    document.removeEventListener('touchend', onInitialPointerMove);
-  }
-
-  /**
-   * When the polfyill first loads, assume the user is in keyboard modality.
-   * If any event is received from a pointing device (e.g. mouse, pointer,
-   * touch), turn off keyboard modality.
-   * This accounts for situations where focus enters the page from the URL bar.
-   */
-  function onInitialPointerMove(e) {
-    // Work around a Safari quirk that fires a mousemove on <html> whenever the
-    // window blurs, even if you're tabbing out of the page. ¯\_(ツ)_/¯
-    if (e.target.nodeName === 'HTML') {
-      return;
-    }
-
-    hadKeyboardEvent = false;
-    removeInitialPointerMoveListeners();
-  }
-
-  document.addEventListener('keydown', onKeyDown, true);
-  document.addEventListener('mousedown', onPointerDown, true);
-  document.addEventListener('pointerdown', onPointerDown, true);
-  document.addEventListener('touchstart', onPointerDown, true);
-  document.addEventListener('focus', onFocus, true);
-  document.addEventListener('blur', onBlur, true);
-  document.addEventListener('visibilitychange', onVisibilityChange, true);
-  addInitialPointerMoveListeners();
-};
-
-export default modality;
diff --git a/packages/react-native-web/src/exports/StyleSheet/styleResolver.js b/packages/react-native-web/src/exports/StyleSheet/styleResolver.js
deleted file mode 100644
index 964da055..00000000
--- a/packages/react-native-web/src/exports/StyleSheet/styleResolver.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * 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
- */
-
-import createStyleResolver from './createStyleResolver';
-const styleResolver: any = createStyleResolver();
-export default styleResolver;
diff --git a/packages/react-native-web/src/exports/StyleSheet/validate.js b/packages/react-native-web/src/exports/StyleSheet/validate.js
index e8043b7e..7accd49a 100644
--- a/packages/react-native-web/src/exports/StyleSheet/validate.js
+++ b/packages/react-native-web/src/exports/StyleSheet/validate.js
@@ -4,10 +4,10 @@
  * 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
+ * @noflow
  */
 
-import warning from 'fbjs/lib/warning';
+import valueParser from 'postcss-value-parser';
 
 const invalidShortforms = {
   background: true,
@@ -21,12 +21,28 @@ const invalidShortforms = {
   textDecoration: true
 };
 
+const invalidMultiValueShortforms = {
+  flex: true,
+  margin: true,
+  padding: true,
+  borderColor: true,
+  borderRadius: true,
+  borderStyle: true,
+  borderWidth: true,
+  marginHorizontal: true,
+  marginVertical: true,
+  paddingHorizontal: true,
+  paddingVertical: true,
+  overflow: true,
+  overscrollBehavior: true,
+  backgroundPosition: true
+};
+
 function error(message) {
-  warning(false, message);
+  console.error(message);
 }
 
-export default function validate(key: string, styles: Object) {
-  const obj = styles[key];
+export function validate(obj: Object) {
   for (const k in obj) {
     const prop = k.trim();
     const value = obj[prop];
@@ -55,6 +71,11 @@ export default function validate(key: string, styles: Object) {
       } else if (invalidShortforms[prop]) {
         suggestion = 'Please use long-form properties.';
         isInvalid = true;
+      } else if (invalidMultiValueShortforms[prop]) {
+        if (typeof value === 'string' && valueParser(value).nodes.length > 1) {
+          suggestion = `Value is "${value}" but only single values are supported.`;
+          isInvalid = true;
+        }
       }
       if (suggestion !== '') {
         error(`Invalid style property of "${prop}". ${suggestion}`);
diff --git a/packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap
index bec819f2..55cfea6e 100644
--- a/packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap
@@ -2,42 +2,42 @@
 
 exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided false value of trackColor 1`] = `
 <div
-  class="css-view-1dbjc4n r-bottom-1p0dtai r-forcedColorAdjust-1c6unfx r-height-1dernwh r-left-1d2f490 r-margin-ywje51 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-transitionDuration-13tjlyg r-width-13qz1uu"
+  class="css-view-175oi2r r-bottom-1p0dtai r-forcedColorAdjust-1c6unfx r-height-1dernwh r-left-1d2f490 r-margin-ywje51 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-transitionDuration-13tjlyg r-width-13qz1uu"
   style="background-color: rgb(29, 161, 242); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"
 />
 `;
 
 exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided thumbColor 1`] = `
 <div
-  class="css-view-1dbjc4n r-alignSelf-k200y r-borderRadius-1j16mh1 r-boxShadow-1ewcgjf r-forcedColorAdjust-1c6unfx r-left-1fe0xdi r-transform-1sncvnh r-transitionDuration-13tjlyg"
+  class="css-view-175oi2r r-alignSelf-k200y r-borderRadius-1j16mh1 r-boxShadow-1ewcgjf r-forcedColorAdjust-1c6unfx r-left-1fe0xdi r-transform-1sncvnh r-transitionDuration-13tjlyg"
   style="background-color: rgb(255, 255, 255); height: 20px; margin-left: 0px; width: 20px;"
 />
 `;
 
 exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided trackColor 1`] = `
 <div
-  class="css-view-1dbjc4n r-bottom-1p0dtai r-forcedColorAdjust-1c6unfx r-height-1dernwh r-left-1d2f490 r-margin-ywje51 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-transitionDuration-13tjlyg r-width-13qz1uu"
+  class="css-view-175oi2r r-bottom-1p0dtai r-forcedColorAdjust-1c6unfx r-height-1dernwh r-left-1d2f490 r-margin-ywje51 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-transitionDuration-13tjlyg r-width-13qz1uu"
   style="background-color: rgb(224, 36, 94); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"
 />
 `;
 
 exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided activeThumbColor 1`] = `
 <div
-  class="css-view-1dbjc4n r-alignSelf-k200y r-borderRadius-1j16mh1 r-boxShadow-1ewcgjf r-forcedColorAdjust-1c6unfx r-left-7b7h2f r-transform-1sncvnh r-transitionDuration-13tjlyg"
+  class="css-view-175oi2r r-alignSelf-k200y r-borderRadius-1j16mh1 r-boxShadow-1ewcgjf r-forcedColorAdjust-1c6unfx r-transform-1sncvnh r-transitionDuration-13tjlyg r-left-7b7h2f"
   style="background-color: rgb(255, 255, 255); height: 20px; margin-left: -20px; width: 20px;"
 />
 `;
 
 exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided activeTrackColor 1`] = `
 <div
-  class="css-view-1dbjc4n r-bottom-1p0dtai r-forcedColorAdjust-1c6unfx r-height-1dernwh r-left-1d2f490 r-margin-ywje51 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-transitionDuration-13tjlyg r-width-13qz1uu"
+  class="css-view-175oi2r r-bottom-1p0dtai r-forcedColorAdjust-1c6unfx r-height-1dernwh r-left-1d2f490 r-margin-ywje51 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-transitionDuration-13tjlyg r-width-13qz1uu"
   style="background-color: rgb(224, 36, 94); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"
 />
 `;
 
 exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided true value of trackColor 1`] = `
 <div
-  class="css-view-1dbjc4n r-bottom-1p0dtai r-forcedColorAdjust-1c6unfx r-height-1dernwh r-left-1d2f490 r-margin-ywje51 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-transitionDuration-13tjlyg r-width-13qz1uu"
+  class="css-view-175oi2r r-bottom-1p0dtai r-forcedColorAdjust-1c6unfx r-height-1dernwh r-left-1d2f490 r-margin-ywje51 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-transitionDuration-13tjlyg r-width-13qz1uu"
   style="background-color: rgb(224, 36, 94); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"
 />
 `;
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 ae188b56..caf72971 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,25 +2,25 @@
 
 exports[`components/Text allows "dir" to be overridden 1`] = `
 <div
-  class="css-text-901oao"
+  class="css-text-1rynq56"
   dir="rtl"
 />
 `;
 
 exports[`components/Text default 1`] = `
 <div
-  class="css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
 />
 `;
 
 exports[`components/Text nested 1`] = `
 <div
-  class="css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
 >
   <span
-    class="css-text-901oao css-textHasAncestor-16my406"
+    class="css-textHasAncestor-1qaijid"
     data-testid="child"
   />
 </div>
@@ -29,7 +29,7 @@ exports[`components/Text nested 1`] = `
 exports[`components/Text prop "accessibilityLabel" value is set 1`] = `
 <div
   aria-label="accessibility label"
-  class="css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
 />
 `;
@@ -37,7 +37,7 @@ exports[`components/Text prop "accessibilityLabel" value is set 1`] = `
 exports[`components/Text prop "accessibilityLabelledBy" value is set 1`] = `
 <div
   aria-labelledby="123"
-  class="css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
 />
 `;
@@ -45,14 +45,14 @@ exports[`components/Text prop "accessibilityLabelledBy" value is set 1`] = `
 exports[`components/Text prop "accessibilityLiveRegion" value is set 1`] = `
 <div
   aria-live="polite"
-  class="css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
 />
 `;
 
 exports[`components/Text prop "accessibilityRole" value alters HTML element 1`] = `
 <article
-  class="css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
   role="article"
 />
@@ -60,7 +60,7 @@ exports[`components/Text prop "accessibilityRole" value alters HTML element 1`]
 
 exports[`components/Text prop "accessibilityRole" value is "button" 1`] = `
 <div
-  class="css-cursor-18t94o4 css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
   role="button"
   tabindex="0"
@@ -69,7 +69,7 @@ exports[`components/Text prop "accessibilityRole" value is "button" 1`] = `
 
 exports[`components/Text prop "accessibilityRole" value is set 1`] = `
 <div
-  class="css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
   role="presentation"
 />
@@ -77,7 +77,7 @@ exports[`components/Text prop "accessibilityRole" value is set 1`] = `
 
 exports[`components/Text prop "href" href with accessibilityRole 1`] = `
 <a
-  class="css-reset-4rbku5 css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
   href="https://example.com"
   role="presentation"
@@ -86,7 +86,7 @@ exports[`components/Text prop "href" href with accessibilityRole 1`] = `
 
 exports[`components/Text prop "href" value is set 1`] = `
 <a
-  class="css-reset-4rbku5 css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
   href="https://example.com"
 />
@@ -94,7 +94,7 @@ exports[`components/Text prop "href" value is set 1`] = `
 
 exports[`components/Text prop "hrefAttrs" null values are excluded 1`] = `
 <a
-  class="css-reset-4rbku5 css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
   href="https://example.com"
 />
@@ -102,14 +102,14 @@ exports[`components/Text prop "hrefAttrs" null values are excluded 1`] = `
 
 exports[`components/Text prop "hrefAttrs" requires "href" 1`] = `
 <div
-  class="css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
 />
 `;
 
 exports[`components/Text prop "hrefAttrs" target variant is set 1`] = `
 <a
-  class="css-reset-4rbku5 css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
   href="https://example.com"
   target="_blank"
@@ -118,7 +118,7 @@ exports[`components/Text prop "hrefAttrs" target variant is set 1`] = `
 
 exports[`components/Text prop "hrefAttrs" value is set 1`] = `
 <a
-  class="css-reset-4rbku5 css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
   download="filename.jpg"
   href="https://example.com"
@@ -129,7 +129,7 @@ exports[`components/Text prop "hrefAttrs" value is set 1`] = `
 
 exports[`components/Text prop "lang" fr 1`] = `
 <div
-  class="css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
   lang="fr"
 />
@@ -137,14 +137,14 @@ exports[`components/Text prop "lang" fr 1`] = `
 
 exports[`components/Text prop "lang" undefined 1`] = `
 <div
-  class="css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
 />
 `;
 
 exports[`components/Text prop "nativeID" value is set 1`] = `
 <div
-  class="css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
   id="nativeID"
 />
@@ -152,35 +152,35 @@ exports[`components/Text prop "nativeID" value is set 1`] = `
 
 exports[`components/Text prop "numberOfLines" value is set 1`] = `
 <div
-  class="css-text-901oao css-textMultiLine-cens5h"
+  class="css-text-1rynq56 r-WebkitBoxOrient-8akbws r-display-krxsd3 r-maxWidth-dnmrzs r-overflow-1udh08x r-textOverflow-1udbk01"
   dir="auto"
 />
 `;
 
 exports[`components/Text prop "numberOfLines" value is set to one 1`] = `
 <div
-  class="css-text-901oao css-textOneLine-1hf3ou5"
+  class="css-text-1rynq56 r-maxWidth-dnmrzs r-overflow-1udh08x r-textOverflow-1udbk01 r-whiteSpace-3s2u2q r-wordWrap-1iln25a"
   dir="auto"
 />
 `;
 
 exports[`components/Text prop "selectable" value of false 1`] = `
 <div
-  class="css-text-901oao r-userSelect-lrvibr"
+  class="css-text-1rynq56 r-userSelect-lrvibr"
   dir="auto"
 />
 `;
 
 exports[`components/Text prop "selectable" value of true 1`] = `
 <div
-  class="css-text-901oao r-userSelect-1xnzce8"
+  class="css-text-1rynq56 r-userSelect-1xnzce8"
   dir="auto"
 />
 `;
 
 exports[`components/Text prop "style" value is set 1`] = `
 <div
-  class="css-text-901oao"
+  class="css-text-1rynq56"
   dir="auto"
   style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;"
 />
@@ -188,7 +188,7 @@ exports[`components/Text prop "style" value is set 1`] = `
 
 exports[`components/Text prop "testID" value is set 1`] = `
 <div
-  class="css-text-901oao"
+  class="css-text-1rynq56"
   data-testid="123"
   dir="auto"
 />
diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js
index e6d5a9a4..ffc21240 100644
--- a/packages/react-native-web/src/exports/Text/index.js
+++ b/packages/react-native-web/src/exports/Text/index.js
@@ -13,13 +13,13 @@ import type { TextProps } from './types';
 
 import * as React from 'react';
 import createElement from '../createElement';
-import css from '../StyleSheet/css';
 import * as forwardedProps from '../../modules/forwardedProps';
 import pick from '../../modules/pick';
 import useElementLayout from '../../modules/useElementLayout';
 import useMergeRefs from '../../modules/useMergeRefs';
 import usePlatformMethods from '../../modules/usePlatformMethods';
 import useResponderEvents from '../../modules/useResponderEvents';
+import RTLContext from '../../modules/RTLContext';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from './TextAncestorContext';
 
@@ -64,25 +64,13 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
       onSelectionChangeShouldSetResponderCapture,
       onStartShouldSetResponder,
       onStartShouldSetResponderCapture,
-      selectable
+      selectable,
+      ...rest
     } = props;
 
     const hasTextAncestor = React.useContext(TextAncestorContext);
     const hostRef = React.useRef(null);
-
-    const classList = [
-      classes.text,
-      hasTextAncestor === true && classes.textHasAncestor,
-      numberOfLines === 1 && classes.textOneLine,
-      numberOfLines != null && numberOfLines > 1 && classes.textMultiLine
-    ];
-    const style = [
-      props.style,
-      numberOfLines != null && numberOfLines > 1 && { WebkitLineClamp: numberOfLines },
-      selectable === true && styles.selectable,
-      selectable === false && styles.notSelectable,
-      onPress && styles.pressable
-    ];
+    const isRTL = React.useContext(RTLContext);
 
     useElementLayout(hostRef, onLayout);
     useResponderEvents(hostRef, {
@@ -117,8 +105,7 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
     );
 
     let component = hasTextAncestor ? 'span' : 'div';
-    const supportedProps = pickProps(props);
-    supportedProps.classList = classList;
+    const supportedProps = pickProps(rest);
     supportedProps.dir = dir;
     // 'auto' by default allows browsers to infer writing direction (root elements only)
     if (!hasTextAncestor) {
@@ -129,7 +116,19 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
       supportedProps.onClick = handleClick;
     }
 
-    supportedProps.style = style;
+    supportedProps.isRTL = isRTL || dir === 'rtl';
+
+    supportedProps.style = [
+      numberOfLines != null && numberOfLines > 1 && { WebkitLineClamp: numberOfLines },
+      hasTextAncestor === true ? styles.textHasAncestor$raw : styles.text$raw,
+      numberOfLines === 1 && styles.textOneLine,
+      numberOfLines != null && numberOfLines > 1 && styles.textMultiLine,
+      props.style,
+      selectable === true && styles.selectable,
+      selectable === false && styles.notSelectable,
+      onPress && styles.pressable
+    ];
+
     if (props.href != null) {
       component = 'a';
       if (hrefAttrs != null) {
@@ -151,7 +150,11 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
 
     supportedProps.ref = setRef;
 
-    const element = createElement(component, supportedProps);
+    const element = (
+      <RTLContext.Provider value={supportedProps.isRTL}>
+        {createElement(component, supportedProps)}
+      </RTLContext.Provider>
+    );
 
     return hasTextAncestor ? (
       element
@@ -163,19 +166,26 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
 
 Text.displayName = 'Text';
 
-const classes = css.create({
-  text: {
-    border: '0 solid black',
-    boxSizing: 'border-box',
-    color: 'black',
-    display: 'inline',
-    font: '14px System',
-    margin: 0,
-    padding: 0,
-    whiteSpace: 'pre-wrap',
-    wordWrap: 'break-word'
-  },
-  textHasAncestor: {
+const textStyle = {
+  backgroundColor: 'transparent',
+  border: '0 solid black',
+  boxSizing: 'border-box',
+  color: 'black',
+  display: 'inline',
+  font: '14px System',
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+  textAlign: 'inherit',
+  textDecoration: 'none',
+  whiteSpace: 'pre-wrap',
+  wordWrap: 'break-word'
+};
+
+const styles = StyleSheet.create({
+  text$raw: textStyle,
+  textHasAncestor$raw: {
+    ...textStyle,
     color: 'inherit',
     font: 'inherit',
     whiteSpace: 'inherit'
@@ -194,10 +204,7 @@ const classes = css.create({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     WebkitBoxOrient: 'vertical'
-  }
-});
-
-const styles = StyleSheet.create({
+  },
   notSelectable: {
     userSelect: 'none'
   },
diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js
index 2145ecd4..e233e4d1 100644
--- a/packages/react-native-web/src/exports/TextInput/index.js
+++ b/packages/react-native-web/src/exports/TextInput/index.js
@@ -13,7 +13,6 @@ import type { TextInputProps } from './types';
 
 import * as React from 'react';
 import createElement from '../createElement';
-import css from '../StyleSheet/css';
 import * as forwardedProps from '../../modules/forwardedProps';
 import pick from '../../modules/pick';
 import useElementLayout from '../../modules/useElementLayout';
@@ -21,6 +20,7 @@ import useLayoutEffect from '../../modules/useLayoutEffect';
 import useMergeRefs from '../../modules/useMergeRefs';
 import usePlatformMethods from '../../modules/usePlatformMethods';
 import useResponderEvents from '../../modules/useResponderEvents';
+import RTLContext from '../../modules/RTLContext';
 import StyleSheet from '../StyleSheet';
 import TextInputState from '../../modules/TextInputState';
 
@@ -317,8 +317,6 @@ const TextInput: React.AbstractComponent<
   }, [hostRef, selection]);
 
   const component = multiline ? 'textarea' : 'input';
-  const classList = [classes.textinput];
-  const style = StyleSheet.compose(props.style, placeholderTextColor && { placeholderTextColor });
 
   useElementLayout(hostRef, onLayout);
   useResponderEvents(hostRef, {
@@ -339,15 +337,16 @@ const TextInput: React.AbstractComponent<
     onStartShouldSetResponder,
     onStartShouldSetResponderCapture
   });
+  const isRTL = React.useContext(RTLContext);
 
   const supportedProps = pickProps(props);
   supportedProps.autoCapitalize = autoCapitalize;
   supportedProps.autoComplete = autoComplete || autoCompleteType || 'on';
   supportedProps.autoCorrect = autoCorrect ? 'on' : 'off';
-  supportedProps.classList = classList;
   // 'auto' by default allows browsers to infer writing direction
   supportedProps.dir = dir !== undefined ? dir : 'auto';
   supportedProps.enterKeyHint = returnKeyType;
+  supportedProps.inputMode = inputMode;
   supportedProps.onBlur = handleBlur;
   supportedProps.onChange = handleChange;
   supportedProps.onFocus = handleFocus;
@@ -356,9 +355,13 @@ const TextInput: React.AbstractComponent<
   supportedProps.readOnly = !editable;
   supportedProps.rows = multiline ? numberOfLines : undefined;
   supportedProps.spellCheck = spellCheck != null ? spellCheck : autoCorrect;
-  supportedProps.style = style;
+  supportedProps.style = [
+    { '--placeholderTextColor': placeholderTextColor },
+    styles.textinput$raw,
+    styles.placeholder,
+    props.style
+  ];
   supportedProps.type = multiline ? undefined : type;
-  supportedProps.inputMode = inputMode;
 
   const platformMethodsRef = usePlatformMethods(supportedProps);
 
@@ -366,15 +369,19 @@ const TextInput: React.AbstractComponent<
 
   supportedProps.ref = setRef;
 
-  return createElement(component, supportedProps);
+  supportedProps.isRTL = isRTL || dir === 'rtl';
+
+  const element = createElement(component, supportedProps);
+
+  return <RTLContext.Provider value={supportedProps.isRTL}>{element}</RTLContext.Provider>;
 });
 
 TextInput.displayName = 'TextInput';
 // $FlowFixMe
 TextInput.State = TextInputState;
 
-const classes = css.create({
-  textinput: {
+const styles = StyleSheet.create({
+  textinput$raw: {
     MozAppearance: 'textfield',
     WebkitAppearance: 'none',
     backgroundColor: 'transparent',
@@ -385,6 +392,9 @@ const classes = css.create({
     margin: 0,
     padding: 0,
     resize: 'none'
+  },
+  placeholder: {
+    placeholderTextColor: 'var(--placeholderTextColor)'
   }
 });
 
diff --git a/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap
index b8cfffb5..31160481 100644
--- a/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap
@@ -2,23 +2,23 @@
 
 exports[`components/View allows "dir" to be overridden 1`] = `
 <div
-  class="css-view-1dbjc4n"
+  class="css-view-175oi2r"
   dir="rtl"
 />
 `;
 
 exports[`components/View default 1`] = `
 <div
-  class="css-view-1dbjc4n"
+  class="css-view-175oi2r"
 />
 `;
 
 exports[`components/View non-text is rendered 1`] = `
 <div
-  class="css-view-1dbjc4n"
+  class="css-view-175oi2r"
 >
   <div
-    class="css-view-1dbjc4n"
+    class="css-view-175oi2r"
     data-testid="1"
   />
 </div>
@@ -27,34 +27,34 @@ exports[`components/View non-text is rendered 1`] = `
 exports[`components/View prop "accessibilityLabel" value is set 1`] = `
 <div
   aria-label="accessibility label"
-  class="css-view-1dbjc4n"
+  class="css-view-175oi2r"
 />
 `;
 
 exports[`components/View prop "accessibilityLabelledBy" value is set 1`] = `
 <div
   aria-labelledby="123"
-  class="css-view-1dbjc4n"
+  class="css-view-175oi2r"
 />
 `;
 
 exports[`components/View prop "accessibilityLiveRegion" value is set 1`] = `
 <div
   aria-live="polite"
-  class="css-view-1dbjc4n"
+  class="css-view-175oi2r"
 />
 `;
 
 exports[`components/View prop "accessibilityRole" value alters HTML element 1`] = `
 <article
-  class="css-view-1dbjc4n"
+  class="css-view-175oi2r"
   role="article"
 />
 `;
 
 exports[`components/View prop "accessibilityRole" value is "button" 1`] = `
 <div
-  class="css-cursor-18t94o4 css-view-1dbjc4n"
+  class="css-view-175oi2r"
   role="button"
   tabindex="0"
 />
@@ -62,14 +62,14 @@ exports[`components/View prop "accessibilityRole" value is "button" 1`] = `
 
 exports[`components/View prop "accessibilityRole" value is set 1`] = `
 <div
-  class="css-view-1dbjc4n"
+  class="css-view-175oi2r"
   role="presentation"
 />
 `;
 
 exports[`components/View prop "href" href with accessibilityRole 1`] = `
 <a
-  class="css-reset-4rbku5 css-view-1dbjc4n"
+  class="css-view-175oi2r"
   href="https://example.com"
   role="presentation"
 />
@@ -77,27 +77,27 @@ exports[`components/View prop "href" href with accessibilityRole 1`] = `
 
 exports[`components/View prop "href" value is set 1`] = `
 <a
-  class="css-reset-4rbku5 css-view-1dbjc4n"
+  class="css-view-175oi2r"
   href="https://example.com"
 />
 `;
 
 exports[`components/View prop "hrefAttrs" null values are excluded 1`] = `
 <a
-  class="css-reset-4rbku5 css-view-1dbjc4n"
+  class="css-view-175oi2r"
   href="https://example.com"
 />
 `;
 
 exports[`components/View prop "hrefAttrs" requires "href" 1`] = `
 <div
-  class="css-view-1dbjc4n"
+  class="css-view-175oi2r"
 />
 `;
 
 exports[`components/View prop "hrefAttrs" target variant is set 1`] = `
 <a
-  class="css-reset-4rbku5 css-view-1dbjc4n"
+  class="css-view-175oi2r"
   href="https://example.com"
   target="_blank"
 />
@@ -105,7 +105,7 @@ exports[`components/View prop "hrefAttrs" target variant is set 1`] = `
 
 exports[`components/View prop "hrefAttrs" value is set 1`] = `
 <a
-  class="css-reset-4rbku5 css-view-1dbjc4n"
+  class="css-view-175oi2r"
   download="filename.jpg"
   href="https://example.com"
   rel="nofollow"
@@ -115,48 +115,48 @@ exports[`components/View prop "hrefAttrs" value is set 1`] = `
 
 exports[`components/View prop "nativeID" value is set 1`] = `
 <div
-  class="css-view-1dbjc4n"
+  class="css-view-175oi2r"
   id="nativeID"
 />
 `;
 
 exports[`components/View prop "pointerEvents" 1`] = `
 <div
-  class="css-view-1dbjc4n r-pointerEvents-ah5dr5"
+  class="css-view-175oi2r r-pointerEvents-ah5dr5"
 />
 `;
 
 exports[`components/View prop "ref" setNativeProps method style updates as expected 1`] = `
 <div
-  class="css-view-1dbjc4n r-color-howw7u"
+  class="css-view-175oi2r r-color-howw7u"
   style="width: 10px;"
 />
 `;
 
 exports[`components/View prop "ref" setNativeProps method style updates as expected 2`] = `
 <div
-  class="css-view-1dbjc4n"
+  class="css-view-175oi2r"
   style="width: 20px; color: rgb(255, 165, 0); height: 20px;"
 />
 `;
 
 exports[`components/View prop "ref" setNativeProps method style updates as expected 3`] = `
 <div
-  class="css-view-1dbjc4n r-color-howw7u"
+  class="css-view-175oi2r r-color-howw7u"
   style="width: 30px;"
 />
 `;
 
 exports[`components/View prop "ref" setNativeProps method style updates as expected 4`] = `
 <div
-  class="css-view-1dbjc4n r-color-howw7u"
+  class="css-view-175oi2r r-color-howw7u"
   style="width: 30px;"
 />
 `;
 
 exports[`components/View prop "ref" setNativeProps method style updates as expected 5`] = `
 <div
-  class="css-view-1dbjc4n r-color-howw7u"
+  class="css-view-175oi2r r-color-howw7u"
   style="width: 40px;"
 />
 `;
@@ -164,21 +164,21 @@ exports[`components/View prop "ref" setNativeProps method style updates as expec
 exports[`components/View prop "ref" setNativeProps method works with react-native props 1`] = `
 <div
   aria-label="label"
-  class="css-view-1dbjc4n r-pointerEvents-ah5dr5"
-  style="box-shadow: 0px 0px 0px rgba(0,0,0,1.00); margin-right: 10px; margin-left: 10px; vertical-align: top;"
+  class="css-view-175oi2r r-pointerEvents-ah5dr5"
+  style="margin-right: 10px; margin-left: 10px; box-shadow: 0px 0px 0px rgba(0,0,0,1.00); vertical-align: top;"
 />
 `;
 
 exports[`components/View prop "style" value is set 1`] = `
 <div
-  class="css-view-1dbjc4n"
+  class="css-view-175oi2r"
   style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;"
 />
 `;
 
 exports[`components/View prop "testID" value is set 1`] = `
 <div
-  class="css-view-1dbjc4n"
+  class="css-view-175oi2r"
   data-testid="123"
 />
 `;
diff --git a/packages/react-native-web/src/exports/View/index.js b/packages/react-native-web/src/exports/View/index.js
index 13c98b7b..a1052285 100644
--- a/packages/react-native-web/src/exports/View/index.js
+++ b/packages/react-native-web/src/exports/View/index.js
@@ -13,7 +13,6 @@ import type { ViewProps } from './types';
 
 import * as React from 'react';
 import createElement from '../createElement';
-import css from '../StyleSheet/css';
 import * as forwardedProps from '../../modules/forwardedProps';
 import pick from '../../modules/pick';
 import useElementLayout from '../../modules/useElementLayout';
@@ -22,6 +21,7 @@ import usePlatformMethods from '../../modules/usePlatformMethods';
 import useResponderEvents from '../../modules/useResponderEvents';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from '../Text/TextAncestorContext';
+import RTLContext from '../../modules/RTLContext';
 
 const forwardPropsList = {
   ...forwardedProps.defaultProps,
@@ -61,7 +61,8 @@ const View: React.AbstractComponent<ViewProps, HTMLElement & PlatformMethods> =
       onSelectionChangeShouldSetResponder,
       onSelectionChangeShouldSetResponderCapture,
       onStartShouldSetResponder,
-      onStartShouldSetResponderCapture
+      onStartShouldSetResponderCapture,
+      ...rest
     } = props;
 
     if (process.env.NODE_ENV !== 'production') {
@@ -76,6 +77,7 @@ const View: React.AbstractComponent<ViewProps, HTMLElement & PlatformMethods> =
 
     const hasTextAncestor = React.useContext(TextAncestorContext);
     const hostRef = React.useRef(null);
+    const isRTL = React.useContext(RTLContext);
 
     useElementLayout(hostRef, onLayout);
     useResponderEvents(hostRef, {
@@ -98,11 +100,10 @@ const View: React.AbstractComponent<ViewProps, HTMLElement & PlatformMethods> =
     });
 
     let component = 'div';
-    const style = StyleSheet.compose(hasTextAncestor && styles.inline, props.style);
 
-    const supportedProps = pickProps(props);
-    supportedProps.classList = classList;
-    supportedProps.style = style;
+    const supportedProps = pickProps(rest);
+    supportedProps.isRTL = props.dir ? props.dir === 'rtl' : isRTL;
+    supportedProps.style = [styles.view$raw, hasTextAncestor && styles.inline, props.style];
     if (props.href != null) {
       component = 'a';
       if (hrefAttrs != null) {
@@ -124,33 +125,33 @@ const View: React.AbstractComponent<ViewProps, HTMLElement & PlatformMethods> =
 
     supportedProps.ref = setRef;
 
-    return createElement(component, supportedProps);
+    const element = createElement(component, supportedProps);
+
+    return <RTLContext.Provider value={supportedProps.isRTL}>{element}</RTLContext.Provider>;
   }
 );
 
 View.displayName = 'View';
 
-const classes = css.create({
-  view: {
+const styles = StyleSheet.create({
+  view$raw: {
     alignItems: 'stretch',
+    backgroundColor: 'transparent',
     border: '0 solid black',
     boxSizing: 'border-box',
     display: 'flex',
     flexBasis: 'auto',
     flexDirection: 'column',
     flexShrink: 0,
+    listStyle: 'none',
     margin: 0,
     minHeight: 0,
     minWidth: 0,
     padding: 0,
     position: 'relative',
+    textDecoration: 'none',
     zIndex: 0
-  }
-});
-
-const classList = [classes.view];
-
-const styles = StyleSheet.create({
+  },
   inline: {
     display: 'inline-flex'
   }
diff --git a/packages/react-native-web/src/exports/render/index.js b/packages/react-native-web/src/exports/render/index.js
index 2c458c35..a33ae508 100644
--- a/packages/react-native-web/src/exports/render/index.js
+++ b/packages/react-native-web/src/exports/render/index.js
@@ -4,9 +4,18 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @noflow
  */
 
-import { hydrate, render } from 'react-dom';
-export { hydrate };
-export default render;
+import { hydrate as domHydrate, render as domRender } from 'react-dom';
+import { createSheet } from '../StyleSheet/dom';
+
+export function hydrate(element, root, callback) {
+  createSheet(root);
+  return domHydrate(element, root, callback);
+}
+
+export default function render(element, root, callback) {
+  createSheet(root);
+  return domRender(element, root, callback);
+}
diff --git a/packages/react-native-web/src/modules/RTLContext/index.js b/packages/react-native-web/src/modules/RTLContext/index.js
new file mode 100644
index 00000000..bae1b5ea
--- /dev/null
+++ b/packages/react-native-web/src/modules/RTLContext/index.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type { Context } from 'react';
+
+import { createContext } from 'react';
+
+const RTLContext = createContext(false);
+export default (RTLContext: Context<boolean>);
diff --git a/packages/react-native-web/src/modules/createDOMProps/index.js b/packages/react-native-web/src/modules/createDOMProps/index.js
index c420067a..cc8af116 100644
--- a/packages/react-native-web/src/modules/createDOMProps/index.js
+++ b/packages/react-native-web/src/modules/createDOMProps/index.js
@@ -8,10 +8,7 @@
  */
 
 import AccessibilityUtil from '../AccessibilityUtil';
-import css from '../../exports/StyleSheet/css';
 import StyleSheet from '../../exports/StyleSheet';
-import styleResolver from '../../exports/StyleSheet/styleResolver';
-import { STYLE_GROUPS } from '../../exports/StyleSheet/constants';
 
 const emptyObject = {};
 const hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -28,25 +25,6 @@ function processIDRefList(idRefList: string | Array<string>): string {
   return isArray(idRefList) ? idRefList.join(' ') : idRefList;
 }
 
-// Reset styles for heading, link, and list DOM elements
-const classes = css.create(
-  {
-    reset: {
-      backgroundColor: 'transparent',
-      color: 'inherit',
-      font: 'inherit',
-      listStyle: 'none',
-      margin: 0,
-      textAlign: 'inherit',
-      textDecoration: 'none'
-    },
-    cursor: {
-      cursor: 'pointer'
-    }
-  },
-  STYLE_GROUPS.classicReset
-);
-
 const pointerEventsStyles = StyleSheet.create({
   auto: {
     pointerEvents: 'auto'
@@ -116,12 +94,11 @@ const createDOMProps = (elementType, props) => {
     accessibilityValueMin,
     accessibilityValueNow,
     accessibilityValueText,
-    classList,
     dataSet,
     focusable,
     nativeID,
     pointerEvents,
-    style: providedStyle,
+    style,
     testID,
     isRTL,
     // Rest
@@ -339,32 +316,16 @@ const createDOMProps = (elementType, props) => {
     }
   }
 
-  // STYLE
-  const reactNativeStyle = StyleSheet.compose(
-    pointerEvents && pointerEventsStyles[pointerEvents],
-    providedStyle
-  );
-
-  // Additional style resets for interactive elements
-  const needsCursor = (role === 'button' || role === 'link') && !disabled;
-  const needsReset =
-    elementType === 'a' ||
-    elementType === 'button' ||
-    elementType === 'li' ||
-    elementType === 'ul' ||
-    role === 'heading';
-  // Classic CSS styles
-  const finalClassList = [needsReset && classes.reset, needsCursor && classes.cursor, classList];
-
   // Resolve styles
-  const { className, style } = styleResolver.resolve(reactNativeStyle, finalClassList);
-
-  if (className != null && className !== '') {
+  const [className, inlineStyle] = StyleSheet(
+    [style, pointerEvents && pointerEventsStyles[pointerEvents]],
+    isRTL
+  );
+  if (className) {
     domProps.className = className;
   }
-
-  if (style) {
-    domProps.style = style;
+  if (inlineStyle) {
+    domProps.style = inlineStyle;
   }
 
   // OTHER
diff --git a/packages/react-native-web/src/modules/flattenArray/index.js b/packages/react-native-web/src/modules/flattenArray/index.js
deleted file mode 100644
index 2ee74394..00000000
--- a/packages/react-native-web/src/modules/flattenArray/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * 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
- */
-
-function flattenArray(array: Array<any>): Array<any> {
-  function flattenDown(array, result) {
-    for (let i = 0; i < array.length; i++) {
-      const value = array[i];
-
-      if (Array.isArray(value)) {
-        flattenDown(value, result);
-      } else if (value != null && value !== false) {
-        result.push(value);
-      }
-    }
-
-    return result;
-  }
-  return flattenDown(array, []);
-}
-
-export default flattenArray;
diff --git a/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js b/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js
index fb17c838..4bbd495f 100644
--- a/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js
+++ b/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js
@@ -15,7 +15,9 @@ import AnimatedTransform from './AnimatedTransform';
 import AnimatedWithChildren from './AnimatedWithChildren';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
 
-import flattenStyle from '../../../../exports/StyleSheet/flattenStyle';
+import StyleSheet from '../../../../exports/StyleSheet';
+
+const flattenStyle = StyleSheet.flatten;
 
 class AnimatedStyle extends AnimatedWithChildren {
   _style: Object;
diff --git a/scripts/inline-style-prefixer/create.js b/scripts/inline-style-prefixer/create.js
index b832ee05..a2c3903c 100644
--- a/scripts/inline-style-prefixer/create.js
+++ b/scripts/inline-style-prefixer/create.js
@@ -4,18 +4,13 @@ const generator = require('inline-style-prefixer/lib/generator').default;
 const path = require('path');
 
 const browserList = {
-  chrome: 38,
-  android: 4,
-  firefox: 40,
-  ios_saf: 7,
-  safari: 7,
-  ie: 10,
-  ie_mob: 11,
-  edge: 12,
-  opera: 16,
-  op_mini: 12,
-  and_uc: 9,
-  and_chr: 38
+  and_chr: 49,
+  chrome: 49,
+  edge: 79,
+  firefox: 52,
+  ios_saf: 11,
+  opera: 50,
+  safari: 11
 };
 
 generator(browserList, {