gulpで監視しているscssファイルにstylelintを適用してcssの構文エラーも出るようにしたい！

現状

scssファイルをgulpで監視して、cssファイルを生成しています。

現状のgulpfile.jsの中身は以下の様な感じ。

gulpfile.js

var gulp = require("gulp");

var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var postcss = require("gulp-postcss");
var mqpacker = require("css-mqpacker");

gulp.task('default', function () {
  return gulp.watch('../BU/**/css/*scss', gulp.series('css'));
});


gulp.task("css", function() {

  const plugin = [
    mqpacker()
  ];

  return gulp.src("../BU/**/css/*scss")
  .pipe(sass({
    outputStyle: 'expanded'
  }))
  .pipe(autoprefixer({
    grid: true
  }))
  .pipe(postcss(plugin))
  .pipe(gulp.dest("../BU/"));

});

ベンダープレフィックス自動付与の「gulp-autoprefixer」と、メディアクエリをまとめるプラグイン「mqpacker」を入れて、BUフォルダ下にあるcssフォルダ内のscssファイルを監視しています。
コマンドラインでgulpと実行するとcssが生成されます。
あと「gulp-postcss」も入れています。

現状のエラー監視

gulp-sassが入っているので、以下のようなcssがあった場合エラーは出力されます。

style.scss

.hoge{
  color: #ddd
  font-size: 14px;
}

１行目#dddの後に「;」がないという間違い。

以下gulpを実行した際のコマンドラインの出力

[16:23:21] Error in plugin "gulp-sass"
Message:
    ../BU/sample/css/style.scss
Error: Invalid CSS after "  font-size": expected "}", was ": 14px;"
        on line 3 of ../BU/sample/css/style.scss
>>   font-size: 14px;

以下略

なんとなくのエラー文しか出ないという状態・・・

また以下のようなコードであった場合、エラーは出ずそのまま間違ったcssが出力されてしまいます。

style.scss

.hoge{
  .foo{
    color: #www;
    font-size: 14pm;
  }
}

colorが無効な値で、font-sizeの単位も間違っていますね。

[16:46:01] Starting 'css'...
[16:46:01] Finished 'css' after 10 ms

しかしcssはそのまま出力されてしまいます。

やりたいこと

stylelintを入れてもっと詳細にcssの構文エラーを出力したい。
stylelintでは様々な構文チェックを設定して監視できます。
中でも以下のことがチェックできるのが良いと思いました。

・同名セレクタの重複禁止
・セレクタ内のプロパティ重複禁止
・無効な文字の禁止

手順

では早速環境を作っていきます。

以下のパッケージのインストール

npmコマンドで以下のパッケージをインストールします。

・stylelint
・stylelint-scss
・stylelint-config-recommended
・stylelint-config-recommended-scss

npm i -D stylelint stylelint-scss stylelint-config-recommended stylelint-config-recommended-scss

各パッケージがインストールできたら後は設定ファイルを作っていくだけです。

gulpfile.jsの設定

gulpfile.js

var gulp = require("gulp");

var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var postcss = require("gulp-postcss");
var mqpacker = require("css-mqpacker");
var stylelint = require('stylelint');

gulp.task('default', function () {
  return gulp.watch('../BU/**/css/*scss', gulp.series('css'));
});


gulp.task("css", function() {

  const plugin = [
    mqpacker(),
    stylelint()
  ];

  return gulp.src("../BU/**/css/*scss")
  .pipe(sass({
    outputStyle: 'expanded'
  }))
  .pipe(autoprefixer({
    grid: true
  }))
  .pipe(postcss(plugin))
  .pipe(gulp.dest("../BU/"));

});

以下の部分が更新されています。

gulpfile.js

var stylelint = require('stylelint');

gulpfile.js

const plugin = [
    mqpacker(),
    stylelint()
  ];

package.jsonの設定

package.json

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "ページコーディング用",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp"
  ],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "css-mqpacker": "^7.0.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.1.0",
    "browserslist": [
    "last 5 version",
    "> 3%",
    "ie >= 9"
  ],
  "stylelint": "^13.12.0",
  "stylelint-config-recommended": "^4.0.0",
  "stylelint-config-recommended-scss": "^4.2.0",
  "stylelint-scss": "^3.19.0"
  }
}

以下の部分を追記しただけです。

package.json

"stylelint": "^13.12.0",
"stylelint-config-recommended": "^4.0.0",
"stylelint-config-recommended-scss": "^4.2.0",
"stylelint-scss": "^3.19.0"

.stylelintrc.jsの設定

.stylelintrc.jsはstylelintの設定ファイルです。このファイルを読み込んで様々な構文チェックを適用します。

.stylelintrc.js

module.exports = {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-recommended-scss',
  ],
  rules:{
    "no-descending-specificity":null
  }
}

インストールしたstylelint-config-recommendedとstylelint-config-recommended-scssを適用しています。
この２つは、予め用意されているおすすめの構文チェックルールがまとめられたものになります。
「-scss」の方はscss構文もチェックできるようにするためのものです。

またrulesを記述することで自由に設定をカスタマイズできます。

「no-descending-specificity」は

詳細度が高いセレクタより後に、詳細度が低いセレクタを禁止

というルールなので外しました。

結果

さて、ではstylelintを適用したgulpを実行してみます。
scssは以下のものです。

style.scss

.hoge{
  .foo{
    color: #www;
    font-size: 14pm;
  }
}

実行結果

[17:15:43] gulp-postcss: sample/css/style.css
stylelint: /Users/BU/sample/css/style.css:2:10: Unexpected invalid hex color "#www" (color-no-invalid-hex)
stylelint: /Users/BU/sample/css/style.css:3:14: Unexpected unknown unit "pm" (unit-no-unknown)

エラーが出ましたね。

color-no-invalid-hexは無効なプロパティの値
unit-no-unknownは不明なプロパティの単位

という感じですね。

また以下のようなscssでも試してみます。

style.scss

.hoge{
  color: #ddd;
  font-size: 14px;
}
.hoge{
  font-size: 12px;
}

実行結果

[17:19:19] gulp-postcss: sample/css/style.css
stylelint: /Users/BU/sample/css/style.css:6:1: Unexpected duplicate selector ".hoge", first used at line 1 (no-duplicate-selectors)

no-duplicate-selectorsというエラーが出ましたね。

これで満足です。

以上です。

参考