[change] CSS insertion by OrderedCSSStyleSheet

`OrderedCSSStyleSheet` can be used to control the order in which CSS rules are
inserted. This feature is necessary to support the combined use of Classic CSS
and Atomic CSS. It also makes it possible to control the order of Atomic CSS
rules, which is necessary to correctly resolve style conflicts (e.g., between
'margin' and 'marginHorizontal') without expanding short-form properties to
long-form properties.

Ref necolas#1136

Author: necolas

Diff for: .eslintrc

@@ -34,6 +34,7 @@
     "window": false,
     // Flow global types,
     "$Enum": false,
+    "CSSStyleSheet": false,
     "HTMLInputElement": false,
     "ReactClass": false,
     "ReactComponent": false,

Diff for: packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap

@@ -9,7 +9,9 @@ exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`]
 `;
 
 exports[`AppRegistry getApplication returns "element" and "getStyleElement" 2`] = `
-"<style id=\\"react-native-stylesheet\\">@media all{
+"<style id=\\"react-native-stylesheet\\">@media all {
+[stylesheet-group=\\"0\\"]{}
+:focus:not([data-rn-focusvisible-x92cna]){outline: none;}
 html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
 body{margin:0;}
 button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}

Diff for: packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js

@@ -7,10 +7,12 @@
  * @noflow
  */
 
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import createAtomicRules from './createAtomicRules';
 import hash from '../../vendor/hash';
 import initialRules from './initialRules';
-import WebStyleSheet from './WebStyleSheet';
+import createOrderedCSSStyleSheet from './createOrderedCSSStyleSheet';
+import modality from './modality';
 
 const emptyObject = {};
 const STYLE_ELEMENT_ID = 'react-native-stylesheet';
@@ -20,6 +22,22 @@ const createClassName = (prop, value) => {
   return process.env.NODE_ENV !== 'production' ? `rn-${prop}-${hashed}` : `rn-${hashed}`;
 };
 
+const createCSSStyleSheet = () => {
+  const id = STYLE_ELEMENT_ID;
+
+  let element;
+  element = document.getElementById(id);
+  if (!element) {
+    element = document.createElement('style');
+    element.setAttribute('id', id);
+    const head = document.head;
+    if (head) {
+      head.insertBefore(element, head.firstChild);
+    }
+  }
+  return element.sheet;
+};
+
 const normalizeValue = value => (typeof value === 'object' ? JSON.stringify(value) : value);
 
 export default class StyleSheetManager {
@@ -29,9 +47,10 @@ export default class StyleSheetManager {
   };
 
   constructor() {
-    this._sheet = new WebStyleSheet(STYLE_ELEMENT_ID);
+    this._sheet = createOrderedCSSStyleSheet(canUseDOM ? createCSSStyleSheet() : null);
+    modality(rule => this._sheet.insert(rule, 0));
     initialRules.forEach(rule => {
-      this._sheet.insertRuleOnce(rule);
+      this._sheet.insert(rule, 0);
     });
   }
 
@@ -47,11 +66,11 @@ export default class StyleSheetManager {
   }
 
   getStyleSheet() {
-    const { cssText } = this._sheet;
+    const textContent = this._sheet.getTextContent();
 
     return {
       id: STYLE_ELEMENT_ID,
-      textContent: cssText
+      textContent
     };
   }
 
@@ -63,7 +82,7 @@ export default class StyleSheetManager {
       this._addToCache(className, prop, val);
       const rules = createAtomicRules(`.${className}`, prop, value);
       rules.forEach(rule => {
-        this._sheet.insertRuleOnce(rule);
+        this._sheet.insert(rule, 1);
       });
     }
     return className;

Diff for: packages/react-native-web/src/exports/StyleSheet/WebStyleSheet.js

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`createOrderedCSSStyleSheet #insert deduplication for same group 1`] = `""`;
+
+exports[`createOrderedCSSStyleSheet #insert deduplication for same group 2`] = `
+"@media all {
+[stylesheet-group=\\"0\\"]{}
+.one {}
+}"
+`;
+
+exports[`createOrderedCSSStyleSheet #insert deduplication for same group 3`] = `
+"@media all {
+[stylesheet-group=\\"0\\"]{}
+.one {}
+}"
+`;
+
+exports[`createOrderedCSSStyleSheet #insert insertion order for different groups 1`] = `
+"@media all {
+[stylesheet-group=\\"1\\"]{}
+.one {}
+}
+@media all {
+[stylesheet-group=\\"2.2\\"]{}
+.two {}
+}
+@media all {
+[stylesheet-group=\\"3\\"]{}
+.three {}
+}
+@media all {
+[stylesheet-group=\\"4\\"]{}
+.four-1 {}
+.four-2 {}
+}
+@media all {
+[stylesheet-group=\\"9.9\\"]{}
+.nine-1 {}
+.nine-2 {}
+}"
+`;
+
+exports[`createOrderedCSSStyleSheet #insert insertion order for same group 1`] = `""`;
+
+exports[`createOrderedCSSStyleSheet #insert insertion order for same group 2`] = `
+"@media all {
+[stylesheet-group=\\"0\\"]{}
+.one {}
+}"
+`;
+
+exports[`createOrderedCSSStyleSheet #insert insertion order for same group 3`] = `
+"@media all {
+[stylesheet-group=\\"0\\"]{}
+.one {}
+.two {}
+}"
+`;
+
+exports[`createOrderedCSSStyleSheet #insert insertion order for same group 4`] = `
+"@media all {
+[stylesheet-group=\\"0\\"]{}
+.one {}
+.two {}
+.three {}
+}"
+`;
+
+exports[`createOrderedCSSStyleSheet client-side hydration from SSR CSS 1`] = `
+"@media all {
+[stylesheet-group=\\"1\\"] {}
+.one {width: 10px;}
+}
+@media all {
+[stylesheet-group=\\"2\\"] {}
+.two-1 {height: 20px;}
+.two-2 {color: red;}
+@keyframes anim { 
+  0% {opacity: 1;} 
+}
+}"
+`;

