fix: move at-rules to end of nested responsive states

Closes #288

Author: agriffis

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', () => {

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>(