Build the Workbench's package CSS apart from Tailwind

Plan step 37 review. @tailwindcss/vite inlines the imports of an entry
that uses Tailwind without Vite's skipDuplicates, so with all.css beside
@import 'tailwindcss' every shared component stylesheet repeated later in
the cascade (231 repeated rules; button.css's hover and disabled rules
thirteen times), and every browser test ran against an order no
application gets. workbench/resources/css/package.css now holds all.css
and the scheme in an entry Tailwind never touches, and app.css keeps
Tailwind for the showcase's classes. The built package CSS repeats no
rule, and the Workbench's CSS shrinks from 559 to 406 KB.

Both entries open with the same layer statement, properties first,
because Tailwind hoists that layer to the top of its output; the order
is the one the single entry had, whichever the page links first. The
showcase's Vite config, vite.config.js and the error page test's probe
manifest name the new entry.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 03:12:44 +02:00
co-authored by Claude Opus 5
parent eda16ba727
commit 3854f4321c
6 changed files with 55 additions and 28 deletions
+16
View File
@@ -0,0 +1,16 @@
/* The package's CSS for the Workbench, built the way an application without Tailwind builds it:
all.css (the foundation, every layout and every component stylesheet) and the Workbench's
scheme, in an entry Tailwind never touches. Vite's own CSS pipeline inlines the imports here and
keeps a stylesheet several components import once, at its first position — the order an
application gets. `@tailwindcss/vite` inlines the imports of an entry that uses Tailwind without
that deduplication, so all.css imported beside `tailwindcss` would repeat every shared rule later
in the cascade; app.css keeps Tailwind, for the showcase's classes, apart.
Both entries open with the same layer statement, so the order holds whichever the page links
first: the `material` layers above Tailwind's preflight (`base`), whose `* { padding: 0 }` would
otherwise beat a component's padding, and below its `components` and `utilities`. `properties`
is the layer Tailwind hoists to the top of its output (the `--tw-*` fallbacks for a browser
without `@property`); named first, it stays lowest, as it was when both shared one entry. */
@layer properties, theme, base, material, components, utilities;
@import '../../../resources/css/all.css';
@import './material-scheme.css';