emotion

[emotion](https://github.com/emotion-js/emotion) is the main lib doing it now -- it's pretty popular among the React crowd, and sits at 5k stars right now. It's a nice, gradual transition, since it mostly follows scss-like syntax, and the docs all use tagged templates. e.g. `const className = css\`p { font-size: 16px; }\`;`, but `const className = css({ p: { fontSize: '16px' } });` works fine too. What's cool is you can use the same obj conventions for the CSS as a React component's `style` prop, or a regular Node's style. e.g. if I have `const headerColor = { color: '#ff0000', backgroundColor: '#00ff00' };`, I can say `<div style={headerColor}>`, or `Object.assign(document.querySelector('p').style, headerColor)` too.

styled-components is what got me to switch from LESS to css-in-js, and I'm so grateful. Anyone interested learning about css-in-js for the first time would benefit from understanding the styled-components model, but there's already churn in that category, and new libraries inspired by styled-components that take it further. Here's an interesting perspective on the history of CSS-in-JS: https://github.com/streamich/freestyler/blob/master/docs/en/... Currently i'm working with Emotion (https://github.com/emotion-js/emotion) and enjoying it

For example, the React team provide a set of codemods to help automatically upgrade codebases when there is a new version of React (https://github.com/reactjs/react-codemod). Until `recast` gets TypeScript support, everybody who uses TypeScript has to do this repetitive work manually. Another example is how many `css-in-js` libraries require Babel plugins to work their best (e.g. https://github.com/emotion-js/emotion/tree/master/packages/b...). And additionally there are also plugins that optimize React code (e.g. https://github.com/thejameskyle/babel-react-optimize).