Fix :active being outranked by :hover in a media query

[alexcarpenter]

Fixes #1788

Problem

Combining "@media (hover: hover)" with :active on the same property means :active never applies:

backgroundImage: {
  default: null,
  ':hover': {
    '@media (hover: hover)': 'linear-gradient(hoverRed, hoverRed)',
  },
  ':active': 'linear-gradient(pressedBlue, pressedBlue)',
},

This is the pattern documented in Combining conditions, so the expected result is that pressing wins over hovering.

The root cause is that StyleX gives at-rules specificity. In CSS they contribute none. Two mechanisms flow from that, and both favored the hover rule:

Specificity — the class name was repeated once per at-rule, so the hover rule was .x.x:hover (0,3,0) against .y:active (0,2,0). Specificity beats source order, so :active could not win regardless of insertion order.

Priority — @media scored 200 while :hover → :active was only 130 → 170, so at-rules outranked pseudo-classes in the flat sum and hover+media (3330) also sorted after active (3170).

Before:

@media (hover: hover){.xx3ymhj.xx3ymhj:hover{background-image:red}}  /* priority 3330 */
.x17yhl0n:active{background-image:blue}                              /* priority 3170 */

Divergence from native CSS

The same divergence shows up in a much simpler case. This plain CSS:

button {
  color: red;
  &:hover { color: green; }
  @media (prefers-color-scheme: dark) { color: blue; }
}

gives red, blue in dark mode, and green on hover in both modes, because button:hover (0,1,1) outranks the media query's button (0,0,1). Verified in Chrome.

The StyleX equivalent did not:

/* before */
.x1ehdwse:hover                  { color: green }   /* (0,2,0)  priority 3130 */
@media dark { .xm3rz9e.xm3rz9e   { color: blue  } } /* (0,2,0)  priority 3200  <- wins */

Hovering in dark mode stayed blue. The doubled class is StyleX manufacturing specificity that the cascade does not give at-rules.

Change

An at-rule now refines a state instead of outranking it.

• generate-css-rule.js — dropped the per-at-rule class repetition, so every rule for a property carries the same specificity and priority alone decides the winner. At-rule priorities are summed and divided by 1000, keeping them below the gap between adjacent pseudo-class ranks, so an at-rule only breaks ties between rules sharing a state.
• property-priorities.js — defineConsts at-rules arrive as var(--hash) placeholders and were falling through to the default property priority of 3000, which spans three pseudo-class ranks. They now rank as at-rules.

Resulting order:

default < default@media < :hover < :hover@media < :active < :active@media

After:

@media (hover: hover){.x59hbrb:hover{background-image:linear-gradient(hoverRed,hoverRed)}}
.x1w2s69n:active{background-image:linear-gradient(pressedBlue,pressedBlue)}

/* the simple case, now matching the browser */
.x1e2nbdu                { color: red   }   /* priority 3000   */
@media dark { .xm3rz9e   { color: blue  } } /* priority 3000.2 */
.x1ehdwse:hover          { color: green }   /* priority 3130   */

Equal specificity throughout, order decided by priority. Verified in both the @layer and :not(#\#) output paths.

Priorities stay in their existing range, so the Math.floor(priority / 1000) contract used for CSS layers (babel-plugin/src/index.js) and runtime specificity levels (stylex/src/inject.js) is unaffected.

Compatibility

Any cascade fix changes which rule wins, so this is worth calling out explicitly. Two surfaces:

Within StyleX — a bare at-rule no longer beats a pseudo-class. That is the divergence above, so the new result is the native one, but existing code that leaned on the old order will render differently.

Against non-StyleX CSS — rules containing an at-rule drop from (0,2,0) to (0,1,0). Hand-written CSS that previously lost to them at (0,1,0) may now win. This only affects rules with at-rules; everything else already emitted a single class.

Happy to gate this behind a flag if you'd prefer the staged rollout enableMediaQueryOrder got.

[vercel]

@alexcarpenter is attempting to deploy a commit to the Meta Open Source Team on Vercel.

A member of the Team first needs to authorize it.