Skip to content
This repository has been archived by the owner on Sep 7, 2020. It is now read-only.

Ability to inline CSS in HTML #459

Closed
MoOx opened this issue May 8, 2016 · 10 comments
Closed

Ability to inline CSS in HTML #459

MoOx opened this issue May 8, 2016 · 10 comments
Labels
feature request

Comments

@MoOx
Copy link
Owner

MoOx commented May 8, 2016

Since only one HTML per user session is used, no big deal.
And it's good for perf (and gatsby is now supporting this).
A flag in config should be easy (enabled by default), and/or support for CSS chunk names (default to all CSS, support for array to filter chunk names with string/regex support).
@kuzvac
Copy link
Contributor

kuzvac commented May 8, 2016

Just interested: with css modules, how it can help?

@thangngoc89
Copy link
Contributor

@kuzvac I don't think it would help us with anything here.

@MoOx
Copy link
Owner Author

MoOx commented May 8, 2016

The idea is just to inline the CSS to avoid an HTTP query. So no relation with how the CSS is handled (sass, css modules...).

@kuzvac
Copy link
Contributor

kuzvac commented May 8, 2016

Oh, ok, thank you.

@DavidWells
Copy link
Contributor

Checkout https://github.com/addyosmani/critical-path-css-tools might be useful for this issue.

The idea with critical is that is will inline above the fold CSS for that 'instant' load feel without needing to inline all of the sites CSS in the head tag

@DavidWells DavidWells mentioned this issue Dec 5, 2016
Closed
@bloodyowl
Copy link
Contributor

Going to be fixed with #925 (moving to user land)

@MoOx MoOx closed this as completed May 11, 2017
@DominikGuzei
Copy link

@bloodyowl @MoOx how exactly was this solved in latest releases? Would be nice to have some guidance as #925 does not say anything about how to inline css.

@MoOx
Copy link
Owner Author

MoOx commented Jun 13, 2018

Currently all CSS-in-JS examples are extracting inline CSS. Didn't make an example yet for css(?modules)

@DominikGuzei
Copy link

Nope, no examples for css (+ modules) yet 😉 i just looked over the css-in-js examples, so should i be able to pull the css the same way?

<head>
  <style dangerouslySetInnerHTML={{ __html: css }} />
</head>

@MoOx
Copy link
Owner Author

MoOx commented Jun 13, 2018

I will push an example ;)

MoOx added a commit that referenced this issue Jun 13, 2018
@MoOx
Add example with inlined CSS in head
0e31490 
Ref #459
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Assignees
No one assigned
Labels
feature request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@MoOx @DominikGuzei @DavidWells @bloodyowl @thangngoc89 @kuzvac