mirror of
https://github.com/bulwarkmail/webmail.git
synced 2026-10-31 16:13:15 +00:00
Linus Rath
e38e326efb
Every plugin iframe loaded /plugin-sandbox, a force-dynamic Next page. Each frame then fetched, parsed and hydrated Next's client router on top of React and the runtime, and the server rendered the page once per frame, one after another when a dozen plugins started together. Sandboxed frames have opaque origins, so the browser's code cache never helps, and they run on the host page's main thread: with 12 plugins the frames took 2.5-3 s to come up after the app had loaded. The sandbox routes now return a small HTML page with the UI kit's stylesheet and the runtime as an ES module, both built ahead of time: - `scripts/build-plugin-sandbox.mjs` bundles the runtime with esbuild and compiles `plugin-kit.css` with the app's Tailwind setup into `public/plugin-sandbox-assets/`, with a manifest. Named Tabler imports are pointed at the icons' own files, so the full icon set stays in a chunk that only loads for an icon name the kit doesn't ship. - `npm run build`, `npm run dev`, the Dockerfile and the perf-guard workflow run it before `next build`. - `lib/plugin-sandbox/sandbox-document.ts` writes the page; proxy.ts still sets the sandbox CSP and the script carries its nonce. - The assets are served from public/ with CORS and immutable caching. A frame on an idle page is ready in 255 ms instead of 362 ms, eleven at once in 1.0 s instead of 2.1 s.
77 lines
2.7 KiB
CSS
77 lines
2.7 KiB
CSS
/* Styles for the plugin UI kit (lib/plugin-sandbox/ui-kit), loaded into
|
|
every plugin iframe; scripts/build-plugin-sandbox.mjs compiles it. Built from the same Tailwind classes as the app's own
|
|
components, so a kit Button is the app's Button. Only the kit's sources
|
|
are scanned, which keeps the file small.
|
|
|
|
No Tailwind preflight: plugins written before the kit style plain HTML
|
|
elements and rely on the browser's defaults. The kit's elements get the
|
|
same reset through the .bk class each kit component puts on its root. */
|
|
|
|
@layer theme, base, components, utilities;
|
|
@import "tailwindcss/theme.css" layer(theme);
|
|
@import "tailwindcss/utilities.css" layer(utilities) source(none);
|
|
@import "../theme-inline.css";
|
|
|
|
@source "../../lib/plugin-sandbox/ui-kit";
|
|
@source "../../components/ui/button.tsx";
|
|
@source "../../components/ui/input.tsx";
|
|
@source "../../components/files/file-icons.tsx";
|
|
|
|
|
|
@layer base {
|
|
/* Tailwind's preflight, limited to the kit's own elements. :where() keeps
|
|
it at zero specificity, so every utility still wins. */
|
|
:where(.bk, .bk *, .bk ::before, .bk ::after) {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0 solid var(--color-border);
|
|
}
|
|
:where(button.bk, input.bk, select.bk, textarea.bk, .bk button, .bk input, .bk select, .bk textarea) {
|
|
font: inherit;
|
|
font-feature-settings: inherit;
|
|
letter-spacing: inherit;
|
|
color: inherit;
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
opacity: 1;
|
|
}
|
|
:where(button.bk, select.bk, [role="button"].bk, [role="switch"].bk, [role="checkbox"].bk, .bk button, .bk select, .bk [role="button"], .bk [role="tab"], .bk [role="switch"], .bk [role="checkbox"], .bk [role="option"]):not(:disabled, [aria-disabled="true"]) {
|
|
cursor: pointer;
|
|
}
|
|
:where(button.bk:disabled, select.bk:disabled, .bk[aria-disabled="true"], .bk button:disabled, .bk select:disabled, .bk [aria-disabled="true"]) {
|
|
cursor: not-allowed;
|
|
}
|
|
:where(.bk h1, .bk h2, .bk h3, .bk h4) {
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
:where(a.bk, .bk a) {
|
|
color: inherit;
|
|
text-decoration: inherit;
|
|
}
|
|
:where(.bk ol, .bk ul) {
|
|
list-style: none;
|
|
}
|
|
:where(.bk img, .bk svg) {
|
|
display: block;
|
|
vertical-align: middle;
|
|
}
|
|
:where(.bk input::placeholder, .bk textarea::placeholder) {
|
|
color: var(--color-muted-foreground);
|
|
opacity: 1;
|
|
}
|
|
:where(.bk table) {
|
|
border-collapse: collapse;
|
|
text-indent: 0;
|
|
}
|
|
/* Same as globals.css: native option lists only follow these. */
|
|
:where(.bk option, .bk optgroup) {
|
|
background-color: var(--color-popover);
|
|
color: var(--color-popover-foreground);
|
|
}
|
|
:where(.dark .bk select) {
|
|
color-scheme: dark;
|
|
}
|
|
}
|