Zenn
😇

CSS Modules を知らずに導入してしまっていて混乱した話

2020/12/02に公開
PostCSS
CSS Modules
失敗談
tech

CSS Modules なんてあったんですね。知りませんでした。
(自分で yarn add してるのに……）

TL;DR

  • yarn add するとき、設定ファイルを書くときは何をやってるかちゃんと理解してやろう
    • 残念だけど当然よね
  • css-modules / postcss-modules | GitHub

PostCSS でトランスパイルしたCSSがなんか変

トランスパイル前

body {
  .dark {
    background-color: #222;
  }
}

トランスパイル後（Parcel + PostCSS で実行）

body ._dark_57f73{background-color:#222}

何このクラスのあとのハッシュ？？？？？？

CSS Modules というものがあるらしい

どんなキーワードで検索していてたどり着いたのかほぼ覚えてないのですが、
確か

  • 何かが有効になってそうだな……（結果的に当たってはいた）
  • Parcel CLI のオプションでOFFにできる……？
    • Parcel CLI のオプションをいろいろ見る、試してみる
    • う〜ん関係なさそう……
    • CLI | Parcel
  • PostCSS の設定かなぁ……
    • そういえば modules: true って指定してる（どっかからコピーしてきた）けどこれなんだ……？
    • "Parcel css modules" とかで検索する
    • このサイトが引っかかる
  • CSS Modules ってなんだ!?
  • → これだー！
  • そして Parcel は関係ない！！！

みたいな感じでたどり着いた気がします。たぶん。
なるほど、BEM的な(?)ネーミング規則を自動でやってくれるのが
CSS Modules なんですね。

よく見ると問題の起こっているプロジェクトの package.json ではちゃんと導入してありますし、

  "devDependencies": {
    "postcss-modules": "^3.2.2",
  }

Parcel の .postcssrc による設定で有効にしてました……。

{
  "modules": true,      // ←ココ
  "plugins": {
    "tailwindcss": {},
    "postcss-nested": {},    
  }
}

CSS Modules のネーミングルールを設定する

せっかくなので有効にしたまま追加の設定も試してみましょう。
.postcssrc をこのようにしてトランスパイルすると

{
  "modules": true,
  "plugins": {
    "tailwindcss": {},
    "postcss-nested": {},
    "postcss-modules": {
      "generateScopedName": "[name]__[local]",
    }    
  }
}

application.css

body {
  .dark {
    background-color: #222;
  }
}

これが

application.css

body .application__dark{background-color:#222}

こうなってくれます。
なるほどー便利！

よかった解決！
そして今回のプロジェクトには不要なので yarn remove postcss-modules だ！！（えぇ……）

Discussion