Remove old CSSX system — ~tw is the sole CSS engine
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) <noreply@anthropic.com>
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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));
|
||||
|
||||
@@ -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/"
|
||||
|
||||
@@ -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',
|
||||
];
|
||||
|
||||
@@ -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/"
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
../../../../shared/sx/templates/cssx.sx
|
||||
File diff suppressed because one or more lines are too long
@@ -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))))
|
||||
@@ -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
|
||||
|
||||
@@ -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))))
|
||||
|
||||
|
||||
@@ -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")))
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -121,14 +121,14 @@ test.describe('Isomorphic SSR', () => {
|
||||
|
||||
// Check that the CSSX style tag is in <head>
|
||||
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);
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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))))
|
||||
|
||||
Reference in New Issue
Block a user