coop/rose-ash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix CSS styles lost during SPA navigation

Browse Source 
The text/sx AJAX response path (handle-sx-response) never called
hoist-head-elements, so <style> elements stayed in #sx-content instead
of moving to <head>. Additionally, CSS rules collected during client-side
island hydration were never flushed to the DOM.

- Add hoist-head-elements call to handle-sx-response (matching
  handle-html-response which already had it)
- Add flush-collected-styles helper that drains collected CSS rules
  into a <style data-sx-css> element in <head>
- Call flush after island hydration in post-swap, boot-init, and
  run-post-render-hooks to catch reactive re-renders
- Unify on data-sx-css attribute (existing convention) in ~tw/flush
  and shell template, removing the ad-hoc data-cssx attribute

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
giles
2026-04-02 09:37:58 +00:00
parent 90a2eaaf7a
commit 7651260fc7
16 changed files with 691 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
shared/sx/templates/shell.sx
View File

@@ -36,7 +36,7 @@
(clear-collected! "cssx")
(when
(not (empty? cssx-rules))
(style :data-cssx true (raw! (join "" 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))

53
shared/sx/templates/tw.sx
View File

@@ -504,23 +504,30 @@
(nil? css)
nil
(let
((neg-css (if negative (replace css ":" ":-") css))
(final-css
(if important (str neg-css " !important") neg-css))
(cls
(str
"sx-"
(replace (replace clean-token ":" "-") "." "d")))
(pseudo
(if state (or (get tw-states state) (str ":" state)) ""))
(selector
(if
sel-prefix
(str sel-prefix "." cls pseudo)
(str "." cls pseudo))))
((css-str (if (dict? css) (get css :css) css))
(sel-suffix
(if (dict? css) (or (get css :suffix) "") "")))
(let
((rule (cond bp (str "@media(min-width:" (get tw-breakpoints bp) "){" selector "{" final-css "}}") container (let ((csize (get tw-container-sizes container))) (if csize (str "@container(min-width:" csize "){" selector "{" final-css "}}") (str "@container{" selector "{" final-css "}}"))) true (str selector "{" final-css "}"))))
{:rule rule :cls cls})))))))))
((neg-css (if negative (replace css-str ":" ":-") css-str))
(final-css
(if important (str neg-css " !important") neg-css))
(cls
(str
"sx-"
(replace (replace clean-token ":" "-") "." "d")))
(pseudo
(if
state
(or (get tw-states state) (str ":" state))
""))
(selector
(if
sel-prefix
(str sel-prefix "." cls pseudo sel-suffix)
(str "." cls pseudo sel-suffix))))
(let
((rule (cond bp (str "@media(min-width:" (get tw-breakpoints bp) "){" selector "{" final-css "}}") container (let ((csize (get tw-container-sizes container))) (if csize (str "@container(min-width:" csize "){" selector "{" final-css "}}") (str "@container{" selector "{" final-css "}}"))) true (str selector "{" final-css "}"))))
{:rule rule :cls cls}))))))))))
(defcomp
~tw
@@ -537,15 +544,7 @@
(defcomp
~tw/flush
()
:affinity :client
(let
((rules (collected "cssx")) (head-style (dom-query "#sx-css")))
(when
head-style
(clear-collected! "cssx")
(when
(not (empty? rules))
(dom-set-prop
head-style
"textContent"
(str (dom-get-prop head-style "textContent") (join "" rules)))))))
((rules (collected "cssx")))
(clear-collected! "cssx")
(when (not (empty? rules)) (style :data-sx-css true (join "" rules)))))