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.

Sign up for GitHub

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

feat(server): add extractCriticalToChunks #2334

Merged
merged 36 commits into from
May 7, 2021
Merged

feat(server): add extractCriticalToChunks #2334

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
d98b963
init
mnajdova Apr 6, 2021
f30982d
add some resets
mnajdova Apr 6, 2021
bba6038
updates
mnajdova Apr 9, 2021
55b8c0e
fixes
mnajdova Apr 9, 2021
aca34c9
cleanup
mnajdova Apr 9, 2021
afdcbe5
Update packages/server/types/create-instance.d.ts
mnajdova Apr 11, 2021
52521b4
Update packages/server/src/create-instance/extract-critical2.js
mnajdova Apr 11, 2021
c7ac36c
adress comments
mnajdova Apr 12, 2021
d7e7f8c
tests
mnajdova Apr 12, 2021
c39f42a
flow fixes
mnajdova Apr 12, 2021
ee704e1
Improve auto-rehydration for global styles when using extractCritical2
Andarist Apr 13, 2021
104d539
Fixed constructStyleTags to include all ids correctly
Andarist Apr 13, 2021
6b5489e
Merge branch 'main' into feat/extract-critical-2
mnajdova Apr 14, 2021
cdd74fd
Update packages/server/types/create-instance.d.ts
mnajdova Apr 14, 2021
d5dad23
Update packages/server/src/create-instance/construct-style-tags.js
mnajdova Apr 14, 2021
de5acc6
fix flow issues & update tests
mnajdova Apr 14, 2021
da4d7d9
Update packages/react/__tests__/rehydration.js
mnajdova Apr 19, 2021
f3b63f4
tweak test title
Andarist Apr 18, 2021
8345672
Merge branch 'main' into feat/extract-critical-2
mnajdova Apr 19, 2021
e69351c
renamed to extractCriticalToChunks
mnajdova Apr 19, 2021
70301b5
spacings
mnajdova Apr 19, 2021
584216a
spacing
mnajdova Apr 19, 2021
00ce87b
Fixed an issue with Global styles being reinjected when rehydrating
Andarist Apr 22, 2021
124cf3f
resolve comments
mnajdova Apr 22, 2021
88de62d
test updates
mnajdova Apr 22, 2021
26b6254
Fixed issue with global styles being sometimes owned by multiple shee…
Andarist Apr 26, 2021
c550bc1
Add tests for global rehydration
Andarist Apr 26, 2021
9596d32
add comment about why the data-attribute is reset in <Global/>
Andarist Apr 26, 2021
b51b8d1
fix flow errors
Andarist Apr 26, 2021
1ba5ab8
Revert merging layout effects in <Global/>
Andarist May 1, 2021
8d6fc69
Update packages/server/src/create-instance/extract-critical-to-chunks.js
emmatown May 3, 2021
634c863
Merge branch 'main' into feat/extract-critical-2
emmatown May 3, 2021
2025657
Merge branch 'main' into feat/extract-critical-2
Andarist May 5, 2021
eb70989
Merge branch 'main' into feat/extract-critical-2
emmatown May 7, 2021
9537994
Create tidy-feet-buy.md
emmatown May 7, 2021
2cc16da
Create chilly-clocks-jam.md
emmatown May 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions docs/ssr.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,47 @@ import { renderToString } from 'react-dom/server'
import createEmotionServer from '@emotion/server/create-instance'
import createCache from '@emotion/cache'

const key = 'custom'
const cache = createCache({ key })
const { extractCritical2 } = createEmotionServer(cache)

let element = (
<CacheProvider value={cache}>
<App />
</CacheProvider>
)

let { html, css, globalCss, ids } = extractCritical2(renderToString(element))

