Support baseStyle as a function

Author: simpletrontdip

packages/chakra-ui-core/src/utils/component.test.js

@@ -20,7 +20,7 @@ describe('createStyledAttrsMixin', () => {
   }
 
   describe('baseStyle', () => {
-    const renderFakeComponent = ({ theme, ...props }) => {
+    const renderFakeComponent = ({ theme, colorMode, ...props }) => {
       const inlineAttrs = (props && props.inlineAttrs) || ''
       return render({
         template: `<FakeComponent ${inlineAttrs} />`,
@@ -29,7 +29,7 @@ describe('createStyledAttrsMixin', () => {
         },
         provide: () => ({
           $chakraTheme: () => toCSSVar(theme),
-          $chakraColorMode: () => 'light'
+          $chakraColorMode: () => colorMode || 'light'
         }),
         ...props
       })
@@ -65,5 +65,38 @@ describe('createStyledAttrsMixin', () => {
       })
       expect(asFragment()).toMatchSnapshot()
     })
+
+    it('should accept baseStyle as a function', () => {
+      const theme = {
+        ...defaultTheme,
+        baseStyle: {
+          FakeComponent: ({ colorMode, theme }) => ({
+            bg: colorMode === 'light' ? 'red.400' : 'red.200',
+            color: colorMode === 'light' ? 'black' : 'white',
+            border: `2px solid ${
+              colorMode === 'light'
+                ? theme.color.blue[600]
+                : theme.colors.blue[200]
+            }`
+          })
+        }
+      }
+
+      // light mode
+      const lightWrapper = renderFakeComponent({
+        theme,
+        colorMode: 'light',
+        inlineAttrs: 'bg="blue.200"'
+      })
+      expect(lightWrapper.asFragment()).toMatchSnapshot()
+
+      // dark mode
+      const darkWrapper = renderFakeComponent({
+        theme,
+        colorMode: 'dark',
+        inlineAttrs: 'bg="vue.200"'
+      })
+      expect(darkWrapper.asFragment()).toMatchSnapshot()
+    })
   })
 })

packages/chakra-ui-core/src/utils/components.js

@@ -1,4 +1,5 @@
 import { css } from '@emotion/css'
+import { runIfFn } from '@chakra-ui/utils'
 import { composeSystem, __get } from './styled-system'
 import { hasOwn, extractChakraAttrs } from './object'
 
@@ -69,7 +70,15 @@ export const createStyledAttrsMixin = name => ({
       }
     },
     baseStyle () {
-      return __get(this.theme, `baseStyle.${name}`) || {}
+      const { nativeAttrs } = this.splitProps
+      const styleObjectOrFn = __get(this.theme, `baseStyle.${name}`)
+      return (
+        runIfFn(styleObjectOrFn, {
+          theme: this.theme,
+          colorMode: this.colorMode,
+          ...nativeAttrs
+        }) || {}
+      )
     },
     className () {
       const { styleAttrs } = this.splitProps