Allow for the definition of inline styles without having to use an array

[adamterlson]

Current inline style syntax:

style('string?', {toggle}, [{ inline }]) or style('string', [{ inline }])

I'd love to make it possible to not have to put the inline styles in an array, however the use of an object for the definition of conditional selectors toggle state is quite nice.

I could fix the arity such that any arg >= 3 is interpreted as an inline style, but that seems a bit unfortunate if you're not using a conditional selector to have to pass in nulls.

Would love some ideas on how to make this better!

[mlabrum]

To be honest I wouldn't do anything magic, I would force the user to wrap the toggle conditions in an object, then you should just be able to typeof the parameter and figure out which property is the conditional

style('string', { inline })
style('string?', cairn.toggle({toggle}), { inline })

[adamterlson]

Now there's an idea. Thanks for the recommendation, I hadn't considered the cairn.toggle. Now, one possible downside to that is that currently you can just export/import the result of calling cairn() (that is, the style function exported from your global style file). So, at the component-level, there's no need to import cairn itself.

With this usage, you'd have to import cairn from 'cairn' or import { toggle } from 'cairn' just to do a toggle.... Not terrible, but just a bit of a bummer to require another import for this.

Maybe it'd be better to do cairn.inline(), as at least then it'd parallel the usage of cairn() itself in the sense of styles being passed to cairn? So:

style('string', cairn.inline({ styles }))
style('string?', toggle, cairn.inline({ styles }))

Thoughts?