Summary
crosswind emits utility CSS per page. On an stx SPA fragment swap, the incoming page's responsive variants (lg:, md:, grid-cols-*, hidden lg:block) are not reliably present in the merged fragment, so multi-column layouts collapse to a single column and conditionally-shown elements vanish after client-side navigation. Apps are forced to maintain a safelist to paper over it.
Impact (real app)
In bench, after navigating (e.g. reviews → judges → back), responsive grids collapsed to one column and the "Explore Categories" sidebar (hidden lg:block) disappeared. The fix in the app is a hand-maintained safelist forcing those variants into every page's output — see config/ui.ts:18-31, which documents the exact symptom.
Ask
Ensure a swapped-in fragment carries the responsive/variant utilities the destination page actually uses (e.g. emit page-used variants into the fragment, or provide a documented "always-emit for fragment merges" mechanism), so apps don't have to safelist responsive layout classes by hand.
Note: this is a crosswind ↔ stx-router integration seam; possibly related to the SPA fragment-styling work in stacksjs/stx#1789 / #1809.
Summary
crosswind emits utility CSS per page. On an stx SPA fragment swap, the incoming page's responsive variants (
lg:,md:,grid-cols-*,hidden lg:block) are not reliably present in the merged fragment, so multi-column layouts collapse to a single column and conditionally-shown elements vanish after client-side navigation. Apps are forced to maintain asafelistto paper over it.Impact (real app)
In bench, after navigating (e.g. reviews → judges → back), responsive grids collapsed to one column and the "Explore Categories" sidebar (
hidden lg:block) disappeared. The fix in the app is a hand-maintained safelist forcing those variants into every page's output — seeconfig/ui.ts:18-31, which documents the exact symptom.Ask
Ensure a swapped-in fragment carries the responsive/variant utilities the destination page actually uses (e.g. emit page-used variants into the fragment, or provide a documented "always-emit for fragment merges" mechanism), so apps don't have to safelist responsive layout classes by hand.
Note: this is a crosswind ↔ stx-router integration seam; possibly related to the SPA fragment-styling work in stacksjs/stx#1789 / #1809.