Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: css-in-js integration for styled-jsx and styled-components #14
feat: css-in-js integration for styled-jsx and styled-components #14
Changes from 3 commits
f3f86e4
ffa521d
985ec4c
694e43a
004d1cc
1a54422
f1c9983
e20b651
0611a0c
0af12a2
30accde
8634ebf
a412694
ae9ef8b
d87c391
fc18e1b
ea511bb
File filter
Filter by extension
Conversations
Jump to
There are no files selected for viewing
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we build this into Next.js somehow? I would love to prevent the world where folks need this in userland.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is intended that to let users to create their own custom styles registry for any css-in-js, so that we can keep the bundle as minimal as possible on client side. Even styled-jsx we removed the built-in support for layouts. This approach was brought up by @sebmarkbage
What users need to do is:
useFlushEffects
API in that client component to consume flushed style content for each streaming renderThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Part of this story is that we discourage using either of these approaches since this approach doesn't work well inside Server Components since you have to resend them, and the client runtime overhead is not worth it compared to
.css
file generating solutions. If we were encouraging their usage then maybe the tradeoff of having them built-in would make more sense, but now it's a benefit that it's an opt-in to a solution we're not recommending.This approach works well with existing mechanisms that these libraries use and it doesn't require useFlushEffects to be built-in to React.
That said, we might add something to React to make it easier to have this work out of the box. Not because we encourage it but because it's so heavily used for legacy purposes and it'll conflict with some other new features too. That would require heavy refactoring to these libraries anyway so it's not as useful in the short term anyway.