-
Notifications
You must be signed in to change notification settings - Fork 536
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
fix(Blankslate): update styles to prevent SSR hydration mismatch #4710
Conversation
🦋 Changeset detectedLatest commit: 9a3040c The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
size-limit report 📦
|
bump @TylerJDev! |
display: grid; | ||
justify-items: center; | ||
padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline); | ||
} | ||
|
||
.Blankslate[data-spacious='true'] { | ||
--blankslate-outer-padding-block: var(--base-size-80); | ||
--blankslate-outer-padding-inline: var(--base-size-40); | ||
--blankslate-outer-padding-block: var(--base-size-80, 5rem); |
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.
Nice!
@@ -128,7 +130,7 @@ function Blankslate({border, children, narrow, spacious}: BlankslateProps) { | |||
This is a workaround so we can use `@container` without upgrading `styled-components` to 6.x | |||
See [this comment](https://github.com/primer/react/pull/3869#discussion_r1392523030) for more info | |||
*/} | |||
<style type="text/css">{BlankslateContainerQuery}</style> | |||
<style type="text/css" dangerouslySetInnerHTML={{__html: BlankslateContainerQuery}} /> |
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 very smart 🔥
I also think it is obscure to cause hydration mismatch when it is passed as children 😄
Update Blankslate to address an SSR hydration mismatch issue that was occurring. When the styles were present as
children
of a<style>
tag, they were being serialized in a way that transformed the'
to escaped sequences leading to a hydration mismatch. Updating this to usedangerouslySetInnerHTML
addresses this issue.I also updated the styles to use fallbacks, where appropriate, so the component would render as expected without an explicit import to primitives.
Changelog
New
Changed
style
tag inBlankslate
to better support SSRBlankslate
.Removed
Rollout strategy