Next.jsにCSS Modulesを導入する

ZennのフロントのCSSをどうするか問題。
linariaは一旦様子見ということで中断したが、やはりstyled-componentsだとパフォーマンスが気になる。

https://zenn.dev/catnose99/scraps/c98d400e983828

2020/11/30時点では、Next.jsではなんとなくCSS Modulesを推しているような空気がある。ビルトインサポートしてるし。

これまでCSS Modulesから逃げ続けてきたけど、このツイートを見て、そうだよなーーーCSS Modulesやってみるかーーーって気になってきた。

というわけでやってみる

Next.js は CSS Modulesをビルトインサポートしてるので、大きな設定は不要。

SCSSを使う

Scssで書きたいので公式の説明に則ってsassを導入する。

$ yarn add sass

これだけでfoo.modules.scssが使えるようになる。あとは以下のような感じでスタイルをあてていけばOK。

import styles from './Button.module.scss'

export function Button() {
  return (
    <button className={styles.error}>
      Click me
    </button>
  )
}

.modules.scssファイルをどこに配置するか

ディレクトリ構造としては主に以下の2つの選択肢が考えられる。

1. componentsディレクトリと同じ階層に置く

components/Button.tsxのスタイルはcomponents/Button.module.scssに書くパターン

2. stylesのようなディレクトリを作ってcomponentsと同じ階層で配置

components/Button.tsxのスタイルはstyles/components/Button.module.scssに書くパターン

Zennの場合にはcomponentsディレクトリのファイル数がけっこう多いので、見通しをよくするために（2）のパターンでいくことにした。

stylesディレクトリ内の構造

stylesディレクトリの中はさらにこんな感じで分けた。

styles/global.scss

• ここにグローバルに（アプリ全体で）読み込みたいスタイルを書く。
• _app.tsxでimport styles/global.scssするだけで読み込み設定は完了。

styles/components

• コンポーネント用の.module.scssを入れてく

styles/layouts

• Zennではレイアウト用のコンポーネントはlayoutsディレクトリに入れてるので

styles/variables.scss

• scssファイルで使いまわしたい変数をここに入れる

CSS Modulesで変数をどう管理するか

カラーコードはCSS変数で

カラーコードなどのCSSプロパティの変数は、グローバルに読み込むCSSで設定すればOK。

:root {
    --c-primary: #3ea8ff;
}

で、各module.scssからこれを使う。

.primary {
  background: var(--c-primary);
}

メディアクエリの変数を共有する

問題はメディアクエリ。毎回@media only screen and (max-width : 480px) {}とか書きたくないし、直接数字を管理したくない。

↓ というわけでstyles/variables.scssに以下のようにメディアクエリのmixinを書いておく。

$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;

$breakpoints: (
  'sm': 'screen and (max-width: #{$sm})',
  'md': 'screen and (max-width: #{$md})',
  'lg': 'screen and (max-width: #{$lg})',
  'xl': 'screen and (max-width: #{$xl})'
);

@mixin mq($size) {
  @media #{map-get($breakpoints, $size)} {
    @content;
  }
}

↓ 各ファイルから使う

@import '../variables';

.container {
  margin: 0 2rem;

  // ↓768px以下で適用したいCSS
  @include mq(md) {
     margin: 0 1rem;
  }
}

相対パスでimportするのはしんどい

各CSSモジュールのファイルから相対パスでvariables.scssにアクセスするのはしんどい。

@import '../variables';

例えばcomponents/modal/Fullscreen.module.scssからは

@import '../../variables';

としなければならなくて、ディレクトリを整理したときとかにミスりそう。

next.config.jsのsassOptionsをいじって対応

以下のようにstylesディレクトリをincludePathsに追加する。

const path = require('path');

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
  ...
}

これでcomponents/modal/Fullscreen.module.scssから相対パスを使わずにstyles/variables.scssをimportできるようになる。

@import 'variables';

.container {
  margin: 0 2rem;
  @include mq(md) {
     margin: 0 1rem;
  }
}

ベンダープレフィックス

特に設定はしていないが、flexやgrid周りなど、ちゃんとベンダープレフィックスがついてる。設定を変えるにはpostcss.config.jsonでautoprefixerをいじれば良さそう。

https://nextjs.org/docs/advanced-features/customizing-postcss-config#customizing-plugins

これで一通りネックになりそうな部分を乗り越えた気がする。styled-componentsからの置き換えが完了したらメリット・デメリットを書く。

Nextjs + TypeScriptでCSS Modules使うとき、クラス名の型を推論させる方法がわからぬ…
本当にこのクラス名存在する？って不安になる

CSS Modulesでmodifierを使う

BEMでいうmodifierを使いたい場合は以下のようにすれば良いらしい。

import clsx from "clsx"; // クラス名を管理しやすくするやつ

<button className={clsx(styles.button, styles.buttonLarge)}>Click Me</button>

.button { background-color: black; }
.buttonLarge { font-size: 1.1rem; }

clsxのようなクラス名の管理を楽にしてくれるライブラリを使えば、動的に変えるのも簡単。

<button className={
  clsx(
     styles.button,
     { [styles.buttonLarge]: shouldLarge }
   )
 }
>Click Me</button>

注意したいのは.buttonと.buttonLargeのどちらが優先度が高いかについての保証はないこと。

例えば、以下のようにして、両方のクラスを要素にあてたときに、背景色が「black」になるか「white」になるかが保証されない。

.button { background-color: black; }
.buttonWhite { background-color: white; }

そのため、上書きしたいような場合にはcomposesというものを使う。

.foo { 
   font-size: 1rem;
   background-color: #333;
}
.fooLarge {
   composes: foo; /* fooのスタイルがそのままここに突っ込まれるイメージ */
   font-size: 1.1rem;
}

そしてクラス名としてはどちらか片方だけをあてる。

<div className={foo}>
// もしくは
<div className={fooLarge}>

CSS Modulesでアニメーション

普通に@keyframesが使える。

@keyframes foo {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

.container {
  animation: foo 0.3s ease;
}

CSS ModulesをReactで使う場合はclsxを合わせて使うと書きやすくておすすめ。

https://github.com/lukeed/clsx

ようやく終わった。CSS Modulesは柔軟に書きづらいと感じたが、一貫した書き方が強いられるという点では良いかもしれない。

パフォーマンスの差をPage Speed Insightsでざっくりと計測する

Before：styled-components

After：CSS Modules

「Style & Layout」の時間が半分近くまで短縮されてるっぽい。体感的に正直分からない。

CSS Modulesがdeprecatedにならないことを願う

@useを使ってNextJsにCSS Modulesを導入したデモを作ってみました。

エイリアスがうまくtyped-scss-modulesライブラリのオプション引数で制御できず、以下のようにしています。

@forward 'src/styles/mq';
// @forward '@/styles/mq';

オプション引数でこうするとうまくいっているように見えました。デモもちょこっと直してみました。
（@始まりのパスをsrc始まりのパスにマッピングする場合）

--aliasPrefixes.@ src/

demo code.
https://codesandbox.io/p/sandbox/damp-tdd-400j5x?file=%2Fsrc%2Ffeatures%2Fhome%2Fcomponents%2FHome%2FHome.tsx

demo site.
https://400j5x-42649.csb.app/

簡単ですが、以上です。