From 6c7528e46b2dccd934cf21ec12eb0f5076004e59 Mon Sep 17 00:00:00 2001
From: Aron Griffis <aron@scampersand.com>
Date: Tue, 16 Nov 2021 11:22:50 -0500
Subject: [PATCH] fix: move at-rules to end of nested responsive states

Closes #288
---
 packages/system/src/style.test.ts | 31 +++++++++++++++++++++++++++++++
 packages/system/src/theme.ts      | 15 ++++++++++++++-
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/packages/system/src/style.test.ts b/packages/system/src/style.test.ts
index 2db3d31a..d6f0badc 100644
--- a/packages/system/src/style.test.ts
+++ b/packages/system/src/style.test.ts
@@ -152,6 +152,37 @@ describe('#style', () => {
           fontFamily: 'title2',
         },
       })
+      // https://github.com/gregberge/xstyled/issues/288
+      expect(
+        JSON.stringify(
+          fontFamily({
+            fontFamily: {
+              _: { _: 'title', hover: 'title2' },
+              md: { _: 'title3', hover: 'title4' },
+            },
+            theme,
+          }),
+          null,
+          2,
+        ),
+      ).toEqual(
+        JSON.stringify(
+          {
+            fontFamily: 'title',
+            '&:hover': {
+              fontFamily: 'title2',
+            },
+            '@media (min-width: 400px)': {
+              fontFamily: 'title3',
+              '&:hover': {
+                fontFamily: 'title4',
+              },
+            },
+          },
+          null,
+          2,
+        ),
+      )
     })
 
     it('works with breakpoints', () => {
diff --git a/packages/system/src/theme.ts b/packages/system/src/theme.ts
index dbaeedf2..e3be6b1f 100644
--- a/packages/system/src/theme.ts
+++ b/packages/system/src/theme.ts
@@ -36,7 +36,20 @@ export const getVariants = <T extends Props>(props: T): PropsVariants<T> => {
   for (const value in screens) {
     medias[value] = mediaMinWidth(getBreakpointMin(screens, value))
   }
-  return { ...medias, ...states }
+  const variants = { ...medias, ...states }
+
+  // Move at-rules to the end, since they don't increase specificity by
+  // themselves but might need to override something that does.
+  // See https://github.com/gregberge/xstyled/issues/288
+  for (const [value, selector] of Object.entries(variants)) {
+    if (selector && selector.startsWith('@')) {
+      delete variants[value]
+      // @ts-ignore
+      variants[value] = selector
+    }
+  }
+
+  return variants
 }
 
 export const getCachedVariants = <T extends Props>(