React で CSS を使うには styled-components や CSS Modules などの方法があります。
僕は React は修行中の身で styled-components をちょっとかじったくらいなのですが、最近何かの記事で styled-jsx というものを見て勉強中の今だからこそ試してみよう！と思いたちました。
ちょうどパワポカラオケ用のWebアプリで React を使っていたのでこのプロジェクトで試しました。
タイトルの「妥協なしの完全な CSS in JSX」はリポジトリの説明文「Full CSS support for JSX without compromises」の意訳です。
この記事は紹介程度のものなので詳しくはREADMEをご覧ください。
どんなの？
コードはREADMEより。英語は意訳してます。
export default () => (
<div>
<p>この p タグはスタイルが適用されるよ :)</p>
{ /*子 <Component /> 内部の p タグには適用されない */ }
<style jsx>{`
p {
color: red;
}
`}</style>
</div>
)
コンポーネントの中の jsx 属性をつけた style タグにCSSを書いていく感じですね。
Vue や Shadow DOM の CSS の書き方に似てていいですね！
styled-components のようにスタイリングのために余計なコンポーネントを作る必要もなくなります。
機能
- パフォーマンスに影響しない完全なCSSのサポート
- 実行時のサイズは3kb (gzipした状態で, 元は12kb)
- 完全なセレクタ、アニメーション、キーフレームの隔離
- 組み込みのCSSベンダープレフィックス
- 早く、最小限で効率的なCSSトランジション高性能ランタイム
- SSR以外の高パフォーマンスな実行時CSS注入
- ソースマップ
- 動的CSSとテーマのサポート
- プラグインを使ったCSSの処理
使い方
インストール
npmの場合
npm i -S styled-jsx
yarnの場合
yarn add styled-jsx
設定
.babelrcに以下の設定を追記します。
.babelrc
{
"plugins": [
"styled-jsx/babel"
]
}
完了です！
注：
Create React Appを使用する場合は eject する必要があります。
eject すると package.jsonの"babel"フィールドに Babel の設定があるのでそこに追記してください。
package.json（"babel"だけ抜粋）
"babel": {
"presets": [
"react-app"
],
"plugins": [
"styled-jsx/babel"
]
},
仕組み
styled-jsx は Babel プラグインでJSX内のクラスを被らないものに変えて、CSSのセレクタもそれに合わせています。
例
.wrapper → .wrapper.jsx-XXX (XXXはクラスごとに一意の数字)
img → img.jsx-XXX
使ってみた感想
- やはり
<style>で書けるのはきれいで気持ちいい。 - サードパーティのコンポーネントを使うがちょい汚くなる
-
<style jsx>{がリンターやフォーマッタに設定によっては引っかかる（自分はignoreしてる） - 日本語の情報が全く無いのがつらかった。英語もまだ多いとは言えない……。
- react-transition-group の CSSTransition がうまく動かない？（自分の書き方が悪いだけ？ うまいやり方があればコメントやTwitterで教えてください！）
最後に
QiitaのJSXシンタックスハイライト……