Diff for: packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createOrderedCSSStyleSheet-test.js.snap

@@ -0,0 +1,87 @@
+/* eslint-env jasmine, jest */
+
+'use strict';
+
+import createOrderedCSSStyleSheet from '../createOrderedCSSStyleSheet';
+
+const insertStyleElement = () => {
+  const element = document.createElement('style');
+  const head = document.head;
+  head.insertBefore(element, head.firstChild);
+  return element;
+};
+
+const removeStyleElement = element => {
+  document.head.removeChild(element);
+};
+
+describe('createOrderedCSSStyleSheet', () => {
+  describe('#insert', () => {
+    test('insertion order for same group', () => {
+      const sheet = createOrderedCSSStyleSheet();
+
+      expect(sheet.getTextContent()).toMatchSnapshot();
+
+      sheet.insert('.one {}', 0);
+      expect(sheet.getTextContent()).toMatchSnapshot();
+
+      sheet.insert('.two {}', 0);
+      expect(sheet.getTextContent()).toMatchSnapshot();
+
+      sheet.insert('.three {}', 0);
+      expect(sheet.getTextContent()).toMatchSnapshot();
+    });
+
+    test('deduplication for same group', () => {
+      const sheet = createOrderedCSSStyleSheet();
+
+      expect(sheet.getTextContent()).toMatchSnapshot();
+
+      sheet.insert('.one {}', 0);
+      expect(sheet.getTextContent()).toMatchSnapshot();
+
+      sheet.insert('.one {}', 0);
+      expect(sheet.getTextContent()).toMatchSnapshot();
+    });
+
+    test('insertion order for different groups', () => {
+      const sheet = createOrderedCSSStyleSheet();
+
+      sheet.insert('.nine-1 {}', 9.9);
+      sheet.insert('.nine-2 {}', 9.9);
+      sheet.insert('.three {}', 3);
+      sheet.insert('.one {}', 1);
+      sheet.insert('.two {}', 2.2);
+      sheet.insert('.four-1 {}', 4);
+      sheet.insert('.four-2 {}', 4);
+
+      expect(sheet.getTextContent()).toMatchSnapshot();
+    });
+  });
+
+  describe('client-side hydration', () => {
+    let element;
+
+    beforeEach(() => {
+      if (element != null) {
+        removeStyleElement(element);
+      }
+      element = insertStyleElement();
+    });
+
+    test('from SSR CSS', () => {
+      // Setup SSR CSS
+      const serverSheet = createOrderedCSSStyleSheet();
+      serverSheet.insert('.one { width: 10px; }', 1);
+      serverSheet.insert('.two-1 { height: 20px; }', 2);
+      serverSheet.insert('.two-2 { color: red; }', 2);
+      serverSheet.insert('@keyframes anim { 0% { opacity: 1; } }', 2);
+      const textContent = serverSheet.getTextContent();
+
+      // Add SSR CSS to client style sheet
+      element.appendChild(document.createTextNode(textContent));
+      const clientSheet = createOrderedCSSStyleSheet(element.sheet);
+      expect(clientSheet.getTextContent()).toMatchSnapshot();
+    });
+  });
+});