Zenn
Closed12

stylelint で browserslist からサポートされていないプロパティをエラーにできないか試す (scss)

Scss
Stylelint
きむそんきむそん

したいこと

  • .browserlist → caniuse を見て、サポートされてないプロパティをエラーにしたい
  • SCSS で書くことのほうが多いので SCSS 前提
きむそんきむそん

browserlistrc を defaults で準備しておく

$ npx browserslist
and_chr 90
and_ff 87
and_qq 10.4
and_uc 12.12
android 90
baidu 7.12
chrome 91
chrome 90
chrome 89
edge 91
edge 90
firefox 89
firefox 88
firefox 78
ie 11
ios_saf 14.5-14.6
ios_saf 14.0-14.4
ios_saf 13.4-13.7
kaios 2.5
op_mini all
op_mob 62
opera 76
opera 75
safari 14.1
safari 14
samsung 14.0
samsung 13.0
きむそんきむそん

よくある scss の stylelint に、stylelint-no-unsupported-browser-features の設定を追加して動作を見てみる

browserlist は .browserlist 見てくれるのかよくわからない + サンプルでは明示してたので、とりあえず stylelintrc に書いてみる

.stylelintrc.js
module.exports = {
  extends: [
    "stylelint-config-recommended",
    "stylelint-config-standard-scss",
    "stylelint-config-prettier",
  ],
  plugins: ["stylelint-scss", "stylelint-no-unsupported-browser-features"],
  rules: {
    "plugin/no-unsupported-browser-features": [
      true,
      {
        browsers: ["defaults", "ie >= 8"],
        ignorePartialSupport: true,
      },
    ],
  },
}
きむそんきむそん
$ yarn lint:stylelint
yarn run v1.22.10
$ stylelint 'src/styles/**/*.{css,scss}'

src/styles/modules/Home.module.scss
  2:3  ✖  Unexpected browser feature "viewport-units" is not supported by IE 8, Opera Mini all   plugin/no-unsupported-browser-features
  3:3  ✖  Unexpected browser feature "rem" is not supported by IE 8                              plugin/no-unsupported-browser-features
  4:3  ✖  Unexpected browser feature "flexbox" is not supported by IE 8,9                        plugin/no-unsupported-browser-features
 11:3  ✖  Unexpected browser feature "rem" is not supported by IE 8                              plugin/no-unsupported-browser-features
 13:3  ✖  Unexpected browser feature "flexbox" is not supported by IE 8,9                        plugin/no-unsupported-browser-features
 23:3  ✖  Unexpected browser feature "flexbox" is not supported by IE 8,9                        plugin/no-unsupported-browser-features
 29:3  ✖  Unexpected browser feature "rem" is not supported by IE 8                              plugin/no-unsupported-browser-features
 33:3  ✖  Unexpected browser feature "flexbox" is not supported by IE 8,9                        plugin/no-unsupported-browser-features
 52:3  ✖  Unexpected browser feature "rem" is not supported by IE 8                              plugin/no-unsupported-browser-features

src/styles/globals/_layout.scss
  4:3  ✖  Unexpected browser feature "transforms2d" is not supported by IE 8, Opera Mini all     plugin/no-unsupported-browser-features
  9:3  ✖  Unexpected browser feature "css-fixed" is not supported by Opera Mini all              plugin/no-unsupported-browser-features
 16:3  ✖  Unexpected browser feature "calc" is not supported by IE 8, Opera Mini all             plugin/no-unsupported-browser-features
 16:3  ✖  Unexpected browser feature "viewport-units" is not supported by IE 8, Opera Mini all   plugin/no-unsupported-browser-features

src/styles/globals/_module.scss
  2:3  ✖  Unexpected browser feature "user-select-none" is not supported by IE 8,9, Opera Mini all, UC Browser for Android 12.12, Baidu Browser 7.12   plugin/no-unsupported-browser-features
 17:3  ✖  Unexpected browser feature "rem" is not supported by IE 8                                                                                    plugin/no-unsupported-browser-features

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

色々弾いてほしかったので、IE8以上をしてみたら、ちゃんと弾いてくれているっぽい

SCSS 前提の構文 (ネストとか、mixin とか、ループとか) がダメなのかな

きむそんきむそん

https://github.com/ismay/stylelint-no-unsupported-browser-features/issues/136

Hi, thanks for the issue. Yes, this plugin only supports vanilla css, so it's possible it behaves incorrectly with sass.

あくまで他のプリプロセッサを使ってると動作に問題がある可能性があるよ、という程度なのかな
触った感じだと、少なくとも SCSS では問題なさそう

後から問題になったら外せば良いだけなので、使えそう

このスクラップは2021/08/26にクローズされました