From a64b693a093fb82b1260d115a273fca32879a680 Mon Sep 17 00:00:00 2001 From: giles Date: Thu, 2 Apr 2026 16:18:07 +0000 Subject: [PATCH] =?UTF-8?q?Remove=20old=20CSSX=20system=20=E2=80=94=20~tw?= =?UTF-8?q?=20is=20the=20sole=20CSS=20engine?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Phase 1 Step 1 of the architecture roadmap. The old cssx.sx (cssx-resolve, cssx-process-token, cssx-template, old tw function) is superseded by the ~tw component system in tw.sx. - Delete shared/sx/templates/cssx.sx - Remove cssx.sx from all load lists (sx_server.ml, run_tests.ml, mcp_tree.ml, compile-modules.js, bundle.sh, sx-build-all.sh) - Replace (tw "tokens") inline style calls with (~tw :tokens "tokens") in layouts.sx and not-found.sx - Remove _css-hash / init-css-tracking / SX-Css header plumbing (dead code — ~tw/flush + flush-collected-styles handle CSS now) - Remove sx-css-classes param and meta tag from shell template - Update stale data-cssx references to data-sx-css in tests Co-Authored-By: Claude Opus 4.6 (1M context) --- hosts/ocaml/bin/mcp_tree.ml | 2 +- hosts/ocaml/bin/run_tests.ml | 1 - hosts/ocaml/bin/sx_server.ml | 3 - hosts/ocaml/browser/bundle.sh | 3 +- hosts/ocaml/browser/compile-modules.js | 2 +- scripts/sx-build-all.sh | 2 +- shared/static/wasm/sx/cssx.sx | 1 - shared/static/wasm/sx/cssx.sxbc | 3 - shared/sx/templates/cssx.sx | 300 ------------------------- shared/sx/templates/shell.sx | 2 - sx/sx/layouts.sx | 22 +- sx/sx/not-found.sx | 10 +- sx/sxc/init-client.sx.txt | 4 +- tests/playwright/isomorphic.spec.js | 4 +- web/boot.sx | 1 - web/engine.sx | 5 +- web/orchestration.sx | 47 +--- 17 files changed, 33 insertions(+), 379 deletions(-) delete mode 120000 shared/static/wasm/sx/cssx.sx delete mode 100644 shared/static/wasm/sx/cssx.sxbc delete mode 100644 shared/sx/templates/cssx.sx diff --git a/hosts/ocaml/bin/mcp_tree.ml b/hosts/ocaml/bin/mcp_tree.ml index 7a7eb182..ec46248b 100644 --- a/hosts/ocaml/bin/mcp_tree.ml +++ b/hosts/ocaml/bin/mcp_tree.ml @@ -609,7 +609,7 @@ let rec handle_tool name args = "render.sx"; "core-signals.sx"; "signals.sx"; "deps.sx"; "router.sx"; "page-helpers.sx"; "freeze.sx"; "bytecode.sx"; "compiler.sx"; "vm.sx"; "dom.sx"; "browser.sx"; "adapter-html.sx"; "adapter-sx.sx"; "adapter-dom.sx"; - "cssx.sx"; "tw-layout.sx"; "tw-type.sx"; "tw.sx"; + "tw-layout.sx"; "tw-type.sx"; "tw.sx"; "boot-helpers.sx"; "hypersx.sx"; "harness.sx"; "harness-reactive.sx"; "harness-web.sx"; "engine.sx"; "orchestration.sx"; "boot.sx"; ] in diff --git a/hosts/ocaml/bin/run_tests.ml b/hosts/ocaml/bin/run_tests.ml index a90280dd..fed5e06a 100644 --- a/hosts/ocaml/bin/run_tests.ml +++ b/hosts/ocaml/bin/run_tests.ml @@ -1168,7 +1168,6 @@ let run_spec_tests env test_files = load_module "tw.sx" templates_dir; load_module "tw-layout.sx" templates_dir; load_module "tw-type.sx" templates_dir; - load_module "cssx.sx" templates_dir; (* SX docs site: components, handlers, demos *) let sx_comp_dir = Filename.concat project_dir "sx/sxc" in let sx_sx_dir = Filename.concat project_dir "sx/sx" in diff --git a/hosts/ocaml/bin/sx_server.ml b/hosts/ocaml/bin/sx_server.ml index 4b229da2..c0500860 100644 --- a/hosts/ocaml/bin/sx_server.ml +++ b/hosts/ocaml/bin/sx_server.ml @@ -1657,7 +1657,6 @@ let http_render_page env path headers = Keyword "component-hash"; get_shell "component-hash"; Keyword "pages-sx"; get_shell "pages-sx"; Keyword "sx-css"; get_shell "sx-css"; - Keyword "sx-css-classes"; get_shell "sx-css-classes"; Keyword "asset-url"; get_shell "asset-url"; Keyword "wasm-hash"; get_shell "wasm-hash"; Keyword "platform-hash"; get_shell "platform-hash"; @@ -1771,7 +1770,6 @@ let http_inject_shell_statics env static_dir sx_sxc = Filename.dirname (Filename.dirname static_dir) in let templates_dir = project_dir ^ "/shared/sx/templates" in let client_libs = [ - templates_dir ^ "/cssx.sx"; templates_dir ^ "/tw-layout.sx"; templates_dir ^ "/tw-type.sx"; templates_dir ^ "/tw.sx"; @@ -1860,7 +1858,6 @@ let http_inject_shell_statics env static_dir sx_sxc = (List.length (String.split_on_char '\n' pages_sx)); ignore (env_bind env "__shell-pages-sx" (String pages_sx)); ignore (env_bind env "__shell-sx-css" (String sx_css)); - ignore (env_bind env "__shell-sx-css-classes" (String "")); ignore (env_bind env "__shell-asset-url" (String "/static")); ignore (env_bind env "__shell-wasm-hash" (String wasm_hash)); ignore (env_bind env "__shell-platform-hash" (String platform_hash)); diff --git a/hosts/ocaml/browser/bundle.sh b/hosts/ocaml/browser/bundle.sh index 6bf0088b..80fe9999 100755 --- a/hosts/ocaml/browser/bundle.sh +++ b/hosts/ocaml/browser/bundle.sh @@ -66,8 +66,7 @@ cp "$ROOT/web/engine.sx" "$DIST/sx/" cp "$ROOT/web/orchestration.sx" "$DIST/sx/" cp "$ROOT/web/boot.sx" "$DIST/sx/" -# 9. Styling (tw token engine + legacy cssx) -cp "$ROOT/shared/sx/templates/cssx.sx" "$DIST/sx/" +# 9. Styling (tw token engine) cp "$ROOT/shared/sx/templates/tw-layout.sx" "$DIST/sx/" cp "$ROOT/shared/sx/templates/tw-type.sx" "$DIST/sx/" cp "$ROOT/shared/sx/templates/tw.sx" "$DIST/sx/" diff --git a/hosts/ocaml/browser/compile-modules.js b/hosts/ocaml/browser/compile-modules.js index ddee408f..e2b6d096 100644 --- a/hosts/ocaml/browser/compile-modules.js +++ b/hosts/ocaml/browser/compile-modules.js @@ -37,7 +37,7 @@ const FILES = [ 'render.sx', 'core-signals.sx', 'signals.sx', 'deps.sx', 'router.sx', 'page-helpers.sx', 'freeze.sx', 'bytecode.sx', 'compiler.sx', 'vm.sx', 'dom.sx', 'browser.sx', 'adapter-html.sx', 'adapter-sx.sx', 'adapter-dom.sx', - 'cssx.sx', 'tw-layout.sx', 'tw-type.sx', 'tw.sx', + 'tw-layout.sx', 'tw-type.sx', 'tw.sx', 'boot-helpers.sx', 'hypersx.sx', 'harness.sx', 'harness-reactive.sx', 'harness-web.sx', 'engine.sx', 'orchestration.sx', 'boot.sx', ]; diff --git a/scripts/sx-build-all.sh b/scripts/sx-build-all.sh index 8573ffae..a2d2d0ae 100755 --- a/scripts/sx-build-all.sh +++ b/scripts/sx-build-all.sh @@ -26,7 +26,7 @@ for f in signals.sx deps.sx router.sx page-helpers.sx freeze.sx \ bytecode.sx compiler.sx vm.sx dom.sx browser.sx \ adapter-html.sx adapter-sx.sx adapter-dom.sx \ boot-helpers.sx hypersx.sx harness-reactive.sx harness-web.sx \ - engine.sx orchestration.sx boot.sx cssx.sx \ + engine.sx orchestration.sx boot.sx \ tw-layout.sx tw-type.sx tw.sx; do if [ -f "shared/static/wasm/sx/$f" ]; then cp "shared/static/wasm/sx/$f" "hosts/ocaml/browser/dist/sx/" diff --git a/shared/static/wasm/sx/cssx.sx b/shared/static/wasm/sx/cssx.sx deleted file mode 120000 index 5f4d5eba..00000000 --- a/shared/static/wasm/sx/cssx.sx +++ /dev/null @@ -1 +0,0 @@ -../../../../shared/sx/templates/cssx.sx \ No newline at end of file diff --git a/shared/static/wasm/sx/cssx.sxbc b/shared/static/wasm/sx/cssx.sxbc deleted file mode 100644 index a7d49dc3..00000000 --- a/shared/static/wasm/sx/cssx.sxbc +++ /dev/null @@ -1,3 +0,0 @@ -(sxbc 1 "2e46c51ef9c70595" - (code - :constants ("colour-bases" "orange" "s" 95 "h" 25 "cyan" 94 188 "sky" 89 199 "pink" 81 330 "zinc" 5 240 "amber" 92 38 "neutral" 0 "lime" 78 84 "violet" 70 263 "fuchsia" 292 "stone" 6 "black" "teal" 80 173 "gray" 9 220 "red" 72 "rose" 350 "blue" 91 217 "emerald" 160 "green" 71 142 "yellow" 96 48 "purple" 271 "indigo" 239 "white" "slate" 16 215 "lerp" {:upvalue-count 0 :arity 3 :constants ("+" "*" "-") :bytecode (16 0 16 2 16 1 16 0 52 2 0 2 52 1 0 2 52 0 0 2 50)} "shade-to-lightness" {:upvalue-count 0 :arity 1 :constants ("<=" 50 "lerp" 100 97 "/" 93 "-" 200 87 300 77 400 64 500 53 600 45 700 38 800 30 900 21 950 13) :bytecode (16 0 1 1 0 52 0 0 2 33 23 0 20 2 0 1 3 0 1 4 0 16 0 1 1 0 52 5 0 2 49 3 32 167 1 16 0 1 3 0 52 0 0 2 33 30 0 20 2 0 1 4 0 1 6 0 16 0 1 1 0 52 7 0 2 1 1 0 52 5 0 2 49 3 32 125 1 16 0 1 8 0 52 0 0 2 33 30 0 20 2 0 1 6 0 1 9 0 16 0 1 3 0 52 7 0 2 1 3 0 52 5 0 2 49 3 32 83 1 16 0 1 10 0 52 0 0 2 33 30 0 20 2 0 1 9 0 1 11 0 16 0 1 8 0 52 7 0 2 1 3 0 52 5 0 2 49 3 32 41 1 16 0 1 12 0 52 0 0 2 33 30 0 20 2 0 1 11 0 1 13 0 16 0 1 10 0 52 7 0 2 1 3 0 52 5 0 2 49 3 32 255 0 16 0 1 14 0 52 0 0 2 33 30 0 20 2 0 1 13 0 1 15 0 16 0 1 12 0 52 7 0 2 1 3 0 52 5 0 2 49 3 32 213 0 16 0 1 16 0 52 0 0 2 33 30 0 20 2 0 1 15 0 1 17 0 16 0 1 14 0 52 7 0 2 1 3 0 52 5 0 2 49 3 32 171 0 16 0 1 18 0 52 0 0 2 33 30 0 20 2 0 1 17 0 1 19 0 16 0 1 16 0 52 7 0 2 1 3 0 52 5 0 2 49 3 32 129 0 16 0 1 20 0 52 0 0 2 33 30 0 20 2 0 1 19 0 1 21 0 16 0 1 18 0 52 7 0 2 1 3 0 52 5 0 2 49 3 32 87 0 16 0 1 22 0 52 0 0 2 33 30 0 20 2 0 1 21 0 1 23 0 16 0 1 20 0 52 7 0 2 1 3 0 52 5 0 2 49 3 32 45 0 16 0 1 24 0 52 0 0 2 33 30 0 20 2 0 1 23 0 1 25 0 16 0 1 22 0 52 7 0 2 1 1 0 52 5 0 2 49 3 32 3 0 1 25 0 50)} "colour" {:upvalue-count 0 :arity 2 :constants ("get" "colour-bases" "nil?" "h" "s" "shade-to-lightness" "str" "hsl(" "," "%," "round" "%)") :bytecode (20 1 0 16 0 52 0 0 2 17 2 16 2 52 2 0 1 33 5 0 16 0 32 57 0 16 2 1 3 0 52 0 0 2 17 3 16 2 1 4 0 52 0 0 2 17 4 20 5 0 16 1 48 1 17 5 1 7 0 16 3 1 8 0 16 4 1 9 0 16 5 52 10 0 1 1 11 0 52 6 0 7 50)} "cssx-colour-props" "bg" "background-color" "border" "border-color" "text" "color" "cssx-spacing-props" "ml" "margin-left:{v}" "mr" "margin-right:{v}" "mt" "margin-top:{v}" "mb" "margin-bottom:{v}" "pl" "padding-left:{v}" "m" "margin:{v}" "my" "margin-top:{v};margin-bottom:{v}" "px" "padding-left:{v};padding-right:{v}" "pb" "padding-bottom:{v}" "pr" "padding-right:{v}" "p" "padding:{v}" "py" "padding-top:{v};padding-bottom:{v}" "pt" "padding-top:{v}" "mx" "margin-left:{v};margin-right:{v}" "cssx-sizes" "xs" "font-size:0.75rem;line-height:1rem" "3xl" "font-size:1.875rem;line-height:2.25rem" "7xl" "font-size:4.5rem;line-height:1" "sm" "font-size:0.875rem;line-height:1.25rem" "8xl" "font-size:6rem;line-height:1" "xl" "font-size:1.25rem;line-height:1.75rem" "6xl" "font-size:3.75rem;line-height:1" "9xl" "font-size:8rem;line-height:1" "5xl" "font-size:3rem;line-height:1" "lg" "font-size:1.125rem;line-height:1.75rem" "2xl" "font-size:1.5rem;line-height:2rem" "base" "font-size:1rem;line-height:1.5rem" "4xl" "font-size:2.25rem;line-height:2.5rem" "cssx-weights" "light" "300" "semibold" "600" "bold" "700" "extrabold" "800" "900" "extralight" "200" "thin" "100" "medium" "500" "normal" "400" "cssx-families" "mono" "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace" "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" "cssx-alignments" "center" "left" "right" "justify" "cssx-displays" "flex" "grid" "inline-block" "inline" "hidden" "none" "block" "inline-flex" "cssx-max-widths" "20rem" "48rem" "80rem" "24rem" "36rem" "full" "100%" "md" "28rem" "72rem" "prose" "65ch" "64rem" "32rem" "42rem" "56rem" "screen" "100vw" "cssx-breakpoints" "640px" "1280px" "768px" "1024px" "1536px" "cssx-states" "focus" ":focus" "first" ":first-child" "hover" ":hover" "focus-visible" ":focus-visible" "last" ":last-child" "active" ":active" "focus-within" ":focus-within" "cssx-spacing-value" {:upvalue-count 0 :arity 1 :constants ("=" "auto" "px" "1px" "0" "0px" "parse-int" "nil?" "str" "*" 0.25 "rem") :bytecode (16 0 1 1 0 52 0 0 2 33 6 0 1 1 0 32 74 0 16 0 1 2 0 52 0 0 2 33 6 0 1 3 0 32 56 0 16 0 1 4 0 52 0 0 2 33 6 0 1 5 0 32 38 0 16 0 2 52 6 0 2 17 1 16 1 52 7 0 1 33 4 0 2 32 16 0 16 1 1 10 0 52 9 0 2 1 11 0 52 8 0 2 50)} "cssx-template" {:upvalue-count 0 :arity 2 :constants ("index-of" "{v}" "<" 0 "str" "substring" "+" 3 "len") :bytecode (16 0 1 1 0 52 0 0 2 17 2 16 2 1 3 0 52 2 0 2 33 5 0 16 0 32 106 0 16 0 1 3 0 16 2 52 5 0 3 16 1 16 0 16 2 1 7 0 52 6 0 2 16 0 52 8 0 1 52 5 0 3 52 4 0 3 17 3 16 3 1 1 0 52 0 0 2 17 4 16 4 1 3 0 52 2 0 2 33 5 0 16 3 32 38 0 16 3 1 3 0 16 4 52 5 0 3 16 1 16 3 16 4 1 7 0 52 6 0 2 16 3 52 8 0 1 52 5 0 3 52 4 0 3 50)} "cssx-resolve" {:upvalue-count 0 :arity 1 :constants ("split" "-" "empty?" "first" "slice" 1 "get" "cssx-colour-props" ">=" "len" 2 "not" "nil?" "parse-int" "last" "colour-bases" "join" 0 "str" ":" "colour" "=" "text" "cssx-sizes" "cssx-alignments" "text-align:" "font" "cssx-weights" "font-weight:" "cssx-families" "font-family:" "cssx-spacing-props" "cssx-spacing-value" "cssx-template" "cssx-displays" "display:" "max" "w" "cssx-max-widths" "max-width:" "rounded" "border-radius:0.25rem" "none" "border-radius:0" "sm" "border-radius:0.125rem" "md" "border-radius:0.375rem" "lg" "border-radius:0.5rem" "xl" "border-radius:0.75rem" "2xl" "border-radius:1rem" "3xl" "border-radius:1.5rem" "full" "border-radius:9999px" "opacity" "opacity:" "/" 100 "h" "width" "height" ":100%" "screen" ":100vw" ":100vh" "auto" ":auto" "min" ":min-content" ":max-content" "fit" ":fit-content" "*" 0.25 "rem" "gap" "gap:" "underline" "overline" "line-through" "text-decoration-line:" "no" "text-decoration-line:none" "cursor" "cursor:" "overflow" "overflow:" "transition" "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" "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") :bytecode (16 0 1 1 0 52 0 0 2 17 1 16 1 52 2 0 1 33 4 0 2 32 168 6 16 1 52 3 0 1 17 2 16 1 1 5 0 52 4 0 2 17 3 20 7 0 16 2 52 6 0 2 6 33 87 0 5 16 3 52 9 0 1 1 10 0 52 8 0 2 6 33 69 0 5 16 3 52 14 0 1 2 52 13 0 2 52 12 0 1 52 11 0 1 6 33 45 0 5 20 15 0 1 1 0 16 3 1 17 0 16 3 52 9 0 1 1 5 0 52 1 0 2 52 4 0 3 52 16 0 2 52 6 0 2 52 12 0 1 52 11 0 1 33 78 0 20 7 0 16 2 52 6 0 2 17 4 1 1 0 16 3 1 17 0 16 3 52 9 0 1 1 5 0 52 1 0 2 52 4 0 3 52 16 0 2 17 5 16 3 52 14 0 1 1 17 0 52 13 0 2 17 6 16 4 1 19 0 20 20 0 16 5 16 6 48 2 52 18 0 3 32 224 5 16 2 1 22 0 52 21 0 2 6 33 40 0 5 16 3 52 9 0 1 1 5 0 52 21 0 2 6 33 22 0 5 20 23 0 16 3 52 3 0 1 52 6 0 2 52 12 0 1 52 11 0 1 33 16 0 20 23 0 16 3 52 3 0 1 52 6 0 2 32 152 5 16 2 1 22 0 52 21 0 2 6 33 32 0 5 16 3 52 9 0 1 1 5 0 52 21 0 2 6 33 14 0 5 20 24 0 16 3 52 3 0 1 52 6 0 2 33 16 0 1 25 0 16 3 52 3 0 1 52 18 0 2 32 88 5 16 2 1 26 0 52 21 0 2 6 33 40 0 5 16 3 52 9 0 1 1 5 0 52 21 0 2 6 33 22 0 5 20 27 0 16 3 52 3 0 1 52 6 0 2 52 12 0 1 52 11 0 1 33 23 0 1 28 0 20 27 0 16 3 52 3 0 1 52 6 0 2 52 18 0 2 32 9 5 16 2 1 26 0 52 21 0 2 6 33 40 0 5 16 3 52 9 0 1 1 5 0 52 21 0 2 6 33 22 0 5 20 29 0 16 3 52 3 0 1 52 6 0 2 52 12 0 1 52 11 0 1 33 23 0 1 30 0 20 29 0 16 3 52 3 0 1 52 6 0 2 52 18 0 2 32 186 4 20 31 0 16 2 52 6 0 2 6 33 14 0 5 16 3 52 9 0 1 1 5 0 52 21 0 2 33 49 0 20 31 0 16 2 52 6 0 2 17 4 20 32 0 16 3 52 3 0 1 48 1 17 5 16 5 52 12 0 1 33 4 0 2 32 9 0 20 33 0 16 4 16 5 49 2 32 107 4 16 1 52 9 0 1 1 5 0 52 21 0 2 6 33 18 0 5 20 34 0 16 2 52 6 0 2 52 12 0 1 52 11 0 1 33 19 0 1 35 0 20 34 0 16 2 52 6 0 2 52 18 0 2 32 50 4 16 1 52 9 0 1 1 10 0 52 21 0 2 6 33 18 0 5 20 34 0 16 0 52 6 0 2 52 12 0 1 52 11 0 1 33 19 0 1 35 0 20 34 0 16 0 52 6 0 2 52 18 0 2 32 249 3 16 2 1 36 0 52 21 0 2 6 33 32 0 5 16 3 52 9 0 1 1 10 0 52 8 0 2 6 33 14 0 5 16 3 52 3 0 1 1 37 0 52 21 0 2 33 54 0 1 1 0 16 3 1 5 0 52 4 0 2 52 16 0 2 17 4 20 38 0 16 4 52 6 0 2 17 5 16 5 52 12 0 1 33 4 0 2 32 9 0 1 39 0 16 5 52 18 0 2 32 147 3 16 2 1 40 0 52 21 0 2 33 195 0 16 3 52 2 0 1 33 6 0 1 41 0 32 177 0 16 3 52 3 0 1 1 42 0 52 21 0 2 33 6 0 1 43 0 32 155 0 16 3 52 3 0 1 1 44 0 52 21 0 2 33 6 0 1 45 0 32 133 0 16 3 52 3 0 1 1 46 0 52 21 0 2 33 6 0 1 47 0 32 111 0 16 3 52 3 0 1 1 48 0 52 21 0 2 33 6 0 1 49 0 32 89 0 16 3 52 3 0 1 1 50 0 52 21 0 2 33 6 0 1 51 0 32 67 0 16 3 52 3 0 1 1 52 0 52 21 0 2 33 6 0 1 53 0 32 45 0 16 3 52 3 0 1 1 54 0 52 21 0 2 33 6 0 1 55 0 32 23 0 16 3 52 3 0 1 1 56 0 52 21 0 2 33 6 0 1 57 0 32 1 0 2 32 196 2 16 2 1 58 0 52 21 0 2 6 33 14 0 5 16 3 52 9 0 1 1 5 0 52 21 0 2 33 45 0 16 3 52 3 0 1 2 52 13 0 2 17 4 16 4 52 12 0 1 33 4 0 2 32 16 0 1 59 0 16 4 1 61 0 52 60 0 2 52 18 0 2 32 121 2 16 2 1 37 0 52 21 0 2 6 34 10 0 5 16 2 1 62 0 52 21 0 2 6 33 14 0 5 16 3 52 9 0 1 1 5 0 52 21 0 2 33 239 0 16 2 1 37 0 52 21 0 2 33 6 0 1 63 0 32 3 0 1 64 0 17 4 16 3 52 3 0 1 17 5 16 5 1 56 0 52 21 0 2 33 12 0 16 4 1 65 0 52 18 0 2 32 181 0 16 5 1 66 0 52 21 0 2 33 30 0 16 4 16 2 1 37 0 52 21 0 2 33 6 0 1 67 0 32 3 0 1 68 0 52 18 0 2 32 139 0 16 5 1 69 0 52 21 0 2 33 12 0 16 4 1 70 0 52 18 0 2 32 115 0 16 5 1 71 0 52 21 0 2 33 12 0 16 4 1 72 0 52 18 0 2 32 91 0 16 5 1 36 0 52 21 0 2 33 12 0 16 4 1 73 0 52 18 0 2 32 67 0 16 5 1 74 0 52 21 0 2 33 12 0 16 4 1 75 0 52 18 0 2 32 43 0 16 5 2 52 13 0 2 17 6 16 6 52 12 0 1 33 4 0 2 32 21 0 16 4 1 19 0 16 6 1 77 0 52 76 0 2 1 78 0 52 18 0 4 32 94 1 16 2 1 79 0 52 21 0 2 6 33 14 0 5 16 3 52 9 0 1 1 5 0 52 21 0 2 33 38 0 20 32 0 16 3 52 3 0 1 48 1 17 4 16 4 52 12 0 1 33 4 0 2 32 9 0 1 80 0 16 4 52 18 0 2 32 26 1 16 1 52 9 0 1 1 5 0 52 21 0 2 6 33 38 0 5 16 2 1 81 0 52 21 0 2 6 34 24 0 5 16 2 1 82 0 52 21 0 2 6 34 10 0 5 16 2 1 83 0 52 21 0 2 33 12 0 1 84 0 16 2 52 18 0 2 32 212 0 16 1 52 9 0 1 1 10 0 52 21 0 2 6 33 28 0 5 16 2 1 85 0 52 21 0 2 6 33 14 0 5 16 3 52 3 0 1 1 81 0 52 21 0 2 33 6 0 1 86 0 32 158 0 16 2 1 87 0 52 21 0 2 6 33 14 0 5 16 3 52 9 0 1 1 5 0 52 21 0 2 33 16 0 1 88 0 16 3 52 3 0 1 52 18 0 2 32 112 0 16 2 1 89 0 52 21 0 2 6 33 14 0 5 16 3 52 9 0 1 1 5 0 52 21 0 2 33 16 0 1 90 0 16 3 52 3 0 1 52 18 0 2 32 66 0 16 2 1 91 0 52 21 0 2 6 33 7 0 5 16 3 52 2 0 1 33 6 0 1 92 0 32 37 0 16 2 1 91 0 52 21 0 2 6 33 14 0 5 16 3 52 3 0 1 1 93 0 52 21 0 2 33 6 0 1 94 0 32 1 0 2 50)} "cssx-process-token" {:upvalue-count 0 :arity 1 :constants ("split" ":" "len" "=" 1 "first" 2 "last" "not" "nil?" "get" "cssx-breakpoints" ">=" 3 "nth" "cssx-resolve" "str" "sx-" "join" "-" "" "cssx-states" "." "{" "}" "rule" "cls" "@media(min-width:" "){") :bytecode (16 0 1 1 0 52 0 0 2 17 1 16 1 52 2 0 1 17 2 2 17 3 2 17 4 2 17 5 16 2 1 4 0 52 3 0 2 33 11 0 16 1 52 5 0 1 17 5 32 108 0 16 2 1 6 0 52 3 0 2 33 51 0 16 1 52 5 0 1 17 6 16 1 52 7 0 1 17 5 5 20 11 0 16 6 52 10 0 2 52 9 0 1 52 8 0 1 33 7 0 16 6 17 3 32 4 0 16 6 17 4 32 45 0 16 2 1 13 0 52 12 0 2 33 32 0 16 1 52 5 0 1 17 3 5 16 1 1 4 0 52 14 0 2 17 4 5 16 1 52 7 0 1 17 5 32 1 0 2 5 20 15 0 16 5 48 1 17 6 16 6 52 9 0 1 33 4 0 2 32 157 0 1 17 0 1 19 0 16 0 1 1 0 52 0 0 2 52 18 0 2 52 16 0 2 17 7 16 4 52 9 0 1 33 6 0 1 20 0 32 23 0 20 21 0 16 4 52 10 0 2 6 34 10 0 5 1 1 0 16 4 52 16 0 2 17 8 1 22 0 16 7 16 8 1 23 0 16 6 1 24 0 52 16 0 6 17 9 16 3 52 9 0 1 33 16 0 1 25 0 16 9 1 26 0 16 7 65 2 0 32 46 0 20 11 0 16 3 52 10 0 2 6 34 3 0 5 16 3 17 10 1 25 0 1 27 0 16 10 1 28 0 16 9 1 24 0 52 16 0 5 1 26 0 16 7 65 2 0 50)} "tw" {:upvalue-count 0 :arity 1 :constants ("split" "" " " "list" "for-each" {:upvalue-count 1 :arity 1 :constants ("not" "=" "" "cssx-resolve" "nil?" "append!" "str" ";") :bytecode (16 0 1 2 0 52 1 0 2 52 0 0 1 33 44 0 20 3 0 16 0 48 1 17 1 16 1 52 4 0 1 52 0 0 1 33 18 0 18 0 16 1 1 7 0 52 6 0 2 52 5 0 2 32 1 0 2 32 1 0 2 50)} "join") :bytecode (16 0 6 34 4 0 5 1 1 0 1 2 0 52 0 0 2 17 1 52 3 0 0 17 2 51 5 0 1 2 16 1 52 4 0 2 5 1 1 0 16 2 52 6 0 2 50)}) :bytecode (1 1 0 1 2 0 1 3 0 1 4 0 1 5 0 65 2 0 1 6 0 1 2 0 1 7 0 1 4 0 1 8 0 65 2 0 1 9 0 1 2 0 1 10 0 1 4 0 1 11 0 65 2 0 1 12 0 1 2 0 1 13 0 1 4 0 1 14 0 65 2 0 1 15 0 1 2 0 1 16 0 1 4 0 1 17 0 65 2 0 1 18 0 1 2 0 1 19 0 1 4 0 1 20 0 65 2 0 1 21 0 1 2 0 1 22 0 1 4 0 1 22 0 65 2 0 1 23 0 1 2 0 1 24 0 1 4 0 1 25 0 65 2 0 1 26 0 1 2 0 1 27 0 1 4 0 1 28 0 65 2 0 1 29 0 1 2 0 1 25 0 1 4 0 1 30 0 65 2 0 1 31 0 1 2 0 1 32 0 1 4 0 1 5 0 65 2 0 1 33 0 1 2 0 1 22 0 1 4 0 1 22 0 65 2 0 1 34 0 1 2 0 1 35 0 1 4 0 1 36 0 65 2 0 1 37 0 1 2 0 1 38 0 1 4 0 1 39 0 65 2 0 1 40 0 1 2 0 1 41 0 1 4 0 1 22 0 65 2 0 1 42 0 1 2 0 1 10 0 1 4 0 1 43 0 65 2 0 1 44 0 1 2 0 1 45 0 1 4 0 1 46 0 65 2 0 1 47 0 1 2 0 1 25 0 1 4 0 1 48 0 65 2 0 1 49 0 1 2 0 1 50 0 1 4 0 1 51 0 65 2 0 1 52 0 1 2 0 1 53 0 1 4 0 1 54 0 65 2 0 1 55 0 1 2 0 1 13 0 1 4 0 1 56 0 65 2 0 1 57 0 1 2 0 1 25 0 1 4 0 1 58 0 65 2 0 1 59 0 1 2 0 1 22 0 1 4 0 1 22 0 65 2 0 1 60 0 1 2 0 1 61 0 1 4 0 1 62 0 65 2 0 65 24 0 128 0 0 5 51 64 0 128 63 0 5 51 66 0 128 65 0 5 51 68 0 128 67 0 5 1 70 0 1 71 0 1 72 0 1 73 0 1 74 0 1 75 0 65 3 0 128 69 0 5 1 77 0 1 78 0 1 79 0 1 80 0 1 81 0 1 82 0 1 83 0 1 84 0 1 85 0 1 86 0 1 87 0 1 88 0 1 89 0 1 90 0 1 91 0 1 92 0 1 93 0 1 94 0 1 95 0 1 96 0 1 97 0 1 98 0 1 99 0 1 100 0 1 101 0 1 102 0 1 103 0 1 104 0 65 14 0 128 76 0 5 1 106 0 1 107 0 1 108 0 1 109 0 1 110 0 1 111 0 1 112 0 1 113 0 1 114 0 1 115 0 1 116 0 1 117 0 1 118 0 1 119 0 1 120 0 1 121 0 1 122 0 1 123 0 1 124 0 1 125 0 1 126 0 1 127 0 1 128 0 1 129 0 1 130 0 1 131 0 65 13 0 128 105 0 5 1 133 0 1 134 0 1 135 0 1 136 0 1 137 0 1 138 0 1 139 0 1 140 0 1 33 0 1 141 0 1 142 0 1 143 0 1 144 0 1 145 0 1 146 0 1 147 0 1 148 0 1 149 0 65 9 0 128 132 0 5 1 151 0 1 152 0 1 153 0 1 154 0 1 155 0 1 156 0 65 3 0 128 150 0 5 1 158 0 3 1 159 0 3 1 160 0 3 1 161 0 3 65 4 0 128 157 0 5 1 163 0 1 163 0 1 164 0 1 164 0 1 165 0 1 165 0 1 166 0 1 166 0 1 167 0 1 168 0 1 169 0 1 169 0 1 170 0 1 170 0 65 7 0 128 162 0 5 1 106 0 1 172 0 1 108 0 1 173 0 1 110 0 1 174 0 1 112 0 1 175 0 1 116 0 1 176 0 1 177 0 1 178 0 1 179 0 1 180 0 1 118 0 1 181 0 1 182 0 1 183 0 1 122 0 1 184 0 1 124 0 1 185 0 1 126 0 1 186 0 1 130 0 1 187 0 1 168 0 1 168 0 1 188 0 1 189 0 65 15 0 128 171 0 5 1 112 0 1 191 0 1 116 0 1 192 0 1 179 0 1 193 0 1 124 0 1 194 0 1 126 0 1 195 0 65 5 0 128 190 0 5 1 197 0 1 198 0 1 199 0 1 200 0 1 201 0 1 202 0 1 203 0 1 204 0 1 205 0 1 206 0 1 207 0 1 208 0 1 209 0 1 210 0 65 7 0 128 196 0 5 51 212 0 128 211 0 5 51 214 0 128 213 0 5 51 216 0 128 215 0 5 51 218 0 128 217 0 5 51 220 0 128 219 0 50))) diff --git a/shared/sx/templates/cssx.sx b/shared/sx/templates/cssx.sx deleted file mode 100644 index 93170c4e..00000000 --- a/shared/sx/templates/cssx.sx +++ /dev/null @@ -1,300 +0,0 @@ -(define colour-bases {:orange {:s 95 :h 25} :cyan {:s 94 :h 188} :sky {:s 89 :h 199} :pink {:s 81 :h 330} :zinc {:s 5 :h 240} :amber {:s 92 :h 38} :neutral {:s 0 :h 0} :lime {:s 78 :h 84} :violet {:s 70 :h 263} :fuchsia {:s 84 :h 292} :stone {:s 6 :h 25} :black {:s 0 :h 0} :teal {:s 80 :h 173} :gray {:s 9 :h 220} :red {:s 72 :h 0} :rose {:s 89 :h 350} :blue {:s 91 :h 217} :emerald {:s 84 :h 160} :green {:s 71 :h 142} :yellow {:s 96 :h 48} :purple {:s 81 :h 271} :indigo {:s 84 :h 239} :white {:s 0 :h 0} :slate {:s 16 :h 215}}) - -(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) "%)")))))) - -(define cssx-colour-props {:bg "background-color" :border "border-color" :text "color"}) - -(define cssx-spacing-props {:ml "margin-left:{v}" :mr "margin-right:{v}" :mt "margin-top:{v}" :mb "margin-bottom:{v}" :pl "padding-left:{v}" :m "margin:{v}" :my "margin-top:{v};margin-bottom:{v}" :px "padding-left:{v};padding-right:{v}" :pb "padding-bottom:{v}" :pr "padding-right:{v}" :p "padding:{v}" :py "padding-top:{v};padding-bottom:{v}" :pt "padding-top:{v}" :mx "margin-left:{v};margin-right:{v}"}) - -(define cssx-sizes {:xs "font-size:0.75rem;line-height:1rem" :3xl "font-size:1.875rem;line-height:2.25rem" :7xl "font-size:4.5rem;line-height:1" :sm "font-size:0.875rem;line-height:1.25rem" :8xl "font-size:6rem;line-height:1" :xl "font-size:1.25rem;line-height:1.75rem" :6xl "font-size:3.75rem;line-height:1" :9xl "font-size:8rem;line-height:1" :5xl "font-size:3rem;line-height:1" :lg "font-size:1.125rem;line-height:1.75rem" :2xl "font-size:1.5rem;line-height:2rem" :base "font-size:1rem;line-height:1.5rem" :4xl "font-size:2.25rem;line-height:2.5rem"}) - -(define cssx-weights {:light "300" :semibold "600" :bold "700" :extrabold "800" :black "900" :extralight "200" :thin "100" :medium "500" :normal "400"}) - -(define cssx-families {:mono "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace" :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"}) - -(define cssx-alignments {:center true :left true :right true :justify true}) - -(define cssx-displays {:flex "flex" :grid "grid" :inline-block "inline-block" :inline "inline" :hidden "none" :block "block" :inline-flex "inline-flex"}) - -(define cssx-max-widths {:xs "20rem" :3xl "48rem" :7xl "80rem" :sm "24rem" :xl "36rem" :full "100%" :md "28rem" :6xl "72rem" :prose "65ch" :5xl "64rem" :lg "32rem" :2xl "42rem" :4xl "56rem" :none "none" :screen "100vw"}) - -(define cssx-breakpoints {:sm "640px" :xl "1280px" :md "768px" :lg "1024px" :2xl "1536px"}) - -(define cssx-states {:focus ":focus" :first ":first-child" :hover ":hover" :focus-visible ":focus-visible" :last ":last-child" :active ":active" :focus-within ":focus-within"}) - -(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")))))) - -(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))))) - (let - ((j (index-of result "{v}"))) - (if - (< j 0) - result - (str - (substring result 0 j) - v - (substring result (+ j 3) (len result)))))))))) - -(define - cssx-resolve - (fn - (token) - (let - ((parts (split token "-"))) - (if - (empty? parts) - nil - (let - ((head (first parts)) (rest (slice parts 1))) - (cond - (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))) - (and - (= head "text") - (= (len rest) 1) - (not (nil? (get cssx-sizes (first rest))))) - (get cssx-sizes (first rest)) - (and - (= head "text") - (= (len rest) 1) - (get cssx-alignments (first rest))) - (str "text-align:" (first rest)) - (and - (= head "font") - (= (len rest) 1) - (not (nil? (get cssx-weights (first rest))))) - (str "font-weight:" (get cssx-weights (first rest))) - (and - (= head "font") - (= (len rest) 1) - (not (nil? (get cssx-families (first rest))))) - (str "font-family:" (get cssx-families (first rest))) - (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))) - (and (= (len parts) 1) (not (nil? (get cssx-displays head)))) - (str "display:" (get cssx-displays head)) - (and (= (len parts) 2) (not (nil? (get cssx-displays token)))) - (str "display:" (get cssx-displays token)) - (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))) - (= 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) - (and (= head "opacity") (= (len rest) 1)) - (let - ((n (parse-int (first rest) nil))) - (if (nil? n) nil (str "opacity:" (/ n 100)))) - (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"))))) - (and (= head "gap") (= (len rest) 1)) - (let - ((v (cssx-spacing-value (first rest)))) - (if (nil? v) nil (str "gap:" v))) - (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" - (and (= head "cursor") (= (len rest) 1)) - (str "cursor:" (first rest)) - (and (= head "overflow") (= (len rest) 1)) - (str "overflow:" (first rest)) - (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" - true - nil)))))) - -(define - cssx-process-token - (fn - (token) - (let - ((colon-parts (split token ":")) (n (len colon-parts))) - (let - ((bp nil) (state nil) (base nil)) - (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)))) - (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) - {:rule decl :cls cls} - (let - ((min-w (or (get cssx-breakpoints bp) bp))) - {:rule (str "@media(min-width:" min-w "){" decl "}") :cls cls}))))))))) - -(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)))) diff --git a/shared/sx/templates/shell.sx b/shared/sx/templates/shell.sx index 28ae4241..7c123cb6 100644 --- a/shared/sx/templates/shell.sx +++ b/shared/sx/templates/shell.sx @@ -5,7 +5,6 @@ (meta-html :as string?) (csrf :as string) (sx-css :as string?) - (sx-css-classes :as string?) (component-hash :as string?) (component-defs :as string?) (pages-sx :as string?) @@ -37,7 +36,6 @@ (when (not (empty? cssx-rules)) (style :data-sx-css true (raw! (join "" cssx-rules))))) - (meta :name "sx-css-classes" :content (or sx-css-classes "")) (if (not (nil? inline-head-js)) (when diff --git a/sx/sx/layouts.sx b/sx/sx/layouts.sx index 0715c65e..9c9f25e7 100644 --- a/sx/sx/layouts.sx +++ b/sx/sx/layouts.sx @@ -87,8 +87,7 @@ :sx-select "#sx-content" :sx-swap "innerHTML" :sx-push-url "true" - (~tw :tokens "text-right min-w-0 truncate") - :style (tw "text-stone-500 text-sm") + (~tw :tokens "text-right min-w-0 truncate text-stone-500 text-sm") (str "← " (get prev-node "label"))) (a :href (get node "href") @@ -97,11 +96,13 @@ :sx-select "#sx-content" :sx-swap "innerHTML" :sx-push-url "true" - (~tw :tokens "text-center min-w-0 truncate px-1") - :style (if - is-leaf - (tw "text-violet-700 text-2xl font-bold") - (tw "text-violet-700 text-lg font-semibold")) + (~tw + :tokens (str + "text-center min-w-0 truncate px-1 " + (if + is-leaf + "text-violet-700 text-2xl font-bold" + "text-violet-700 text-lg font-semibold"))) (get node "label")) (a :href (get next-node "href") @@ -110,8 +111,7 @@ :sx-select "#sx-content" :sx-swap "innerHTML" :sx-push-url "true" - (~tw :tokens "text-left min-w-0 truncate") - :style (tw "text-stone-500 text-sm") + (~tw :tokens "text-left min-w-0 truncate text-stone-500 text-sm") (str (get next-node "label") " →"))))))) (defcomp @@ -132,8 +132,8 @@ :sx-select "#sx-content" :sx-swap "innerHTML" :sx-push-url "true" - (~tw :tokens "px-3 py-1.5 rounded border transition-colors") - :style (tw "text-violet-700 text-sm border-violet-200") + (~tw + :tokens "px-3 py-1.5 rounded border transition-colors text-violet-700 text-sm border-violet-200") (get item "label"))) items)))) diff --git a/sx/sx/not-found.sx b/sx/sx/not-found.sx index 3a989a21..3e4b2180 100644 --- a/sx/sx/not-found.sx +++ b/sx/sx/not-found.sx @@ -3,11 +3,11 @@ (&key (path :as string?)) (div (~tw :tokens "max-w-3xl mx-auto px-4 py-12 text-center") - (h1 :style (tw "text-stone-800 text-3xl font-bold") "404") - (p (~tw :tokens "mt-4") :style (tw "text-stone-500 text-lg") "Page not found") + (h1 (~tw :tokens "text-stone-800 text-3xl font-bold") "404") + (p (~tw :tokens "mt-4 text-stone-500 text-lg") "Page not found") (when path - (p (~tw :tokens "mt-2") :style (tw "text-stone-400 text-sm font-mono") path)) + (p (~tw :tokens "mt-2 text-stone-400 text-sm font-mono") path)) (a :href "/sx/" :sx-get "/sx/" @@ -15,6 +15,6 @@ :sx-select "#sx-content" :sx-swap "outerHTML" :sx-push-url "true" - (~tw :tokens "inline-block mt-6 px-4 py-2 rounded border transition-colors") - :style (tw "text-violet-700 text-sm border-violet-200") + (~tw + :tokens "inline-block mt-6 px-4 py-2 rounded border transition-colors text-violet-700 text-sm border-violet-200") "Back to home"))) diff --git a/sx/sxc/init-client.sx.txt b/sx/sxc/init-client.sx.txt index 4468d3ec..e3bad5b3 100644 --- a/sx/sxc/init-client.sx.txt +++ b/sx/sxc/init-client.sx.txt @@ -20,9 +20,9 @@ (log-info (str "cssx flush: running, rules:" (len (collected "cssx")))) (let ((rules (collected "cssx"))) (when (not (empty? rules)) - (let ((style (or (dom-query "[data-cssx]") + (let ((style (or (dom-query "[data-sx-css]") (let ((s (dom-create-element "style" nil))) - (dom-set-attr s "data-cssx" "") + (dom-set-attr s "data-sx-css" "") (dom-append-to-head s) s)))) (dom-set-prop style "textContent" diff --git a/tests/playwright/isomorphic.spec.js b/tests/playwright/isomorphic.spec.js index 31287418..90e19047 100644 --- a/tests/playwright/isomorphic.spec.js +++ b/tests/playwright/isomorphic.spec.js @@ -121,14 +121,14 @@ test.describe('Isomorphic SSR', () => { // Check that the CSSX style tag is in const cssxInHead = await page.evaluate(() => { - const style = document.querySelector('head style[data-cssx]'); + const style = document.querySelector('head style[data-sx-css]'); return style ? style.textContent.length : 0; }); expect(cssxInHead).toBeGreaterThan(0); // The violet rule should exist const hasVioletRule = await page.evaluate(() => { - const style = document.querySelector('head style[data-cssx]'); + const style = document.querySelector('head style[data-sx-css]'); return style ? style.textContent.includes('sx-text-violet-699') : false; }); expect(hasVioletRule).toBe(true); diff --git a/web/boot.sx b/web/boot.sx index 31ebb26f..f25e3e24 100644 --- a/web/boot.sx +++ b/web/boot.sx @@ -425,7 +425,6 @@ () (do (log-info (str "sx-browser " SX_VERSION)) - (init-css-tracking) (process-page-scripts) (process-sx-scripts nil) (sx-hydrate-elements nil) diff --git a/web/engine.sx b/web/engine.sx index 89c2de58..7d2a90b9 100644 --- a/web/engine.sx +++ b/web/engine.sx @@ -117,7 +117,7 @@ build-request-headers :effects (io) (fn - (el (loaded-components :as list) (css-hash :as string)) + (el (loaded-components :as list)) (let ((headers (dict "SX-Request" "true" "SX-Current-URL" (browser-location-href)))) (let @@ -126,7 +126,6 @@ (let ((comp-hash (dom-get-attr (dom-query "script[data-components][data-hash]") "data-hash"))) (when comp-hash (dict-set! headers "SX-Components-Hash" comp-hash))) - (when css-hash (dict-set! headers "SX-Css" css-hash)) (let ((extra-h (dom-get-attr el "sx-headers"))) (when @@ -162,8 +161,6 @@ (get-header "SX-Location") "replace-url" (get-header "SX-Replace-Url") - "css-hash" - (get-header "SX-Css-Hash") "trigger-swap" (get-header "SX-Trigger-After-Swap") "trigger-settle" diff --git a/web/orchestration.sx b/web/orchestration.sx index 4b1da282..ab17784f 100644 --- a/web/orchestration.sx +++ b/web/orchestration.sx @@ -1,7 +1,5 @@ (define _preload-cache (dict)) -(define _css-hash "") - (define dispatch-trigger-events :effects (mutation io) @@ -26,19 +24,6 @@ (dom-dispatch el trimmed (dict))))) (split header-val ","))))))) -(define - init-css-tracking - :effects (mutation io) - (fn - () - (let - ((meta (dom-query "meta[name=\"sx-css-classes\"]"))) - (when - meta - (let - ((content (dom-get-attr meta "content"))) - (when content (set! _css-hash content))))))) - (define execute-request :effects (mutation io) @@ -115,8 +100,7 @@ (final-url (get body-info "url")) (body (get body-info "body")) (ct (get body-info "content-type")) - (headers - (build-request-headers el (loaded-component-names) _css-hash)) + (headers (build-request-headers el (loaded-component-names))) (csrf (csrf-token))) (when extraParams @@ -214,9 +198,6 @@ (text :as string)) (let ((resp-headers (process-response-headers get-header))) - (let - ((new-hash (get resp-headers "css-hash"))) - (when new-hash (set! _css-hash new-hash))) (dispatch-trigger-events el (get resp-headers "trigger")) (process-cache-directives el resp-headers text) (cond @@ -1146,8 +1127,7 @@ pathname (build-request-headers target - (loaded-component-names) - _css-hash)) + (loaded-component-names))) true) (if (get match "has-data") @@ -1183,8 +1163,7 @@ pathname (build-request-headers target - (loaded-component-names) - _css-hash) + (loaded-component-names)) 0)) (swap-rendered-content target @@ -1242,8 +1221,7 @@ pathname (build-request-headers target - (loaded-component-names) - _css-hash) + (loaded-component-names)) 0)) (swap-rendered-content target @@ -1264,8 +1242,7 @@ pathname (build-request-headers target - (loaded-component-names) - _css-hash) + (loaded-component-names)) 0)) (swap-rendered-content target @@ -1295,8 +1272,7 @@ pathname (build-request-headers target - (loaded-component-names) - _css-hash) + (loaded-component-names)) 0)) (swap-rendered-content target @@ -1473,10 +1449,7 @@ info (do-preload (get info "url") - (build-request-headers - el - (loaded-component-names) - _css-hash))))))))))) + (build-request-headers el (loaded-component-names)))))))))))) (define do-preload @@ -1597,8 +1570,4 @@ :effects (mutation io) (fn () - (do - (init-css-tracking) - (sx-process-scripts nil) - (sx-hydrate nil) - (process-elements nil)))) + (do (sx-process-scripts nil) (sx-hydrate nil) (process-elements nil))))