stylelintを適用した際に
stylelintを使って、既存のCSSの最適化?を行うことによって保守や統一感を出す作業を行ってみた。その際に、メディアクエリのmin-width
やmax-width
が、width >= 〇〇px
などに変換されてしまったので、それをスルーしてstylelintを実行するようにしてもらうようにした。
まず必要なパッケージとして
npm i stylelint stylelint-scss -D
をしてインストールする。
これをインストールすることによって後述するstylelintのルールが使用できるそうな。
stylelintの設定ファイル
設定ファイルには、.stylelintrc.json
や.stylelint.config.js
などの書き方があるらしいが、ChatGPTに聞いたところ、自分のプロジェクトに合わせて柔軟に対応すれば良いらしいが...今回はその点はスルーということで。
module.exports = {
plugins: [
'stylelint-scss'
],
rules: {
'media-feature-name-no-unknown': [
true,
{
ignoreMediaFeatureNames: ['min-width', 'max-width', 'min-height', 'max-height'],
},
],
'media-feature-range-notation': null,
},
};
この状態で、 npm run stylelint **/*.scss **/*.css --fix
をすることによって恐らくメディアクエリの条件がそのまま(max-width)や(min-width)のままになるようだ。
rulesの中がない状態で、stylelintを実行するとwidth >= 〇〇px
などに変換されてしまうようです。