-
Notifications
You must be signed in to change notification settings - Fork 10.3k
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
styled-components v5 global styles is not inlined #20594
Comments
If you change I'll try to dig up what changed in styled-components v4 <-> v5 that it stopped working |
I suspect that when you use Where did you pick up using |
@pieh thanks for quick response! Global styles are injected with Looks like it finally should work, but no!: If I remove |
Interesting. I can't seem to reproduce the flashing part with v5 and using If you are using |
This is very unlikely, but: what are you using to serve your files? The 5000 port would suggest not using |
I use https://www.npmjs.com/package/serve to serve build locally and looks like it can be a reason of blinking. I deployed Demo v5 So look like it doesn't work only with Edit: I've cleaned caches, retested it with |
I feel like issue is resolved at this point, documentation points to using Shall we close this? |
Ok, I don't have any problems with |
Changing to wrapPageElement fixed the issue for me |
Hey, @pieh I have a large gatsby site I am in the process of upgrading to styled-components v5. I too am having this issue, however, when I change to wrapPageElement from wrapRootElement I still get the same problem in the original issue. Any other suggestions? Could it be another gatsby plugin using wrapRootElement affecting things? |
I'm also running into this issue when using I am using Apollo which I suspect might be introducing complexities in how Here is what I have: apollo/wrap-page-element.js
gatsby-ssr.js gatsby-browser.js The above setup is the 'default' Any tips would be helpful! |
I would reopen this, since I have the same problem that leads to a content blink in production mode. The weird thing is that if I inspect the page source, the In
In
In
With
FYI
EDIT: even more weird - style tag is still empty, but in Firefox (on Mac) I can't see the content blink. I can only see it in Chrome and Safari 🧐 EDIT2: I deployed to Netlify and solved the blink with gatsby-plugin-netlify, so I guess it was a caching issue? I still see it if I build and serve on local and the style tag is still empty tho |
Im having this issue and I dont even use styled components. All I have is a global stled sheet that is being shared across the project by gatsby-browser.js. Has anyone had such an issue? :/ |
I was having this issue and it was really bugging me. Weirdly, what I discovered is that I had two Before: After: Really annoying. Hopefully this can be helpful for others. |
Description
Looks like styled-components v5 global styles injection is not working with gatsby 2.18.12 and gatsby-plugin-styled-components 3.1.17.
I have same gatsby-browser and gatsby-ssr
and simple index.js page
index.html After build with styled-components 5.0.0
index.html After build with styled-components 4.4.1
Also I noticed that moving
GlobalStyle
from gatsby-browser and gatsby-ssr to index page fixes this behavior, but unfortunately it's not fit in my caseSteps to reproduce
Repo: https://github.com/EugeneDraitsev/gatsby-styled-components-5
Demo v5: https://priceless-mayer-7a8244.netlify.com/
Demo v4: https://deploy-preview-1--priceless-mayer-7a8244.netlify.com/
(Try to update pages in demos to see the difference)
Expected result
Global styles should be injected
Actual result
Global are not injected
Environment
The text was updated successfully, but these errors were encountered: