From 391bd6eb98f1e1ea2b676b8f8ac85715afe432cf Mon Sep 17 00:00:00 2001 From: anuj Date: Tue, 26 Sep 2017 21:07:24 -0700 Subject: [PATCH 1/4] Minor Readme updates for accuracy --- .gitattributes | 0 docs/FEATURE_STYLED_COMPONENTS.md | 6 +++--- 2 files changed, 3 insertions(+), 3 deletions(-) create mode 100644 .gitattributes 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..7b2352c8 100644 --- a/docs/FEATURE_STYLED_COMPONENTS.md +++ b/docs/FEATURE_STYLED_COMPONENTS.md @@ -1,8 +1,8 @@ # 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. @@ -17,7 +17,7 @@ It provides you with a simple Style Components integration. 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? From 8ab5e24536c2166a95781360baf04d98bf77083f Mon Sep 17 00:00:00 2001 From: anuj Date: Sat, 30 Sep 2017 17:16:44 -0700 Subject: [PATCH 2/4] Adding the critical CSS extracted to the HTML render from Server Previously, it was never actually added to the markup, only extracted. --- server/middleware/reactApplication/ServerHTML.js | 6 ++++-- server/middleware/reactApplication/index.js | 4 ++-- shared/components/HTML/index.js | 6 +++++- 3 files changed, 11 insertions(+), 5 deletions(-) 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 From 9ffd598f80a9035ed3e3f6c1ae5c52d565c1c61a Mon Sep 17 00:00:00 2001 From: anuj Date: Sun, 1 Oct 2017 10:10:23 -0700 Subject: [PATCH 3/4] Removing outdated README note --- docs/FEATURE_STYLED_COMPONENTS.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/FEATURE_STYLED_COMPONENTS.md b/docs/FEATURE_STYLED_COMPONENTS.md index 7b2352c8..d27a9bfa 100644 --- a/docs/FEATURE_STYLED_COMPONENTS.md +++ b/docs/FEATURE_STYLED_COMPONENTS.md @@ -9,8 +9,6 @@ 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. From 8dcd3f4589031a1e90c78ee847485126847894a4 Mon Sep 17 00:00:00 2001 From: anuj Date: Sun, 1 Oct 2017 10:24:21 -0700 Subject: [PATCH 4/4] Upgrade SC to the next release --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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": {