perf(css): merge top-level :root blocks in built component CSS#2262
Open
soulfeelings wants to merge 1 commit into
Open
perf(css): merge top-level :root blocks in built component CSS#2262soulfeelings wants to merge 1 commit into
soulfeelings wants to merge 1 commit into
Conversation
Each component inlines base tokens plus its own aliases as separate :root blocks, so a consumer's bundled CSS ends up with hundreds of :root blocks. They inherit into every node, and Chrome DevTools re-renders each one per selected/hovered node, freezing the Styles panel (matches primevue#8309). Add a postcss-merge-roots plugin (next to postcss-remove-empty-root) that collapses all top-level :root rules in each emitted file into one deduped block, preserving source order so no resolved value changes. Cuts per-file :root blocks (e.g. button 21 -> 9). Top-level only; @media-scoped :root is left intact. Applies to every build variant via the shared postcss chain.
soulfeelings
requested review from
SiebenSieben,
dHIM24,
fulcanellee and
hextion
as code owners
|
Contributor
Demo build (default) |
Contributor
Demo build (alfasans)https://soulfeelings.github.io/core-components/2262-alfasans |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Problem
Each component inlines base tokens + its own aliases as separate
:rootblocks, so a consumer's bundled CSS ends up with hundreds of
:rootblocks.They inherit into every node, and Chrome DevTools re-renders each one for every
selected/hovered node → the Styles panel freezes (same class of issue as
primefaces/primevue#8309). Production is usually fine only because the prod
minifier merges
:rootblocks.Change
Add
tools/postcss/postcss-merge-roots.cjs(a sibling of the existingpostcss-remove-empty-root.cjs) that collapses all top-level:rootrulesin each emitted file into a single deduped block, preserving source order so
no resolved custom-property value changes. Registered in the shared
tools/rollup/process-css.mjschain (right beforepostcss-remove-empty-root),so it applies to every build variant.
@media-scoped:rootis intentionally left intact.:rootblocks.Effect
Fewer
:rootblocks per emitted file (e.g. button 21 → 9) → DevTools' Stylespane stays responsive on consumer apps. Backward compatible, idempotent, no
public API change.
Verification
The transform was checked in isolation:
:rootinto one, keeping other rules;:rootfile is untouched;:rootinside@mediais not merged.Notes
component's emitted CSS, so the right version bump depends on your release
policy. Happy to add whatever set of bumps you prefer.
moderncssm/noCommonVarsbuild (it doesnot require or change it); it improves the default published CSS directly.