[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

Author: necolas

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
+  };
+}

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,
       }
     `);
   });

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%"