diff --git a/packages/@stylexjs/babel-plugin/__tests__/legacy/stylex-transform-call-test.js b/packages/@stylexjs/babel-plugin/__tests__/legacy/stylex-transform-call-test.js
index eaed35053..f7155b1f5 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/legacy/stylex-transform-call-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/legacy/stylex-transform-call-test.js
@@ -688,12 +688,12 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 3000
         });
         _inject2({
-          ltr: "@media (min-width: 1000px){.xc445zv.xc445zv{background-color:blue}}",
-          priority: 3200
+          ltr: "@media (min-width: 1000px){.xc445zv{background-color:blue}}",
+          priority: 3000.2
         });
         _inject2({
-          ltr: "@media (min-width: 2000px){.x1ssfqz5.x1ssfqz5{background-color:purple}}",
-          priority: 3200
+          ltr: "@media (min-width: 2000px){.x1ssfqz5{background-color:purple}}",
+          priority: 3000.2
         });
         "xrkmrrc xc445zv x1ssfqz5";"
       `);
@@ -723,12 +723,12 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 3000
         });
         _inject2({
-          ltr: "@media (min-width: 1000px) and (max-width: 1999.99px){.xw6up8c.xw6up8c{background-color:blue}}",
-          priority: 3200
+          ltr: "@media (min-width: 1000px) and (max-width: 1999.99px){.xw6up8c{background-color:blue}}",
+          priority: 3000.2
         });
         _inject2({
-          ltr: "@media (min-width: 2000px){.x1ssfqz5.x1ssfqz5{background-color:purple}}",
-          priority: 3200
+          ltr: "@media (min-width: 2000px){.x1ssfqz5{background-color:purple}}",
+          priority: 3000.2
         });
         "xrkmrrc xw6up8c x1ssfqz5";"
       `);
@@ -760,12 +760,12 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 3000
         });
         _inject2({
-          ltr: "@supports (hover: hover){.x6m3b6q.x6m3b6q{background-color:blue}}",
-          priority: 3030
+          ltr: "@supports (hover: hover){.x6m3b6q{background-color:blue}}",
+          priority: 3000.03
         });
         _inject2({
-          ltr: "@supports not (hover: hover){.x6um648.x6um648{background-color:purple}}",
-          priority: 3030
+          ltr: "@supports not (hover: hover){.x6um648{background-color:purple}}",
+          priority: 3000.03
         });
         "xrkmrrc x6m3b6q x6um648";"
       `);
@@ -795,12 +795,12 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 3000
         });
         _inject2({
-          ltr: "@supports (hover: hover){.x6m3b6q.x6m3b6q{background-color:blue}}",
-          priority: 3030
+          ltr: "@supports (hover: hover){.x6m3b6q{background-color:blue}}",
+          priority: 3000.03
         });
         _inject2({
-          ltr: "@supports not (hover: hover){.x6um648.x6um648{background-color:purple}}",
-          priority: 3030
+          ltr: "@supports not (hover: hover){.x6um648{background-color:purple}}",
+          priority: 3000.03
         });
         "xrkmrrc x6m3b6q x6um648";"
       `);
