Zenn
💄

styled-components を v4 から v5 に移行する

2021/07/04に公開
CSS
React
styled-components
tech

こんにちは、じろーです

今日は、働いているサービスで使用している styled-components について、v4 から v5 にアップデートする機会があったので、せっかくならと主な変更点をまとめてみたものになります
v5 はリリースされて1年半立ちますので、2021/07/03時点でリリースされているマイナーバージョン v5.3.0 までの変更点も簡単にまとめてみました

TL;DR:

  • パフォーマンスが上がる
  • 破壊的変更はない

v5.0.0

TL;DR:

  • バンドルサイズが 19% 小さくなる
  • クライアントサイドでのマウントが 18% 速くなる
  • 動的スタイルの更新が 17% 速くなる
  • サーバーサイドでのレンダリングが 45% 速くなる
  • RTLのサポート
  • 破壊的変更はない

変更点

createGlobalStyle の中で @import を使用しないことを推奨している、現時点では機能していない

StyleSheetManager への機能追加

  • stylisPluginsで、stylis-plugin-rtlのようなプラグインを提供できます
<StyleSheetManager stylisPlugins={[]}>
  ...
</StyleSheetManager>
  • もし古いブラウザをサポートする必要がないのであれば、disableVendorPrefixesで、autoprefixを削除することができます
<StyleSheetManager disableVendorPrefixes>
  ...
</StyleSheetManager>
  • disableCSSOMInjection で、CSSOMで注入されたスタイルを解析できない場合に、低速な注入モードを強制的に使用します
<StyleSheetManager disableCSSOMInjection>
  ...
</StyleSheetManager>

v4で非推奨となっていた attrs 構文内のサブファンクションの削除

// NG
styled.div.attrs({ role: (props) => props.onClick ? 'button' : '' })`
  color: red;
`
becomes

// OK
styled.div.attrs((props) => ({ role: props.onClick ? 'button' : '' }))`
  color: red;

生成するクラス名に ad を含まないように

  • 主に、アドブロックを回避するためのものです

v5.1.0

変更点

shouldForwardProp APIの追加

  • 複数のHOCを組み合わせたときに、複数のレイヤーが同じpropsを使用する場面が発生します。このとき、子孫コンポーネントに渡されるpropsをカスタマイズすることができます
const Comp = styled('div').withConfig({
  shouldForwardProp: (prop) => !['filterThis'].includes(prop),
})`
  color: red;
`;

render(<Comp filterThis="abc" passThru="def" />);

// -> <div className="[generated]" passThru="def"></div>

transient props APIの追加

  • shouldForwardProp APIを補完するAPIです。styled-componentsでは、あらゆる種類のpropsをスタイリングに使用することができますが、使用する可能性のあるpropsに対してフィルタを追加するのは面倒になります
    transient props はスタイリングされたコンポーネントでのみ使用され、深い階層のコンポーネントには渡されないpropsを渡すためのパターンになります
const Comp = styled.div`
  color: ${props => props.$fg || 'black'};
`;

render(<Comp $fg="red">I'm red!</Comp>);

v5.2.0

変更点

  • 不具合修正やパフォーマンス改善が主になります

v5.3.0

変更点

  • shouldForwardProp に第3引数 elementToBeCreated が追加されます

まとめ

以上、簡単なまとめになります。
v4 のままにしているプロジェクトがあれば、すぐにでも v5 にアップデートするのがよさそうですね

参考

Discussion