Handle nested functions

Author: Augustach

src/__tests__/css.test.tsx

@@ -1,5 +1,6 @@
 import { createStyled } from '../styled'
 import { buildDynamicStyles } from '../buildDynamicStyles'
+import { UnknownProps } from '../types'
 
 const props = { theme: {} }
 
@@ -322,4 +323,17 @@ describe('styled props', () => {
             backgroundColor: 'yellow',
         })
     })
-})
+
+    test('Should handle nested functions', () => {
+        const cfs = (value: number) => (_props: UnknownProps) => value
+        const props = { scale: 2 }
+        const { css } = createStyled()
+        const styles = css<typeof props>`
+            font-size: ${({ scale }) => cfs(2 * scale)}px;
+        `
+
+        expect(buildDynamicStyles(props, styles)).toStrictEqual({
+            fontSize: 4,
+        })
+    })
+})

src/buildDynamicStyles.ts

@@ -13,7 +13,11 @@ export function buildDynamicStyles(
       if (isParser(value)) {
         value(props, dynamicStyles)
       } else {
-        dynamicStyles[key] = value(props)
+        let resultOrFn = value(props)
+        while(isFunction(resultOrFn)) {
+          resultOrFn = resultOrFn(props)
+        }
+        dynamicStyles[key] = resultOrFn
       }
     } else {
       dynamicStyles[key] = value