Repository navigation
fix: let a component's Class override its own conflicting classes - #69
Merged
Merged
Conversation
Shell.Cn only joined strings, so Class="max-w-lg" on a component that sets max-w-md put both on the element and the stylesheet order decided, which forced apps onto the ! modifier. Cn now drops an earlier class when a later one sets the same CSS property under the same variants, the way tailwind-merge does: p-4 replaces an earlier px-2 but not the reverse, text colour and text size stay separate, unknown classes are kept, and results are cached. The package and the CLI template share the same code, and the safelist generator skips Shell.cs's lookup tables. Fixes #51
Contributor
There was a problem hiding this comment.
Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.
An organization owner can choose the repository organization as the billing source for reviews requested by members with a paid Copilot license. Learn about Copilot code review billing.
Shewart
added a commit
that referenced
this pull request
Oct 20, 2026
Release notes and version references for 0.4.0-alpha.3. The first release published with NuGet Trusted Publishing (#71). **In this release** (already on main) - #69: a component's `Class` overrides its own conflicting classes (`Shell.Cn` merges like tailwind-merge) - #64: Dialog, AlertDialog, Sheet and Drawer keep keyboard focus inside and return it on close - #70: `add` never downgrades a NuGet package the project already references - #71: `init` supports Razor class libraries, plus a guide; release workflow on Trusted Publishing - #63, #65, #66, #68: CLI templates reconciled with the package (RadioGroup, ScrollArea, DatePicker, TimePicker, Pagination, Toast, Skeleton, Sheet/Drawer and more) **Breaking for CLI template users** (after `shellui update`, all in the notes with upgrade steps): `Input.InputVariant` becomes `InputVariant` (new `input-variants` template); Stepper parts read `ActiveStep` instead of taking `CurrentStep`; `ScrollArea` drops its `scrollbar-*` classes. `update` installs the new templates automatically. **This PR** - `Directory.Build.props` suffix `alpha.3`; README, VERSIONING_STRATEGY, CLI_INSTALLATION, CLI_SYNTAX, FAQ, QUICKSTART and the version fallbacks move to `0.4.0-alpha.3` - `docs/RELEASE_NOTES.md`: the 0.4.0-alpha.3 section; `scripts/extract-release-notes.sh 0.4.0-alpha.3` extracts it **Release checks** - Release build has 0 warnings, and all 484 tests pass - An app set up with the released 0.4.0-alpha.2 CLI, updated with the packed alpha.3 CLI: 36 components updated, `input-variants`, `textarea-variants` and `stepper-models` installed, builds 0/0 - CLI templates in a browser: RadioGroup selects (disabled items ignored), ScrollArea scrolls, Pagination `@bind-CurrentPage`, Stepper Next, DatePicker puts 1 October 2026 under Thursday, TimePicker `Step="15"` lists 00/15/30/45, `Class="px-8 bg-destructive"` replaces the button's own `px-4 bg-primary`, `InputVariant.Error` applies - Focus trap with real key presses (templates and package): Tab cycles inside the dialog and wraps, Shift+Tab goes back, Escape closes and returns focus to the trigger - All 93 direct targets together in `my-app` build 0/0 on net8.0, net9.0 and net10.0 (244 registry entries) - The packed `ShellUI.Components` in a browser: the class override, TimePicker, dark mode with `color-scheme`, Popover Escape, Command `Action`, the dialog focus trap; no console errors
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
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.
Fixes #51.
Shell.Cnonly joined strings. SoClass="max-w-lg"on a component that setsmax-w-mdput both classes on the element, the stylesheet order decided which one won, and apps had to fall back on the!modifier.Cnnow drops an earlier class when a later one sets the same CSS property under the same variants, the way tailwind-merge does:p-4replaces an earlierpx-2, but not the other way roundThe package and the CLI template share the same code. The safelist generator skips Shell.cs's lookup tables. FAQ updated.
This also fixes the Input/Textarea Error variant:
border-inputcame later in the generated CSS, so the red border never showed. Nowborder-destructivereplaces it and the destructive focus ring replaces the default.Tests: 461 passing, 0 warnings, run on this branch merged with today's main.