3 ms·
[emotion](https://github.com/emotion-js/emotion https://github.com/emotion-js/emotion) is the main lib doing it now -- it's pretty popular among the React crowd
by jkoudys 8y ago
[emotion](https://github.com/emotion-js/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.