CSS-in-JS ライブラリの glamorous が UNMAINTAINED になっていた
glamorous は PayPal が開発している CSS-in-JS ライブラリです。 この glamorous が README に記載されている通り UNMAINTAINED となっています。
glamorous は npmtrends を見ると styled-components や radium と同じくらいダウンロードされています。
UNMAINTAINED の理由と移行先
以下の issue に記載されている通り glamorous は emotion への移行を推奨しています。
移行先として emotion が選ばれた理由としては以下の内容が上記 issue で示されています。
- emotion は glamorous の機能のすべてをカバーしている
- emotion は glamorous より高速かつ小さい
emotion
emotion については以下の記事で軽く触れましたが CSS-in-JS ライブラリの一つです。
styled-components 等と比較するとダウンロード数は多くありませんが、glamorous の移行先として指定されたことから、今後 glamorous 利用者が移行してくることで、利用事例が出てくるかもしれません。
CSS-in-JS ライブラリの emotion が気になっている
追記
glamorous が Deprecated になり、emotion への移行が推奨されています。
CSS-in-JS
CSS-in-JS ライブラリでは styled-components が有名ですが、最近 emotion というライブラリが気になっています。
注意: emotion をまだちゃんと試していないので以下の内容は公式サイトやドキュメントを見た感想に過ぎません
emotion
emotion も CSS-in-JS ライブラリですが、スタイルの書き方にバリエーションがあるのが特徴です。
以下のように Template literal で記述した CSS を className
に渡すパターンや
import { css } from 'emotion' const color = 'darkgreen' render( <div className={css` background-color: hotpink; &:hover { color: ${color}; } `} > This has a hotpink background. </div> )
(https://emotion.sh/docs/css より)
styled-components と同様に CSS を適用したコンポーネントを生成するパターンがあります。
import styled from 'react-emotion' const Button = styled('button')` color: turquoise; ` render(<Button>This my button component.</Button>)
(https://emotion.sh/docs/styled より)
個人的な感想
styled-components のコンポーネントごと生成してしまう方法が好みではなかったので、emotion の Template literal で記述した CSS を className に指定する方法が割と良さそうに見えています。
(本当に個人的な理由として styled-components の vim 用シンタックスハイライトである vim-styled-components がだいぶ重たいのが辛いという事情もあります)