Fix SSR and View reset

package.json

@@ -19,7 +19,9 @@
  "flow": "flow",
  "fmt": "prettier --write \"**/*.js\"",
  "fmt:report": "prettier --check \"**/*.js\"",
- "jest": "jest --config ./scripts/jest/config.js",
+ "jest": "npm-run-all \"jest:* {@}\" --",
+ "jest:dom": "jest --config ./scripts/jest/config.js",
+ "jest:node": "jest --config ./scripts/jest/config.node.js",
  "lint": "yarn lint:report --fix",
  "lint:report": "eslint packages scripts",
  "prerelease": "yarn test && yarn compile",

packages/benchmarks/src/implementations/styleq/View.js

@@ -11,7 +11,7 @@ function View(props) {
 const styles = {
  root: {
  $$css: true,
- 'css-13b7bgz': 'css-13b7bgz'
+ 'css-175oi2r': 'css-175oi2r'
  }
 };
 

packages/docs/src/pages/docs/apis/i18n-manager.md

@@ -35,10 +35,6 @@ Force the application to display in RTL mode.
 Determine how the application is handling bidi layout.
 {% endcall %}
 
-{% call macro.prop('swapLeftAndRightInRTL', '(boolean) => void') %}
-Control whether the application swaps `left`/`right` styles in RTL mode. It is recommended that applications rely on `start`/`end` styles and disable automatic BiDi-flipping of `left`/`right` styles.
-{% endcall %}
-
 {% call macro.prop('setPreferredLanguageRTL', '(boolean) => void') %}
 Set the application's preferred writing direction to RTL. You may need to infer the user's preferred locale on the server (from HTTP headers) and decide whether it's an RTL language. (Web-only)
 {% endcall %}
@@ -51,10 +47,6 @@ The object returned by `I18nManager.getConstants()`.
 Whether the application is currently in RTL mode.
 {% endcall %}
 
-{% call macro.prop('doLeftAndRightSwapInRTL', 'boolean = true') %}
-Whether the application swaps left/right styles in RTL mode.
-{% endcall %}
-
 ---
 
 ## Examples

packages/docs/src/pages/docs/concepts/localization.md

@@ -30,7 +30,7 @@ return (
 );
 ```
 
-The non-standard [direction-independent style properties]({{ '/docs/styling/#non-standard-properties' | url }}) should also be used as much as possible. {{ site.name }} will automatically flip the direction of these properties when the application is re-rendered after using `I18nManager` to enable RTL mode.
+The non-standard [direction-independent style properties]({{ '/docs/styling/#non-standard-properties' | url }}) should also be used as much as possible. {{ site.name }} will automatically flip the direction of these properties within subtrees based on the value of the `dir` prop on `View` or `Text` elements in the ancestral hierarchy.
 
 ```jsx
 // "start" is "left" for LTR and "right" for RTL

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.
  *

packages/dom-event-testing-library/src/domEnvironment.js

@@ -1,14 +1,10 @@
-/* eslint-env jasmine, jest */
-
 /**
  * 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.
  */
 
-'use strict';
-
 /**
  * Change environment support for PointerEvent.
  */

packages/dom-event-testing-library/src/testHelpers.js

@@ -1,5 +1,3 @@
-/* eslint-env jasmine, jest */
-
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *

packages/react-native-web/jest/setup.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.
+ */
 
 'use strict';
 

packages/react-native-web/package.json

@@ -16,12 +16,11 @@
  "!**/__tests__"
  ],
  "dependencies": {
- "array-find-index": "^1.0.2",
  "create-react-class": "^15.7.0",
  "fbjs": "^3.0.0",
- "hyphenate-style-name": "^1.0.4",
  "inline-style-prefixer": "^6.0.0",
  "normalize-css-color": "^1.0.2",
+ "postcss-value-parser": "^4.2.0",
  "prop-types": "^15.6.0",
  "styleq": "0.0.0-b4fc5da"
  },

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-13b7bgz r-alignItems-1awozwy r-justifyContent-1777fci"
+ class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
  role="progressbar"
 >
  <div
- class="css-view-13b7bgz r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+ 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-13b7bgz r-alignItems-1awozwy r-justifyContent-1777fci"
+ class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
  role="progressbar"
 >
  <div
- class="css-view-13b7bgz r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+ 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-13b7bgz r-alignItems-1awozwy r-justifyContent-1777fci"
+ class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
  role="progressbar"
 >
  <div
- class="css-view-13b7bgz r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
+ 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-13b7bgz r-alignItems-1awozwy r-justifyContent-1777fci"
+ class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
  role="progressbar"
 >
  <div
- class="css-view-13b7bgz r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+ 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-13b7bgz 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-13b7bgz r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+ 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-13b7bgz r-alignItems-1awozwy r-justifyContent-1777fci"
+ class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
  role="progressbar"
 >
  <div
- class="css-view-13b7bgz r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w"
+ 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-13b7bgz r-alignItems-1awozwy r-justifyContent-1777fci"
+ class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
  role="progressbar"
 >
  <div
- class="css-view-13b7bgz r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
+ 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-13b7bgz r-alignItems-1awozwy r-justifyContent-1777fci"
+ class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
  id="123"
  role="progressbar"
 >
  <div
- class="css-view-13b7bgz r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+ 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-13b7bgz r-alignItems-1awozwy r-justifyContent-1777fci"
+ class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
  role="progressbar"
 >
  <div
- class="css-view-13b7bgz r-height-1r8g8re r-width-1acpoxo r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+ 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-13b7bgz r-alignItems-1awozwy r-justifyContent-1777fci"
+ class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
  role="progressbar"
 >
  <div
- class="css-view-13b7bgz 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-13b7bgz 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-13b7bgz r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+ 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-13b7bgz 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-13b7bgz r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+ 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%"

packages/react-native-web/src/exports/ActivityIndicator/__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 ActivityIndicator from '..';
 import React from 'react';