Add CSSX as top-level docs section with patterns, async, and live examples

New top-level section in sx-docs: /cssx/ with 6 pages:
- Overview: the idea, what changed, advantages
- Patterns: class mapping, data-driven, style functions, responsive, emitting CSS
- Async CSS: components that fetch/cache CSS before rendering via ~suspense
- Live Styles: SSE/WS examples for real-time style updates (noted as future)
- Comparisons: vs styled-components, CSS Modules, Tailwind, Vanilla Extract
- Philosophy: proof by deletion, the right abstraction level

Also:
- Remove CSSX from specs nav (spec file deleted)
- Fix renderer spec prose (no longer mentions StyleValue)
- Update On-Demand CSS essay summary
- Mark CSSX Components plan as done

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-08 00:15:39 +00:00
parent a8bfff9e0b
commit 09947262a5
4 changed files with 399 additions and 4 deletions

View File

@@ -55,13 +55,21 @@
(dict :label "Request Abort" :href "/examples/sync-replace")
(dict :label "Retry" :href "/examples/retry")))
(define cssx-nav-items (list
(dict :label "Overview" :href "/cssx/")
(dict :label "Patterns" :href "/cssx/patterns")
(dict :label "Async CSS" :href "/cssx/async")
(dict :label "Live Styles" :href "/cssx/live")
(dict :label "Comparisons" :href "/cssx/comparisons")
(dict :label "Philosophy" :href "/cssx/philosophy")))
(define essays-nav-items (list
(dict :label "Why S-Expressions" :href "/essays/why-sexps"
:summary "Why SX uses s-expressions instead of HTML templates, JSX, or any other syntax.")
(dict :label "The htmx/React Hybrid" :href "/essays/htmx-react-hybrid"
:summary "How SX combines the server-driven simplicity of htmx with the component model of React.")
(dict :label "On-Demand CSS" :href "/essays/on-demand-css"
:summary "The CSSX system: keyword atoms resolved to class names, CSS rules injected on first use.")
:summary "How SX delivers only the CSS each page needs — server scans rendered classes, sends the delta.")
(dict :label "Client Reactivity" :href "/essays/client-reactivity"
:summary "Reactive UI updates without a virtual DOM, diffing library, or build step.")
(dict :label "SX Native" :href "/essays/sx-native"
@@ -103,7 +111,6 @@
(dict :label "SxEngine" :href "/specs/engine")
(dict :label "Orchestration" :href "/specs/orchestration")
(dict :label "Boot" :href "/specs/boot")
(dict :label "CSSX" :href "/specs/cssx")
(dict :label "Continuations" :href "/specs/continuations")
(dict :label "call/cc" :href "/specs/callcc")
(dict :label "Deps" :href "/specs/deps")
@@ -147,7 +154,7 @@
(dict :label "SX CI Pipeline" :href "/plans/sx-ci"
:summary "Build, test, and deploy in s-expressions — CI pipelines as SX components.")
(dict :label "CSSX Components" :href "/plans/cssx-components"
:summary "Styling as components — replace the style dictionary with regular defcomps that apply classes, respond to data, and compose naturally.")
:summary "Done — see /cssx/. Styling as components: style dictionary removed, defcomps handle all styling.")
(dict :label "Live Streaming" :href "/plans/live-streaming"
:summary "SSE and WebSocket transports for re-resolving suspense slots after initial page load — live data, real-time collaboration.")))
@@ -176,7 +183,7 @@
:prose "Special forms are the syntactic constructs whose arguments are NOT evaluated before dispatch. Each form has its own evaluation rules — unlike primitives, which receive pre-evaluated values. Together with primitives, special forms define the complete language surface. The registry covers control flow (if, when, cond, case, and, or), binding (let, letrec, define, set!), functions (lambda, defcomp, defmacro), sequencing (begin, do, thread-first), quoting (quote, quasiquote), continuations (reset, shift), guards (dynamic-wind), higher-order forms (map, filter, reduce), and domain-specific definitions (defstyle, defhandler, defpage, defquery, defaction).")
(dict :slug "renderer" :filename "render.sx" :title "Renderer"
:desc "Shared rendering registries and utilities used by all adapters."
:prose "The renderer defines what is renderable and how arguments are parsed, but not the output format. It maintains registries of known HTML tags, SVG tags, void elements, and boolean attributes. It specifies how keyword arguments on elements become HTML attributes, how children are collected, and how special attributes (class, style, data-*) are handled. All three adapters (DOM, HTML, SX wire) share these definitions so they agree on what constitutes valid markup. The renderer also defines the StyleValue type used by the CSSX on-demand CSS system.")))
:prose "The renderer defines what is renderable and how arguments are parsed, but not the output format. It maintains registries of known HTML tags, SVG tags, void elements, and boolean attributes. It specifies how keyword arguments on elements become HTML attributes, how children are collected, and how special attributes (class, style, data-*) are handled. All three adapters (DOM, HTML, SX wire) share these definitions so they agree on what constitutes valid markup.")))
(define adapter-spec-items (list
(dict :slug "adapter-dom" :filename "adapter-dom.sx" :title "DOM Adapter"