Zenn
🍱

SCSS/SASSとTailwindをstylelintでも同居させる(Next.js/SCSS/Tailwind/Stylelint)

2021/10/11に公開
Next.js
Scss
Tailwind CSS
Stylelint
cssmodule
tech

はじめに

今回Next.jsでビルドインサポートされているCSS Moduleでscss/sassとtailwindを使用する機会があり、stylelintを効かせたいなと思い設定している際に手詰まった箇所、設定方法をまとめていこうと思います。
もっといい方法があればコメント等でご教授してくださると嬉しいです！

注意書き

この記事では以下のことについては扱いません。

当記事ではyarnを用いてるためyarnでのインストール方法を記載しているためnpmを使っている方は逐次置き換えて実行の方お願いします。

CSS ModuleへSCSS/SASSの導入

今回はNext.jsへの導入なので公式に乗っている記事を参考に導入します。

$ yarn add sass

../styles/globals.cssを../styles/globals.scssへ変更しましょう。
他にもcssファイルがあれば同じく拡張子をscssに。

_app.tsx
import React from 'react';
import type { AppProps } from 'next/app';
- import '../styles/globals.css'
+ import '../styles/globals.scss';

function MyApp({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />
}

export default MyApp;

これで完了です。

Next.jsへTailwindの導入

こちらも基本的にtailwindの公式に乗っている記事を参考に導入していきます。

導入

$ yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

適用

構成ファイルを作成

npx tailwindcss init -p

tailwind.config.jsとpostcss.config.jsがそれぞれ生成されます。
内容は以下のようになっています。

tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
postcss.config.js
module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
}

tailwindを適用するパスの設定をtailwind.config.jsに行います。

tailwind.config.js
module.exports = {
-  purge: [],
+  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

本来はこれでいいのですが個人的にTailwind CSS v2.1から導入されたjit(ジャストインタイムモード)コンパイラで快適に開発していきたいので設定を追加します。

tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

これでjitの設定も完了です。
他にもdarkmode対応にさせたければmediaかclassへ変更しましょう。
mediaはブラウザの設定等でdark、lightを自動確認してくれる設定
classは独自に切り替えたい場合に使う設定です。
ボタンでモード切替をしたかったりする場合はclassがおすすめです。

Next.jsへ適用させる

直接tailwindをimportする方法もありますが公式が推奨しているcssにimportしていくようにします。
../styles/globals.scssに記述していきます。

globals.scss
@tailwind base;
@tailwind components;
@tailwind utilities;

ここまで完了したら一度devを動かしてみましょう。

$ yarn dev

これでtailwindが読み込まれていれば完了です。

Stylelintの導入

結構調べると@importなどいわゆるat-rule-no-unknownで引っかかっている際"ignoreAtRules"で弾いてしまっている記事を見かけます。
拡張機能もlint通せないか？と考えました。
その解消法も含め設定していきます。

stylelintとGoogleのCSS Style GuideやAirbnb'sのStyleguideなどを含むスタイルガイドラインのルールが内蔵されているstylelint-config-standard、アルファベット順に並び替えをしてくれるstylelint-orderを導入します。

$ yarn add -D stylelint stylelint-config-standard stylelint-order

これだけだと拡張機能のlintがうまくいかない為scss/sass拡張のプラグインを追加します。

$ yarn add -D stylelint-scss stylelint-config-recommended-scss

設定

.stylelintrc.jsonをプロジェクトルートに作成します。
※ 最初の.を忘れずつけるようにしましょう。

stylelintの設定を記述

.stylelintrc.json
{
  "plugins": ["stylelint-scss", "stylelint-order"],
  "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
  "rules": {
    // デフォルトのat-rule-no-unknownを使わなくする
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": [
      true,
      {
        // tailwindの@がつくものをignoreする
        "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
      }
    ],
    // 好きなルールを記述しましょう
  },
  "ignoreFiles": ["**/node_modules/**"]
}

package.jsonにコマンドを追加しましょう。

package.json
{
    "scripts": {
    "dev": "next dev",
    ...
+   "stylelint": "stylelint ./src/**/*.{css,scss}",
+   "stylelint:fix": "stylelint --fix ./src/**/*.{css,scss}",
    ...
  },
}

./src/~の部分はそのプロジェクトによってlintをかけたいディレクトリを設定してください。

コマンドでlintチェックしてみましょう

$ yarn stylelint

違反があればコンソールに表示されます。

lintで引っかかった部分を修正してみましょう

$ yarn stylelint:fix

これで修正されれば一連の導入完了です！
おつかれさまでした！

その他

VSCodeを使っていればsettingsで保存時に自動でstylelintが動くように設定したりすると便利です。

.vscode/settings.json
{
  ...
  "editor.codeActionsOnSave": {
     ...
+    "source.fixAll.stylelint": true
  },
+  "[css]": {
+    "editor.formatOnSave": false
+  },
+  "[scss]": {
+    "editor.formatOnSave": false
+  },
+  "css.validate": false,
+  "scss.validate": false
   ...
}

こんな感じです。

他にも毎回手動でlintかけたりIDEなどにやらせるのがめんどくさければ今回は説明しませんがhuskyを導入してpre-commit時にlintを効かせるようにするのもありかもです。
個人的にはGithubActionsでlintをかけた方が楽なのでworkflowsを愛用しています。

.github/workflows/lint.yml
name: lint

# push時
on: [push]

# lintをかける
jobs:
  eslint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
      - run: yarn install
      - run: yarn lint:fix
      - run: yarn prettier
      - run: yarn stylelint:fix

lintはESLintです。
こうすることでESLint、Prettier、Stylelintの設定漏れを防ぐことができますし、reviewdogを導入してgithub上にlint違反の情報などを明示的に吐かせたりなどいろいろ連携する際にもかなり便利です。

おわりに

長くなってしまいしたが参考になれば幸いです！
lintを導入すると進捗が爆上がりしてすごく助かってます！
いろいろ他にも便利なものを見つけていきたいです。
最後まで読んでいただきありがとうございました！

Discussion