Custom JSX pragma for better integration with React

Motivation

Inspired by Emotion, a css prop could be attached to JSX elements for better composition possibilities.

Basic example

<p css={{ color: "blue" }}>I am blue</p>

Details

For compatibility purposes, the React Classic Runtime of Babel should be supported.

[Tibfib]

I have mixed opinions on the css prop. I started using it a few years ago in our codebase and have really loved the convenience. It’s only now as I step back I’m beginning to realize that maybe it was a mistake? My tweet above mentions two main reasons.

Since it’s a pseudo-prop, you can’t use it like a real prop (forward it, add to it, etc)

You mention passing the css prop around, and I do think that helps. Another alternative mentioned by Sunil Pai’s is to only allow the css prop on dom elements. This makes needing to pass the css prop unnecessary. I think one of these approaches is necessary.

Also, as a developer using this (or any css prop library), to support css and className properly, you’ll have to forward both in each of your components. Sounds painful.

Your styles are now defined via three props (className/style/css).

This is the bigger issue to me. I think it’s too much of a mental disconnect using both the css and className prop. On twitter, @siddharthkp phrased it well: “css and className both are for base styles. it feels odd to use both in a project.”

I like to use a css toolkit (like tailwind, basscss) and then add “custom” css as needed with a css prop. I think if you’re using any css classes, you shouldn’t use the css prop. They don’t compose as well and feel too disconnected. Instead, use classnames (or make your own class-composition-helper).

[kripod]

Shorthands are hard to handle. I’m not quite sure about how they should be managed. Composition feels a bit unnatural for atomic CSS. Your idea sounds awesome, but it seems to be very hard to implement.