@@ -1496,8 +1496,8 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 3130
         });
         _inject2({
-          ltr: "@media (min-width: 1000px){.xc445zv.xc445zv{background-color:blue}}",
-          priority: 3200
+          ltr: "@media (min-width: 1000px){.xc445zv{background-color:blue}}",
+          priority: 3000.2
         });
         export const styles = {
           default: {
@@ -1535,8 +1535,8 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 3130
         });
         _inject2({
-          ltr: "@media (min-width: 1000px){.xc445zv.xc445zv{background-color:blue}}",
-          priority: 3200
+          ltr: "@media (min-width: 1000px){.xc445zv{background-color:blue}}",
+          priority: 3000.2
         });
         export const styles = {
           default: {
@@ -1745,8 +1745,8 @@ describe('@stylexjs/babel-plugin', () => {
             priority: 3130
           });
           _inject2({
-            ltr: "@media (min-width: 1000px){.xc445zv.xc445zv{background-color:blue}}",
-            priority: 3200
+            ltr: "@media (min-width: 1000px){.xc445zv{background-color:blue}}",
+            priority: 3000.2
           });
           export const styles = {
             default: {
@@ -1922,16 +1922,16 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 2000
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateRows-xmr4b4k.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}",
-          priority: 3200
+          ltr: "@media (max-width: 640px){.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}",
+          priority: 3000.2
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateAreas-xesbpuc.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}",
-          priority: 2200
+          ltr: "@media (max-width: 640px){.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}",
+          priority: 2000.2
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateColumns-x15nfgh4.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}",
-          priority: 3200
+          ltr: "@media (max-width: 640px){.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}",
+          priority: 3000.2
         });
         _inject2({
           ltr: ".gridTemplateColumns-x1mkdm3x{grid-template-columns:minmax(0,1fr)}",
@@ -2023,16 +2023,16 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 2000
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateRows-xmr4b4k.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}",
-          priority: 3200
+          ltr: "@media (max-width: 640px){.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}",
+          priority: 3000.2
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateAreas-xesbpuc.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}",
-          priority: 2200
+          ltr: "@media (max-width: 640px){.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}",
+          priority: 2000.2
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateColumns-x15nfgh4.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}",
-          priority: 3200
+          ltr: "@media (max-width: 640px){.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}",
+          priority: 3000.2
         });
         _inject2({
           ltr: ".gridTemplateColumns-x1mkdm3x{grid-template-columns:minmax(0,1fr)}",
@@ -2168,16 +2168,16 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 2000
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateRows-xmr4b4k.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}",
-          priority: 3200
+          ltr: "@media (max-width: 640px){.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}",
+          priority: 3000.2
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateAreas-xesbpuc.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}",
-          priority: 2200
+          ltr: "@media (max-width: 640px){.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}",
+          priority: 2000.2
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateColumns-x15nfgh4.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}",
-          priority: 3200
+          ltr: "@media (max-width: 640px){.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}",
+          priority: 3000.2
         });
         _inject2({
           ltr: ".gridTemplateColumns-x1mkdm3x{grid-template-columns:minmax(0,1fr)}",
@@ -2311,16 +2311,16 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 2000
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateRows-xmr4b4k.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}",
-          priority: 3200
+          ltr: "@media (max-width: 640px){.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}",
+          priority: 3000.2
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateAreas-xesbpuc.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}",
-          priority: 2200
+          ltr: "@media (max-width: 640px){.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}",
+          priority: 2000.2
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateColumns-x15nfgh4.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}",
-          priority: 3200
+          ltr: "@media (max-width: 640px){.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}",
+          priority: 3000.2
         });
         _inject2({
           ltr: ".gridTemplateColumns-x1mkdm3x{grid-template-columns:minmax(0,1fr)}",
diff --git a/packages/@stylexjs/babel-plugin/__tests__/transform-import-export-test.js b/packages/@stylexjs/babel-plugin/__tests__/transform-import-export-test.js
index dd0db41d0..2c18fa7d6 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/transform-import-export-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/transform-import-export-test.js
@@ -312,10 +312,10 @@ describe('@stylexjs/babel-plugin', () => {
             [
               "x14693no",
               {
-                "ltr": "@media (min-width: 768px){.x14693no.x14693no{color:blue}}",
+                "ltr": "@media (min-width: 768px){.x14693no{color:blue}}",
                 "rtl": null,
               },
-              3200,
+              3000.2,
             ],
             [
               "x15oojuh",
diff --git a/packages/@stylexjs/babel-plugin/__tests__/transform-process-test.js b/packages/@stylexjs/babel-plugin/__tests__/transform-process-test.js
index 58c30ac1f..a979fd2f6 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/transform-process-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/transform-process-test.js
@@ -266,8 +266,8 @@ describe('@stylexjs/babel-plugin', () => {
         .margin-xymmreb:not(#\\#){margin:10px 20px}
         .padding-xss17vw:not(#\\#){padding:var(--large-x1ec7iuc)}
         .borderColor-x1bg2uv5:not(#\\#):not(#\\#){border-color:green}
-        @media (max-width: 1000px){.borderColor-x5ugf7c.borderColor-x5ugf7c:not(#\\#):not(#\\#){border-color:var(--blue-xpqh4lw)}}
-        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys.borderColor-xqiy1ys.borderColor-xqiy1ys:not(#\\#):not(#\\#){border-color:yellow}}}
+        @media (max-width: 1000px){.borderColor-x5ugf7c:not(#\\#):not(#\\#){border-color:var(--blue-xpqh4lw)}}
+        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys:not(#\\#):not(#\\#){border-color:yellow}}}
         .animationName-x13ah0pd:not(#\\#):not(#\\#):not(#\\#){animation-name:x35atj5-B}
         .backgroundColor-xrkmrrc:not(#\\#):not(#\\#):not(#\\#){background-color:red}
         .color-x14rh7hd:not(#\\#):not(#\\#):not(#\\#){color:var(--x-color)}
@@ -275,12 +275,12 @@ describe('@stylexjs/babel-plugin', () => {
         html[dir='rtl'] .float-x1kmio9f:not(#\\#):not(#\\#):not(#\\#){float:right}
         .outlineColor-x184ctg8:not(#\\#):not(#\\#):not(#\\#){outline-color:var(--colorTokens-xkxfyv)}
         .textShadow-x1skrh0i:not(#\\#):not(#\\#):not(#\\#){text-shadow:1px 2px 3px 4px red}
+        @media (max-width: 1000px){.backgroundColor-xahc4vn:not(#\\#):not(#\\#):not(#\\#){background-color:yellow}}
+        @media (min-width: 320px){.textShadow-xtj17id:not(#\\#):not(#\\#):not(#\\#){text-shadow:10px 20px 30px 40px green}}
         .backgroundColor-xfy810d.backgroundColor-xfy810d:where(.x-default-marker:focus *):not(#\\#):not(#\\#):not(#\\#){background-color:green}
-        .backgroundColor-xbrh7vm:hover:not(#\\#):not(#\\#):not(#\\#){background-color:blue}
-        @media (max-width: 1000px){.backgroundColor-xahc4vn.backgroundColor-xahc4vn:not(#\\#):not(#\\#):not(#\\#){background-color:yellow}}
-        @media (min-width: 320px){.textShadow-xtj17id.textShadow-xtj17id:not(#\\#):not(#\\#):not(#\\#){text-shadow:10px 20px 30px 40px green}}
-        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)):not(#\\#):not(#\\#):not(#\\#){background-color:purple}}
-        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)):not(#\\#):not(#\\#):not(#\\#){background-color:orange}}"
+        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)):not(#\\#):not(#\\#):not(#\\#){background-color:purple}}
+        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)):not(#\\#):not(#\\#):not(#\\#){background-color:orange}}
+        .backgroundColor-xbrh7vm:hover:not(#\\#):not(#\\#):not(#\\#){background-color:blue}"
       `);
     });
 
@@ -364,8 +364,8 @@ describe('@stylexjs/babel-plugin', () => {
         }
         @layer priority3{
         .borderColor-x1bg2uv5{border-color:green}
-        @media (max-width: 1000px){.borderColor-x5ugf7c.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
-        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys.borderColor-xqiy1ys.borderColor-xqiy1ys{border-color:yellow}}}
+        @media (max-width: 1000px){.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
+        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys{border-color:yellow}}}
         }
         @layer priority4{
         .animationName-x13ah0pd{animation-name:x35atj5-B}
@@ -375,12 +375,12 @@ describe('@stylexjs/babel-plugin', () => {
         html[dir='rtl'] .float-x1kmio9f{float:right}
         .outlineColor-x184ctg8{outline-color:var(--colorTokens-xkxfyv)}
         .textShadow-x1skrh0i{text-shadow:1px 2px 3px 4px red}
+        @media (max-width: 1000px){.backgroundColor-xahc4vn{background-color:yellow}}
+        @media (min-width: 320px){.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
         .backgroundColor-xfy810d.backgroundColor-xfy810d:where(.x-default-marker:focus *){background-color:green}
+        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
+        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
         .backgroundColor-xbrh7vm:hover{background-color:blue}
-        @media (max-width: 1000px){.backgroundColor-xahc4vn.backgroundColor-xahc4vn{background-color:yellow}}
-        @media (min-width: 320px){.textShadow-xtj17id.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
-        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
-        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
         }"
       `);
     });
@@ -413,8 +413,8 @@ describe('@stylexjs/babel-plugin', () => {
         }
         @layer priority3{
         .borderColor-x1bg2uv5{border-color:green}
-        @media (max-width: 1000px){.borderColor-x5ugf7c.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
-        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys.borderColor-xqiy1ys.borderColor-xqiy1ys{border-color:yellow}}}
+        @media (max-width: 1000px){.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
+        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys{border-color:yellow}}}
         }
         @layer priority4{
         .animationName-x13ah0pd{animation-name:x35atj5-B}
@@ -424,12 +424,12 @@ describe('@stylexjs/babel-plugin', () => {
         html[dir='rtl'] .float-x1kmio9f{float:right}
         .outlineColor-x184ctg8{outline-color:var(--colorTokens-xkxfyv)}
         .textShadow-x1skrh0i{text-shadow:1px 2px 3px 4px red}
+        @media (max-width: 1000px){.backgroundColor-xahc4vn{background-color:yellow}}
+        @media (min-width: 320px){.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
         .backgroundColor-xfy810d.backgroundColor-xfy810d:where(.x-default-marker:focus *){background-color:green}
+        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
+        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
         .backgroundColor-xbrh7vm:hover{background-color:blue}
-        @media (max-width: 1000px){.backgroundColor-xahc4vn.backgroundColor-xahc4vn{background-color:yellow}}
-        @media (min-width: 320px){.textShadow-xtj17id.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
-        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
-        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
         }"
       `);
     });
@@ -462,8 +462,8 @@ describe('@stylexjs/babel-plugin', () => {
         }
         @layer priority3{
         .borderColor-x1bg2uv5{border-color:green}
-        @media (max-width: 1000px){.borderColor-x5ugf7c.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
-        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys.borderColor-xqiy1ys.borderColor-xqiy1ys{border-color:yellow}}}
+        @media (max-width: 1000px){.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
+        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys{border-color:yellow}}}
         }
         @layer priority4{
         .animationName-x13ah0pd{animation-name:x35atj5-B}
@@ -473,12 +473,12 @@ describe('@stylexjs/babel-plugin', () => {
         html[dir='rtl'] .float-x1kmio9f{float:right}
         .outlineColor-x184ctg8{outline-color:var(--colorTokens-xkxfyv)}
         .textShadow-x1skrh0i{text-shadow:1px 2px 3px 4px red}
+        @media (max-width: 1000px){.backgroundColor-xahc4vn{background-color:yellow}}
+        @media (min-width: 320px){.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
         .backgroundColor-xfy810d.backgroundColor-xfy810d:where(.x-default-marker:focus *){background-color:green}
+        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
+        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
         .backgroundColor-xbrh7vm:hover{background-color:blue}
-        @media (max-width: 1000px){.backgroundColor-xahc4vn.backgroundColor-xahc4vn{background-color:yellow}}
-        @media (min-width: 320px){.textShadow-xtj17id.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
-        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
-        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
         }"
       `);
     });
@@ -512,8 +512,8 @@ describe('@stylexjs/babel-plugin', () => {
         }
         @layer priority3{
         .borderColor-x1bg2uv5{border-color:green}
-        @media (max-width: 1000px){.borderColor-x5ugf7c.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
-        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys.borderColor-xqiy1ys.borderColor-xqiy1ys{border-color:yellow}}}
+        @media (max-width: 1000px){.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
+        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys{border-color:yellow}}}
         }
         @layer priority4{
         .animationName-x13ah0pd{animation-name:x35atj5-B}
@@ -523,12 +523,12 @@ describe('@stylexjs/babel-plugin', () => {
         html[dir='rtl'] .float-x1kmio9f{float:right}
         .outlineColor-x184ctg8{outline-color:var(--colorTokens-xkxfyv)}
         .textShadow-x1skrh0i{text-shadow:1px 2px 3px 4px red}
+        @media (max-width: 1000px){.backgroundColor-xahc4vn{background-color:yellow}}
+        @media (min-width: 320px){.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
         .backgroundColor-xfy810d.backgroundColor-xfy810d:where(.x-default-marker:focus *){background-color:green}
+        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
+        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
         .backgroundColor-xbrh7vm:hover{background-color:blue}
-        @media (max-width: 1000px){.backgroundColor-xahc4vn.backgroundColor-xahc4vn{background-color:yellow}}
-        @media (min-width: 320px){.textShadow-xtj17id.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
-        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
-        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
         }"
       `);
     });
@@ -561,8 +561,8 @@ describe('@stylexjs/babel-plugin', () => {
         }
         @layer stylex.priority3{
         .borderColor-x1bg2uv5{border-color:green}
-        @media (max-width: 1000px){.borderColor-x5ugf7c.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
-        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys.borderColor-xqiy1ys.borderColor-xqiy1ys{border-color:yellow}}}
+        @media (max-width: 1000px){.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
+        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys{border-color:yellow}}}
         }
         @layer stylex.priority4{
         .animationName-x13ah0pd{animation-name:x35atj5-B}
@@ -572,12 +572,12 @@ describe('@stylexjs/babel-plugin', () => {
         html[dir='rtl'] .float-x1kmio9f{float:right}
         .outlineColor-x184ctg8{outline-color:var(--colorTokens-xkxfyv)}
         .textShadow-x1skrh0i{text-shadow:1px 2px 3px 4px red}
+        @media (max-width: 1000px){.backgroundColor-xahc4vn{background-color:yellow}}
+        @media (min-width: 320px){.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
         .backgroundColor-xfy810d.backgroundColor-xfy810d:where(.x-default-marker:focus *){background-color:green}
+        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
+        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
         .backgroundColor-xbrh7vm:hover{background-color:blue}
-        @media (max-width: 1000px){.backgroundColor-xahc4vn.backgroundColor-xahc4vn{background-color:yellow}}
-        @media (min-width: 320px){.textShadow-xtj17id.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
-        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
-        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
         }"
       `);
     });
@@ -612,8 +612,8 @@ describe('@stylexjs/babel-plugin', () => {
         }
         @layer stylex.priority3{
         .borderColor-x1bg2uv5{border-color:green}
-        @media (max-width: 1000px){.borderColor-x5ugf7c.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
-        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys.borderColor-xqiy1ys.borderColor-xqiy1ys{border-color:yellow}}}
+        @media (max-width: 1000px){.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
+        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys{border-color:yellow}}}
         }
         @layer stylex.priority4{
         .animationName-x13ah0pd{animation-name:x35atj5-B}
@@ -623,12 +623,12 @@ describe('@stylexjs/babel-plugin', () => {
         html[dir='rtl'] .float-x1kmio9f{float:right}
         .outlineColor-x184ctg8{outline-color:var(--colorTokens-xkxfyv)}
         .textShadow-x1skrh0i{text-shadow:1px 2px 3px 4px red}
+        @media (max-width: 1000px){.backgroundColor-xahc4vn{background-color:yellow}}
+        @media (min-width: 320px){.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
         .backgroundColor-xfy810d.backgroundColor-xfy810d:where(.x-default-marker:focus *){background-color:green}
+        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
+        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
         .backgroundColor-xbrh7vm:hover{background-color:blue}
-        @media (max-width: 1000px){.backgroundColor-xahc4vn.backgroundColor-xahc4vn{background-color:yellow}}
-        @media (min-width: 320px){.textShadow-xtj17id.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
-        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
-        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
         }"
       `);
     });
@@ -663,8 +663,8 @@ describe('@stylexjs/babel-plugin', () => {
         }
         @layer xds.base.priority3{
         .borderColor-x1bg2uv5{border-color:green}
-        @media (max-width: 1000px){.borderColor-x5ugf7c.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
-        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys.borderColor-xqiy1ys.borderColor-xqiy1ys{border-color:yellow}}}
+        @media (max-width: 1000px){.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
+        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys{border-color:yellow}}}
         }
         @layer xds.base.priority4{
         .animationName-x13ah0pd{animation-name:x35atj5-B}
@@ -674,12 +674,12 @@ describe('@stylexjs/babel-plugin', () => {
         html[dir='rtl'] .float-x1kmio9f{float:right}
         .outlineColor-x184ctg8{outline-color:var(--colorTokens-xkxfyv)}
         .textShadow-x1skrh0i{text-shadow:1px 2px 3px 4px red}
+        @media (max-width: 1000px){.backgroundColor-xahc4vn{background-color:yellow}}
+        @media (min-width: 320px){.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
         .backgroundColor-xfy810d.backgroundColor-xfy810d:where(.x-default-marker:focus *){background-color:green}
+        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
+        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
         .backgroundColor-xbrh7vm:hover{background-color:blue}
-        @media (max-width: 1000px){.backgroundColor-xahc4vn.backgroundColor-xahc4vn{background-color:yellow}}
-        @media (min-width: 320px){.textShadow-xtj17id.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
-        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
-        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
         }"
       `);
     });
@@ -713,8 +713,8 @@ describe('@stylexjs/babel-plugin', () => {
         }
         @layer priority3{
         .borderColor-x1bg2uv5{border-color:green}
-        @media (max-width: 1000px){.borderColor-x5ugf7c.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
-        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys.borderColor-xqiy1ys.borderColor-xqiy1ys{border-color:yellow}}}
+        @media (max-width: 1000px){.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
+        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys{border-color:yellow}}}
         }
         @layer priority4{
         .animationName-x13ah0pd{animation-name:x35atj5-B}
@@ -724,12 +724,12 @@ describe('@stylexjs/babel-plugin', () => {
         html[dir='rtl'] .float-x1kmio9f{float:right}
         .outlineColor-x184ctg8{outline-color:var(--colorTokens-xkxfyv)}
         .textShadow-x1skrh0i{text-shadow:1px 2px 3px 4px red}
+        @media (max-width: 1000px){.backgroundColor-xahc4vn{background-color:yellow}}
+        @media (min-width: 320px){.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
         .backgroundColor-xfy810d.backgroundColor-xfy810d:where(.x-default-marker:focus *){background-color:green}
+        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
+        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
         .backgroundColor-xbrh7vm:hover{background-color:blue}
-        @media (max-width: 1000px){.backgroundColor-xahc4vn.backgroundColor-xahc4vn{background-color:yellow}}
-        @media (min-width: 320px){.textShadow-xtj17id.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
-        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
-        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
         }"
       `);
     });
@@ -808,8 +808,8 @@ describe('@stylexjs/babel-plugin', () => {
         .margin-xymmreb{margin:10px 20px}
         .padding-xss17vw{padding:var(--large-x1ec7iuc)}
         .borderColor-x1bg2uv5{border-color:green}
-        @media (max-width: 1000px){.borderColor-x5ugf7c.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
-        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys.borderColor-xqiy1ys.borderColor-xqiy1ys{border-color:yellow}}}
+        @media (max-width: 1000px){.borderColor-x5ugf7c{border-color:var(--blue-xpqh4lw)}}
+        @media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys{border-color:yellow}}}
         .animationName-x13ah0pd{animation-name:x35atj5-B}
         .backgroundColor-xrkmrrc{background-color:red}
         .color-x14rh7hd{color:var(--x-color)}
@@ -817,12 +817,12 @@ describe('@stylexjs/babel-plugin', () => {
         html[dir='rtl'] .float-x1kmio9f{float:right}
         .outlineColor-x184ctg8{outline-color:var(--colorTokens-xkxfyv)}
         .textShadow-x1skrh0i{text-shadow:1px 2px 3px 4px red}
+        @media (max-width: 1000px){.backgroundColor-xahc4vn{background-color:yellow}}
+        @media (min-width: 320px){.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
         .backgroundColor-xfy810d.backgroundColor-xfy810d:where(.x-default-marker:focus *){background-color:green}
-        .backgroundColor-xbrh7vm:hover{background-color:blue}
-        @media (max-width: 1000px){.backgroundColor-xahc4vn.backgroundColor-xahc4vn{background-color:yellow}}
-        @media (min-width: 320px){.textShadow-xtj17id.textShadow-xtj17id{text-shadow:10px 20px 30px 40px green}}
-        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
-        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}"
+        @media (max-width: 1000px){.backgroundColor-x1t4kl4c.backgroundColor-x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
+        @media (max-width: 1000px){.backgroundColor-x975j7z.backgroundColor-x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
+        .backgroundColor-xbrh7vm:hover{background-color:blue}"
       `);
     });
 
@@ -1003,8 +1003,8 @@ describe('@stylexjs/babel-plugin', () => {
         .xymmreb{margin:10px 20px}
         .x1s2izit{padding:var(--x1ec7iuc)}
         .x1bg2uv5{border-color:green}
-        @media (max-width: 1000px){.xio2edn.xio2edn{border-color:var(--xpqh4lw)}}
-        @media (max-width: 500px){@media (max-width: 1000px){.xqiy1ys.xqiy1ys.xqiy1ys{border-color:yellow}}}
+        @media (max-width: 1000px){.xio2edn{border-color:var(--xpqh4lw)}}
+        @media (max-width: 500px){@media (max-width: 1000px){.xqiy1ys{border-color:yellow}}}
         .x13ah0pd{animation-name:x35atj5-B}
         .xrkmrrc{background-color:red}
         .x14rh7hd{color:var(--x-color)}
@@ -1012,12 +1012,12 @@ describe('@stylexjs/babel-plugin', () => {
         /* @rtl begin */.x1kmio9f{float:right}/* @rtl end */
         .x18abd1y{outline-color:var(--xkxfyv)}
         .x1skrh0i{text-shadow:1px 2px 3px 4px red}
+        @media (max-width: 1000px){.xahc4vn{background-color:yellow}}
+        @media (min-width: 320px){.xtj17id{text-shadow:10px 20px 30px 40px green}}
         .xfy810d.xfy810d:where(.x-default-marker:focus *){background-color:green}
-        .xbrh7vm:hover{background-color:blue}
-        @media (max-width: 1000px){.xahc4vn.xahc4vn{background-color:yellow}}
-        @media (min-width: 320px){.xtj17id.xtj17id{text-shadow:10px 20px 30px 40px green}}
-        @media (max-width: 1000px){.x1t4kl4c.x1t4kl4c.x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
-        @media (max-width: 1000px){.x975j7z.x975j7z.x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}"
+        @media (max-width: 1000px){.x1t4kl4c.x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
+        @media (max-width: 1000px){.x975j7z.x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
+        .xbrh7vm:hover{background-color:blue}"
       `);
     });
 
@@ -1047,8 +1047,8 @@ describe('@stylexjs/babel-plugin', () => {
         .x1s2izit{padding:var(--x1ec7iuc)}
         .xymmreb{margin:10px 20px}
         .x1bg2uv5{border-color:green}
-        @media (max-width: 1000px){.xio2edn.xio2edn{border-color:var(--xpqh4lw)}}
-        @media (max-width: 500px){@media (max-width: 1000px){.xqiy1ys.xqiy1ys.xqiy1ys{border-color:yellow}}}
+        @media (max-width: 1000px){.xio2edn{border-color:var(--xpqh4lw)}}
+        @media (max-width: 500px){@media (max-width: 1000px){.xqiy1ys{border-color:yellow}}}
         .x13ah0pd{animation-name:x35atj5-B}
         .x14rh7hd{color:var(--x-color)}
         .x18abd1y{outline-color:var(--xkxfyv)}
@@ -1056,12 +1056,12 @@ describe('@stylexjs/babel-plugin', () => {
         /* @rtl begin */.x1kmio9f{float:right}/* @rtl end */
         .x1skrh0i{text-shadow:1px 2px 3px 4px red}
         .xrkmrrc{background-color:red}
+        @media (max-width: 1000px){.xahc4vn{background-color:yellow}}
+        @media (min-width: 320px){.xtj17id{text-shadow:10px 20px 30px 40px green}}
         .xfy810d.xfy810d:where(.x-default-marker:focus *){background-color:green}
-        .xbrh7vm:hover{background-color:blue}
-        @media (max-width: 1000px){.xahc4vn.xahc4vn{background-color:yellow}}
-        @media (min-width: 320px){.xtj17id.xtj17id{text-shadow:10px 20px 30px 40px green}}
-        @media (max-width: 1000px){.x1t4kl4c.x1t4kl4c.x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
-        @media (max-width: 1000px){.x975j7z.x975j7z.x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}"
+        @media (max-width: 1000px){.x1t4kl4c.x1t4kl4c:where(:has(.x-default-marker:focus)){background-color:purple}}
+        @media (max-width: 1000px){.x975j7z.x975j7z:where(.x-default-marker:active ~ *, :has(~ .x-default-marker:active)){background-color:orange}}
+        .xbrh7vm:hover{background-color:blue}"
       `);
     });
 
diff --git a/packages/@stylexjs/babel-plugin/__tests__/transform-style-precedence-test.js b/packages/@stylexjs/babel-plugin/__tests__/transform-style-precedence-test.js
new file mode 100644
index 000000000..17e4943ce
--- /dev/null
+++ b/packages/@stylexjs/babel-plugin/__tests__/transform-style-precedence-test.js
@@ -0,0 +1,212 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+jest.autoMockOff();
+
+import path from 'path';
+import { transformSync } from '@babel/core';
+import stylexPlugin from '../src/index';
+
+function getRules(styles) {
+  return rulesFrom(
+    `
+      import * as stylex from '@stylexjs/stylex';
+      const styles = stylex.create({ root: ${styles} });
+    `,
+  );
+}
+
+// Media queries declared with `defineConsts` reach the rule as `var(--hash)`
+// placeholders rather than as `@media` keys.
+function getRulesWithConsts(styles) {
+  return rulesFrom(
+    `
+      import * as stylex from '@stylexjs/stylex';
+      import { breakpoints } from './constants.stylex';
+      const styles = stylex.create({ root: ${styles} });
+    `,
+    {
+      filename: path.join(__dirname, '__fixtures__/main.stylex.js'),
+      unstable_moduleResolution: {
+        rootDir: path.join(__dirname, '__fixtures__'),
+        type: 'commonJS',
+      },
+    },
+  );
+}
+
+function rulesFrom(source, { filename, ...opts } = {}) {
+  const { metadata } = transformSync(source, {
+    filename,
+    parserOpts: { flow: 'all' },
+    babelrc: false,
+    plugins: [[stylexPlugin, opts]],
+  });
+
+  return metadata.stylex.map(([className, { ltr }, priority]) => ({
+    className,
+    ltr,
+    priority,
+    selector: selectorOf(ltr),
+  }));
+}
+
+// The innermost selector, unwrapping any at-rules it is nested in.
+function selectorOf(ltr) {
+  const match = /(?:^|\{)([^{}]+)\{[^{}]*\}\}*$/.exec(ltr);
+  if (match == null) {
+    throw new Error(`Could not find a selector in: ${ltr}`);
+  }
+  return match[1];
+}
+
+// Class-level specificity. Every generated selector is a chain of classes and
+// pseudo-classes, both of which count for the same specificity slot.
+function specificity(selector) {
+  const classes = selector.match(/\.[\w-]+/g) ?? [];
+  const pseudoClasses = selector.match(/(?<!:):[\w-]+/g) ?? [];
+  return classes.length + pseudoClasses.length;
+}
+
+// The rule the browser would apply: higher specificity wins, and rules of equal
+// specificity are decided by insertion order, which follows `priority`.
+function cascadeWinner(a, b) {
+  if (specificity(a.selector) !== specificity(b.selector)) {
+    return specificity(a.selector) > specificity(b.selector) ? a : b;
+  }
+  return a.priority > b.priority ? a : b;
+}
+
+function wins(winner, loser) {
+  expect(cascadeWinner(winner, loser).ltr).toBe(winner.ltr);
+}
+
+function ruleMatching(rules, substring) {
+  const found = rules.filter((rule) => rule.ltr.includes(substring));
+  if (found.length !== 1) {
+    throw new Error(
+      `Expected exactly one rule matching "${substring}", got ${found.length}`,
+    );
+  }
+  return found[0];
+}
+
+describe('@stylexjs/babel-plugin', () => {
+  describe('[transform] conditional style precedence', () => {
+    test(':active wins over :hover nested in a media query', () => {
+      const rules = getRules(`{
+        backgroundImage: {
+          default: null,
+          ':hover': {
+            '@media (hover: hover)': 'red',
+          },
+          ':active': 'blue',
+        },
+      }`);
+
+      wins(ruleMatching(rules, ':active'), ruleMatching(rules, ':hover'));
+    });
+
+    test('pseudo-class state outranks at-rules', () => {
+      const rules = getRules(`{
+        color: {
+          default: 'black',
+          '@media (min-width: 800px)': 'grey',
+          ':hover': {
+            default: 'blue',
+            '@media (min-width: 800px)': 'navy',
+          },
+          ':active': {
+            default: 'red',
+            '@media (min-width: 800px)': 'maroon',
+          },
+        },
+      }`);
+
+      const ordered = [
+        ruleMatching(rules, 'color:black'),
+        ruleMatching(rules, 'color:grey'),
+        ruleMatching(rules, 'color:blue'),
+        ruleMatching(rules, 'color:navy'),
+        ruleMatching(rules, 'color:red'),
+        ruleMatching(rules, 'color:maroon'),
+      ];
+
+      for (let i = 1; i < ordered.length; i++) {
+        wins(ordered[i], ordered[i - 1]);
+      }
+    });
+
+    test('at-rules break ties within a single state', () => {
+      const rules = getRules(`{
+        color: {
+          default: 'black',
+          '@supports (color: red)': 'grey',
+          '@media (min-width: 800px)': 'blue',
+          '@container (min-width: 800px)': 'red',
+        },
+      }`);
+
+      const ordered = [
+        ruleMatching(rules, 'color:black'),
+        ruleMatching(rules, 'color:grey'),
+        ruleMatching(rules, 'color:blue'),
+        ruleMatching(rules, 'color:red'),
+      ];
+
+      for (let i = 1; i < ordered.length; i++) {
+        wins(ordered[i], ordered[i - 1]);
+      }
+    });
+
+    test(':active wins over :hover nested in a media query constant', () => {
+      const rules = getRulesWithConsts(`{
+        backgroundImage: {
+          default: null,
+          ':hover': {
+            [breakpoints.small]: 'red',
+          },
+          ':active': 'blue',
+        },
+      }`);
+
+      wins(ruleMatching(rules, ':active'), ruleMatching(rules, ':hover'));
+    });
+
+    test('a media query constant cannot outrank a higher pseudo-class', () => {
+      const rules = getRulesWithConsts(`{
+        color: {
+          ':checked': {
+            [breakpoints.small]: 'red',
+          },
+          ':valid': 'blue',
+        },
+      }`);
+
+      wins(ruleMatching(rules, 'color:blue'), ruleMatching(rules, 'color:red'));
+    });
+
+    test('nested at-rules win over the states they refine', () => {
+      const rules = getRules(`{
+        color: {
+          default: 'black',
+          '@media (min-width: 800px)': {
+            default: 'blue',
+            '@supports (color: red)': 'navy',
+          },
+        },
+      }`);
+
+      wins(
+        ruleMatching(rules, 'color:navy'),
+        ruleMatching(rules, 'color:blue'),
+      );
+    });
+  });
+});
diff --git a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-create-test.js b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-create-test.js
index 5879276c6..ba56c781b 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-create-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-create-test.js
@@ -2461,26 +2461,26 @@ describe('@stylexjs/babel-plugin', () => {
                 [
                   "xdm03ys",
                   {
-                    "ltr": "@media (min-width: 500.01px) and (max-width: 900px){.xdm03ys.xdm03ys{background-color:blue}}",
+                    "ltr": "@media (min-width: 500.01px) and (max-width: 900px){.xdm03ys{background-color:blue}}",
                     "rtl": null,
                   },
-                  3200,
+                  3000.2,
                 ],
                 [
                   "xb3e2qq",
                   {
-                    "ltr": "@media (min-width: 400.01px) and (max-width: 500px){.xb3e2qq.xb3e2qq{background-color:purple}}",
+                    "ltr": "@media (min-width: 400.01px) and (max-width: 500px){.xb3e2qq{background-color:purple}}",
                     "rtl": null,
                   },
-                  3200,
+                  3000.2,
                 ],
                 [
                   "x856a2w",
                   {
-                    "ltr": "@media (max-width: 400px){.x856a2w.x856a2w{background-color:green}}",
+                    "ltr": "@media (max-width: 400px){.x856a2w{background-color:green}}",
                     "rtl": null,
                   },
-                  3200,
+                  3000.2,
                 ],
               ],
             }
@@ -2527,26 +2527,26 @@ describe('@stylexjs/babel-plugin', () => {
                 [
                   "x1qc147k",
                   {
-                    "ltr": "@media (((screen) and (max-width: 900px) and (not (screen)) and (not (screen))) or ((screen) and (max-width: 900px) and (not (screen)) and (not (max-width: 400px)))) or (((screen) and (max-width: 900px) and (not (max-width: 500px)) and (not (screen))) or ((screen) and (max-width: 900px) and (not (max-width: 500px)) and (not (max-width: 400px)))){.x1qc147k.x1qc147k{background-color:blue}}",
+                    "ltr": "@media (((screen) and (max-width: 900px) and (not (screen)) and (not (screen))) or ((screen) and (max-width: 900px) and (not (screen)) and (not (max-width: 400px)))) or (((screen) and (max-width: 900px) and (not (max-width: 500px)) and (not (screen))) or ((screen) and (max-width: 900px) and (not (max-width: 500px)) and (not (max-width: 400px)))){.x1qc147k{background-color:blue}}",
                     "rtl": null,
                   },
-                  3200,
+                  3000.2,
                 ],
                 [
                   "x9qmkci",
                   {
-                    "ltr": "@media ((screen) and (max-width: 500px) and (not (screen))) or ((screen) and (max-width: 500px) and (not (max-width: 400px))){.x9qmkci.x9qmkci{background-color:purple}}",
+                    "ltr": "@media ((screen) and (max-width: 500px) and (not (screen))) or ((screen) and (max-width: 500px) and (not (max-width: 400px))){.x9qmkci{background-color:purple}}",
                     "rtl": null,
                   },
-                  3200,
+                  3000.2,
                 ],
                 [
                   "x17z8iku",
                   {
-                    "ltr": "@media (screen) and (max-width: 400px){.x17z8iku.x17z8iku{background-color:green}}",
+                    "ltr": "@media (screen) and (max-width: 400px){.x17z8iku{background-color:green}}",
                     "rtl": null,
                   },
-                  3200,
+                  3000.2,
                 ],
               ],
             }
@@ -2593,26 +2593,26 @@ describe('@stylexjs/babel-plugin', () => {
                 [
                   "xn8cmr1",
                   {
-                    "ltr": "@media (max-width: 900px){.xn8cmr1.xn8cmr1{background-color:blue}}",
+                    "ltr": "@media (max-width: 900px){.xn8cmr1{background-color:blue}}",
                     "rtl": null,
                   },
-                  3200,
+                  3000.2,
                 ],
                 [
                   "x1lr89ez",
                   {
-                    "ltr": "@media (max-width: 500px){.x1lr89ez.x1lr89ez{background-color:purple}}",
+                    "ltr": "@media (max-width: 500px){.x1lr89ez{background-color:purple}}",
                     "rtl": null,
                   },
-                  3200,
+                  3000.2,
                 ],
                 [
                   "x856a2w",
                   {
-                    "ltr": "@media (max-width: 400px){.x856a2w.x856a2w{background-color:green}}",
+                    "ltr": "@media (max-width: 400px){.x856a2w{background-color:green}}",
                     "rtl": null,
                   },
-                  3200,
+                  3000.2,
                 ],
               ],
             }
@@ -2657,18 +2657,18 @@ describe('@stylexjs/babel-plugin', () => {
                 [
                   "xw6up8c",
                   {
-                    "ltr": "@media (min-width: 1000px) and (max-width: 1999.99px){.xw6up8c.xw6up8c{background-color:blue}}",
+                    "ltr": "@media (min-width: 1000px) and (max-width: 1999.99px){.xw6up8c{background-color:blue}}",
                     "rtl": null,
                   },
-                  3200,
+                  3000.2,
                 ],
                 [
                   "x1ssfqz5",
                   {
-                    "ltr": "@media (min-width: 2000px){.x1ssfqz5.x1ssfqz5{background-color:purple}}",
+                    "ltr": "@media (min-width: 2000px){.x1ssfqz5{background-color:purple}}",
                     "rtl": null,
                   },
-                  3200,
+                  3000.2,
                 ],
               ],
             }
@@ -2711,18 +2711,18 @@ describe('@stylexjs/babel-plugin', () => {
                 [
                   "x6m3b6q",
                   {
-                    "ltr": "@supports (hover: hover){.x6m3b6q.x6m3b6q{background-color:blue}}",
+                    "ltr": "@supports (hover: hover){.x6m3b6q{background-color:blue}}",
                     "rtl": null,
                   },
-                  3030,
+                  3000.03,
                 ],
                 [
                   "x6um648",
                   {
-                    "ltr": "@supports not (hover: hover){.x6um648.x6um648{background-color:purple}}",
+                    "ltr": "@supports not (hover: hover){.x6um648{background-color:purple}}",
                     "rtl": null,
                   },
-                  3030,
+                  3000.03,
                 ],
               ],
             }
@@ -2767,18 +2767,18 @@ describe('@stylexjs/babel-plugin', () => {
                 [
                   "x1w3nbkt",
                   {
-                    "ltr": "@media (min-width: 800px){.x1w3nbkt.x1w3nbkt{font-size:2rem}}",
+                    "ltr": "@media (min-width: 800px){.x1w3nbkt{font-size:2rem}}",
                     "rtl": null,
                   },
-                  3200,
+                  3000.2,
                 ],
                 [
                   "xicay7j",
                   {
-                    "ltr": "@media (min-width: 800px){.xicay7j.xicay7j:hover{font-size:2.2rem}}",
+                    "ltr": "@media (min-width: 800px){.xicay7j:hover{font-size:2.2rem}}",
                     "rtl": null,
                   },
-                  3330,
+                  3130.2,
                 ],
               ],
             }
@@ -2820,10 +2820,10 @@ describe('@stylexjs/babel-plugin', () => {
                 [
                   "x1vazst0",
                   {
-                    "ltr": "@media (min-width: 768px){.x1vazst0.x1vazst0{position:sticky;position:fixed}}",
+                    "ltr": "@media (min-width: 768px){.x1vazst0{position:sticky;position:fixed}}",
                     "rtl": null,
                   },
-                  3200,
+                  3000.2,
                 ],
               ],
             }
@@ -5024,18 +5024,18 @@ describe('@stylexjs/babel-plugin', () => {
                 [
                   "x38mdg9",
                   {
-                    "ltr": "@media (min-width: 1000px) and (max-width: 1999.99px){.x38mdg9.x38mdg9{width:var(--x-wm47pl)}}",
+                    "ltr": "@media (min-width: 1000px) and (max-width: 1999.99px){.x38mdg9{width:var(--x-wm47pl)}}",
                     "rtl": null,
                   },
-                  4200,
+                  4000.2,
                 ],
                 [
                   "x1bai16n",
                   {
-                    "ltr": "@media (min-width: 2000px){.x1bai16n.x1bai16n{width:var(--x-1obb2yn)}}",
+                    "ltr": "@media (min-width: 2000px){.x1bai16n{width:var(--x-1obb2yn)}}",
                     "rtl": null,
                   },
-                  4200,
+                  4000.2,
                 ],
                 [
                   "--x-1xmrurk",
@@ -5106,18 +5106,18 @@ describe('@stylexjs/babel-plugin', () => {
                 [
                   "x1iuwwch",
                   {
-                    "ltr": "@supports (hover: hover){.x1iuwwch.x1iuwwch{color:var(--x-b262sw)}}",
+                    "ltr": "@supports (hover: hover){.x1iuwwch{color:var(--x-b262sw)}}",
                     "rtl": null,
                   },
-                  3030,
+                  3000.03,
                 ],
                 [
                   "x5268pl",
                   {
-                    "ltr": "@supports not (hover: hover){.x5268pl.x5268pl{color:var(--x-wu2acw)}}",
+                    "ltr": "@supports not (hover: hover){.x5268pl{color:var(--x-wu2acw)}}",
                     "rtl": null,
                   },
-                  3030,
+                  3000.03,
                 ],
                 [
                   "--x-4xs81a",
@@ -5190,18 +5190,18 @@ describe('@stylexjs/babel-plugin', () => {
                 [
                   "xfqys7t",
                   {
-                    "ltr": "@media (min-width: 800px){.xfqys7t.xfqys7t{font-size:var(--x-1xajcet)}}",
+                    "ltr": "@media (min-width: 800px){.xfqys7t{font-size:var(--x-1xajcet)}}",
                     "rtl": null,
                   },
-                  3200,
+                  3000.2,
                 ],
                 [
                   "x13w7uki",
                   {
-                    "ltr": "@media (min-width: 800px){.x13w7uki.x13w7uki:hover{font-size:var(--x-ke45ok)}}",
+                    "ltr": "@media (min-width: 800px){.x13w7uki:hover{font-size:var(--x-ke45ok)}}",
                     "rtl": null,
                   },
-                  3330,
+                  3130.2,
                 ],
                 [
                   "--x-19zvkyr",
@@ -5274,18 +5274,18 @@ describe('@stylexjs/babel-plugin', () => {
                 [
                   "xqdov8i",
                   {
-                    "ltr": "@media (min-width: 800px) and (max-width: 1279.99px){.xqdov8i.xqdov8i{font-size:var(--x-1bks2es)}}",
+                    "ltr": "@media (min-width: 800px) and (max-width: 1279.99px){.xqdov8i{font-size:var(--x-1bks2es)}}",
                     "rtl": null,
                   },
-                  3200,
+                  3000.2,
                 ],
                 [
                   "x1j86d60",
                   {
-                    "ltr": "@media (min-width: 1280px){.x1j86d60.x1j86d60{font-size:var(--x-q0n1i6)}}",
+                    "ltr": "@media (min-width: 1280px){.x1j86d60{font-size:var(--x-q0n1i6)}}",
                     "rtl": null,
                   },
-                  3200,
+                  3000.2,
                 ],
                 [
                   "--x-19zvkyr",
@@ -5918,12 +5918,12 @@ describe('@stylexjs/babel-plugin', () => {
             priority: 3000
           });
           _inject2({
-            ltr: "@media (min-width: 1000px){.xc445zv.xc445zv{background-color:blue}}",
-            priority: 3200
+            ltr: "@media (min-width: 1000px){.xc445zv{background-color:blue}}",
+            priority: 3000.2
           });
           _inject2({
-            ltr: "@media (min-width: 2000px){.x1ssfqz5.x1ssfqz5{background-color:purple}}",
-            priority: 3200
+            ltr: "@media (min-width: 2000px){.x1ssfqz5{background-color:purple}}",
+            priority: 3000.2
           });"
         `);
       });
@@ -5956,12 +5956,12 @@ describe('@stylexjs/babel-plugin', () => {
             priority: 3000
           });
           _inject2({
-            ltr: "@supports (hover: hover){.x6m3b6q.x6m3b6q{background-color:blue}}",
-            priority: 3030
+            ltr: "@supports (hover: hover){.x6m3b6q{background-color:blue}}",
+            priority: 3000.03
           });
           _inject2({
-            ltr: "@supports not (hover: hover){.x6um648.x6um648{background-color:purple}}",
-            priority: 3030
+            ltr: "@supports not (hover: hover){.x6um648{background-color:purple}}",
+            priority: 3000.03
           });"
         `);
       });
diff --git a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineConsts-test.js b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineConsts-test.js
index 49aa8595b..85920f21e 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineConsts-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineConsts-test.js
@@ -419,10 +419,10 @@ describe('@stylexjs/babel-plugin', () => {
             [
               "xbs0o1n",
               {
-                "ltr": "var(--x1r2wpmh){.xbs0o1n.xbs0o1n{color:blue}}",
+                "ltr": "var(--x1r2wpmh){.xbs0o1n{color:blue}}",
                 "rtl": null,
               },
-              6000,
+              3000.2,
             ],
           ],
         }
@@ -617,10 +617,10 @@ describe('@stylexjs/babel-plugin', () => {
             [
               "xbs0o1n",
               {
-                "ltr": "var(--x1r2wpmh){.xbs0o1n.xbs0o1n{color:blue}}",
+                "ltr": "var(--x1r2wpmh){.xbs0o1n{color:blue}}",
                 "rtl": null,
               },
-              6000,
+              3000.2,
             ],
             [
               "x3d248p",
@@ -684,18 +684,18 @@ describe('@stylexjs/babel-plugin', () => {
             [
               "xbs0o1n",
               {
-                "ltr": "var(--x1r2wpmh){.xbs0o1n.xbs0o1n{color:blue}}",
+                "ltr": "var(--x1r2wpmh){.xbs0o1n{color:blue}}",
                 "rtl": null,
               },
-              6000,
+              3000.2,
             ],
             [
               "x1ru35j7",
               {
-                "ltr": "var(--xr4bctk){.x1ru35j7.x1ru35j7{color:yellow}}",
+                "ltr": "var(--xr4bctk){.x1ru35j7{color:yellow}}",
                 "rtl": null,
               },
-              6000,
+              3000.2,
             ],
           ],
         }
@@ -745,18 +745,18 @@ describe('@stylexjs/babel-plugin', () => {
             [
               "x1iobwbz",
               {
-                "ltr": "var(--xr4bctk){.x1iobwbz.x1iobwbz{color:var(--x1itgfi6)}}",
+                "ltr": "var(--xr4bctk){.x1iobwbz{color:var(--x1itgfi6)}}",
                 "rtl": null,
               },
-              6000,
+              3000.2,
             ],
             [
               "xrf68et",
               {
-                "ltr": "var(--x1r2wpmh){var(--xr4bctk){.xrf68et.xrf68et.xrf68et{color:var(--x9g651j)}}}",
+                "ltr": "var(--x1r2wpmh){var(--xr4bctk){.xrf68et{color:var(--x9g651j)}}}",
                 "rtl": null,
               },
-              9000,
+              3000.4,
             ],
           ],
         }
diff --git a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-props-test.js b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-props-test.js
index f6f2943b9..892206de8 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-props-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-props-test.js
@@ -1844,12 +1844,12 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 3000
         });
         _inject2({
-          ltr: "@media (min-width: 1000px){.xc445zv.xc445zv{background-color:blue}}",
-          priority: 3200
+          ltr: "@media (min-width: 1000px){.xc445zv{background-color:blue}}",
+          priority: 3000.2
         });
         _inject2({
-          ltr: "@media (min-width: 2000px){.x1ssfqz5.x1ssfqz5{background-color:purple}}",
-          priority: 3200
+          ltr: "@media (min-width: 2000px){.x1ssfqz5{background-color:purple}}",
+          priority: 3000.2
         });
         ({
           className: "xrkmrrc xc445zv x1ssfqz5"
@@ -1881,12 +1881,12 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 3000
         });
         _inject2({
-          ltr: "@media (min-width: 1000px) and (max-width: 1999.99px){.xw6up8c.xw6up8c{background-color:blue}}",
-          priority: 3200
+          ltr: "@media (min-width: 1000px) and (max-width: 1999.99px){.xw6up8c{background-color:blue}}",
+          priority: 3000.2
         });
         _inject2({
-          ltr: "@media (min-width: 2000px){.x1ssfqz5.x1ssfqz5{background-color:purple}}",
-          priority: 3200
+          ltr: "@media (min-width: 2000px){.x1ssfqz5{background-color:purple}}",
+          priority: 3000.2
         });
         ({
           className: "xrkmrrc xw6up8c x1ssfqz5"
@@ -1920,12 +1920,12 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 3000
         });
         _inject2({
-          ltr: "@supports (hover: hover){.x6m3b6q.x6m3b6q{background-color:blue}}",
-          priority: 3030
+          ltr: "@supports (hover: hover){.x6m3b6q{background-color:blue}}",
+          priority: 3000.03
         });
         _inject2({
-          ltr: "@supports not (hover: hover){.x6um648.x6um648{background-color:purple}}",
-          priority: 3030
+          ltr: "@supports not (hover: hover){.x6um648{background-color:purple}}",
+          priority: 3000.03
         });
         ({
           className: "xrkmrrc x6m3b6q x6um648"
@@ -1957,12 +1957,12 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 3000
         });
         _inject2({
-          ltr: "@supports (hover: hover){.x6m3b6q.x6m3b6q{background-color:blue}}",
-          priority: 3030
+          ltr: "@supports (hover: hover){.x6m3b6q{background-color:blue}}",
+          priority: 3000.03
         });
         _inject2({
-          ltr: "@supports not (hover: hover){.x6um648.x6um648{background-color:purple}}",
-          priority: 3030
+          ltr: "@supports not (hover: hover){.x6um648{background-color:purple}}",
+          priority: 3000.03
         });
         ({
           className: "xrkmrrc x6m3b6q x6um648"
@@ -2626,8 +2626,8 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 3130
         });
         _inject2({
-          ltr: "@media (min-width: 1000px){.xc445zv.xc445zv{background-color:blue}}",
-          priority: 3200
+          ltr: "@media (min-width: 1000px){.xc445zv{background-color:blue}}",
+          priority: 3000.2
         });
         export const styles = {
           default: {
@@ -2794,8 +2794,8 @@ describe('@stylexjs/babel-plugin', () => {
             priority: 3130
           });
           _inject2({
-            ltr: "@media (min-width: 1000px){.xc445zv.xc445zv{background-color:blue}}",
-            priority: 3200
+            ltr: "@media (min-width: 1000px){.xc445zv{background-color:blue}}",
+            priority: 3000.2
           });
           export const styles = {
             default: {
@@ -2920,16 +2920,16 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 2000
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateRows-xmr4b4k.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}",
-          priority: 3200
+          ltr: "@media (max-width: 640px){.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}",
+          priority: 3000.2
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateAreas-xesbpuc.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}",
-          priority: 2200
+          ltr: "@media (max-width: 640px){.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}",
+          priority: 2000.2
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateColumns-x15nfgh4.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}",
-          priority: 3200
+          ltr: "@media (max-width: 640px){.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}",
+          priority: 3000.2
         });
         _inject2({
           ltr: ".gridTemplateColumns-x1mkdm3x{grid-template-columns:minmax(0,1fr)}",
@@ -3061,16 +3061,16 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 2000
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateRows-xmr4b4k.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}",
-          priority: 3200
+          ltr: "@media (max-width: 640px){.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}",
+          priority: 3000.2
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateAreas-xesbpuc.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}",
-          priority: 2200
+          ltr: "@media (max-width: 640px){.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}",
+          priority: 2000.2
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateColumns-x15nfgh4.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}",
-          priority: 3200
+          ltr: "@media (max-width: 640px){.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}",
+          priority: 3000.2
         });
         _inject2({
           ltr: ".gridTemplateColumns-x1mkdm3x{grid-template-columns:minmax(0,1fr)}",
@@ -3197,16 +3197,16 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 2000
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateRows-xmr4b4k.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}",
-          priority: 3200
+          ltr: "@media (max-width: 640px){.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}",
+          priority: 3000.2
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateAreas-xesbpuc.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}",
-          priority: 2200
+          ltr: "@media (max-width: 640px){.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}",
+          priority: 2000.2
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.gridTemplateColumns-x15nfgh4.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}",
-          priority: 3200
+          ltr: "@media (max-width: 640px){.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}",
+          priority: 3000.2
         });
         _inject2({
           ltr: ".gridTemplateColumns-x1mkdm3x{grid-template-columns:minmax(0,1fr)}",
@@ -3333,16 +3333,16 @@ describe('@stylexjs/babel-plugin', () => {
           priority: 2000
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.xmr4b4k.xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}",
-          priority: 3200
+          ltr: "@media (max-width: 640px){.xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}",
+          priority: 3000.2
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.xesbpuc.xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}",
-          priority: 2200
+          ltr: "@media (max-width: 640px){.xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}",
+          priority: 2000.2
         });
         _inject2({
-          ltr: "@media (max-width: 640px){.x15nfgh4.x15nfgh4{grid-template-columns:100%}}",
-          priority: 3200
+          ltr: "@media (max-width: 640px){.x15nfgh4{grid-template-columns:100%}}",
+          priority: 3000.2
         });
         _inject2({
           ltr: ".x1mkdm3x{grid-template-columns:minmax(0,1fr)}",
diff --git a/packages/@stylexjs/babel-plugin/src/shared/utils/generate-css-rule.js b/packages/@stylexjs/babel-plugin/src/shared/utils/generate-css-rule.js
index bb6e487fd..c84d9427e 100644
--- a/packages/@stylexjs/babel-plugin/src/shared/utils/generate-css-rule.js
+++ b/packages/@stylexjs/babel-plugin/src/shared/utils/generate-css-rule.js
@@ -16,6 +16,11 @@ import generateLtr from '../physical-rtl/generate-ltr';
 import generateRtl from '../physical-rtl/generate-rtl';
 import { getPriority } from '@stylexjs/shared';
 
+// Adjacent pseudo-class ranks are 1 apart, so the at-rules of a rule are summed
+// and then divided down to stay below that gap. The highest at-rule rank is 300
+// (`@container`), leaving room for three nested at-rules.
+const AT_RULE_SCALE = 1000;
+
 const THUMB_VARIANTS = [
   '::-webkit-slider-thumb',
   '::-moz-range-thumb',
@@ -52,21 +57,17 @@ function buildNestedCSSRule(
   const hasWhere = pseudo.includes(':where(');
   const extraClassForWhere = hasWhere ? `.${className}` : '';
 
-  let selectorForAtRules =
-    `.${className}` +
-    extraClassForWhere +
-    combinedAtRules.map(() => `.${className}`).join('') +
-    pseudo;
+  // At-rules add no specificity. Every rule for a property is emitted with the
+  // same weight so that `priority` alone decides which one wins.
+  let selector = `.${className}` + extraClassForWhere + pseudo;
 
   if (pseudos.includes('::thumb')) {
-    selectorForAtRules = THUMB_VARIANTS.map(
-      (suffix) => selectorForAtRules + suffix,
-    ).join(', ');
+    selector = THUMB_VARIANTS.map((suffix) => selector + suffix).join(', ');
   }
 
   return combinedAtRules.reduce(
-    (acc, combinedAtRules) => `${combinedAtRules}{${acc}}`,
-    `${selectorForAtRules}{${decls}}`,
+    (acc, atRule) => `${atRule}{${acc}}`,
+    `${selector}{${decls}}`,
   );
 }
 
@@ -103,11 +104,17 @@ export function generateCSSRule(
     ? null
     : buildNestedCSSRule(className, rtlDecls, pseudos, atRules, constRules);
 
+  const sumPriorities = (keys: $ReadOnlyArray<string>) =>
+    keys.map(getPriority).reduce((a, b) => a + b, 0);
+
+  // An at-rule refines a state rather than outranking it: `:active` has to beat
+  // `:hover` even when the hover styles are nested in a media query. Scaling the
+  // at-rules down leaves them to only break ties between rules that share the
+  // same property and pseudo-classes.
   const priority =
     getPriority(key) +
-    pseudos.map(getPriority).reduce((a, b) => a + b, 0) +
-    atRules.map(getPriority).reduce((a, b) => a + b, 0) +
-    constRules.map(getPriority).reduce((a, b) => a + b, 0);
+    sumPriorities(pseudos) +
+    (sumPriorities(atRules) + sumPriorities(constRules)) / AT_RULE_SCALE;
 
   return { priority, ltr: ltrRule, rtl: rtlRule };
 }
diff --git a/packages/@stylexjs/shared/src/utils/property-priorities.js b/packages/@stylexjs/shared/src/utils/property-priorities.js
index 55d2692d2..1d26491dc 100644
--- a/packages/@stylexjs/shared/src/utils/property-priorities.js
+++ b/packages/@stylexjs/shared/src/utils/property-priorities.js
@@ -768,6 +768,14 @@ export function getAtRulePriority(key: string): number | void {
   if (key.startsWith('@container')) {
     return AT_RULE_PRIORITIES['@container'];
   }
+
+  // `defineConsts` at-rules reach us as `var(--hash)` placeholders, so the
+  // condition they stand for is unknown until the CSS variable is inlined.
+  // They are almost always media queries, and must rank as an at-rule either
+  // way so they can't outrank a pseudo-class.
+  if (key.startsWith('var(--')) {
+    return AT_RULE_PRIORITIES['@media'];
+  }
 }
 
 export function getPseudoElementPriority(key: string): number | void {