JM: Introduce button_classes helper (move buttons off @apply) - #2297
JM: Introduce button_classes helper (move buttons off @apply)#2297maebeale wants to merge 1 commit into
Conversation
Introduce ButtonHelper#button_classes as the single source of truth for button styling, emitting Tailwind utilities from a helper (scanned via @source) instead of the @apply-based .btn/.btn-* component classes — per Evil Martians best practice #4. Convert the event registration-flow buttons (registration section, event show, event card, scholarship callout) as the reference pattern. buttons.css is intentionally left in place: the ~200 remaining call sites still depend on it, so the helper and the @apply classes coexist during an incremental rollout (no visual change, nothing breaks). Size handling is explicit (size: :md default, :sm, or nil) because conflicting utilities in one class list resolve by Tailwind's generation order, not markup order — the old component/utility layer split is gone once styles are inlined. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
@jmilljr24 curious if you think this work it to move off tailwind apply |
maebeale
changed the title
jmilljr24
left a comment
jmilljr24
left a comment
There was a problem hiding this comment.
I'm all for avoiding @apply where we can but I'm confused with this PR. If we had a custom button we used in many places, I think this pattern in the PR is sound. However, @apply isn't being used for buttons. btn is a built in tailwind class and btn-primary uses @theme which is what we want to do. This change seems to just duplicate what tailwind already gives us for buttons.
|
@jmilljr24 i wanted to apply the custom branding info and success colors from the branding sheet they sent to us. so that would've been an apply. OOOOH, totally forgot we built the button. I was looking at the tailwind docs for their components(paid feature we don't use) Sorry. This is great! |
2 participants
🤖 suggested review level: 3 Read 📖 new helper + reference conversion of the event-flow buttons; rest of the app unchanged
Why
@applycomponent classes in CSS.@applyhides where styles change and bloats the bundle.What
ButtonHelper#button_classes(variant, size:, extra:)— single source of truth for base + all variants + sizes. Tailwind already scansapp/helpers/**/*.rb, so the utility strings generate normally.Deliberately incremental
buttons.css(.btn/.btn-*@apply) stays — the ~200 remaining call sites still use it, so helper +@applycoexist with zero visual change. Convert-on-next-touch, per the same Evil Martians guidance against big-bang@applyrewrites.Gotcha this design handles
.btn's padding lives in thecomponentslayer, so a call site'spx-10/text-2xl(in theutilitieslayer) overrides it. Once styles are inlined they're all utilities in one class list, where conflicts resolve by Tailwind's generation order, not markup order. Sosize:is explicit::md(default),:sm, ornilwhen the call site supplies its own padding/text-size viaextra:.Open question