Blog

ReactコンポーネントででCSS Modulesを採用している場合は、<div class="hoge"></div>ではなく

<div className={styles.hoge}></div>

というようにクラスを指定する必要があります。

これをEmmetで書けたら…と思っていましたが、なんと対応していました。

結論

ドット二つに続けてクラス名を入力します。 ..hoge と書くと、

<div styleName={styles.hoge}></div>

と変換されます。

このstyleNameをclassNameに変換するには、VSCodeのsettings.jsonに以下つけたし。

"emmet.syntaxProfiles": {
  "jsx": {
      "markup.attributes": {
          "class*": "className",
      },
      "markup.valuePrefix": {
          "class*": "styles"
      }
  }
},

"styles"のところは、CSS Modulesの変数名に合わせて変更してください。
import styles from './hoge.css'; の場合は、"styles"になります。

まとめ

CSS ModulesでEmmetを使う方法でした。

そもそもNext.jsのプロジェクトでCSS Modulesを使うか否かについて、CSSを何で書くかはまだスタンダードが決まってるわけではないと思ってますので
(このTipsも)きっと需要ある…と思います。

Emmetにこの変換を求める動きは結構前からあったみたいで、issuesがありました。
https://github.com/emmetio/emmet/issues/589
これが、2023年に入ってやっと実装されたようです。VSCodeのアップデートに反映されたのは、2023年6月でした。
https://code.visualstudio.com/updates/v1_80#_improved-emmet-support-for-css-modules-in-jsxtsx

そう考えると、需要あったんだなぁと思います。
個人的にはCSS Modulesは使いやすく、このアップデートはすごく嬉しいです。書き心地最高です。