styled-componentsを利用したコンポーネントのクラス名は、次のようにランダムな値が割り当てられるためデバッグが超絶し辛いです。
<div class="sc-bwzfXH gJIwTT">
<button class="sc-bdVaJa lngsml">Learn React</button>
<button class="sc-bdVaJa gcxEky">Learn React</button>
</div>
そこでbebelのプラグインとして配布されているbabel-plugin-styled-components を利用することで、コンポーネントが書かれているファイル名やコンポーネントのdisplayNameをクラス名に出力することができます。
babel-plugin-styled-components
https://github.com/styled-components/babel-plugin-styled-components
まず始めにインストールしましょう。
npm install --save-dev babel-plugin-styled-components
インストールできたらこのプラグインの設定を行います。
package.json もしくは .babelrc に設定を追加します。
package.jsonの場合
"babel": {
"plugins": [
[ "babel-plugin-styled-components" ]
]
}
.babelrcの場合
{
"plugins": [
[ "babel-plugin-styled-components" ]
]
}
これで出力を確認してみると……
<div class="App__Container-w3zbcp-1 iXTFHr">
<button class="App__Button-w3zbcp-0 dUeHxi">Learn React</button>
<button class="App__Button-w3zbcp-0 hVnQOu">Learn React</button>
</div>
App__Container-**** , App__Button-***のように、
ファイル名__displayName-*** の形式でクラス名が出力されます。
これですよ、これこれ。
オプション設定
bebel-plugin-styled-componentsの指定時にオプションを渡せます。
ファイル名を出力しない
"plugins": [
[
"babel-plugin-styled-components", {
"fileName": false
}
]
]
displayNameを出力しない
"plugins": [
[
"babel-plugin-styled-components", {
"displayName": false
}
]
]
CSSのminifyを行わない
"plugins": [
[
"babel-plugin-styled-components", {
"minify": false
}
]
]
デッドコードを除去する
"plugins": [
[
"babel-plugin-styled-components", {
"pure": true
}
]
]
他にも指定できるので、この記事の一番下にある公式ドキュメントのリンクから確認してみてください。
環境で切り替える
babelのenv設定で出力を切り替えるようにしておくとスマートです。
"env": {
"development": {
"plugins": [
[
"babel-plugin-styled-components", {
"minify": false
}
]
]
},
// 本番環境は出力しない
"production": {
"plugins": [
[
"babel-plugin-styled-components", {
"fileName": false,
"displayName": false,
"pure": true,
}
]
]
},
"test": {
"plugins": [
[
"babel-plugin-styled-components", {
"fileName": false
}
]
]
}
}