ReviewOS

stacks/ts-css

Responsive variants dropped on SPA fragment swap — apps must safelist lg:/grid-cols-* to prevent layout collapse

#19
Open glennmichael123 opened this 9 days ago ·
9 days ago

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.

Sign in to comment on this issue.