close
The Wayback Machine - https://web.archive.org/web/20201007085728/https://github.com/vercel/next.js/issues/17626
Skip to content

/ next.js

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

Jump to bottom

Update `examples/with-emotion` to remove _document.js? And upgrade to @emotion/cache? #17626

Open
karlhorky opened this issue Oct 5, 2020 · 2 comments
Open

Update `examples/with-emotion` to remove _document.js? And upgrade to @emotion/cache? #17626

karlhorky opened this issue Oct 5, 2020 · 2 comments
Labels
good first issue type: example

Comments

@karlhorky
Copy link
Contributor

@karlhorky karlhorky commented Oct 5, 2020

Feature request

Is your feature request related to a problem? Please describe.

The examples/with-emotion example is using Emotion 10.

According to the Emotion SSR docs, the _document.js file is no longer required:

Screen Shot 2020-10-05 at 15 04 17

Suggested Solution: Maybe this file can be removed?

Secondly, I noticed that the cache is using the original emotion as a dependency:

next.js/examples/with-emotion/pages/_app.js

Line 5 in dd264f5

import { cache } from 'emotion'

Suggested Solution: Maybe this can be switched to use the createCache function from @emotion/cache instead?

Describe the solution you'd like

Solutions suggested above.

Describe alternatives you've considered

Leave things how they are (more code, but maybe still works?)
@karlhorky
Copy link
Contributor Author

@karlhorky karlhorky commented Oct 5, 2020

cc @timneutkens
@mattcarlotta
Copy link
Contributor

@mattcarlotta mattcarlotta commented Oct 6, 2020 •
edited

Switching to @emotion/cache without extracting styles in the _document appears to be working well in development and in production. Ran some e2e tests using cypress in staging, as well as some unit tests with jest-emotion, and they all passed. In terms of performance, appears to be no loss switching between the two in production:

Before (custom document): Lighthouse
After (cache): Lighthouse

Then again, I only use @emotion/styled with the @emotion/babel-preset-css-prop babel preset, so you (or whoever) may want to test their other APIs (like jsx and css from @emotion/core, as well testing in v11.0.x-x-next) before completely removing the _document page from the official example(s).
@JipSterk JipSterk mentioned this issue Oct 6, 2020
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
good first issue type: example
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
@karlhorky @lfades @mattcarlotta
You can’t perform that action at this time.