feat: added inline variants support (#334)

Solves #333
styled-components · Apr 15, 2022 · acfa364 · acfa364
1 parent 4dac9a3
commit acfa364
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/packages/system/src/style.test.ts b/packages/system/src/style.test.ts
@@ -109,6 +109,11 @@ describe('#style', () => {
         states: { hover: '&:hover', first: '&:first-child' },
         screens: { _: 0, md: 400 },
       }
+      expect(fontFamily({ fontFamily: { '&:empty': 'title' }, theme })).toEqual({
+        '&:empty': {
+          fontFamily: 'title',
+        },
+      })
       expect(fontFamily({ fontFamily: { hover: 'title' }, theme })).toEqual({
         '&:hover': {
           fontFamily: 'title',
@@ -164,6 +169,14 @@ describe('#style', () => {
           fontFamily: 'title',
         },
       })
+      expect(fontFamily({
+        fontFamily: { '@media (min-width: 355px)': 'title' },
+        theme
+      })).toEqual({
+        '@media (min-width: 355px)': {
+          fontFamily: 'title',
+        },
+      })
     })
 
     it('works with a theme', () => {

diff --git a/packages/system/src/style.ts b/packages/system/src/style.ts
@@ -160,7 +160,7 @@ export const reduceVariants = <T extends Props>(
   for (const value in values) {
     const style = getStyle(values[value])
     if (style === null) continue
-    const state = variants[value]
+    const state = value in variants ? variants[value] : value
     if (state === undefined) continue
     if (state === null) {
       styles = merge(styles, style)