「StyleLint」の記事 - Crieit

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

2022-03-05T23:05:27+09:00

久々にパッケージガーデニングしたら stylelint から Scss 関連や rgb の指定で怒られるようになってしまったので対処。

現象

$ stylelint ./src/scss/**/*.scss

src/scss/global/_scssVariables.scss
 19:19  ✖  Unexpected unknown function "color.scale"   function-no-unknown
 21:19  ✖  Unexpected unknown function "color.adjust"  function-no-unknown
 22:17  ✖  Unexpected unknown function "color.adjust"  function-no-unknown
 23:19  ✖  Unexpected unknown function "color.scale"   function-no-unknown
 24:20  ✖  Unexpected unknown function "color.scale"   function-no-unknown

src/scss/object/component/_c-button.scss
 19:31  ✖  Expected modern color-function notation  color-function-notation

src/scss/_plugins/articlesns/_articlesns.scss
 40:16  ✖  Unexpected unknown function "color.scale"  function-no-unknown
 53:31  ✖  Unexpected unknown function "map.get"      function-no-unknown
 57:35  ✖  Unexpected unknown function "color.scale"  function-no-unknown
 57:47  ✖  Unexpected unknown function "map.get"      function-no-unknown
 57:81  ✖  Unexpected unknown function "map.get"      function-no-unknown

npmパッケージをアップデートした際に stylelint やそれに関連するパッケージ等をアップデートしたところ、いくつかの項目で怒られるようになってしまいました。

この中で特に気になったのが Expected modern color-function notation color-function-notation のエラー。

かじさんはTwitterを使っています「stylelint-config-standard の 23.0.0 アップデートで、 color-function-notation が 'modern' で追加された。従来のコンマ区切りだったrgb()、rgba()をスペース区切りに揃えるもの。ついでにrgbaをrgbに揃えている。 https:\/\/t.co\/yHFngFOS8J」 \/ Twitter

検索したところ、このツイートがヒット。

stylelint-config-standard のアップデートで色指定が引っかかるようになったようです。これは css level 4 の構文に対応したもののようです。

CSS Color Module Level 4 （日本語訳）

構文としては次のように変更になります。

/* 旧来 */
.hoge {
    background-color: rgba(48, 48, 48, 0.5);
}

/* 新 */
.hoge {
    background-color: rgb(48 48 48 / 50%);
}

rgb() と rgba() から rgb() へ統一
RGB値はカンマ区切りからスペース区切りへ
RGB値とアルファ値の区切りはカンマからスラッシュへ

一方、 Scss でも独自に rgb() が存在しています。このおかげで、 Scss で次のように色の指定でRGB値ではなく16進数や変数を使用しても問題が発生しないわけですね。

$black: #333;

.hoge {
    background-color: rgba($black, 0.5);
}

ただ、 Scss 側ではまだカンマ区切りしか対応していなさそうです。そのため、仮に css level 4 の構文を使用して Scss のトランスパイルを走らせると、次のようにエラーになってしまいます。

[hh:ii:ss] gulp-notify: [sass] Error: src\scss\object\component\_c-newscards.scss
Error: Missing element $blue.
    ╷
128 │     box-shadow: inset 2px 2px 5px 0 rgb(g.$us-main-color 0.5);
    │                                     ^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  src\scss\object\component\_c-newscards.scss 128:37  @use
  src\scss\contents.scss 36:1                         root stylesheet


 19:31  ✖  Expected modern color-function notation  color-function-notation

Scss の構文にすると stylelint でコケて、 stylelint のデオフォルトに従って css level 4 の構文にすると Scss のトランスパイルが通らない、と。

対処

仕方ないので、上述引用のツイートと同様に color-function-notation のパラメータを legacy にすることで回避することにしました。

.stylelint.json

    "rules": {
        // 略
        "color-function-notation": "legacy",
        // 略
    }

余談

上述対処の前に他の回避方法がないか試す中で、一通りパッケージをアップデートしたりしましたがかえって Scss の関数等のエラーが出てしまったのは冒頭の通り。

そこでそれらへの対応として次のようにしました。

package.json

    "devDependencies": {
        // 略
        "stylelint-config-standard-scss": "3.0.0",  // 追加
        // 略
    }

.stylelint.json

    "extends": [
        "stylelint-config-standard",
        "stylelint-config-standard-scss",      // 追加
        "stylelint-config-recommended-scss",
        "stylelint-config-prettier"
    ],

まず stylelint-config-standard-scss を追加。

