typescript-plugin-styled-components 導入メモ

Styled Components を適用したコンポーネントは sc- からはじまるクラス名が HTML に付与されます。

どこで定義されているコンポーネントなのか確認したいとき、そのままだとちょっとわかりにくいです。

React Dev tool から確認してもコンポーネント名は表示されないので、どのファイルのどのコンポーネントなのかはわかりません。

TypeScript + Styled Components + Webpack の場合、 typescript-plugin-styled-components を導入することでこの課題を解決できるかも知れません。

github.com

導入方法

プロジェクトに typescript-plugin-styled-components をインストールします。

npm install typescript-plugin-styled-components --save-dev

TypeScript の場合は loader で typescript-plugin-styled-components の処理を追加してあげる必要があります。

今回は ts-loader を使う方法を記載します。

webpack.config.js で typescript-plugin-styled-components を読み込んで transformer を作成します。

const createStyledComponentsTransformer = require("typescript-plugin-styled-components")
  .default;
const styledComponentsTransformer = createStyledComponentsTransformer();

この transformer を ts-loader の getCustomTransformers に渡します。

module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [{
          loader: "ts-loader",
          options: {
            getCustomTransformers: () => ({
              before: [styledComponentsTransformer]
            })
          }
        }],
      }
    ]
  },

StyledHeader という名前が sc- の前に表示されるようになりました。

Header コンポーネントは下のようなコードになっています。

const StyledHeader = styled.header`
  text-align: center;
  padding: 1em;
  background-color: tomato;
`

export function Header() {
  return (
    <StyledHeader>Header</StyledHeader>
  );

ここで定義した StyledHeader という名前がHTML のクラスに表出するようになりました！

クラス名にファイル名も追加する

transformer を作成する際に getDisplayName オプションを利用することで任意のクラス名を指定できます。

getDisplayName(filename: string, bindingName: string | undefined): string | undefined

getDisplayName に渡す関数の第一引数にはファイル名、第二引数にはさきほどの StyledHeader のようにコンポーネント名が渡ってきます。

これを利用して ファイル名-コンポーネント名-sc-xxx となるようにしてみます。

const styledComponentsTransformer = createStyledComponentsTransformer({
  getDisplayName: (filename, bindingName) => {
    return `${path.basename(filename, '.tsx')}-${bindingName}`;
  }
});

Header というファイルから呼び出されていることがわかるようになりました！

---

Babel を使っている場合

今回は記事中で解説しませんでしたが、Babel を使っている場合はbabel-plugin-styled-components を使えば、同じようにコンポーネント名やファイル名などをHTML のクラス名に含めることができます。

導入方法も簡単なので下のリンク先を確認してみてください。

https://www.styled-components.com/docs/tooling#usage