reactでcss-modules使うときにbabel-plugin-react-css-modulesを使う

特徴

• styleNameというプロパティにstringでcssで設定したclass名を記入する
• stringで設定できるため、cssの命名方法に準拠しながらcss-modulesを利用することができる
• classNameと使い分けができるので、globalなcssを使う場合とで利用用途を分けられる

usage

(注意: create-react-appのwebpack設定に便乗してる部分あり)
(注意2: cssのクラス名は定義しておかないとエラーになります)

HogeComponent.tsx

import * as React from 'react';
import '/path/to/style.module.scss';

const HogeComponent: React.FC = () => (
  <div styleName="hoge-component">Hoge Component</div>
);

style.module.scss

.hoge-component {
  color: red;
  border: 1px solid red;
  background-color: white;
  border-radius: 8px;
}

導入手順

• 自分が試した環境は以下

- npm -> 6.13.6
- create-react-appをejectしたものを使用

• 以下3つの手順が必要
  • babel-plugin-react-css-modulesxのインストール
  • babelのconfigにpluginの設定追記
  • webpack.config.jsにcssの名称特定をする設定の追記

babel-plugin-react-css-modulesのインストール

プロジェクト直下にて

$ npm install babel-plugin-react-css-modules @types/babel-plugin-react-css-modules post-scss

自分はtypescriptとscss使いたかったのでいろいろまとめてinstallしています。

babelのconfigにpluginの設定追記

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    [
      "react-css-modules",
      {
        "filetypes": {
          ".scss": {
            "syntax": "postcss-scss"
          }
        }
      }
    ]
  ]
}

package.jsonやbabelrcなど任意の場所にpluginの設定をしてください。

webpack.config.jsにcssの名称特定をする設定の追記

create-react-appの恩恵に乗っかってhoge.module.scssを使った場合は以下の場所に設定が必要。
.module.css使うぜ！とか普通のcss, scssファイルの設定をカスタマイズして使っている方は、cssのmodule化設定の際にlocalIdentNameを設定しておいてください

{
  module: {
    rules: [
      {
        oneof: [
          {
            test: sassModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 3,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: {
                  // getLocalIdent: getCSSModuleLocalIdent,
                  // ↑をコメントアウトして↓を追記
                  localIdentName: "[path]___[name]__[local]___[hash:base64:5]"
                },
              },
              'sass-loader'
            ),
          },
        ],
      },
    ],
  },
}

使ってみてる感想

• わざわざstylesを定義してcssを当てる必要がなくなるので、書いてるときすごい楽
• ただどうしてもhtmlのclassに名前をつけるときのような雰囲気でぱーっと作っちゃうときがあって、リロードするとエラーが起きる(表面上の書き方はどうあれ一応css-modulesなので)
• つまりstyleNameを当てたときにそのclassのスタイルが定義されているかどうかに関してのエラーは吐かれてない。(vscodeの設定でどうにかなんのかな)

追記(2020-05-26 24:07)
補完効かせてくれるプラグインあった。これで完璧かな

のような感じ。個人的にstyled-componentよりもcss-modulesのほうが好きだったというのもあり、これからも重宝して使いそう。

参考

• https://github.com/gajus/babel-plugin-react-css-modules/issues/108

tips

• Webサイト開発にCSS in JavaScriptを使うのはやめよう

最後にちらっとbabel-plugin-react-css-modulesの話が出てきます。ほんのチラッとだけ。