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

追記

glamorous が Deprecated になり、emotion への移行が推奨されています。

yami-beta.hateblo.jp

CSS-in-JS

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

webpack-serve が v1 になっていた

webpack-serve^1.0.0 になっていました。

www.npmjs.com

少し触ってみたので、気づいた点について書いていきます。 (以下は v1.0.2 時点の内容になります)

mode の扱い

以前書いた以下の記事で、webpack-serve は webpack.config.js で関数で設定を記述する方法を非推奨としているので、webpack 4 から導入された --mode を設定ファイル内で参照する方法が無いと記述していました。

yami-beta.hateblo.jp

この mode の扱いですが、現在は README に記載されているように WEBPACK_SERVE という環境変数を参照して切り替える方法が示されています。

{
  mode: process.env.WEBPACK_SERVE ? 'development' : 'production',
}

webpack 4 を使っていて気づいたのですが、設定ファイルの mode は、webpack-cli を用いている場合 webpack --mode production のように CLI オプションが優先されるようです。

www.npmjs.com

つまり { mode: "development" } と固定値にしていても webpack --mode production というコマンドを実行すれば、production mode でビルドされます。 (わざわざ args から --mode の値を取得する必要は無さそうです)

自動リロード(HMR を含む)について

webpack-serve では webpack-hot-client を用いて WebSocket を使ったリロードが行われます。

npmjs.com

自動リロードがされない場合がある

しかし webpack-serve を使っていて、ソースコードを変更しても自動リロードがされないことがありました。

WebSocket connection to 'ws://localhost:8081/' failed: Error during WebSocket handshake: Unexpected response code: 200

調べてみたところ、以下のように serve.config.js (webpack-serve の設定ファイル)に host: "127.0.0.1" のように IP アドレスを指定すると動作しました。 ( host のデフォルト値は localhost です)

module.exports = {
  host: "127.0.0.1", // "::1" でも可
};

webpack-serve が内部で使っている webpack-hot-client は WebSocket サーバを立てる際に ws というライブラリを用いています。
該当行: webpack-hot-client/index.js at v3.0.0 · webpack-contrib/webpack-hot-client · GitHub

また、この WebSocket サーバへ接続するクライアントはブラウザの WebSocket を直接用いているようです。
該当行: webpack-hot-client/socket.js at v3.0.0 · webpack-contrib/webpack-hot-client · GitHub

www.npmjs.com

webpack-serve のコードを追っていくと分かりますが、サーバとクライアント双方に host の値が渡されるため、恐らく ws とブラウザの WebSocket"localhost" を渡した際に IPv4IPv6 の解釈のずれが生じてしまうと WebSocket サーバへの接続に失敗し、自動リロードが機能しないのでは無いかと思われます。

まとめ

  • webpack-serve が v1 になりました
  • mode については webpack-serve でも問題無さそう
  • WebSocket 周りの注意が必要そう