From 8642d4acf6cbf3ce6db5c077452397497e8e76a8 Mon Sep 17 00:00:00 2001 From: iris Date: Wed, 12 Aug 2026 21:26:44 +0200 Subject: [PATCH] swarm-ui: colocate component CSS as JS-side-effect imports MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- frontend/packages/swarm-ui/build.mjs | 11 +++++++++-- frontend/packages/swarm-ui/src/css.d.ts | 4 ++++ frontend/packages/swarm-ui/src/index.html | 1 + frontend/packages/swarm-ui/src/shell/Shell.tsx | 13 ++++++++----- frontend/packages/swarm-ui/src/swarm-ui.css | 10 ++++++---- frontend/packages/swarm-ui/src/ui/panel/Panel.tsx | 1 + .../swarm-ui/src/ui/status-chip/StatusChip.tsx | 2 ++ frontend/packages/swarm-ui/src/ui/table/Table.tsx | 1 + 8 files changed, 32 insertions(+), 11 deletions(-) create mode 100644 frontend/packages/swarm-ui/src/css.d.ts diff --git a/frontend/packages/swarm-ui/build.mjs b/frontend/packages/swarm-ui/build.mjs index 4e680219..7c4874cf 100644 --- a/frontend/packages/swarm-ui/build.mjs +++ b/frontend/packages/swarm-ui/build.mjs @@ -5,10 +5,17 @@ // dist/static/main.js served at /static/main.js (ESM bundle, // Preact + wouter-preact) // dist/static/main.js.map source map sibling +// dist/static/main.css every component's own `import +// './Foo.css'` (Shell.css, Panel.css, …), +// folded by esbuild into one companion +// output alongside main.js — no separate +// build step, this falls out of bundling +// main.tsx with `bundle: true` // dist/static/colors.css served at /static/colors.css // dist/static/theme.css served at /static/theme.css -// dist/static/swarm-ui.css served at /static/swarm-ui.css (@import -// resolved from @hive/shared) +// dist/static/swarm-ui.css served at /static/swarm-ui.css — just the +// shared base reset now (@import resolved +// from @hive/shared), NOT component styles // // Not yet wired into any Rust binary's `ServeDir` — swarm-controller // only serves `/health` today (see swarm-controller/README.md); this diff --git a/frontend/packages/swarm-ui/src/css.d.ts b/frontend/packages/swarm-ui/src/css.d.ts new file mode 100644 index 00000000..8597bb2b --- /dev/null +++ b/frontend/packages/swarm-ui/src/css.d.ts @@ -0,0 +1,4 @@ +// Ambient module for `import './Foo.css'` side-effect imports (esbuild +// resolves these directly, see build.mjs; tsc otherwise has no idea what +// a `.css` specifier is and refuses the whole side-effect import). +declare module '*.css'; diff --git a/frontend/packages/swarm-ui/src/index.html b/frontend/packages/swarm-ui/src/index.html index 9ed89442..6766527b 100644 --- a/frontend/packages/swarm-ui/src/index.html +++ b/frontend/packages/swarm-ui/src/index.html @@ -7,6 +7,7 @@ +
diff --git a/frontend/packages/swarm-ui/src/shell/Shell.tsx b/frontend/packages/swarm-ui/src/shell/Shell.tsx index 508d98f1..9a25878e 100644 --- a/frontend/packages/swarm-ui/src/shell/Shell.tsx +++ b/frontend/packages/swarm-ui/src/shell/Shell.tsx @@ -1,10 +1,12 @@ // — page chrome every swarm-ui route mounts inside: a header // bar (swarm branding) plus a nav row linking the app's real routes. -// Preact-native styling (shell/Shell.css, imported globally via -// ../swarm-ui.css) — deliberately not @hive/shared's chrome.css -// page-header pattern, which is the per-hive MPA dashboard's visual -// language. This package is a clean field, not an inheritor of that -// look. +// Preact-native styling — `./Shell.css` imported right here, not +// wired centrally, so the component and its styles travel together +// (esbuild folds every imported `.css` reachable from `main.tsx` into +// one `main.css` companion output, see build.mjs) — deliberately not +// @hive/shared's chrome.css page-header pattern, which is the per-hive +// MPA dashboard's visual language. This package is a clean field, not +// an inheritor of that look. // // Route list lives here, not prop-drilled from App — one small SPA // has exactly one place that needs to know its own nav, and this is @@ -12,6 +14,7 @@ // is next); no speculative entries. import type { ComponentChildren } from 'preact'; import { Link, useRoute } from 'wouter-preact'; +import './Shell.css'; const NAV_ITEMS: { href: string; label: string }[] = [{ href: '/', label: 'overview' }]; diff --git a/frontend/packages/swarm-ui/src/swarm-ui.css b/frontend/packages/swarm-ui/src/swarm-ui.css index c2f26b80..5289a7a2 100644 --- a/frontend/packages/swarm-ui/src/swarm-ui.css +++ b/frontend/packages/swarm-ui/src/swarm-ui.css @@ -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"; diff --git a/frontend/packages/swarm-ui/src/ui/panel/Panel.tsx b/frontend/packages/swarm-ui/src/ui/panel/Panel.tsx index 8998a1e8..de8f88db 100644 --- a/frontend/packages/swarm-ui/src/ui/panel/Panel.tsx +++ b/frontend/packages/swarm-ui/src/ui/panel/Panel.tsx @@ -3,6 +3,7 @@ // card-with-actions/footer/whatever kit — those get added the first // time a real page actually needs one, not speculatively ahead of it. import type { ComponentChildren } from 'preact'; +import './Panel.css'; export function Panel({ title, children }: { title?: string; children: ComponentChildren }) { return ( diff --git a/frontend/packages/swarm-ui/src/ui/status-chip/StatusChip.tsx b/frontend/packages/swarm-ui/src/ui/status-chip/StatusChip.tsx index d83ad6b8..354c9459 100644 --- a/frontend/packages/swarm-ui/src/ui/status-chip/StatusChip.tsx +++ b/frontend/packages/swarm-ui/src/ui/status-chip/StatusChip.tsx @@ -4,6 +4,8 @@ // single static "configured" tone and grows real online/stale/offline // states once a status rollup lands server-side — same component, // richer data later, no rebuild. +import './StatusChip.css'; + export type ChipTone = 'neutral' | 'positive' | 'warning' | 'negative'; export function StatusChip({ tone = 'neutral', label }: { tone?: ChipTone; label: string }) { diff --git a/frontend/packages/swarm-ui/src/ui/table/Table.tsx b/frontend/packages/swarm-ui/src/ui/table/Table.tsx index 402953a7..3e852063 100644 --- a/frontend/packages/swarm-ui/src/ui/table/Table.tsx +++ b/frontend/packages/swarm-ui/src/ui/table/Table.tsx @@ -4,6 +4,7 @@ // any particular row shape, so it stays reusable for the swarm-wide // agent roster later without a rewrite. import type { ComponentChildren } from 'preact'; +import './Table.css'; export interface TableColumn { key: string;