Think about non-JSX users about styled-components

[mxstbr]

Now that @jlongster made prettier to help him write JSX for styled-components and nobody else has asked for this use case I'll close this issue!

[jlongster]

fwiw, don't do this just for me, as I'm likely to stick to glamor for the time being. Let's see if there are any other non-JSX users. I'm still surprised there aren't more of them.

[geelen]

I think this would actually be pretty straightforward, right? This is where we define all our shorthands:

https://github.com/styled-components/styled-components/blob/master/src/constructors/styled.js

The important thing is here:

  const styled = (tag: Target) =>
    (strings: Array<string>, ...interpolations: Array<Interpolation>) =>
      styledComponent(tag, css(strings, ...interpolations))

If we made line 3 return React.createFactory(styledComponent(tag, css(strings, ...interpolations))) wouldn't that be enough? Wanna fork it and give it a go, see if you end up liking use it?

[poke]

I think @jlongster would want to avoid having to call React.createFactory here (directly or indirectly). Something like this would be nice:

dom.div(css`
    border: 1px solid black;
`, children)

Or maybe a different syntax to allow passing other props.

But I can see this quickly become a performance problem. If the component style is created within a render function, it would probably become rather difficult to enable reuse of the style definitions. So I guess you would still want to define the components outside.

[geelen]

Why would calling React.createFactory be a bad thing if it was hidden inside the library? @jlongster maybe you could weigh in here?