feat: CSS function recursion (#391)

* CSS function recursion

* Add test

Author: quicksnap

.gitignore

@@ -9,3 +9,4 @@ yarn.lock
 package-lock.json
 .vscode
 preact/
+.eslintcache

src/__tests__/__snapshots__/index.js.snap

@@ -260,6 +260,7 @@ exports[`the css prop accepts "GlamorousStyles": css prop with a function 1`] =
   font-size: 10px;
   padding: 20px;
   margin: 30px;
+  border: 1px solid pink;
 }
 
 <section

src/__tests__/index.js

@@ -87,12 +87,16 @@ test('the css prop accepts "GlamorousStyles"', () => {
 
   const fn1 = jest.fn(() => ({padding: 20}))
   const fn2 = jest.fn(() => ({margin: 30}))
-  const props = {css: [fn1, fn2], fontSize: 10, theme: {color: 'red'}}
+  const nestedFn3 = jest.fn(() => ({border: '1px solid pink'}))
+  const fn3 = () => [() => [() => nestedFn3]] // Deeply nested functions
+  const props = {css: [fn1, fn2, fn3], fontSize: 10, theme: {color: 'red'}}
   expect(render(<glamorous.Section {...props} />)).toMatchSnapshot(
     'css prop with a function',
   )
   expect(fn1).toHaveBeenCalledTimes(1)
   expect(fn2).toHaveBeenCalledTimes(1)
+  expect(nestedFn3).toHaveBeenCalledTimes(1)
+
   const context = {__glamorous__: undefined}
   expect(fn1).toHaveBeenCalledWith(
     expect.objectContaining(props),
@@ -102,6 +106,10 @@ test('the css prop accepts "GlamorousStyles"', () => {
     expect.objectContaining(props),
     expect.objectContaining(context),
   )
+  expect(nestedFn3).toHaveBeenCalledWith(
+    expect.objectContaining(props),
+    expect.objectContaining(context),
+  )
 })
 
 test('merges composed component styles for reasonable overrides', () => {

src/get-glamor-classname.js

@@ -76,16 +76,10 @@ function handleStyles(styles, props, context) {
   const nonGlamorClassNames = []
   for (let i = 0; i < styles.length; i++) {
     current = styles[i]
-    if (typeof current === 'function') {
-      const result = current(props, context)
-      if (typeof result === 'string') {
-        const {glamorStyles, glamorlessClassName} = extractGlamorStyles(result)
-        mappedArgs.push(...glamorStyles)
-        nonGlamorClassNames.push(...glamorlessClassName)
-      } else {
-        mappedArgs.push(result)
-      }
-    } else if (typeof current === 'string') {
+    while (typeof current === 'function') {
+      current = current(props, context)
+    }
+    if (typeof current === 'string') {
       const {glamorStyles, glamorlessClassName} = extractGlamorStyles(current)
       mappedArgs.push(...glamorStyles)
       nonGlamorClassNames.push(...glamorlessClassName)