question-mark
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.

CSS-in-JS Support?

See original GitHub issue

A ton of people like CSS-in-JS and I think we should add support for it. We have to figure out how we will do it. I see 2 options:

  1. Write our own using SWC macros once released #78
  2. Add support for something like styled-components, though we would have to write our own SSR compiler thing

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:6
  • Comments:10 (6 by maintainers)

github_iconTop GitHub Comments

5reactions
ijecommented, Jan 21, 2021

0.3 will support inline css like:

export default function App() {
  return (
    <>
      <h1>Hello World</h1>
      <style>{`
        h1 {
          color: #d63369;
        }
      `}</style>
    </>
  )
}
1reaction
shadowtime2000commented, Feb 6, 2021

@thegaryroberts Thanks for sharing how you do it, I think Emotions React pkg has out of the box support with renderToString and other React SSR stuff. We should probably add support for /** @jsx */, though it is also possible to just call jsx because it is compatible with React.createElement.

Read more comments on GitHub >

github_iconTop Results From Across the Web

JSS
A lib for generating CSS from JavaScript.
Read more >
cssinjs/jss: JSS is an authoring tool for CSS which ... - GitHub
A lib for generating Style Sheets with JavaScript. For documentation see our docs. Community. Join our Discord; Use Discussions to discuss ideas or...
Read more >
CSS-in-JS (@cssinjs) / Twitter
@cssinjs. Updates on CSS-in-JS tech. We Love CSS! Managed by ... Style editing for CSS-in-CSS • Lighthouse 6 • Support for new JavaScript...
Read more >
@mxenabled/cssinjs - npm
Start using @mxenabled/cssinjs in your project by running `npm i ... process once all our frontend projects no longer need to support IE11....
Read more >
A Thorough Analysis of CSS-in-JS
If we need to support vanilla JavaScript code or frameworks other than React, the decision is simple: we should choose a framework-agnostic ...
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 Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found