Repository navigation
fix(shadcn)!: map the whole radius ladder, and show the components - #27
Merged
Merged
Conversation
BREAKING for anyone on 0.3.0 who relied on Tailwind's default corners.
shadcn.css set `--radius` and nothing else. Tailwind resolves `rounded-md` from
`--radius-md`, so every corner stayed on Tailwind's own defaults and the theme's
radius never rendered. `paper`'s 3px corners did not exist. The regex test passed
because `--radius` was in the file, which is exactly the kind of check that looks
like coverage and is not.
It was found by compiling the bridge for real for the first time. That is the
other half of this change.
The docs site now has a components page: shadcn `new-york` class strings on
buttons, badges, inputs, cards, alerts, tables, a sidebar, skeletons, chart
series and a terminal, rendered three times with only `data-theme` differing.
Tailwind v4 is a devDependency for this one page, and it earns its place: until
now dist/shadcn.css was asserted by regex and nothing had ever compiled it. A
wrong `@theme inline` block leaves `bg-card` producing nothing, and no unit test
can see that.
The showcase uses `gap` rather than `space-y-*`. The docs site's global reset
sets `* { margin: 0 }` and lands after Tailwind's utilities, so margin-based
spacing collapsed to nothing while gap survives.
Deferred as before: no components ship in the package, and #23's registry is
still the wrong move with one consumer. Showing components and publishing a
component API are different commitments, and conflating them is why this page
did not exist until now.
Refs #23
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Two mistakes, in order. The page ran to both edges because it had no `main.wrap`. The layout does not supply one: index.astro and guide.astro each write their own, and that class is what centres the column and pads it. There is now a test walking every page in docs/src/pages and asserting it. I read that as Tailwind preflight resetting `padding: 0` and removed preflight, which was wrong twice over. It was not the cause, and shadcn's markup depends on preflight's form-control reset: without it every `<button>` picks up the UA border and the ghost and secondary variants render as boxes. Preflight is back, and the comment in tailwind.css says why it stays. The rest is the layout matching guide.astro rule for rule: the `padding-block`, the back link, the h1 treatment, the lede measure, and the ruled `h2` that makes a long page read as one document instead of three unrelated panels.
This branch was successfully deployed
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.
Two things, and the second is what found the first.
The bug
dist/shadcn.cssset--radius: var(--wl-radius)and stopped there. Tailwindresolves
rounded-mdfrom--radius-md,rounded-lgfrom--radius-lg, and soon. None of those were mapped, so every corner in every consumer stayed on
Tailwind's defaults and the per-theme radius never rendered.
paper's 3px cornersdid not exist.
0.3.0shipped that. This is0.3.1.The test that was supposed to catch it asserted
--radius: var(--wl-radius)waspresent, which it was. A check that confirms the thing you wrote is there, rather
than the thing you wanted to happen, is the kind that reads as coverage and is
not. It now asserts every step of the ladder, with a comment saying why.
Before and after, from the compiled output:
Why it was not caught
Nothing had ever compiled the bridge.
shadcn.csswas asserted by regex, and aregex cannot tell whether Tailwind produces a utility from it. A wrong
@theme inlineblock leavesbg-cardcompiling to nothing, the page rendersunstyled, and no unit test in this repo can see it.
So the docs site now compiles it.
docs/src/tailwind.cssimportstailwindcssanddist/shadcn.css, and Tailwind v4 joins the devDependencies forthat one page.
The components page
/componentsrenders shadcnnew-yorkclass strings on buttons in six variants,badges, an input with a focus ring, a card, two alerts, a table, a sidebar,
skeletons, five chart series and a terminal. The same markup three times, with
only
data-themediffering, so a role that works on one background and fails onanother has nowhere to hide.
This should have been in the original scope.
#23defers the component layerbecause one consumer cannot tell us the API, and that argument is about
publishing a component contract other repos depend on. It says nothing about
showing components. Conflating the two left a design system site that could
not show a button, which is the one thing it exists to demonstrate. No components
ship in the package and
#23stays open.One more fix found by looking at it: the showcase uses
gapinstead ofspace-y-*. The docs site's global reset sets* { margin: 0 }and lands afterTailwind's utilities, so margin-based spacing collapsed and every section sat
flush against the last.
Verification
npm testexits 0npm run build && git diff --exit-code dist/exits 0rounded-mdiscalc(var(--wl-radius) * .875),rounded-fullisvar(--wl-radius-full)bg-chart-3,bg-terminal,text-warning-foregroundandfocus-visible:ring-ring, whichresolves to
--tw-ring-color: var(--wl-ring)bg-primary/12becomescolor-mix(in oklab, var(--wl-primary) 12%, transparent)with a flat fallback
paper's corners are visibly tighterthan
lightanddark, which is the fix renderingRefs #23