Emotion: Emotion does not create style tags using Next.js
What happened before: I used css to add styles, which creates a class for the element and also injected the styles into<head> <style>..., now using next.js, it doesn't but instead, I think the style is being injected through js files, and that gives me a problem: the styles are applied after the component appears on screen, so in my case I have a really big image , and I use emotion to set width, so when the screen is loaded, the image takes over the full screen, and only after that the emotion style, which defineswidth is applied.
And I don't know what to do to solve it. Any suggestion? My site is live at https://webstation.dev, maybe on first load you will see that the images cover the entire screen, and only a few milliseconds that the emotion style is applied, and the image gets its expected size.
flakesrc
All 17 comments
Seems like you didn't setup SSR correctly. Which css are you using? The one from emotion or from @emotion/core package? Have you tried doing any SSR-integration? Could you share how your setup looks like?
Andarist
on 18 Nov 2019
i'm using import { css } from "emotion";, and in next.config.js i only have others settings:
const withSass = require("@zeit/next-sass");
const withFonts = require("next-fonts");
// target: server to export as static site
const nextSettings = {
target: "server",
exportPathMap() {
return {
"/": { page: "/" },
};
},
};
module.exports = withSass(withFonts(nextSettings));
this is to use .scss file (other styles that i not use with emotion)
flakesrc
on 18 Nov 2019
You need to look into integrating with this API:
https://emotion.sh/docs/ssr#extractcritical
and also using this on the client:
https://emotion.sh/docs/ssr#hydrate
SSR usually requires some additional setup (especially when you are using emotion package and not @emotion/core)
Andarist
on 18 Nov 2019
edit: i add "emotion" in plugins in the .babelrc file, now i have the style tags, but he problem keeps happening, watch this video
flakesrc
on 18 Nov 2019
flakesrc
on 18 Nov 2019
Babel plugin, as far as I know, is completely irrelevant here. The important part is that there are no SSR-ed emotion-related style tags, which is easily inspectable by viewing your site's source: view-source:https://webstation.dev/ . This means that you have not setup emotion correctly, especially on the server. You need to make use of linked APIs
Andarist
on 18 Nov 2019
Well, the only thing I noticed is that now I have style tags. And in the next sample repository, they just add emotion to the plugins, I didn't see any extra settings. I am completely noob about this, what should I do then? I'm committing source code, if you find it helpful to try to help me.
flakesrc
on 18 Nov 2019
https://github.com/flakesrc/webstation.dev/
the problem is in sections/presentation and header
flakesrc
on 18 Nov 2019
This example https://github.com/zeit/next.js/tree/master/examples/with-emotion-fiber shows how to do what you are trying to do.
Andarist
on 18 Nov 2019
Hi, same problem.
I created a reproduction repo: https://github.com/azizhk/next-9-emotion-10-inject-global-bug
It should look like: (on this commit)
But it looks like: (on this commit)
I've updated emotion in the example from v8 to v10, the changes are there in this commit: https://github.com/azizhk/next-9-emotion-10-inject-global-bug/commit/25c8bbe9447ece3e9c6a62bdf330b85582670648
azizhk
on 5 Dec 2019
@azizhk you should change this:
https://github.com/azizhk/next-9-emotion-10-inject-global-bug/blob/25c8bbe9447ece3e9c6a62bdf330b85582670648/shared/styles.js#L1
to
-import { keyframes, css, injectGlobal } from 'emotion'
+import { injectGlobal } from 'emotion'
+import { keyframes, css } from '@emotion/core'
Keep in mind though that even with those changes the whole example might not work as expected in some regards - mainly due to how you mix vanilla emotion into it.
With emotion 10 you shouldn't have to use vanilla emotion with React, you can just use @emotion/core and optionally @emotion/styled. You also shouldn't have to do anything special to make SSR work - you don't need to use APIs like extractCritical etc.
Andarist
on 5 Dec 2019
Keep in mind though that even with those changes the whole example might not work as expected in some regards - mainly due to how you mix vanilla emotion into it.
Can you expand or if there is some documentation on this. (Can document if you point me to issues.)
With emotion 10 you shouldn't have to use vanilla emotion with React, you can just use @emotion/core and optionally @emotion/styled. You also shouldn't have to do anything special to make SSR work - you don't need to use APIs like extractCritical etc.
Yeah we had a couple of issues, Multiple Style Tags (https://github.com/emotion-js/emotion/issues/1370) First Child Selectors (https://github.com/emotion-js/emotion/issues/1178)
So we chose this approach.
Also wanted to ask if extractCritical would be slower than normal approach? Should we measure?
azizhk
on 6 Dec 2019
Keep in mind though that even with those changes the whole example might not work as expected in some regards - mainly due to how you mix vanilla emotion into it.
Ok, I understand this now, emotion package is framework agnostic.
For usage with React, we have to use @emotion/core, @emotion/styled, create-emotion-server.
css from emotion returns a string.
css from @emotion/core returns a custom data type.
I've updated the example in the next.js repo: https://github.com/zeit/next.js/pull/9646
Would prefer your review.
azizhk
on 6 Dec 2019
Also wanted to ask if extractCritical would be slower than normal approach? Should we measure?
extractCritical is slower by its nature (extra work to be done), but it probably isn't slow enough for you to care about it. You can benchmark your case if you want to.
css from emotion returns a string.
css from @emotion/core returns a custom data type.
Yes - that's the difference. By using custom data types in the latter case we can have CacheProvider API which wouldnt be possible if we'd have returned plain strings.
Would prefer your review.
Gonna take a quick look.
Andarist
on 7 Dec 2019
@Andarist The link you give to Next.js Emotion Fiber example should be added to SSR doc page, because currently, when I read this page, it says there is nothing to do with Next.js which is wrong (if I do nothing,
Most helpful comment
For anyone interested with a real use-case example, check out https://github.com/UnlyEd/next-right-now
Interesting parts are: