Commit Graph

3 Commits

Author SHA1 Message Date
7651260fc7 Fix CSS styles lost during SPA navigation
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>
2026-04-02 09:37:58 +00:00
33350ced6d Add comprehensive TW test suite (627 tests), fix 4 bugs, add 9 features
Bugs fixed:
- line-through: check full token not just head after hyphen split
- gap-x-N/gap-y-N: compound 2-part spacing prefix handler in tw-layout
- Negative values (-mt-4): replace ":" with ":-" instead of no-op
- Class name doubling: chain replace calls instead of concatenating

New features in tw-process-token:
- !important modifier (!p-4 → padding:1rem !important)
- dark: variant (class-based, .dark ancestor selector)
- group-hover:/group-focus:/group-active: (parent state)
- peer-focus:/peer-hover:/peer-checked:/peer-disabled: (sibling state)
- @container queries (@md:flex → @container(min-width:448px))
- Colour opacity modifier (bg-sky-500/50 → hsl with alpha)
- Ring colours (ring-sky-500 → --tw-ring-color)
- Arbitrary values (w-[300px], grid-cols-[1fr_2fr], bg-[#ff0000])
- colour-with-alpha helper for HSL+alpha generation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-01 21:55:33 +00:00
609be68c9c ~tw: complete Tailwind implementation in pure SX, split into 3 files
- tw.sx: core engine (HSL color computation, token processor, responsive/
  state prefixes) + visual styles (colors, borders, shadows, ring, opacity,
  transitions, animations, transforms, cursor, decoration)
- tw-layout.sx: spatial arrangement (flex, grid, position, spacing,
  display, sizing, overflow, z-index, aspect-ratio, visibility)
- tw-type.sx: typography (font size/weight/family, line-height, tracking,
  text alignment/transform/wrap, whitespace, word-break, truncate, lists,
  hyphens, font-variant-numeric, antialiasing)

22 color names × infinite shades via HSL computation (not lookup tables).
Full responsive (sm/md/lg/xl/2xl) and state (hover/focus/active/disabled/
first/last/odd/even/visited/checked/before/after) prefix support.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 21:42:32 +00:00