Skip to content
This repository has been archived by the owner on Dec 13, 2018. It is now read-only.

Allow nested functions for css prop #390

Closed
quicksnap opened this issue Mar 2, 2018 · 3 comments
Closed

Allow nested functions for css prop #390

quicksnap opened this issue Mar 2, 2018 · 3 comments

Comments

@quicksnap
Copy link
Collaborator

quicksnap commented Mar 2, 2018

Glamorous accepts an array for the css prop, which may contain nested arrays of styles. Those styles may be callback functions in order to access the theme:

<Div css={ [myStyle1, myStyle2, ({ theme}) => myStyle3] } />

We currently do not support recursion for the callback's results:

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)

Would you accept a PR to adjust this? I'm working to make styles functionally composeable, and it would be great if I could return an array with further callback functions!

@quicksnap
Copy link
Collaborator Author

@kentcdodds
Copy link
Contributor

kentcdodds commented Mar 2, 2018

I've thought about this before. I feel like we might be able to make it simpler. Would this work?

function handleStyles(styles, props, context, mappedArgs = [], nonGlamorClassNames = []) {
  let current
  for (let i = 0; i < styles.length; i++) {
    current = styles[i]
    if (typeof current === 'function') {
      const result = current(props, context)
      handleStyles(result, props, context, mappedArgs, nonGlamorClassNames)
    } else if (typeof current === 'string') {
      const {glamorStyles, glamorlessClassName} = extractGlamorStyles(current)
      mappedArgs.push(...glamorStyles)
      nonGlamorClassNames.push(...glamorlessClassName)
    } else if (Array.isArray(current)) {
      const recursed = handleStyles(current, props, context)
      mappedArgs.push(...recursed.mappedArgs)
      nonGlamorClassNames.push(...recursed.nonGlamorClassNames)
    } else {
      mappedArgs.push(current)
    }
  }
  return {mappedArgs, nonGlamorClassNames}
}

@quicksnap
Copy link
Collaborator Author

Nice! I suppose that means you're receptive to this idea? =P

I'll drum up a PR soon and use that approach

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants