Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Fix dynamic global styles #25690

Merged
merged 16 commits into from
May 7, 2021
6 changes: 3 additions & 3 deletions docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@
"@babel/plugin-transform-object-assign": "^7.10.1",
"@babel/runtime-corejs2": "^7.10.2",
"@date-io/core": "^1.3.9",
"@emotion/cache": "^11.0.0",
"@emotion/react": "^11.0.0",
"@emotion/server": "^11.0.0",
"@emotion/cache": "^11.4.0",
"@emotion/react": "^11.4.0",
"@emotion/server": "^11.4.0",
"@emotion/styled": "^11.0.0",
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
Expand Down
20 changes: 11 additions & 9 deletions docs/pages/_document.js
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ MyDocument.getInitialProps = async (ctx) => {
const originalRenderPage = ctx.renderPage;

const cache = getCache();
const { extractCritical } = createEmotionServer(cache);
const { extractCriticalToChunks } = createEmotionServer(cache);

try {
ctx.renderPage = () =>
Expand All @@ -145,7 +145,15 @@ MyDocument.getInitialProps = async (ctx) => {
});

const initialProps = await Document.getInitialProps(ctx);
const emotionStyles = extractCritical(initialProps.html);
const emotionStyles = extractCriticalToChunks(initialProps.html);
const emotionStyleTags = emotionStyles.styles.map((style) => (
<style
data-emotion={`${style.key} ${style.ids.join(' ')}`}
key={style.key}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: style.css }}
/>
));

let css = materialSheets.toString();
// It might be undefined, e.g. after an error.
Expand All @@ -171,13 +179,7 @@ MyDocument.getInitialProps = async (ctx) => {
<style id="material-icon-font" key="material-icon-font" />,
<style id="font-awesome-css" key="font-awesome-css" />,
styledComponentsSheet.getStyleElement(),
<style
id="emotion-server-side"
key="emotion-server-side"
data-emotion={`css ${emotionStyles.ids.join(' ')}`}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: emotionStyles.css }}
/>,
...emotionStyleTags,
<style
id="jss-server-side"
key="jss-server-side"
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.10.1",
"@babel/register": "^7.10.1",
"@emotion/react": "^11.0.0",
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.0.0",
"@eps1lon/enzyme-adapter-react-17": "^0.1.0",
"@octokit/rest": "^18.0.14",
Expand Down
32 changes: 16 additions & 16 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1163,10 +1163,10 @@
source-map "^0.5.7"
stylis "^4.0.3"

"@emotion/cache@^11.0.0", "@emotion/cache@^11.1.3":
version "11.1.3"
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.1.3.tgz#c7683a9484bcd38d5562f2b9947873cf66829afd"
integrity sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA==
"@emotion/cache@^11.0.0", "@emotion/cache@^11.4.0":
version "11.4.0"
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.4.0.tgz#293fc9d9a7a38b9aad8e9337e5014366c3b09ac0"
integrity sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==
dependencies:
"@emotion/memoize" "^0.7.4"
"@emotion/sheet" "^1.0.0"
Expand Down Expand Up @@ -1215,20 +1215,20 @@
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==

"@emotion/react@^11.0.0", "@emotion/react@^11.1.1":
version "11.1.5"
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.1.5.tgz#15e78f9822894cdc296e6f4e0688bac8120dfe66"
integrity sha512-xfnZ9NJEv9SU9K2sxXM06lzjK245xSeHRpUh67eARBm3PBHjjKIZlfWZ7UQvD0Obvw6ZKjlC79uHrlzFYpOB/Q==
"@emotion/react@^11.0.0", "@emotion/react@^11.1.1", "@emotion/react@^11.4.0":
version "11.4.0"
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.4.0.tgz#2465ad7b073a691409b88dfd96dc17097ddad9b7"
integrity sha512-4XklWsl9BdtatLoJpSjusXhpKv9YVteYKh9hPKP1Sxl+mswEFoUe0WtmtWjxEjkA51DQ2QRMCNOvKcSlCQ7ivg==
dependencies:
"@babel/runtime" "^7.7.2"
"@emotion/cache" "^11.1.3"
"@emotion/serialize" "^1.0.0"
"@babel/runtime" "^7.13.10"
"@emotion/cache" "^11.4.0"
"@emotion/serialize" "^1.0.2"
"@emotion/sheet" "^1.0.1"
"@emotion/utils" "^1.0.0"
"@emotion/weak-memoize" "^0.2.5"
hoist-non-react-statics "^3.3.1"

"@emotion/serialize@^1.0.0", "@emotion/serialize@^1.0.2":
"@emotion/serialize@^1.0.2":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
Expand All @@ -1239,10 +1239,10 @@
"@emotion/utils" "^1.0.0"
csstype "^3.0.2"

"@emotion/server@^11.0.0":
version "11.0.0"
resolved "https://registry.yarnpkg.com/@emotion/server/-/server-11.0.0.tgz#bec7fbaa139f42ce7bb3c8dc7f96c96e2fa02f77"
integrity sha512-2iyQf841Ir//9EmXk4L35gZJxl4T8q9pmKPQIj9JmM9mkaHpIu1P2ZrWuQ7cxFZc7HU230vNvnY9pAk17nRDKA==
"@emotion/server@^11.4.0":
version "11.4.0"
resolved "https://registry.yarnpkg.com/@emotion/server/-/server-11.4.0.tgz#3ae1d74cb31c7d013c3c76e88c0c4439076e9f66"
integrity sha512-IHovdWA3V0DokzxLtUNDx4+hQI82zUXqQFcVz/om2t44O0YSc+NHB+qifnyAOoQwt3SXcBTgaSntobwUI9gnfA==
dependencies:
"@emotion/utils" "^1.0.0"
html-tokenize "^2.0.0"
Expand Down