CSS function recursion

.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)