feat(style): improve mixin (#225)

Author: gregberge

packages/system/src/style.test.ts

@@ -175,5 +175,26 @@ describe('#style', () => {
         fontFamily: 'arial',
       })
     })
+
+    describe('mixins', () => {
+      const fontSize = style({
+        prop: 'fontSize',
+        key: 'fontSizes',
+      })
+      const text = style({
+        prop: 'text',
+        key: 'texts',
+        cssProperty: (value) => fontSize.apply({ fontSize: value }),
+      })
+
+      it('supports functions', () => {
+        const theme = {
+          fontSizes: { xs: '0.8rem' },
+          texts: { xs: 2 },
+        }
+
+        expect(text({ theme, text: 'xs' })).toEqual({ fontSize: 2 })
+      })
+    })
   })
 })

packages/system/src/style.ts

@@ -10,6 +10,7 @@ import {
   identity,
   merge,
   assign,
+  cascade,
 } from '@xstyled/util'
 import { getBreakpoints, getBreakpointMin, mediaMinWidth } from './media'
 import { defaultStates } from './defaultStates'
@@ -193,7 +194,7 @@ function styleFromValue(
   if (obj(value)) return null
   if (cache.has(value)) return cache.get(value)
   const computedValue = themeGet(value)(props)
-  const style = mixin(computedValue)
+  const style = cascade(mixin(computedValue), props)
   cache.set(value, style)
   return style
 }

packages/system/src/styles/backgrounds.ts

@@ -36,7 +36,7 @@ export interface BackgroundProps<T extends ITheme = Theme> {
 export const background = style({
   prop: 'background',
   cssProperty: (value) => ({
-    background: gradientBackgrounds[value] || value,
+    background: gradientBackgrounds[value as string] || value,
   }),
 })
 
@@ -112,7 +112,7 @@ export interface BackgroundImageProps<T extends ITheme = Theme> {
 export const backgroundImage = style({
   prop: 'backgroundImage',
   cssProperty: (value) => ({
-    backgroundImage: gradientBackgrounds[value] || value,
+    backgroundImage: gradientBackgrounds[value as string] || value,
   }),
 })
 

packages/system/src/types.ts

@@ -38,12 +38,12 @@ export type IStyles = Record<string, unknown>
 export type IBreakpoints = Record<string | number, number>
 export type IPropsWithTheme<TTheme extends ITheme> = IProps & { theme: TTheme }
 
-export type Mixin = (value: any) => IStyles | null | undefined
-
 export interface StyleGetter {
   (props: IProps): any
 }
 
+export type Mixin = (value: unknown) => IStyles | null | undefined | StyleGetter
+
 export type Breakpoints<TTheme extends ITheme> = TTheme extends {
   breakpoints: IBreakpoints
 }