パッケージガーデニングと Stylelint のアップデート周り

投稿日 2021年11月5日
著者アルム＝バンド
カテゴリー Gulp
カテゴリー Scss
カテゴリー Webpack

久々にパッケージガーデニングを行って、 Stylelint 周りを調整したのでメモしておきます。ちなみにCIするとLint周りでエラーを吐きそうな気がしたので、今回はPush前に手動で確認しています。

    "devDependencies": {
        // 略

        "htmllint-cli": "^0.0.7",
        "eslint": "^7.32.0",
        "eslint-config-prettier": "^8.3.0",
        "stylelint": "^13.13.1",
        "stylelint-config-standard": "^22.0.0",
        "stylelint-scss": "^3.20.1",
        "stylelint-config-recommended-scss": "^4.3.0",
        "stylelint-config-prettier": "^8.0.2",
        "prettier": "^2.3.2",

        // 略
    },

このLint群を

    "devDependencies": {
        // 略

        "htmllint-cli": "^0.0.7",
        "eslint": "^8.1.0",
        "eslint-config-prettier": "^8.3.0",
        "stylelint": "^14.0.1",
        "stylelint-config-standard": "^23.0.0",
        "stylelint-scss": "^4.0.0",
        "stylelint-config-recommended-scss": "^5.0.0",
        "stylelint-config-prettier": "^9.0.3",
        "prettier": "^2.4.1",

        // 略
    },

とアップデートしました。

これで yarn run lint をかけると

> yarn run lint
yarn run v1.22.11
$ run-p lint:*
$ htmllint ./dist/**/*.html
$ stylelint ./src/scss/**/*.scss
$ node ./bin/johari
$ eslint ./src/js/**/*.js
OK: httpリンクは存在しません

[htmllint] found 0 errors out of 11 files

src/scss/noscript.scss
 10:5  ✖  Expected empty line before rule  rule-empty-line-before
 14:9  ✖  Expected empty line before rule  rule-empty-line-before

src/scss/global/_mixin.scss
 13:109  ✖  Unexpected quotes around "HGMaruGothicMPRO"  font-family-name-quotes

src/scss/layout/_l-footer.scss
 24:5  ✖  Expected empty line before rule  rule-empty-line-before

src/scss/layout/_l-header.scss
 44:5   ✖  Expected empty line before rule  rule-empty-line-before
 51:13  ✖  Expected empty line before rule  rule-empty-line-before
 57:9   ✖  Expected empty line before rule  rule-empty-line-before
 60:13  ✖  Expected empty line before rule  rule-empty-line-before

src/scss/object/component/_c-address.scss
 35:5  ✖  Expected empty line before rule  rule-empty-line-before

src/scss/object/component/_c-article.scss
 43:9  ✖  Expected empty line before rule  rule-empty-line-before
 46:9  ✖  Expected empty line before rule  rule-empty-line-before

src/scss/object/component/_c-eyecatch.scss
 48:5   ✖  Expected empty line before rule           rule-empty-line-before
 48:18  ✖  Expected class selector to be kebab-case  selector-class-pattern
 51:5   ✖  Expected empty line before rule           rule-empty-line-before
 51:13  ✖  Expected class selector to be kebab-case  selector-class-pattern
 54:5   ✖  Expected empty line before rule           rule-empty-line-before
 54:6   ✖  Expected class selector to be kebab-case  selector-class-pattern
 70:10  ✖  Expected class selector to be kebab-case  selector-class-pattern

src/scss/object/component/_c-newscards.scss
 126:5  ✖  Expected empty line before rule  rule-empty-line-before
 130:9  ✖  Expected empty line before rule  rule-empty-line-before
 133:9  ✖  Expected empty line before rule  rule-empty-line-before

src/scss/object/project/_p-index.scss
 49:5  ✖  Expected empty line before rule  rule-empty-line-before
 52:5  ✖  Expected empty line before rule  rule-empty-line-before

src/scss/object/utility/_u-link.scss
 10:1  ✖  Expected empty line before rule  rule-empty-line-before
 14:1  ✖  Expected empty line before rule  rule-empty-line-before

src/scss/object/utility/_u-mg.scss
  8:1  ✖  Expected empty line before rule  rule-empty-line-before
 11:1  ✖  Expected empty line before rule  rule-empty-line-before

src/scss/_plugins/articlesns/_articlesns.scss
 36:5   ✖  Expected class selector to be kebab-case  selector-class-pattern
 41:9   ✖  Expected empty line before rule           rule-empty-line-before
 45:5   ✖  Expected empty line before rule           rule-empty-line-before
 54:13  ✖  Expected empty line before rule           rule-empty-line-before

src/scss/_plugins/fixedanchor_scss/_fixedanchor_scss.scss
 6:1  ✖  Expected class selector to be kebab-case  selector-class-pattern

src/scss/_plugins/ios/_ios.scss
 4:5  ✖  Expected class selector to be kebab-case  selector-class-pattern

src/scss/_plugins/pagetop/_pagetop.scss
 19:1  ✖  Expected empty line before rule           rule-empty-line-before
 19:1  ✖  Expected class selector to be kebab-case  selector-class-pattern
 25:5  ✖  Expected empty line before rule           rule-empty-line-before
 37:9  ✖  Expected empty line before rule           rule-empty-line-before

src/scss/_plugins/svghexagon/_svghexagon.scss
 5:5  ✖  Expected empty line before rule  rule-empty-line-before

src/scss/_plugins/themecolor/_themecolor.scss
 8:5  ✖  Expected empty line before rule  rule-empty-line-before
src/scss/_plugins/us-slick/_us-slick.scss
 12:5   ✖  Expected empty line before rule           rule-empty-line-before
 17:5   ✖  Expected empty line before rule           rule-empty-line-before
 17:5   ✖  Expected class selector to be kebab-case  selector-class-pattern
 22:9   ✖  Expected empty line before rule           rule-empty-line-before
 26:9   ✖  Expected empty line before rule           rule-empty-line-before
 29:9   ✖  Expected empty line before rule           rule-empty-line-before
 33:5   ✖  Expected empty line before rule           rule-empty-line-before
 33:6   ✖  Expected class selector to be kebab-case  selector-class-pattern
 34:9   ✖  Expected class selector to be kebab-case  selector-class-pattern
 38:13  ✖  Expected empty line before rule           rule-empty-line-before

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "lint:scss" exited with 2.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

滅茶苦茶怒られたので対処します。

rule-empty-line-before

全般的にこれで怒られている部分が多かったのでまずこれに着手。

rule-empty-line-before | Stylelint

ルールの内容を確認します。

Options は always や never 等が指定できる他、 Optional secondary options に except や ignore をキーとして値は配列、とあります。とすると、全体はこの2つをキーとして持つオブジェクトの形になると目星がつきます。

stylelint によるスタイリング宗教の統一 – Qiita

やはり。ここを参考にしてルールを追加します。

    "rules": {
        // 略

        "rule-empty-line-before": [
            "always",
            {
                "ignore": [
                    "after-comment",
                    "inside-block"
                ]
            }
        ]
    }

.stylelintrc.json に上述のルールを追記。フォローしきれない部分はコードを修正して対応。

> yarn run lint:scss
yarn run v1.22.11
$ stylelint ./src/scss/**/*.scss

src/scss/object/component/_c-eyecatch.scss
 48:18  ✖  Expected class selector to be kebab-case  selector-class-pattern
 51:13  ✖  Expected class selector to be kebab-case  selector-class-pattern
 54:6   ✖  Expected class selector to be kebab-case  selector-class-pattern
 70:10  ✖  Expected class selector to be kebab-case  selector-class-pattern

