fix(tasks-ui): restore the scoped preflight subset and return the page to stock shadcn
Real-device report: the Tasks page "looks like it has no CSS at all, with blurry borders". Two hypotheses were falsified before the real cause surfaced: the sheet IS delivered (the chunk carries both the CSS and its injector, and the bundle route serves it) and the cascade is NOT the problem (with the real host stylesheet plus the real compiled sheet, a controlled sample keeps our padding, radius, border, background and font; host CSS-module selectors only match host nodes, and its global element rules are element-level specificity). The cause is what we deliberately excluded: PREFLIGHT is also what normalizes form controls. Measured on a plugin icon button that sets only an icon size, the UA chrome survived as padding 1px 6px, border 2px outset, background ButtonFace (#efefef) and a 13.33px system font - gray beveled buttons with a soft double border, i.e. "no CSS". - ui/theme.css: a .dsw-tasks-scoped preflight subset (zero margins/padding, border width+style, background, appearance none, inherit color/spacing, cursor rules) inside @layer base, written with :where() so it stays at (0,1,0) and utilities in the later layer still win; plus an explicit "@layer theme, base, components, utilities;" statement - layer order follows first appearance, and without it the utilities import registered utilities BEFORE base, so the reset beat rounded-md (measured: square buttons). The built chunk's order was re-checked: properties, theme, base, components, utilities. - Stock shadcn restyle: static cards carry stock shadow-xs/shadow-sm again (floating layers keep shadow-lg), body/meta text is text-sm/text-xs instead of 11-13px, status uses stock Badge variants, controls use stock Button variants and sizes, row actions appear on hover/focus while staying keyboard reachable, node cards are 176x68 with shadow-xs. - bandColsFor budgets columns at the readability floor (width / 0.78) instead of 1:1, so a 360px panel keeps two columns; FIT_MIN_SCALE moved into the layout module as GRAPH_FIT_MIN_SCALE so the fit and the column budget share one constant. - Guards: tests/ui-foundation.spec.ts pins the scoped reset declarations and the layer-order statement; tests/ui-shadows.spec.ts now allows shadow-xs and shadow-sm on static panels and bans md and above; the theme guard's inert paint rule forced the reset to spell border-width/border-style instead of the "border: 0 solid" shorthand. Verified: typecheck and lint clean; 136 files / 1505 tests; build with the core/chunk bundle guards; mount e2e 7/7 (mount 444ms, longtasks 2 of 8); the visual mirror page (real host stylesheet + real components) re-shot at 360 and 720 for graph, tree and the 77-node stress fixture.
This commit is contained in:
@@ -18,6 +18,15 @@
|
||||
* without it Tailwind would glob the project root and pick class-like strings
|
||||
* out of `lib/`, `tests/`, `node_modules/` and the docs.
|
||||
*/
|
||||
/*
|
||||
* Layer order is declared FIRST and explicitly: the compiler orders layers by
|
||||
* first appearance, and the `@import`s below would otherwise register
|
||||
* `utilities` before the `base` block at the bottom of this file — which would
|
||||
* make the scoped reset beat the utilities (a `rounded-md` button rendering
|
||||
* square, exactly the kind of "no CSS" artifact this file exists to prevent).
|
||||
*/
|
||||
@layer theme, base, components, utilities;
|
||||
|
||||
@import "tailwindcss/theme.css" layer(theme);
|
||||
@import "tailwindcss/utilities.css" layer(utilities);
|
||||
|
||||
@@ -124,12 +133,54 @@
|
||||
@layer base {
|
||||
.dsw-tasks {
|
||||
color: var(--dsw-alias-label-primary);
|
||||
/* The page's own density: stock shadcn body text, not the host's 16px. */
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.dsw-tasks :where(button, input, textarea, select) {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
* THE SCOPED PREFLIGHT SUBSET — without it the page wears the browser's
|
||||
* defaults. Preflight itself cannot be imported (it would repaint the host
|
||||
* page), but preflight is also what normalizes FORM CONTROLS: measured in a
|
||||
* real browser on a plugin icon button that sets only `size-7`, the UA chrome
|
||||
* survived as `padding: 1px 6px`, `border: 2px outset`, `background:
|
||||
* ButtonFace` (#efefef) and `font: 400 13.33px system-ui` — gray beveled
|
||||
* buttons and a soft double border, i.e. "the page has no CSS". Text inputs
|
||||
* and selects are affected the same way.
|
||||
*
|
||||
* `:where()` keeps these at the ancestor's (0,1,0); utilities sit in the
|
||||
* later `utilities` layer at the same specificity, so they still win — this
|
||||
* only removes what nobody asked for.
|
||||
*/
|
||||
.dsw-tasks :where(button, input, select, textarea) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* Split rather than the `border: 0 solid` shorthand: the theme guard
|
||||
* (tests/theme.spec.ts) requires every `border` declaration to name a
|
||||
* colour token or be inert, and `0 solid` is neither. */
|
||||
border-width: 0;
|
||||
border-style: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
color: inherit;
|
||||
letter-spacing: inherit;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.dsw-tasks :where(button, [role='button']) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dsw-tasks :where(button:disabled, input:disabled, select:disabled, textarea:disabled) {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.dsw-tasks :where(*, *::before, *::after) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user