.stylelint.json

    "rules": {
        // 略
        "at-rule-no-unknown": null,                                                                    // Scss関数は stylelint-config-standard-scss に任せるようにしたため独自で追加していた設定は削除
        "function-no-unknown": [
            true,                                                                                      // map.get や color.scale 等 Dart Sass の関数は引っかかってしまうのでルールを追加
            {
                "ignoreFunctions": [
                    "/^map\\..+/",
                    "/^color\\..+/"
                ]
            }
        ],
        "scss/at-rule-no-unknown": true,                                                               // Scssのデフォルト関数以外は引っかかるようにする
        "scss/dollar-variable-pattern": "^(([a-z][a-zA-Z0-9_]+)|([a-z][a-z0-9]*)(-[a-zA-Z0-9_]+)*)$",  // 互換性のためケバブケース強制は除去
        "scss/at-mixin-pattern": "^(([a-z][a-zA-Z0-9_]+)|([a-z][a-z0-9]*)(-[a-zA-Z0-9_]+)*)$",         // 互換性のためケバブケース強制は除去
        "scss/at-mixin-argumentless-call-parentheses": "always"                                        // 互換性のため引数なしのmixin呼び出しの際は括弧強制
        "stylelint-config-standard-scss": "3.0.0",  // 追加
        // 略
    }

その上で .stylelint.json のルールをいくつか変更しました。

これで stylelint を走らせてエラーが出なくなったことを確認。

参考

color-function-notation

css level 4

CSS Color Module Level 4 （日本語訳）
Getting error in CSS with rgb\(0 0 0 \/ 15%\) - Stack Overflow
- 似たようなケース

Scss 周りへの対応

marked

Marked Documentation

パースする関数が marked から marked.parse メソッドに変更になっていた。

Nuxt.jsにlintを導入してみた

2020-09-07T14:22:14+09:00

動機

以前からなんとなくeslintは導入してあーだこーだしてたのですが、ポートフォリオサイトやブログサイトをNetlifyからFirebaseに移植する際に、github actions(CI)を使うようになり、せっかくだからもう少し本格的にlintやtestを導入してみようということで、色々調べて導入してみました。

その手順を初心者なりに備忘録としてまとめてみました。
(だいぶ我流な部分もありますが多めに見ていただければ幸いです)

アドバイスなどは大歓迎です。

知識が増えたら随時更新します。

https://blog.taka1156.site

https://github.com/taka1156/nuxt-blog - アトミックデザインの形にプロジェクトを見直し中

↑ブログのプロジェクトで導入してみました。(Nuxt.js + Firebase + microCMS 構成)

環境

mac OS Catalina
Node.js v12.16.1
npm v6.14.3
yarn v1.22.0

手順

これらをインストール
- eslint関連
  yarn add eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue babel-eslint
- stylelint関連
  yarn add stylelint stylelint-config-standard stylelint-config-prettier stylelint-prettier
- prettier
  yarn add prettier
※ なんでprettierを入れたか
eslintだけだとエラーは出すが修正はしない項目(コード整形関連)もあるので併用する。
(逆にprettierは細かい命名規則や処理に関するエラーは出さない?)

設定ファイルを書く

.eslintrc.json

{
    "parserOptions": {
        "parser": "babel-eslint",
        "sourceType": "module"
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended",
        "plugin:prettier/recommended",
        "prettier/vue"
    ],
    "plugins": [
        "vue"
    ],
    "env": {
        "jest": true,
        "browser": true,
        "es6": true,
        "node": true
    },
    "globals": {},
    "rules": {
        "camelcase": [2,{"properties": "always"}],
        "quotes": [2,"single", { "avoidEscape": true } ],
        "eqeqeq": [2, "always", {"null": "ignore"}],
        "prefer-const": 2,
        "vue/component-name-in-template-casing": "off",
        "vue/no-v-html": "off"
    }
}

.stylelintrc.json

{
    "extends": ["stylelint-config-standard", "stylelint-prettier/recommended"],
    "rules": {
        "color-no-invalid-hex": true,
        "color-hex-case": "lower",
        "selector-class-pattern": "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$"
    }
}

.eslintignore, .stylelintignore
※ storybook-static、coverage は storybookやjestを導入していると生成されるファイル

# ビルドファイル
dist
storybook-static
coverage

# 設定、モジュール
.nuxt
.storybook
node_modules

.prtteirrc.json

{
    "printWidth": 85,
    "tabWidth": 2,
    "singleQuote": true,
    "semi": true,
    "bracketSpacing": true,
    "arrowParens": "avoid"
}

scriptsを追加

"scripts": {
    "lint-js": "eslint --ext .js,.vue .",
    "lint-style": "stylelint \"**/*.vue\" \"**/*.css\"",
    "lint-js:fix": "eslint --ext .js,.vue . --fix",
    "lint-style:fix": "stylelint \"**/*.vue\" \"**/*.css\" --fix",
    "lint:check": "yarn lint-js & yarn lint-style",
    "lint:fix": "yarn lint-js && yarn lint-style",
    ...
}

お好みでvscode設定を追加
保存時に勝手にlint処理が走るようになるので便利
(vscode/setting.jsonに記述)

{
    "comments": "保存時にeslint、stylelintを自動実行",
    "eslint.alwaysShowStatus": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
}

まとめ

eslint、stylelintについてざっくりと使い方やルールの指定方法についてわかってきたので、
積極的に活用して読みやすいコードを意識していきたいですね。

また、eslintルールについても、気になるものがあればまとめてみようと思います。