Uh oh!
There was an error while loading. Please reload this page.
refactor(css): wrap styles.css rules into @layer base + components (Round A, #253) - #257
Merged
Merged
Conversation
…ound A, apache#253) Wrap global resets (body, scrollbars, button reset, sr-only, reduced-motion, visual-smoke) into @layer base, and all component rules into @layer components, aligning with maka-tokens.css which already declares the same three layers (base / utilities / components). This is the prerequisite for later rounds: unlayered styles.css had higher priority than any @layer, so 47 !important declarations were cascade hacks. With components-layered rules, tailwind utilities now override components by layer order, removing the need for most of those hacks (actual !important removal is Round H). No rule, selector, property, or !important is changed — pure structural wrapping. Verified: comment balance 300/300, brace balance 1901/1901, lightningcss parse VALID. Part of issue apache#253 Round A.
Astro-Han added a commit
that referenced
this pull request
Jun 25, 2026
…260) * Revert "refactor(css): wrap styles.css rules into @layer base + components (Round A, #253) (#257)" This reverts commit cbdf108. #257 wrapped styles.css component rules into @layer base/components. Tailwind v4 orders the cascade base, components, utilities, so layered rules lose to utilities. The sidebar nav rows render as <UiButton size="nav" className="maka-nav-row">; the cva button base always carries inline-flex items-center justify-center utilities, and .maka-nav-row (display: grid + text-align: left) only overrode them while it stayed unlayered. Layered, it lost — collapsing every sidebar button (nav rows, session rows, settings) to flex-centered content for users whose sidebar is wide enough to show the gap. Restore the unlayered cascade. The Round A cleanup needs a different approach (overrides must sit above utilities) before it can re-land. * test(styles): guard .maka-nav-row stays unlayered so it beats Tailwind button utilities Regression lock for #257: a node:test contract that fails if .maka-nav-row is nested in any @layer in styles.css (which would let the cva button base's inline-flex/justify-center utilities win and re-center the sidebar). Red on cbdf108, green after the revert.
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 freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Wrap global resets (body, scrollbars, button reset, sr-only, reduced-motion, visual-smoke) into @layer base, and all component rules into @layer components, aligning with maka-tokens.css which already declares the same three layers (base / utilities / components).
This is the prerequisite for later rounds: unlayered styles.css had higher priority than any @layer, so 47 !important declarations were cascade hacks. With components-layered rules, tailwind utilities now override components by layer order, removing the need for most of those hacks (actual !important removal is Round H).
No rule, selector, property, or !important is changed — pure structural wrapping. Verified: comment balance 300/300, brace balance 1901/1901, lightningcss parse VALID.
Part of issue #253 Round A.