ctrlplusb · strues · Oct 5, 2017 · Sep 27, 2017 · Sep 27, 2017 · Oct 1, 2017
diff --git a/.gitattributes b/.gitattributes
diff --git a/docs/FEATURE_STYLED_COMPONENTS.md b/docs/FEATURE_STYLED_COMPONENTS.md
@@ -1,23 +1,21 @@
 # Styled Components
 
-[![Styled Components logo](https://styled-components.com/static/media/logo.333814ad.png "Styled Components")](http://styled-components.com/)
+[![Styled Components logo](https://raw.githubusercontent.com/styled-components/brand/master/styled-components.png "Styled Components")](http://styled-components.com/)
 
-This is a feature branch of `react-universally` that is currently built against `v12.0.0`.
+This is a feature branch of `react-universally` that is currently built against `v13.0.0`.
 
 It provides you with a simple Style Components integration.
 
 ## Known Issues
   Currently there is an [issue](https://github.com/styled-components/styled-components/issues/157) trying to use `import` instead of `require` when working with `styled-components`.
 
-  Also, there is a [PR pending](https://github.com/styled-components/styled-components/pull/214) for SSR support, so this functionality is not _yet_ available for this branch.
-
 # About
 
   This is the `react-universally-styled-components` feature repository for `react-universally` starter kit.
 
   It provides you with the build tooling and configuration you need to kick off your next universal react project with full support for Styled Components.
 
-  Look into `Header` and `Menu` components to check how the wrappers for these are styled using styled-components.
+  Look into `Header` component to check how its wrapper is styled using `styled-components`.
 
 ## What are Styled Components?
 

diff --git a/package.json b/package.json
@@ -78,7 +78,7 @@
     "react-helmet": "5.1.3",
     "react-router-dom": "4.1.2",
     "serialize-javascript": "1.4.0",
-    "styled-components": "^2.1.2",
+    "styled-components": "^2.2.0",
     "uuid": "3.1.0"
   },
   "devDependencies": {

diff --git a/server/middleware/reactApplication/ServerHTML.js b/server/middleware/reactApplication/ServerHTML.js
@@ -40,7 +40,7 @@ function scriptTag(jsFilePath) {
 // COMPONENT
 
 function ServerHTML(props) {
-  const { asyncComponentsState, helmet, styleTags, nonce, reactAppString } = props;
+  const { asyncComponentsState, helmet, styleElement, nonce, reactAppString } = props;
 
   // Creates an inline script definition that is protected by the nonce.
   const inlineScript = body =>
@@ -105,7 +105,7 @@ function ServerHTML(props) {
         </KeyedComponent>),
       )}
       appBodyString={reactAppString}
-      styleTags={styleTags}
+      styleElement={styleElement}
     />
   );
 }
@@ -117,6 +117,8 @@ ServerHTML.propTypes = {
   helmet: PropTypes.object,
   nonce: PropTypes.string,
   reactAppString: PropTypes.string,
+  // eslint-disable-next-line react/forbid-prop-types
+  styleElement: PropTypes.array,
 };
 
 // EXPORT

diff --git a/server/middleware/reactApplication/index.js b/server/middleware/reactApplication/index.js
@@ -56,12 +56,12 @@ export default function reactApplicationMiddleware(request, response) {
   // components are resolved for the render.
   asyncBootstrapper(app).then(() => {
     const appString = renderToString(sheet.collectStyles(app));
-    const styleTags = sheet.getStyleTags();
+    const styleElement = sheet.getStyleElement();
     // Generate the html response.
     const html = renderToStaticMarkup(
       <ServerHTML
         reactAppString={appString}
-        styleTags={styleTags}
+        styleElement={styleElement}
         nonce={nonce}
         helmet={Helmet.rewind()}
         asyncComponentsState={asyncComponentsContext.getState()}

diff --git a/shared/components/HTML/index.js b/shared/components/HTML/index.js
@@ -8,12 +8,13 @@ import PropTypes from 'prop-types';
  * The is the HTML shell for our React Application.
  */
 function HTML(props) {
-  const { htmlAttributes, headerElements, bodyElements, appBodyString } = props;
+  const { htmlAttributes, headerElements, bodyElements, appBodyString, styleElement } = props;
 
   return (
     <html {...htmlAttributes}>
       <head>
         {headerElements}
+        {styleElement}
       </head>
       <body>
         <div id="app" dangerouslySetInnerHTML={{ __html: appBodyString }} />
@@ -29,13 +30,16 @@ HTML.propTypes = {
   headerElements: PropTypes.node,
   bodyElements: PropTypes.node,
   appBodyString: PropTypes.string,
+  // eslint-disable-next-line react/forbid-prop-types
+  styleElement: PropTypes.array,
 };
 
 HTML.defaultProps = {
   htmlAttributes: null,
   headerElements: null,
   bodyElements: null,
   appBodyString: '',
+  styleElement: null,
 };
 
 // EXPORT