From 99348eaedb19a85ab596aa927008c451418ee194 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Sat, 24 Jun 2017 10:19:40 -0700
Subject: [PATCH] [fix] StyleSheet: server-side rendering of styles

Problem:

The content of style sheets was being set as a child of 'style', which
causes React to escape the content. This meant that the pointer-events
selectors were broken (">" became "&gt;") and pointer-events were
disabled for the entire server-rendered document.

Solution:

Use 'dangerouslySetInnerHTML' to avoid the CSS text being escaped.

Fix #546
---
 docs/guides/getting-started.md                |   2 +-
 .../renderApplication-test.js.snap            | 123 +++++++++---------
 .../__tests__/renderApplication-test.js       |   6 +-
 src/apis/AppRegistry/renderApplication.js     |   3 +-
 4 files changed, 66 insertions(+), 68 deletions(-)

diff --git a/docs/guides/getting-started.md b/docs/guides/getting-started.md
index f17f5afb..bfbade7c 100644
--- a/docs/guides/getting-started.md
+++ b/docs/guides/getting-started.md
@@ -189,7 +189,7 @@ AppRegistry.registerComponent('App', () => AppContainer)
 // prerender the app
 const { element, stylesheets } = AppRegistry.getApplication('App', { initialProps });
 const initialHTML = ReactDOMServer.renderToString(element);
-const initialStyles = stylesheets.map((sheet) => ReactDOMServer.renderToString(sheet)).join('\n');
+const initialStyles = stylesheets.map((sheet) => ReactDOMServer.renderToStaticMarkup(sheet)).join('\n');
 
 // construct HTML document
 const document = `
diff --git a/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap b/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap
index f1ebf9f2..e9e68268 100644
--- a/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap
+++ b/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap
@@ -9,69 +9,62 @@ exports[`apis/AppRegistry/renderApplication getApplication 1`] = `
 `;
 
 exports[`apis/AppRegistry/renderApplication getApplication 2`] = `
