giles
c4224925f9
~cssx/flush now appends rules to <style id="sx-css"> in <head> instead of creating ephemeral inline <style> tags that get morphed away during SPA navigation. Rules accumulate across navigations. Future: reference-count rules and remove when no elements use them. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
510 lines
21 KiB
Plaintext
510 lines
21 KiB
Plaintext
;; @client — send all define forms to browser for client-side use.
|
|
;; CSSX — computed CSS from s-expressions.
|
|
;;
|
|
;; Tailwind-style utility component using spread + collect primitives.
|
|
;; Use as a child of any element — injects classes onto the parent:
|
|
;;
|
|
;; (div (~cssx/tw "bg-yellow-199 text-violet-700 p-4 font-bold")
|
|
;; "content")
|
|
;;
|
|
;; (button (~cssx/tw "hover:bg-rose-500 md:text-xl")
|
|
;; "click me")
|
|
;;
|
|
;; Each token becomes a deterministic class + JIT CSS rule.
|
|
;; Rules are collected into the "cssx" bucket, flushed once by ~cssx/flush.
|
|
;; No wrapper elements, no per-element <style> tags.
|
|
;;
|
|
;; Reusable style variables:
|
|
;; (define fancy (~cssx/tw "font-bold text-violet-700 text-4xl"))
|
|
;; (div fancy "styled content")
|
|
;;
|
|
;; This is one instance of the CSSX component pattern — other styling
|
|
;; components are possible with different vocabulary.
|
|
|
|
;; =========================================================================
|
|
;; Colour data — hue/saturation bases + shade-to-lightness curve
|
|
;; =========================================================================
|
|
|
|
(define colour-bases
|
|
{"violet" {"h" 263 "s" 70}
|
|
"purple" {"h" 271 "s" 81}
|
|
"indigo" {"h" 239 "s" 84}
|
|
"blue" {"h" 217 "s" 91}
|
|
"sky" {"h" 199 "s" 89}
|
|
"cyan" {"h" 188 "s" 94}
|
|
"teal" {"h" 173 "s" 80}
|
|
"emerald" {"h" 160 "s" 84}
|
|
"green" {"h" 142 "s" 71}
|
|
"lime" {"h" 84 "s" 78}
|
|
"yellow" {"h" 48 "s" 96}
|
|
"amber" {"h" 38 "s" 92}
|
|
"orange" {"h" 25 "s" 95}
|
|
"red" {"h" 0 "s" 72}
|
|
"rose" {"h" 350 "s" 89}
|
|
"pink" {"h" 330 "s" 81}
|
|
"stone" {"h" 25 "s" 6}
|
|
"slate" {"h" 215 "s" 16}
|
|
"gray" {"h" 220 "s" 9}
|
|
"zinc" {"h" 240 "s" 5}
|
|
"neutral" {"h" 0 "s" 0}
|
|
"white" {"h" 0 "s" 0}
|
|
"black" {"h" 0 "s" 0}})
|
|
|
|
(define lerp (fn (a b t) (+ a (* t (- b a)))))
|
|
|
|
(define shade-to-lightness
|
|
(fn (shade)
|
|
(cond
|
|
(<= shade 50) (lerp 100 97 (/ shade 50))
|
|
(<= shade 100) (lerp 97 93 (/ (- shade 50) 50))
|
|
(<= shade 200) (lerp 93 87 (/ (- shade 100) 100))
|
|
(<= shade 300) (lerp 87 77 (/ (- shade 200) 100))
|
|
(<= shade 400) (lerp 77 64 (/ (- shade 300) 100))
|
|
(<= shade 500) (lerp 64 53 (/ (- shade 400) 100))
|
|
(<= shade 600) (lerp 53 45 (/ (- shade 500) 100))
|
|
(<= shade 700) (lerp 45 38 (/ (- shade 600) 100))
|
|
(<= shade 800) (lerp 38 30 (/ (- shade 700) 100))
|
|
(<= shade 900) (lerp 30 21 (/ (- shade 800) 100))
|
|
(<= shade 950) (lerp 21 13 (/ (- shade 900) 50))
|
|
true 13)))
|
|
|
|
(define colour
|
|
(fn (name shade)
|
|
(let ((base (get colour-bases name)))
|
|
(if (nil? base)
|
|
name
|
|
(let ((h (get base "h"))
|
|
(s (get base "s"))
|
|
(l (shade-to-lightness shade)))
|
|
(str "hsl(" h "," s "%," (round l) "%)"))))))
|
|
|
|
;; =========================================================================
|
|
;; Lookup tables — all the value vocabularies
|
|
;; =========================================================================
|
|
|
|
;; Colour property shorthands → CSS property name
|
|
(define cssx-colour-props
|
|
{"bg" "background-color"
|
|
"text" "color"
|
|
"border" "border-color"})
|
|
|
|
;; Spacing property shorthands → CSS declaration template ({v} = computed value)
|
|
(define cssx-spacing-props
|
|
{"p" "padding:{v}"
|
|
"px" "padding-left:{v};padding-right:{v}"
|
|
"py" "padding-top:{v};padding-bottom:{v}"
|
|
"pt" "padding-top:{v}"
|
|
"pb" "padding-bottom:{v}"
|
|
"pl" "padding-left:{v}"
|
|
"pr" "padding-right:{v}"
|
|
"m" "margin:{v}"
|
|
"mx" "margin-left:{v};margin-right:{v}"
|
|
"my" "margin-top:{v};margin-bottom:{v}"
|
|
"mt" "margin-top:{v}"
|
|
"mb" "margin-bottom:{v}"
|
|
"ml" "margin-left:{v}"
|
|
"mr" "margin-right:{v}"})
|
|
|
|
;; Named font sizes (Tailwind v3 scale)
|
|
(define cssx-sizes
|
|
{"xs" "font-size:0.75rem;line-height:1rem"
|
|
"sm" "font-size:0.875rem;line-height:1.25rem"
|
|
"base" "font-size:1rem;line-height:1.5rem"
|
|
"lg" "font-size:1.125rem;line-height:1.75rem"
|
|
"xl" "font-size:1.25rem;line-height:1.75rem"
|
|
"2xl" "font-size:1.5rem;line-height:2rem"
|
|
"3xl" "font-size:1.875rem;line-height:2.25rem"
|
|
"4xl" "font-size:2.25rem;line-height:2.5rem"
|
|
"5xl" "font-size:3rem;line-height:1"
|
|
"6xl" "font-size:3.75rem;line-height:1"
|
|
"7xl" "font-size:4.5rem;line-height:1"
|
|
"8xl" "font-size:6rem;line-height:1"
|
|
"9xl" "font-size:8rem;line-height:1"})
|
|
|
|
;; Named font weights
|
|
(define cssx-weights
|
|
{"thin" "100"
|
|
"extralight" "200"
|
|
"light" "300"
|
|
"normal" "400"
|
|
"medium" "500"
|
|
"semibold" "600"
|
|
"bold" "700"
|
|
"extrabold" "800"
|
|
"black" "900"})
|
|
|
|
;; Named font families
|
|
(define cssx-families
|
|
{"sans" "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif"
|
|
"serif" "ui-serif,Georgia,Cambria,\"Times New Roman\",Times,serif"
|
|
"mono" "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace"})
|
|
|
|
;; Text alignment keywords
|
|
(define cssx-alignments
|
|
{"left" true "center" true "right" true "justify" true})
|
|
|
|
;; Display keywords → CSS value
|
|
(define cssx-displays
|
|
{"block" "block"
|
|
"inline" "inline"
|
|
"inline-block" "inline-block"
|
|
"flex" "flex"
|
|
"inline-flex" "inline-flex"
|
|
"grid" "grid"
|
|
"hidden" "none"})
|
|
|
|
;; Named max-widths (Tailwind scale)
|
|
(define cssx-max-widths
|
|
{"xs" "20rem" "sm" "24rem" "md" "28rem"
|
|
"lg" "32rem" "xl" "36rem" "2xl" "42rem"
|
|
"3xl" "48rem" "4xl" "56rem" "5xl" "64rem"
|
|
"6xl" "72rem" "7xl" "80rem"
|
|
"full" "100%" "none" "none"
|
|
"prose" "65ch" "screen" "100vw"})
|
|
|
|
;; Responsive breakpoints (mobile-first min-width)
|
|
(define cssx-breakpoints
|
|
{"sm" "640px"
|
|
"md" "768px"
|
|
"lg" "1024px"
|
|
"xl" "1280px"
|
|
"2xl" "1536px"})
|
|
|
|
;; Pseudo-class states
|
|
(define cssx-states
|
|
{"hover" ":hover"
|
|
"focus" ":focus"
|
|
"active" ":active"
|
|
"focus-within" ":focus-within"
|
|
"focus-visible" ":focus-visible"
|
|
"first" ":first-child"
|
|
"last" ":last-child"})
|
|
|
|
;; =========================================================================
|
|
;; Utility resolver — token string → CSS declarations
|
|
;; =========================================================================
|
|
|
|
;; Spacing value: number → rem, "auto" → "auto", "px" → "1px"
|
|
(define cssx-spacing-value
|
|
(fn (v)
|
|
(cond
|
|
(= v "auto") "auto"
|
|
(= v "px") "1px"
|
|
(= v "0") "0px"
|
|
true (let ((n (parse-int v nil)))
|
|
(if (nil? n) nil
|
|
(str (* n 0.25) "rem"))))))
|
|
|
|
;; Replace {v} in a template string with a value
|
|
(define cssx-template
|
|
(fn (tmpl v)
|
|
(let ((i (index-of tmpl "{v}")))
|
|
(if (< i 0) tmpl
|
|
(let ((result (str (substring tmpl 0 i) v (substring tmpl (+ i 3) (len tmpl)))))
|
|
;; Handle templates with multiple {v} (e.g. padding-left:{v};padding-right:{v})
|
|
(let ((j (index-of result "{v}")))
|
|
(if (< j 0) result
|
|
(str (substring result 0 j) v (substring result (+ j 3) (len result))))))))))
|
|
|
|
;; Resolve a base utility token (no state/bp prefix) → CSS declaration string or nil.
|
|
;; Tries matchers in order: colour, text-size, text-align, font, spacing, display, max-w, rounded, opacity.
|
|
(define cssx-resolve
|
|
(fn (token)
|
|
(let ((parts (split token "-")))
|
|
(if (empty? parts) nil
|
|
(let ((head (first parts))
|
|
(rest (slice parts 1)))
|
|
(cond
|
|
;; ---------------------------------------------------------
|
|
;; Colour utilities: bg-{colour}-{shade}, text-{colour}-{shade}, border-{colour}-{shade}
|
|
;; ---------------------------------------------------------
|
|
(and (get cssx-colour-props head)
|
|
(>= (len rest) 2)
|
|
(not (nil? (parse-int (last rest) nil)))
|
|
(not (nil? (get colour-bases (join "-" (slice rest 0 (- (len rest) 1)))))))
|
|
(let ((css-prop (get cssx-colour-props head))
|
|
(cname (join "-" (slice rest 0 (- (len rest) 1))))
|
|
(shade (parse-int (last rest) 0)))
|
|
(str css-prop ":" (colour cname shade)))
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Text size: text-{size-name} (e.g. text-xl, text-2xl)
|
|
;; ---------------------------------------------------------
|
|
(and (= head "text")
|
|
(= (len rest) 1)
|
|
(not (nil? (get cssx-sizes (first rest)))))
|
|
(get cssx-sizes (first rest))
|
|
|
|
;; Also handle text-2xl etc where rest might be ("2xl") — covered above
|
|
;; But also "text-sm" etc — covered above since rest is ("sm")
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Text alignment: text-left, text-center, text-right, text-justify
|
|
;; ---------------------------------------------------------
|
|
(and (= head "text")
|
|
(= (len rest) 1)
|
|
(get cssx-alignments (first rest)))
|
|
(str "text-align:" (first rest))
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Font weight: font-bold, font-semibold, etc.
|
|
;; ---------------------------------------------------------
|
|
(and (= head "font")
|
|
(= (len rest) 1)
|
|
(not (nil? (get cssx-weights (first rest)))))
|
|
(str "font-weight:" (get cssx-weights (first rest)))
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Font family: font-sans, font-serif, font-mono
|
|
;; ---------------------------------------------------------
|
|
(and (= head "font")
|
|
(= (len rest) 1)
|
|
(not (nil? (get cssx-families (first rest)))))
|
|
(str "font-family:" (get cssx-families (first rest)))
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Spacing: p-4, px-2, mt-8, mx-auto, etc.
|
|
;; ---------------------------------------------------------
|
|
(and (get cssx-spacing-props head)
|
|
(= (len rest) 1))
|
|
(let ((tmpl (get cssx-spacing-props head))
|
|
(v (cssx-spacing-value (first rest))))
|
|
(if (nil? v) nil (cssx-template tmpl v)))
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Display: block, flex, grid, hidden, inline, inline-block
|
|
;; ---------------------------------------------------------
|
|
(and (= (len parts) 1)
|
|
(not (nil? (get cssx-displays head))))
|
|
(str "display:" (get cssx-displays head))
|
|
|
|
;; Inline-block, inline-flex (multi-word)
|
|
(and (= (len parts) 2)
|
|
(not (nil? (get cssx-displays token))))
|
|
(str "display:" (get cssx-displays token))
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Max-width: max-w-xl, max-w-3xl, max-w-prose
|
|
;; ---------------------------------------------------------
|
|
(and (= head "max")
|
|
(>= (len rest) 2)
|
|
(= (first rest) "w"))
|
|
(let ((val-name (join "-" (slice rest 1)))
|
|
(val (get cssx-max-widths val-name)))
|
|
(if (nil? val) nil (str "max-width:" val)))
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Rounded: rounded, rounded-lg, rounded-full, etc.
|
|
;; ---------------------------------------------------------
|
|
(= head "rounded")
|
|
(cond
|
|
(empty? rest) "border-radius:0.25rem"
|
|
(= (first rest) "none") "border-radius:0"
|
|
(= (first rest) "sm") "border-radius:0.125rem"
|
|
(= (first rest) "md") "border-radius:0.375rem"
|
|
(= (first rest) "lg") "border-radius:0.5rem"
|
|
(= (first rest) "xl") "border-radius:0.75rem"
|
|
(= (first rest) "2xl") "border-radius:1rem"
|
|
(= (first rest) "3xl") "border-radius:1.5rem"
|
|
(= (first rest) "full") "border-radius:9999px"
|
|
true nil)
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Opacity: opacity-{n} (0-100)
|
|
;; ---------------------------------------------------------
|
|
(and (= head "opacity")
|
|
(= (len rest) 1))
|
|
(let ((n (parse-int (first rest) nil)))
|
|
(if (nil? n) nil (str "opacity:" (/ n 100))))
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Width/height: w-{n}, h-{n}, w-full, h-full, h-screen
|
|
;; ---------------------------------------------------------
|
|
(and (or (= head "w") (= head "h"))
|
|
(= (len rest) 1))
|
|
(let ((prop (if (= head "w") "width" "height"))
|
|
(val (first rest)))
|
|
(cond
|
|
(= val "full") (str prop ":100%")
|
|
(= val "screen") (str prop (if (= head "w") ":100vw" ":100vh"))
|
|
(= val "auto") (str prop ":auto")
|
|
(= val "min") (str prop ":min-content")
|
|
(= val "max") (str prop ":max-content")
|
|
(= val "fit") (str prop ":fit-content")
|
|
true (let ((n (parse-int val nil)))
|
|
(if (nil? n) nil
|
|
(str prop ":" (* n 0.25) "rem")))))
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Gap: gap-{n}
|
|
;; ---------------------------------------------------------
|
|
(and (= head "gap")
|
|
(= (len rest) 1))
|
|
(let ((v (cssx-spacing-value (first rest))))
|
|
(if (nil? v) nil (str "gap:" v)))
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Text decoration: underline, no-underline, line-through
|
|
;; ---------------------------------------------------------
|
|
(and (= (len parts) 1)
|
|
(or (= head "underline") (= head "overline") (= head "line-through")))
|
|
(str "text-decoration-line:" head)
|
|
|
|
(and (= (len parts) 2) (= head "no") (= (first rest) "underline"))
|
|
"text-decoration-line:none"
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Cursor: cursor-pointer, cursor-default, etc.
|
|
;; ---------------------------------------------------------
|
|
(and (= head "cursor") (= (len rest) 1))
|
|
(str "cursor:" (first rest))
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Overflow: overflow-hidden, overflow-auto, etc.
|
|
;; ---------------------------------------------------------
|
|
(and (= head "overflow") (= (len rest) 1))
|
|
(str "overflow:" (first rest))
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Transition: transition, transition-colors, etc.
|
|
;; ---------------------------------------------------------
|
|
(and (= head "transition") (empty? rest))
|
|
"transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms"
|
|
|
|
(and (= head "transition") (= (first rest) "colors"))
|
|
"transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms"
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Fallback: unrecognised → nil (skip)
|
|
;; ---------------------------------------------------------
|
|
true nil))))))
|
|
|
|
;; =========================================================================
|
|
;; Token processor — full token with optional state/bp prefixes
|
|
;; =========================================================================
|
|
|
|
;; Process one token string → {:cls "sx-..." :rule ".sx-...{...}"} or nil
|
|
;; Token format: [bp:]?[state:]?utility
|
|
;; Examples: "bg-yellow-199", "hover:bg-rose-500", "md:hover:text-xl"
|
|
(define cssx-process-token
|
|
(fn (token)
|
|
(let ((colon-parts (split token ":"))
|
|
(n (len colon-parts)))
|
|
;; Extract state, bp, and base utility from colon-separated parts
|
|
(let ((bp nil) (state nil) (base nil))
|
|
;; 1 part: just utility
|
|
;; 2 parts: modifier:utility (could be bp or state)
|
|
;; 3 parts: bp:state:utility
|
|
(cond
|
|
(= n 1)
|
|
(do (set! base (first colon-parts)))
|
|
(= n 2)
|
|
(let ((prefix (first colon-parts)))
|
|
(set! base (last colon-parts))
|
|
(if (not (nil? (get cssx-breakpoints prefix)))
|
|
(set! bp prefix)
|
|
(set! state prefix)))
|
|
(>= n 3)
|
|
(do
|
|
(set! bp (first colon-parts))
|
|
(set! state (nth colon-parts 1))
|
|
(set! base (last colon-parts))))
|
|
|
|
;; Resolve the base utility to CSS declarations
|
|
(let ((css (cssx-resolve base)))
|
|
(if (nil? css) nil
|
|
(let ((cls (str "sx-" (join "-" (split token ":"))))
|
|
(pseudo (if (nil? state) ""
|
|
(or (get cssx-states state) (str ":" state))))
|
|
(decl (str "." cls pseudo "{" css "}")))
|
|
(if (nil? bp)
|
|
{"cls" cls "rule" decl}
|
|
(let ((min-w (or (get cssx-breakpoints bp) bp)))
|
|
{"cls" cls
|
|
"rule" (str "@media(min-width:" min-w "){" decl "}")})))))))))
|
|
|
|
;; =========================================================================
|
|
;; tw — Tailwind-style inline style string from utility tokens
|
|
;;
|
|
;; Same token format as ~cssx/tw, returns a CSS declaration string for :style.
|
|
;; Cannot do hover/responsive (use ~cssx/tw for those).
|
|
;;
|
|
;; Usage:
|
|
;; (div :style (tw "bg-yellow-199 text-violet-700 p-4 font-bold")
|
|
;; "content")
|
|
;; =========================================================================
|
|
|
|
(define tw
|
|
(fn (tokens-str)
|
|
(let ((tokens (split (or tokens-str "") " "))
|
|
(parts (list)))
|
|
(for-each (fn (tok)
|
|
(when (not (= tok ""))
|
|
(let ((css (cssx-resolve tok)))
|
|
(when (not (nil? css))
|
|
(append! parts (str css ";"))))))
|
|
tokens)
|
|
(join "" parts))))
|
|
|
|
;; =========================================================================
|
|
;; ~cssx/tw — spread component that injects JIT classes onto parent element
|
|
;;
|
|
;; Usage — as a child of any element:
|
|
;; (div (~cssx/tw "bg-yellow-199 text-violet-700 p-4 font-bold")
|
|
;; (h1 "styled content"))
|
|
;;
|
|
;; (button (~cssx/tw "hover:bg-rose-500 focus:border-blue-400")
|
|
;; "interactive")
|
|
;;
|
|
;; Returns a spread value that merges :class and :data-tw onto the parent
|
|
;; element. Collects CSS rules into the "cssx" bucket for a single global
|
|
;; <style> flush. No wrapper element, no per-element <style> tags.
|
|
;;
|
|
;; Reusable as variables:
|
|
;; (define important (~cssx/tw "font-bold text-4xl"))
|
|
;; (div important "the queen is dead")
|
|
;;
|
|
;; Multiple spreads merge naturally:
|
|
;; (div (~cssx/tw "bg-red-500") (~cssx/tw "p-4") "content")
|
|
;; =========================================================================
|
|
|
|
(defcomp ~cssx/tw (tokens)
|
|
(let ((token-list (filter (fn (t) (not (= t "")))
|
|
(split (or tokens "") " ")))
|
|
(results (map cssx-process-token token-list))
|
|
(valid (filter (fn (r) (not (nil? r))) results))
|
|
(classes (map (fn (r) (get r "cls")) valid))
|
|
(rules (map (fn (r) (get r "rule")) valid))
|
|
(_ (for-each (fn (rule) (collect! "cssx" rule)) rules)))
|
|
;; Return spread: injects class + data-tw onto parent element
|
|
(if (empty? classes)
|
|
nil
|
|
(make-spread {"class" (join " " classes)
|
|
"data-tw" (or tokens "")}))))
|
|
|
|
|
|
;; =========================================================================
|
|
;; ~cssx/flush — emit collected CSS rules as a single <style> tag
|
|
;;
|
|
;; Place once in the page (typically in the layout, before </body>).
|
|
;; Emits all accumulated CSSX rules and clears the bucket.
|
|
;;
|
|
;; Usage:
|
|
;; (~cssx/flush)
|
|
;; =========================================================================
|
|
|
|
(defcomp ~cssx/flush () :affinity :client
|
|
(let ((rules (collected "cssx")))
|
|
(clear-collected! "cssx")
|
|
(when (not (empty? rules))
|
|
;; Append to the persistent <style id="sx-css"> in <head> if available.
|
|
;; This survives #main-panel morphs during SPA navigation.
|
|
;; Falls back to inline <style> if no head stylesheet exists.
|
|
(let ((head-style (dom-query "#sx-css")))
|
|
(if head-style
|
|
(do
|
|
(dom-set-prop head-style "textContent"
|
|
(str (dom-get-prop head-style "textContent") (join "" rules)))
|
|
nil)
|
|
(raw! (str "<style data-cssx>" (join "" rules) "</style>")))))))
|