giles
c2efa192c5
Replace the three-layer cssx system (macro + value functions + class components) with a single token resolver. Tokens like "bg-yellow-199", "hover:bg-rose-500", "md:text-xl" are parsed into CSS declarations. Two delivery mechanisms, same token format: - tw() function: returns inline style string for :style - ~cssx/tw macro: injects JIT class + <style> onto first child element The resolver handles: colours (21 names, any shade 0-950), spacing, typography, display, max-width, rounded, opacity, w/h, gap, text decoration, cursor, overflow, transitions. States (hover/focus/active) and responsive breakpoints (sm/md/lg/xl/2xl) for class-based usage. Next step: replace macro/function approach with spec-level primitives (defcontext/provide/context + spread) so ~cssx/tw becomes a proper component returning spread values, with rules collected via context. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
519 lines
21 KiB
Plaintext
519 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. Write styling as utility tokens:
|
|
;;
|
|
;; (~cssx/tw "bg-yellow-199 text-violet-700 p-4 font-bold"
|
|
;; (div "content"))
|
|
;;
|
|
;; (~cssx/tw "hover:bg-rose-500 md:text-xl"
|
|
;; (button "click me"))
|
|
;;
|
|
;; Each token becomes a deterministic class + JIT <style> rule.
|
|
;; 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) (length 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) (length 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)
|
|
(>= (length rest) 2)
|
|
(not (nil? (parse-int (last rest) nil)))
|
|
(not (nil? (get colour-bases (join "-" (slice rest 0 (- (length rest) 1)))))))
|
|
(let ((css-prop (get cssx-colour-props head))
|
|
(cname (join "-" (slice rest 0 (- (length 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")
|
|
(= (length 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")
|
|
(= (length rest) 1)
|
|
(get cssx-alignments (first rest)))
|
|
(str "text-align:" (first rest))
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Font weight: font-bold, font-semibold, etc.
|
|
;; ---------------------------------------------------------
|
|
(and (= head "font")
|
|
(= (length 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")
|
|
(= (length 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)
|
|
(= (length 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 (= (length parts) 1)
|
|
(not (nil? (get cssx-displays head))))
|
|
(str "display:" (get cssx-displays head))
|
|
|
|
;; Inline-block, inline-flex (multi-word)
|
|
(and (= (length 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")
|
|
(>= (length 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")
|
|
(= (length 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"))
|
|
(= (length 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")
|
|
(= (length rest) 1))
|
|
(let ((v (cssx-spacing-value (first rest))))
|
|
(if (nil? v) nil (str "gap:" v)))
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Text decoration: underline, no-underline, line-through
|
|
;; ---------------------------------------------------------
|
|
(and (= (length parts) 1)
|
|
(or (= head "underline") (= head "overline") (= head "line-through")))
|
|
(str "text-decoration-line:" head)
|
|
|
|
(and (= (length parts) 2) (= head "no") (= (first rest) "underline"))
|
|
"text-decoration-line:none"
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Cursor: cursor-pointer, cursor-default, etc.
|
|
;; ---------------------------------------------------------
|
|
(and (= head "cursor") (= (length rest) 1))
|
|
(str "cursor:" (first rest))
|
|
|
|
;; ---------------------------------------------------------
|
|
;; Overflow: overflow-hidden, overflow-auto, etc.
|
|
;; ---------------------------------------------------------
|
|
(and (= head "overflow") (= (length 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 (length 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 — macro that injects JIT classes onto the first child element
|
|
;;
|
|
;; Usage:
|
|
;; (~cssx/tw "bg-yellow-199"
|
|
;; (p "sunny"))
|
|
;;
|
|
;; (~cssx/tw "bg-yellow-199 text-violet-700 p-4 font-bold rounded-lg"
|
|
;; (div (h1 "styled content")))
|
|
;;
|
|
;; (~cssx/tw "hover:bg-rose-500 focus:border-blue-400"
|
|
;; (button "interactive"))
|
|
;;
|
|
;; (~cssx/tw "md:text-xl lg:p-8"
|
|
;; (section "responsive"))
|
|
;;
|
|
;; Parses tokens at macro-expansion time, injects :class onto the first
|
|
;; child element (merging with any existing :class), and prepends a
|
|
;; <style> tag with the JIT CSS rules. No wrapper element.
|
|
;; =========================================================================
|
|
|
|
;; Merge :class into an element's arg list.
|
|
;; If element already has :class, prepend our classes to its value.
|
|
;; If not, inject :class after the tag name.
|
|
(define cssx-inject-class
|
|
(fn (element cls-str)
|
|
(let ((tag (first element))
|
|
(args (slice element 1)))
|
|
(cons tag (cssx-merge-class-args args cls-str false)))))
|
|
|
|
;; Walk arg list: find :class keyword, merge value. If not found, inject at end.
|
|
(define cssx-merge-class-args
|
|
(fn (args cls-str found)
|
|
(if (empty? args)
|
|
;; End of args — if no :class was found, inject one
|
|
(if found (list) (list :class cls-str))
|
|
(let ((head (first args))
|
|
(tail (slice args 1)))
|
|
(if (and (not found)
|
|
(= (type-of head) "keyword")
|
|
(= (keyword-name head) "class"))
|
|
;; Found :class — merge with next arg (the value)
|
|
(if (empty? tail)
|
|
;; :class with no value — replace with ours
|
|
(append (list :class cls-str) (list))
|
|
;; :class with value — prepend our classes
|
|
(append (list :class (str cls-str " " (first tail)))
|
|
(cssx-merge-class-args (slice tail 1) cls-str true)))
|
|
;; Not :class — keep and continue
|
|
(cons head (cssx-merge-class-args tail cls-str found)))))))
|
|
|
|
(defmacro ~cssx/tw (tokens &rest children)
|
|
(let ((token-list (filter (fn (t) (not (= t ""))) (split tokens " ")))
|
|
(classes (list))
|
|
(rules (list)))
|
|
;; Process each token
|
|
(for-each (fn (tok)
|
|
(let ((r (cssx-process-token tok)))
|
|
(when (not (nil? r))
|
|
(append! classes (get r "cls"))
|
|
(append! rules (get r "rule")))))
|
|
token-list)
|
|
(let ((cls-str (join " " classes))
|
|
(rules-str (join "" rules))
|
|
(first-child (first children))
|
|
(rest-children (slice children 1)))
|
|
(if (empty? classes)
|
|
;; No resolved tokens — pass through unchanged
|
|
(if (= (length children) 1) first-child `(<> ,@children))
|
|
;; Inject class onto first child element
|
|
(if (and (list? first-child) (not (empty? first-child)))
|
|
;; First child is an element — inject :class, prepend <style>
|
|
(let ((injected (cssx-inject-class first-child cls-str)))
|
|
(if (empty? rest-children)
|
|
`(<> (style ,rules-str) ,injected)
|
|
`(<> (style ,rules-str) ,injected ,@rest-children)))
|
|
;; First child isn't an element — wrap everything in div
|
|
`(<> (style ,rules-str) (div :class ,cls-str ,@children)))))))
|