Next.js にて Stylelint を導入する

最終更新日:

環境

  • Next.js v15
  • React v19
  • Sass v1.8x
  • Stylelint v16

Stylelint とは

CSS のコードフォーマッター。
汎用的なコードフォーマッターより細かい CSS のルールが設定できる。

インストール

Sass と併用するので、
少し探して出てきた下記プラグインのどれかを使う。

$ npm install --save-dev stylelint stylelint-config-recommended-scss

試す

構成

.stylelintrc.json
package.json
/src

.stylelintrc.json

{
	"extends": "stylelint-config-recommended-scss",
	"rules": {}
}

package.json

{
	"scripts": {
		"lint:style": "stylelint \"**/*.scss\" --color"
	}
}

cli

$ npm run lint:style

or

$ npx stylelint "**/*.css"

Unexpected duplicate selector "&", first used

下記エラーが出た。

$ npm run lint:style
Unexpected duplicate selector "&", first used no-duplicate-selectors

該当箇所サンプル。

.some-class {
	a {
		color: #268;
	}
	& {
		color: #444;
	}
}

これを下記に変更してビルドすると、
Stylelint でのエラーは解消されるけど、
ビルドで Warning が出る。

.some-class {
	a {
		color: #268;
	}
	color: #444;
}

ビルド。

$ npm run build

Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

提示された URL では、
上記エラーと同じような内容が書いてある。

Github ではこの話題は議論中。

最終的に

エラーが出た scss 箇所

元に戻す。

.some-class {
	a {
		color: #268;
	}
	& {
		color: #444;
	}
}

.stylelintrc.json

一旦無視する。

{
	"extends": "stylelint-config-recommended-scss",
	"rules": {
		"no-duplicate-selectors": [null]
	}
}

試す

他変更なし。

$ npm run lint:style