久々にパッケージガーデニングしたら 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
のエラー。
検索したところ、このツイートがヒット。
stylelint-config-standard
のアップデートで色指定が引っかかるようになったようです。これは css level 4 の構文に対応したもののようです。
構文としては次のように変更になります。
/* 旧来 */
.hoge {
background-color: rgba(48, 48, 48, 0.5);
}
/* 新 */
.hoge {
background-color: rgb(48 48 48 / 50%);
}
rgb()
と rgba()
から 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
にすることで回避することにしました。
"rules": {
// 略
"color-function-notation": "legacy",
// 略
}
上述対処の前に他の回避方法がないか試す中で、一通りパッケージをアップデートしたりしましたがかえって Scss の関数等のエラーが出てしまったのは冒頭の通り。
そこでそれらへの対応として次のようにしました。
"devDependencies": {
// 略
"stylelint-config-standard-scss": "3.0.0", // 追加
// 略
}
"extends": [
"stylelint-config-standard",
"stylelint-config-standard-scss", // 追加
"stylelint-config-recommended-scss",
"stylelint-config-prettier"
],
まず stylelint-config-standard-scss
を追加。
"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 を走らせてエラーが出なくなったことを確認。
rgb\(0 0 0 \/ 15%\)
- Stack Overflow
パースする関数が marked
から marked.parse
メソッドに変更になっていた。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント