0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Stylelintのmedia-feature-name-no-unknownについて

Posted at

stylelintを適用した際に

 stylelintを使って、既存のCSSの最適化?を行うことによって保守や統一感を出す作業を行ってみた。その際に、メディアクエリのmin-widthmax-widthが、width >= 〇〇pxなどに変換されてしまったので、それをスルーしてstylelintを実行するようにしてもらうようにした。
 まず必要なパッケージとして

npm i stylelint stylelint-scss -D

をしてインストールする。
これをインストールすることによって後述するstylelintのルールが使用できるそうな。

stylelintの設定ファイル

 設定ファイルには、.stylelintrc.json.stylelint.config.jsなどの書き方があるらしいが、ChatGPTに聞いたところ、自分のプロジェクトに合わせて柔軟に対応すれば良いらしいが...今回はその点はスルーということで。

.stylelintrc.js
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などに変換されてしまうようです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?