diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 00000000..e69de29b diff --git a/docs/FEATURE_STYLED_COMPONENTS.md b/docs/FEATURE_STYLED_COMPONENTS.md index 1a160284..d27a9bfa 100644 --- 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 index a35fe3f5..261721f6 100644 --- 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 index 01b4cb2f..7e5c6cd7 100644 --- 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) { ), )} 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 index c8aeb771..237492cd 100644 --- 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( {headerElements} + {styleElement}
@@ -29,6 +30,8 @@ HTML.propTypes = { headerElements: PropTypes.node, bodyElements: PropTypes.node, appBodyString: PropTypes.string, + // eslint-disable-next-line react/forbid-prop-types + styleElement: PropTypes.array, }; HTML.defaultProps = { @@ -36,6 +39,7 @@ HTML.defaultProps = { headerElements: null, bodyElements: null, appBodyString: '', + styleElement: null, }; // EXPORT