From d461e53a0044793d26edcd383f8678fbbd22a656 Mon Sep 17 00:00:00 2001 From: Julien Oculi Date: Fri, 16 May 2025 15:24:59 +0200 Subject: [PATCH] feat: rewrite `components`/`islands` css loading with dynamic tree-shake loader --- components/AutoGrid.css | 10 +- components/AutoGrid.tsx | 7 +- components/BlogBlocks.tsx | 5 + components/CohabitInfoTable.tsx | 6 + components/Footer.css | 10 +- components/Footer.tsx | 22 ++-- components/Header.css | 14 +- components/Header.tsx | 19 ++- components/Heros.css | 6 +- components/Heros.tsx | 12 +- components/MachineCard.css | 8 +- components/MachineCard.tsx | 14 +- components/MemberCard.css | 8 +- components/MemberCard.tsx | 14 +- components/ProjectCard.css | 12 +- components/ProjectCard.tsx | 17 ++- components/SponsorCards.css | 4 +- components/SponsorCards.tsx | 9 +- deno.json | 1 + islands/AiChatBox.tsx | 3 + islands/IsOnline.css | 2 +- islands/IsOnline.tsx | 8 +- islands/LoginForm.css | 2 +- islands/LoginForm.tsx | 7 +- islands/MoreBox.tsx | 3 + islands/SearchBox.tsx | 3 + islands/ThemePicker.css | 2 +- islands/ThemePicker.tsx | 7 +- main.ts | 3 + plugins/SmartStylesheet.tsx | 218 ++++++++++++++++++++++++++++++++ routes/_app.tsx | 4 +- src/stylesheets/components.css | 16 --- src/stylesheets/main.css | 9 +- 33 files changed, 385 insertions(+), 100 deletions(-) create mode 100644 plugins/SmartStylesheet.tsx delete mode 100644 src/stylesheets/components.css diff --git a/components/AutoGrid.css b/components/AutoGrid.css index 8a51413..645ba9e 100644 --- a/components/AutoGrid.css +++ b/components/AutoGrid.css @@ -1,5 +1,5 @@ -.components__auto_grid { - display: grid; - gap: var(--_gap); - margin-block: var(--_gap); -} \ No newline at end of file +:scope { + display: grid; + gap: var(--_gap); + margin-block: var(--_gap); +} diff --git a/components/AutoGrid.tsx b/components/AutoGrid.tsx index a4eddd9..bc26b2f 100644 --- a/components/AutoGrid.tsx +++ b/components/AutoGrid.tsx @@ -1,7 +1,10 @@ import { ComponentChildren, JSX } from 'preact' +import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx' type Units = 'rem' | '%' | 'px' +const scope = getStyleScope(AutoGrid) + export function AutoGrid( { columnWidth, children, style }: { columnWidth: `${number}${Units}` @@ -9,9 +12,11 @@ export function AutoGrid( style?: JSX.CSSProperties }, ) { + useSmartStylesheet(import.meta, { scope }) + return (

{title}

diff --git a/components/CohabitInfoTable.tsx b/components/CohabitInfoTable.tsx index 9aba60e..e4ec886 100644 --- a/components/CohabitInfoTable.tsx +++ b/components/CohabitInfoTable.tsx @@ -1,3 +1,5 @@ +import { useSmartStylesheet } from ':plugins/SmartStylesheet.tsx' + export function CohabitInfoTable() { return (
@@ -8,6 +10,8 @@ export function CohabitInfoTable() { } export function TechnoshopInfoTable() { + useSmartStylesheet(import.meta) + return (
@@ -76,6 +80,8 @@ export function TechnoshopInfoTable() { } export function FablabInfoTable() { + useSmartStylesheet(import.meta) + return (
diff --git a/components/Footer.css b/components/Footer.css index 0c191d0..aa187a8 100644 --- a/components/Footer.css +++ b/components/Footer.css @@ -1,9 +1,9 @@ -footer { +:scope { height: fit-content; background-color: var(--_translucent); } -footer div { +:scope div { max-width: var(--_wide-screen); width: 100%; padding: var(--_gap); @@ -14,13 +14,13 @@ footer div { } @media (width < 800px) { - footer div { + :scope div { flex-wrap: wrap; text-align: center; } } -.footer__badges { +.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--_gap-half); @@ -28,7 +28,7 @@ footer div { padding-left: 0; } -.footer__badges__item { +.badges__item { text-decoration: none; background-color: var(--_translucent); color: var(--_font-color); diff --git a/components/Footer.tsx b/components/Footer.tsx index a61ccc4..bd4e1d9 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,6 +1,12 @@ +import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx' + +const scope = getStyleScope(Footer) + export function Footer() { + useSmartStylesheet(import.meta, { scope }) + return ( -