res
.status(200)
.header('Content-Type', 'text/html')
.send(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My site</title>
<style data-emotion="global-css">${globalCss.reduce((acc, curr) => acc + curr)}</style>
<style data-emotion="${key} ${ids.join(' ')}">${css}</style>
Andarist marked this conversation as resolved.
Show resolved Hide resolved
</head>
<body>
<div id="root">${html}</div>

<script src="./bundle.js"></script>
</body>
</html>`);
```

#### Deprecated
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For now, this won't get deprecated - the recommendation would be that:

  • extractCriticalToChunks should be used when using @emotion/react
  • extractCritical should be used when using @emotion/css

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated, you can re-check the wording.


```jsx
import { CacheProvider } from '@emotion/react'
import { renderToString } from 'react-dom/server'
import createEmotionServer from '@emotion/server/create-instance'
import createCache from '@emotion/cache'

const key = 'custom'
const cache = createCache({ key })
const { extractCritical } = createEmotionServer(cache)
Expand Down
38 changes: 38 additions & 0 deletions packages/server/src/create-instance/extract-critical2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
// @flow
import type { EmotionCache } from '@emotion/utils'

const createExtractCritical2 = (cache: EmotionCache) => (html: string) => {
// parse out ids from html
// reconstruct css/rules/cache to pass
let RGX = new RegExp(`${cache.key}-([a-zA-Z0-9-_]+)`, 'gm')

let o = { html, ids: [], css: '', globalCss: [] }
let match
let ids = {}
while ((match = RGX.exec(html)) !== null) {
// $FlowFixMe
if (ids[match[1]] === undefined) {
// $FlowFixMe
ids[match[1]] = true
}
}

o.ids = Object.keys(cache.inserted).filter(id => {
if (
(ids[id] !== undefined ||
cache.registered[`${cache.key}-${id}`] === undefined) &&
cache.inserted[id] !== true
) {
if (cache.registered[`${cache.key}-${id}`]) {
o.css += cache.inserted[id]
} else {
Andarist marked this conversation as resolved.
Show resolved Hide resolved
o.globalCss.push(cache.inserted[id])
Andarist marked this conversation as resolved.
Show resolved Hide resolved
}
return true
}
})

return o
}

export default createExtractCritical2
2 changes: 2 additions & 0 deletions packages/server/src/create-instance/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// @flow
import type { EmotionCache } from '@emotion/utils'
import createExtractCritical from './extract-critical'
import createExtractCritical2 from './extract-critical2'
import createRenderStylesToString from './inline'
import createRenderStylesToStream from './stream'

Expand All @@ -13,6 +14,7 @@ export default function(cache: EmotionCache) {
const nonceString = cache.nonce !== undefined ? ` nonce="${cache.nonce}"` : ''
return {
extractCritical: createExtractCritical(cache),
extractCritical2: createExtractCritical2(cache),
renderStylesToString: createRenderStylesToString(cache, nonceString),
renderStylesToNodeStream: createRenderStylesToStream(cache, nonceString)
}
Expand Down
1 change: 1 addition & 0 deletions packages/server/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { cache } from '@emotion/css'

export const {
extractCritical,
extractCritical2,
renderStylesToString,
renderStylesToNodeStream
} = createEmotionServer(cache)
254 changes: 254 additions & 0 deletions packages/server/test/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,260 @@ Object {
}
`;

exports[`extractCritical2 returns static css 1`] = `
Object {
"css": ".css-14e1j2p-hoverStyles-Something_Main {
color: hotpink;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

.css-14e1j2p-hoverStyles-Something_Main:hover {
color: white;
background-color: lightgray;
border-color: aqua;
box-shadow: -15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;
}

.css-1h1w8ez-Image {
-webkit-animation: animation-i9f7qw-bounce;
animation: animation-i9f7qw-bounce;
border-radius: 50%;
height: 50px;
width: 50px;
background-color: red;
}",
"globalCss": Array [
"@font-face {
font-family: 'Patrick Hand SC';
font-style: normal;
font-weight: 400;
src: local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');
unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
}",
"@-webkit-keyframes animation-i9f7qw-bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
-moz-transform: translate3d(0, -30px, 0);
-ms-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}

70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
-moz-transform: translate3d(0, -15px, 0);
-ms-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}

90% {
-webkit-transform: translate3d(0, -4px, 0);
-moz-transform: translate3d(0, -4px, 0);
-ms-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}

@keyframes animation-i9f7qw-bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
-moz-transform: translate3d(0, -30px, 0);
-ms-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}

70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
-moz-transform: translate3d(0, -15px, 0);
-ms-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}

90% {
-webkit-transform: translate3d(0, -4px, 0);
-moz-transform: translate3d(0, -4px, 0);
-ms-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}",
".no-prefix {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}",
],
"html": <main class="css-14e1j2p-hoverStyles-Something_Main">
<img size="30"
class="css-1h1w8ez-Image"
>
<img size="100"
class="css-1h1w8ez-Image"
>
<img class="css-1h1w8ez-Image">
</main>,
"ids": Array [
"1uqawbr",
"i9f7qw-bounce",
"1nhdffy",
"14e1j2p-hoverStyles-Something_Main",
"1h1w8ez-Image",
],
}
`;

exports[`extractCritical2 returns static css 2`] = `
Object {
"css": ".css-14e1j2p-hoverStyles-Something_Main {
color: hotpink;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

.css-14e1j2p-hoverStyles-Something_Main:hover {
color: white;
background-color: lightgray;
border-color: aqua;
box-shadow: -15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;
}",
"globalCss": Array [
"@font-face {
font-family: 'Patrick Hand SC';
font-style: normal;
font-weight: 400;
src: local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');
unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
}",
"@-webkit-keyframes animation-i9f7qw-bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
-moz-transform: translate3d(0, -30px, 0);
-ms-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}

70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
-moz-transform: translate3d(0, -15px, 0);
-ms-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}

90% {
-webkit-transform: translate3d(0, -4px, 0);
-moz-transform: translate3d(0, -4px, 0);
-ms-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}

@keyframes animation-i9f7qw-bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
-moz-transform: translate3d(0, -30px, 0);
-ms-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}

70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
-moz-transform: translate3d(0, -15px, 0);
-ms-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}

90% {
-webkit-transform: translate3d(0, -4px, 0);
-moz-transform: translate3d(0, -4px, 0);
-ms-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}",
".no-prefix {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}",
],
"html": <main class="css-14e1j2p-hoverStyles-Something_Main">
<div>
Hello
</div>
</main>,
"ids": Array [
"1uqawbr",
"i9f7qw-bounce",
"1nhdffy",
"14e1j2p-hoverStyles-Something_Main",
],
}
`;

exports[`hydration only rules that are not in the critical css are inserted 1`] = `
Object {
"css": "@font-face {
Expand Down
24 changes: 24 additions & 0 deletions packages/server/test/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,3 +65,27 @@ describe('hydration', () => {
expect(getInjectedRules()).toMatchSnapshot()
})
})
describe('extractCritical2', () => {
test('returns static css', () => {
global.document = undefined

jest.resetModules()
emotion = require('@emotion/css')
emotionServer = require('@emotion/server')

expect(emotion.cache.inserted).toEqual({})

const { Page1, Page2 } = getComponents(emotion, reactEmotion)

expect(
prettifyCritical(
emotionServer.extractCritical2(renderToString(<Page1 />))
)
).toMatchSnapshot()
expect(
prettifyCritical(
emotionServer.extractCritical2(renderToString(<Page2 />))
)
).toMatchSnapshot()
})
})
Loading