Docs: Make CSS ordering in DocsContainer more predictable#34015
Docs: Make CSS ordering in DocsContainer more predictable#34015
Conversation
… CSS ordering on theme change When styled() is called with multiple arguments (e.g., styled.h1(withReset, headerCommon, themeFunc)), Emotion generates separate CSS classes for each argument. On theme change, unchanged classes are reused at their original stylesheet position while changed ones are appended at the end. This causes unpredictable CSS cascade ordering since DocsContent's :where() selectors and component classes share the same specificity (0-1-0). By merging all arguments into a single function, each component produces exactly one CSS class that is always regenerated together on theme change, ensuring consistent stylesheet ordering. Co-authored-by: Sidnioulz <5108577+Sidnioulz@users.noreply.github.com>
|
View your CI Pipeline Execution ↗ for commit 8fcdfe9
☁️ Nx Cloud last updated this comment at |
Sidnioulz
changed the title
|
@yannbf I think we did something else since SB 8 that causes docs to reload entirely when the theme switches. That reload causes classes to load with correct ordering and fixes the reported bug. This being said, I see no significant difference in built bundle size between this PR and If you also think this is sound reasoning, and if CI is green, I'd like to merge this. |
Sidnioulz
left a comment
Sidnioulz
left a comment
There was a problem hiding this comment.
Code LGTM (pending CI/CH outputs)
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (19)
📝 WalkthroughWalkthroughThis PR systematically refactors styled-component invocations across 19 files, changing the style composition pattern from passing helper functions as separate arguments to inlining them via object spreads within theme-aware functions. Type imports are updated to use CSSObject with explicit type casts. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes ✨ Finishing Touches
Comment |
Updated the PR description to include the "#### Manual testing" section with setup and reproduction steps. |
Manual testing
Setup
.storybook/previewof https://stackblitz.com/edit/vitejs-vite-yow74x into your sandboxcontext.store.globals.globalstocontext.store.userGlobals.globalsOriginal repro steps
Dynamically changing the theme passed to
DocsContainercauses style breakage (e.g., incorrect margins on headers) because Emotion's CSS class insertion order becomes unpredictable across theme switches.Root cause
styled()with multiple arguments (e.g.,styled.h1(withReset, headerCommon, themeFunc)) generates a separate CSS class per argument. On theme change, arguments with unchanged output (likewithReset, which only references fonts/sizes constant across themes) reuse their cached class at its original stylesheet position, while arguments with changed output (likeheaderCommon, which referencestheme.color.defaultText) get new classes appended at the end. SinceDocsContent's:where()selectors and component classes share specificity0-1-0, cascade order determines which wins — and that order just shifted.Fix
Merge all
styled()arguments into a single function per component so each produces exactly one CSS class, always regenerated atomically on theme change:withReset,headerCommon,withMargin,codeCommoninto single theme functions💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.