fix: keep media queries for every rule of a block - #686
Conversation
Tailwind groups all utilities of a variant into one @media block (every ios: utility shares `@media ios { ... }`). The processor pushed the block's queries onto the config, then reset the config after each sibling rule, so only the first utility of a block kept them. Every later utility compiled without the block's guard: `android:` utilities in a second position applied on iOS, utilities past the first of a width breakpoint applied below it, and so on. Feed each sibling the block's media queries explicitly, and reset to the outer config rather than a fresh one after the block so media rules nested inside a class rule keep writing into that class.
|
Navigate logical layers of code changes, visualize relationships, and explore their blast radius. No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Advanced Run ID: 📒 Files selected for processing (3)
Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review. 📝 WalkthroughWalkthroughThe media rule parser now preserves block queries for every nested rule and restores the outer declaration configuration. Tests and CSS fixtures cover platform blocks, width breakpoints, and media rules nested in class rules. ChangesMedia Query Parsing
Priority: ➖ Normal Estimated code review effort: 2 (Simple) | ~10 minutes Change: Bug fix Suggested reviewers: Merge Risk: ⚪ Minimal · up to The media-query state correction is covered across the affected platform, breakpoint, and nested-rule cases. No actionable merge-blocking risk remains. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
The problem
Tailwind groups every utility of a variant into one shared media block — all
ios:utilities land in a single@media ios { ... }, allsm:utilities in one width block. The processor's media branch pushed the block's media queries ontodeclarationConfig, parsed the first child, then reset the config after every child. So only the first utility of a block kept the block's queries:android:utility past the first applied on iOS (and vice versa) — in T3 Code this shippedandroid:font-mono,android:px-4etc. into the iOS bundle unguarded;The added tests fail on main against the existing harness (real compile through
compileCSS, iOS test env):android-block-secondresolvespaddingTop: 8on iOS,wide-block-secondresolvespaddingTop: 5at width 390.The fix
Feed each sibling rule the block's media queries explicitly instead of relying on leftover state, and restore the outer config after the block rather than assigning a fresh one — so media rules nested inside a class rule (
@utilitybodies with@variant, nested breakpoints) keep writing into the enclosing class, exactly as before.Tests
tests/test.cssgains a two-utility@media iosblock, a two-utility@media androidblock, a two-utility width block, and a nested@mediainside a class rule;media-queries.test.tsasserts every utility of each block stays guarded. Native suite: 48 files / 178 tests pass (bun run test:native), web suite green,tsc --noEmit, oxlint, dprint clean.Discovered while auditing T3 Code's mobile styles; we currently ship this as a pnpm patch (pingdotgg/t3code#13172) and will drop it in favor of this once released.
Summary by CodeRabbit
Bug Fixes
Tests