-Array [
-  <style
-    id="react-native-stylesheet-static"
->
-    html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
-    body{margin:0;}
-    button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
-    input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
-    @keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
-    @keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);}100%{-webkit-transform:translateX(400%);transform:translateX(400%);}}
-    .rn-pointerEvents-105ug2t{pointer-events:auto !important;}
-    .rn-pointerEvents-ah5dr5{pointer-events:auto !important;}
-    .rn-pointerEvents-633pao{pointer-events:none !important;}
-    .rn-pointerEvents-12vffkv{pointer-events:none !important;}
-    .rn-pointerEvents-12vffkv &gt; *{pointer-events:auto;}
-    .rn-pointerEvents-ah5dr5 &gt; *{pointer-events:none;}
-</style>,
-  <style
-    id="react-native-stylesheet"
->
-    .rn-bottom-1p0dtai{bottom:0px}
-    .rn-left-1d2f490{left:0px}
-    .rn-position-u8s1d{position:absolute}
-    .rn-position-bnwqim{position:relative}
-    .rn-right-zchlnj{right:0px}
-    .rn-top-ipm5af{top:0px}
-    .rn-appearance-30o5oe{-moz-appearance:none;-webkit-appearance:none;appearance:none}
-    .rn-backgroundColor-wib322{background-color:transparent}
-    .rn-color-homxoj{color:inherit}
-    .rn-font-1lw9tu2{font:inherit}
-    .rn-textAlign-1ttztb7{text-align:inherit}
-    .rn-textDecoration-bauka4{text-decoration:none}
-    .rn-listStyle-1ebb2ja{list-style:none}
-    .rn-alignItems-1oszu61{-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
-    .rn-borderTopStyle-1efd50x{border-top-style:solid}
-    .rn-borderRightStyle-14skgim{border-right-style:solid}
-    .rn-borderBottomStyle-rull8r{border-bottom-style:solid}
-    .rn-borderLeftStyle-mm0ijv{border-left-style:solid}
-    .rn-borderTopWidth-13yce4e{border-top-width:0px}
-    .rn-borderRightWidth-fnigne{border-right-width:0px}
-    .rn-borderBottomWidth-ndvcnb{border-bottom-width:0px}
-    .rn-borderLeftWidth-gxnn5r{border-left-width:0px}
-    .rn-boxSizing-deolkf{box-sizing:border-box}
-    .rn-display-6koalj{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
-    .rn-display-xoduu5{display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}
-    .rn-flexShrink-1qe8dj5{-webkit-flex-shrink:0;flex-shrink:0}
-    .rn-flexShrink-1wbh5a2{-webkit-flex-shrink:1;flex-shrink:1}
-    .rn-flexBasis-1mlwlqe{-webkit-flex-basis:auto;flex-basis:auto}
-    .rn-flexBasis-1ro0kt6{-webkit-flex-basis:0%;flex-basis:0%}
-    .rn-flexDirection-eqz5dr{-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
-    .rn-marginTop-1mnahxq{margin-top:0px}
-    .rn-marginRight-61z16t{margin-right:0px}
-    .rn-marginBottom-p1pxzi{margin-bottom:0px}
-    .rn-marginLeft-11wrixw{margin-left:0px}
-    .rn-minHeight-ifefl9{min-height:0px}
-    .rn-minWidth-bcqeeo{min-width:0px}
-    .rn-paddingTop-wk8lta{padding-top:0px}
-    .rn-paddingRight-9aemit{padding-right:0px}
-    .rn-paddingBottom-1mdbw0j{padding-bottom:0px}
-    .rn-paddingLeft-gy4na3{padding-left:0px}
-    .rn-zIndex-1lgpqti{z-index:0}
-    .rn-zIndex-1wyyakw{z-index:-1}
-    .rn-flexGrow-16y2uox{-webkit-flex-grow:1;flex-grow:1}
-</style>,
-]
+"<style id=\\"react-native-stylesheet-static\\">html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+body{margin:0;}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
+@keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);}100%{-webkit-transform:translateX(400%);transform:translateX(400%);}}
+.rn-pointerEvents-105ug2t{pointer-events:auto !important;}
+.rn-pointerEvents-ah5dr5{pointer-events:auto !important;}
+.rn-pointerEvents-633pao{pointer-events:none !important;}
+.rn-pointerEvents-12vffkv{pointer-events:none !important;}
+.rn-pointerEvents-12vffkv > *{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5 > *{pointer-events:none;}</style>"
+`;
+
+exports[`apis/AppRegistry/renderApplication getApplication 3`] = `
+"<style id=\\"react-native-stylesheet\\">.rn-bottom-1p0dtai{bottom:0px}
+.rn-left-1d2f490{left:0px}
+.rn-position-u8s1d{position:absolute}
+.rn-position-bnwqim{position:relative}
+.rn-right-zchlnj{right:0px}
+.rn-top-ipm5af{top:0px}
+.rn-appearance-30o5oe{-moz-appearance:none;-webkit-appearance:none;appearance:none}
+.rn-backgroundColor-wib322{background-color:transparent}
+.rn-color-homxoj{color:inherit}
+.rn-font-1lw9tu2{font:inherit}
+.rn-textAlign-1ttztb7{text-align:inherit}
+.rn-textDecoration-bauka4{text-decoration:none}
+.rn-listStyle-1ebb2ja{list-style:none}
+.rn-alignItems-1oszu61{-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
+.rn-borderTopStyle-1efd50x{border-top-style:solid}
+.rn-borderRightStyle-14skgim{border-right-style:solid}
+.rn-borderBottomStyle-rull8r{border-bottom-style:solid}
+.rn-borderLeftStyle-mm0ijv{border-left-style:solid}
+.rn-borderTopWidth-13yce4e{border-top-width:0px}
+.rn-borderRightWidth-fnigne{border-right-width:0px}
+.rn-borderBottomWidth-ndvcnb{border-bottom-width:0px}
+.rn-borderLeftWidth-gxnn5r{border-left-width:0px}
+.rn-boxSizing-deolkf{box-sizing:border-box}
+.rn-display-6koalj{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
+.rn-display-xoduu5{display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}
+.rn-flexShrink-1qe8dj5{-webkit-flex-shrink:0;flex-shrink:0}
+.rn-flexShrink-1wbh5a2{-webkit-flex-shrink:1;flex-shrink:1}
+.rn-flexBasis-1mlwlqe{-webkit-flex-basis:auto;flex-basis:auto}
+.rn-flexBasis-1ro0kt6{-webkit-flex-basis:0%;flex-basis:0%}
+.rn-flexDirection-eqz5dr{-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
+.rn-marginTop-1mnahxq{margin-top:0px}
+.rn-marginRight-61z16t{margin-right:0px}
+.rn-marginBottom-p1pxzi{margin-bottom:0px}
+.rn-marginLeft-11wrixw{margin-left:0px}
+.rn-minHeight-ifefl9{min-height:0px}
+.rn-minWidth-bcqeeo{min-width:0px}
+.rn-paddingTop-wk8lta{padding-top:0px}
+.rn-paddingRight-9aemit{padding-right:0px}
+.rn-paddingBottom-1mdbw0j{padding-bottom:0px}
+.rn-paddingLeft-gy4na3{padding-left:0px}
+.rn-zIndex-1lgpqti{z-index:0}
+.rn-zIndex-1wyyakw{z-index:-1}
+.rn-flexGrow-16y2uox{-webkit-flex-grow:1;flex-grow:1}</style>"
 `;
diff --git a/src/apis/AppRegistry/__tests__/renderApplication-test.js b/src/apis/AppRegistry/__tests__/renderApplication-test.js
index 06c4bc92..80d7c02f 100644
--- a/src/apis/AppRegistry/__tests__/renderApplication-test.js
+++ b/src/apis/AppRegistry/__tests__/renderApplication-test.js
@@ -2,6 +2,7 @@
 
 import { getApplication } from '../renderApplication';
 import React from 'react';
+import ReactDOMServer from 'react-dom/server';
 
 const RootComponent = () => <div />;
 
@@ -10,6 +11,9 @@ describe('apis/AppRegistry/renderApplication', () => {
     const { element, stylesheets } = getApplication(RootComponent, {});
 
     expect(element).toMatchSnapshot();
-    expect(stylesheets).toMatchSnapshot();
+    stylesheets.forEach(sheet => {
+      const result = ReactDOMServer.renderToStaticMarkup(sheet);
+      expect(result).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/apis/AppRegistry/renderApplication.js b/src/apis/AppRegistry/renderApplication.js
index f4227dc7..7bf114ec 100644
--- a/src/apis/AppRegistry/renderApplication.js
+++ b/src/apis/AppRegistry/renderApplication.js
@@ -37,7 +37,8 @@ export function getApplication(RootComponent: ReactClass<Object>, initialProps:
     </AppContainer>
   );
   const stylesheets = StyleSheet.getStyleSheets().map(sheet =>
-    <style id={sheet.id}>{sheet.textContent}</style>
+    // ensure that CSS text is not escaped
+    <style dangerouslySetInnerHTML={{ __html: sheet.textContent }} id={sheet.id} />
   );
   return { element, stylesheets };
 }