CSS-in-JS ライブラリの glamorous が UNMAINTAINED になっていた

glamorousPayPal が開発している CSS-in-JS ライブラリです。 この glamorous が README に記載されている通り UNMAINTAINED となっています。

github.com

glamorous は npmtrends を見ると styled-componentsradium と同じくらいダウンロードされています。

www.npmtrends.com

UNMAINTAINED の理由と移行先

以下の issue に記載されている通り glamorous は emotion への移行を推奨しています。

github.com

github.com

移行先として emotion が選ばれた理由としては以下の内容が上記 issue で示されています。

  • emotion は glamorous の機能のすべてをカバーしている
  • emotion は glamorous より高速かつ小さい

emotion

emotion については以下の記事で軽く触れましたが CSS-in-JS ライブラリの一つです。
styled-components 等と比較するとダウンロード数は多くありませんが、glamorous の移行先として指定されたことから、今後 glamorous 利用者が移行してくることで、利用事例が出てくるかもしれません。

yami-beta.hateblo.jp

CSS-in-JS ライブラリの emotion が気になっている

CSS-in-JS ライブラリでは styled-components が有名ですが、最近 emotion というライブラリが気になっています。

www.npmjs.com

www.npmjs.com

注意: emotion をまだちゃんと試していないので以下の内容は公式サイトやドキュメントを見た感想に過ぎません

emotion

emotion も CSS-in-JS ライブラリですが、スタイルの書き方にバリエーションがあるのが特徴です。

以下のように Template literal で記述した CSSclassName に渡すパターンや

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 がだいぶ重たいのが辛いという事情もあります)