[Bug]: min-width media queries are emitted largest-first, so narrower breakpoints override wider ones

[borskyj-symph]

Summary

Media query contexts are emitted largest-first in the built stylesheet. With equal specificity, source order decides the winner, so a min-width: 768px rule overrides a min-width: 1024px rule at every viewport above 1024px. Mobile-first CSS silently inverts.

The stored CSS reads back exactly as authored, so nothing looks wrong until the page renders.

Steps to reproduce

1. Apply two min-width breakpoint contexts to a single class, so specificity is equal by construction and source order is the only differentiator:

.probe { color: rgb(1,2,3); }
@media (min-width: 768px)  { .probe { color: rgb(10,11,12); } }
@media (min-width: 1024px) { .probe { color: rgb(13,14,15); } }

2. Read the rule back with site_read_styles, or inspect the built stylesheet:

.probe { color: rgb(1,2,3); }
@media (min-width: 1024px) { .probe { color: rgb(13,14,15); } }   /* emitted first */
@media (min-width: 768px)  { .probe { color: rgb(10,11,12); } }   /* wins above 1024px */

3. Render at 1440px.

Expected behavior

At 1440px the element is rgb(13,14,15). Both queries match, and under standard mobile-first ordering the narrower min-width: 768px rule should be overridden by the min-width: 1024px one.

Actual behavior

At 1440px the element is rgb(10,11,12). The 768px block is emitted last and wins the tie.

Any responsive rule authored across two min-width breakpoints behaves backwards. The workaround in use here is to author every desktop override at the smallest desktop breakpoint and never use a larger one to correct it — which gives up multi-step responsive design entirely.

The fix is to sort emitted contexts at build time: min-width ascending, max-width descending. That is the conventional ordering and matches what any mobile-first author will assume.

Version or commit

Live hosted workspace, 30–31 Aug 2026. Workspace version not recorded; latest tag at the time of writing is v0.0.17.

Deployment mode

Hosted

Logs or screenshots

n/a — reproducible from the built stylesheet alone, no rendering needed to see the emission order.