swarm-ui: colocate component CSS as JS-side-effect imports

Per mara's review question on PR#3219 ('shouldnt the jsx files import
their css?'): each component now does its own import ('./Shell.css',
'./Panel.css', ...) instead of swarm-ui.css centrally @import-ing
every component's stylesheet. esbuild folds every .css reachable from
main.tsx's import graph into one main.css companion output next to
main.js — no separate build step, this is bundle:true's existing
behavior, just not exercised until now.

swarm-ui.css keeps only the shared base reset (@hive/shared/base.css)
since that isn't any one component's concern. Added src/css.d.ts
(ambient '*.css' module) since tsc otherwise rejects a side-effect
import of a non-JS/TS specifier.

Side benefit: a component nothing imports (yet) no longer ships its
CSS either — StatusChip/Table aren't referenced from App.tsx today,
and main.css correctly only carries Shell.css + Panel.css. The old
central-import approach shipped all four unconditionally.

npm run build + typecheck clean. Re-screenshotted the real dist —
pixel-identical to before this change.
This commit is contained in:
iris 2026-08-12 21:26:44 +02:00 committed by mara
commit 8642d4acf6
8 changed files with 32 additions and 11 deletions

View file

@ -1,5 +1,7 @@
/* Page-level base only component styles are colocated with their
component (`./Shell.css` imported by shell/Shell.tsx, etc.) and
land in the `main.css` companion esbuild emits alongside `main.js`
(see build.mjs), not here. This file stays just the shared reset
every page needs regardless of which components a route happens to
use. */
@import "@hive/shared/base.css";
@import "./shell/Shell.css";
@import "./ui/panel/Panel.css";
@import "./ui/status-chip/StatusChip.css";
@import "./ui/table/Table.css";