refactor: update styles to use CSS Layers and Scope for better isolation#2504
refactor: update styles to use CSS Layers and Scope for better isolation#2504Ajit-Mehrotra wants to merge 2 commits intounraid:masterfrom
Conversation
- Wraps default base styles in `@layer default` and `@scope (:root) to (.unapi)` - Removes verbose `:where(:not(.unapi *))` exclusion selectors - Updates `.Theme--sidebar` to `:scope.Theme--sidebar`
This was added because some plugin icons were showing up as super small after the specificity changes in default-base.css - Wraps Font Awesome styles in `@layer default` and `@scope (:root) to (.unapi)` - Ensures font icon styles are properly isolated and cascade correctly.
WalkthroughThese changes introduce CSS layers and scoping mechanisms to organize and restrict the applicability of base and font-awesome styles. Specific Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🔧 PR Test Plugin AvailableA test plugin has been generated for this PR that includes the modified files. Version: 📥 Installation Instructions:Install via Unraid Web UI:
Alternative: Direct Download
|
1 participant
Summary
This PR updates the core stylesheet handling in
default-base.cssandfont-awesome.cssto leverage modern CSS features (@layerand@scope) for cleaner style isolation, specifically preventing styles from leaking into.unapicomponents.Changes:
Default Base:
@layer defaultand@scope (:root) to (.unapi).:where(:not(.unapi *))exclusion selectors in favor of a more robust@scopemechanism..Theme--sidebarto:scope.Theme--sidebarto align with the new scoping.Font Awesome:
@layer defaultand@scope (:root) to (.unapi)to ensure icons outside the unapi scope render correctly (fixing an issue in CA where a small number of plugin icons were too small).Reasoning
These changes were primarily made because file-modifications for the new notifications refactor in the api were becoming too tedious and brittle, and I wasn't confident in the direction we were going.
In addition, previous attempts to isolate legacy styles using complex
:not()selectors were becoming unwieldy and causing specificity battles. Using@scopeallows us to explicitly define the "donut scope" for these styles (stopping at.unapi), preventing them from bleeding into the API-driven UI components while maintaining proper cascading for the rest of the interface.@layeris used to lower the specificity of these base styles so they are easier to override when necessary.Resources
You can read more about @scope and @layer in the MDN docs.
Please Note
These changes are not ready to be merged yet. Please coordinate with the API team. @elibosley and @zackspear are aware of both the API and Webgui changes.
Related PRs
api:
- PR (#1860)
community apps:
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.