Linaria
https://github.com/callstack/linaria/raw/master/website/assets/linaria-logo@2x.png
Zero-runtime CSS in JS library
CSS in JS でありながら、基本的にはビルド結果の内容で完全にスタイリングされるので、ランタイムに影響を与えにくい特徴を持つ CSSのシンタックスを維持しつつも、Nested CSS がつかえたり、React の props をもとに動的にスタイルを変更する事もできる Source Map の出力に対応しており、デバッグしやすい
CSS Preprocessor を必要としない (= 別途 PostCSS を必要としないということらしい) Demo
code:サンプルコード(jsx)
import { styled } from 'linaria/react';
import React from 'react';
import ReactDOM from 'react-dom';
const Title = styled.h1`
font-family: sans-serif;
font-size: 48px;
`;
const App = () => <Title>Hello world!</Title>;
ReactDOM.render(<App />, document.getElementById('root'));