src/scss/_plugins/articlesns/_articlesns.scss
 36:5  ✖  Expected class selector to be kebab-case  selector-class-pattern

src/scss/_plugins/fixedanchor_scss/_fixedanchor_scss.scss
 6:1  ✖  Expected class selector to be kebab-case  selector-class-pattern

src/scss/_plugins/ios/_ios.scss
 4:5  ✖  Expected class selector to be kebab-case  selector-class-pattern

src/scss/_plugins/pagetop/_pagetop.scss
 20:1  ✖  Expected class selector to be kebab-case  selector-class-pattern

src/scss/_plugins/us-slick/_us-slick.scss
 17:5  ✖  Expected class selector to be kebab-case  selector-class-pattern
 33:6  ✖  Expected class selector to be kebab-case  selector-class-pattern
 34:9  ✖  Expected class selector to be kebab-case  selector-class-pattern

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

修正した結果、 rule-empty-line-before のエラーがなくなったことを確認。

この怒られているルールの内容を確認→ルールを追加 or/and コードを修正、という工程を繰り返していきます。

なお、最初のエラーにあった font-family-name-quotes もコードを編集して潰しました。

selector-class-pattern

上述だと残るのは selector-class-pattern のみ。今度はこれについて調べます。

selector-class-pattern | Stylelint

今回はパッケージガーデニングしたいだけでなるべくコードを触らずに済むようにしたいので、ルールの方を調整します。

この辺りを参考にして次のルールを追記。

    "rules": {
        // 略

        "selector-class-pattern": "^(([a-z][a-zA-Z0-9_]+)|([a-z][a-z0-9]*)(-[a-zA-Z0-9_]+)*)$"
    }

これで再びテストします。

> yarn run lint:scss
yarn run v1.22.11
$ stylelint ./src/scss/**/*.scss
Done in 3.81s.

OK。改めて全体を通してみます。

> yarn run lint     
yarn run v1.22.11
$ run-p lint:*
$ htmllint ./dist/**/*.html
$ stylelint ./src/scss/**/*.scss
$ node ./bin/johari
$ eslint ./src/js/**/*.js
OK: httpリンクは存在しません

[htmllint] found 0 errors out of 11 files
Done in 5.98s.

OKです。

余談

imagemin-svgo

gulp-imagemin だけでなく、 imagemin-svgo も ES Module 準拠になったため 10.0.0 はエラーになります。そのため、 9.0.0 を維持します。

gulp-imagemin で Error [ERR_REQUIRE_ESM]: Must use import to load ES Module と怒られる – Ewig Leere(Lab2)

gulp-imagemin に関してはこの記事に。

webpack-stream

Merge pull request #235 from marekdedic/webpack-5 · shama/webpack-stream@2ff8a4f · GitHub

ようやく webpack-stream が内部的に使用している webpack のバージョンが 4系から 5系にアップデートされました。

これに伴い、 terser-webpack-plugin が webpack 4系に対応していないがために resolution で webpack のバージョンを5系に固定させなくても良くなりました (これと同時に yarn 縛りも解除され、 npm i -D でも良くなったはず……) 。

webpack-stream と terser-webpack-plugin 周りの対応についてはこれらの記事に。

参考

rule-empty-line-before

selector-class-pattern

webpack-stream

この記事を書いた人

アルム＝バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。

記事一覧

パッケージガーデニングと Stylelint のアップデート周り

目次

rule-empty-line-before

selector-class-pattern

余談

imagemin-svgo

webpack-stream

参考

rule-empty-line-before

selector-class-pattern

webpack-stream

この記事を書いた人

アルム＝バンド

stylelint 周りのアップデート (Scss対応、 rgb 指定)

Gulp 4 + Webpack 5 を試す ( 未完 / terser-web…

続・ Gulp 4 + Webpack 5 を試す (resolutions 使…

Scss と css変数の同居メモ

2021年11月
月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30