Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom JSX pragma for better integration with React

See original GitHub issue


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>


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

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:2
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

Tibfibcommented, May 18, 2020

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

kripodcommented, May 29, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Custom elements in React using a custom JSX pragma
Example using a custom JSX pragma for enable better tooling for custom elements. This project was bootstrapped with Create React App.
Read more >
3 Approaches to Integrate React with Custom Elements
We will look at React best practices its and limitations, then create generic wrappers and custom JSX pragmas in order to more tightly ......
Read more >
Introducing the New JSX Transform – React Blog
Upgrading to the new transform is completely optional, but it has a few benefits: With the new transform, you can use JSX without...
Read more >
JSX Pragma - Theme UI
Theme UI uses custom JSX functions and JSX import source comments to allow ... need to write JSX to use React, but it's...
Read more >
Documentation - JSX - TypeScript
There are multiple compiler flags which can be used to customize your JSX, which work as both a compiler flag and via inline...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found