browserslist & stylelint

[JeffKko]

browserslist & stylelint

browserslist

這是一個可以在不同開發工具之間, 指定出共同目標的瀏覽器版本, 例如

• Autoprefixer
• Stylelint
• babel-preset-env
• stylelint-unsupported-browser-features
• ... 等等

所有的設定條件將基於 can i use ? 的支持列表

設定

使用方式可以在 package.json 加入

{
  "browserslist": [
      "> 1%",
      "last 2 versions",
      "not ie <= 8"
  ]
}

或是在根目錄下新增 .browerslistrc

> 1%
last 2 versions
not ie <= 8

這段設定的語意是, 包含所有使用率大於 1%的瀏覽器, 且是此瀏覽器最新的兩個版本, 並排除 IE8 以下的版本, not 表示反選

相關小工具

npx browerslist 可以顯示所有目前設定的瀏覽器版本列表

npx browserslit-ga 生成訪問你網站的版本分布數據, 需要有 google analytics

最佳實踐

• 不要僅僅是使用 last 2 Chrome versions 此類的條件，市面上的瀏覽器太多, 瀏覽器版本也非常碎片化, 應多多考慮不同瀏覽器兼容性的問題

• 如果不使用 browserslsit 的默認設定, 推薦使用 last 1 version, not dead 和 > 0.2%(或者> 1% in US,> 1% in my stats)

• 不刻意移除特定瀏覽器的兼容, Opera mini 在非洲有一億用戶，全球範圍內，它也比 微軟的 Edge 瀏覽器更加流行。 QQ 瀏覽器的使用量比桌面端的火狐和 Safari 瀏覽器加起來還多

stylelint

通常我們 coding convention 會遵照一些規範

• Google - styleguide - CSS_Style_Rules

• Airbnb CSS / Sass Styleguide

stylelint 是一套 css 版的 eslint, 可以在團隊共同開發時, 讓大家可以在提交代碼的時候去檢查自己寫的 css 有哪些問題, 也可以在 git pre-commit 時作為最後一道防線, 以防 commit 上去之後大爆炸, 更可以在有條件的情況下自動 fix 有問題的 code

安裝

demo 順便安裝一下 stylelint-no-unsupported-browser-features, 這套工具超方便！
可以搭配 vscode 擴充套件, 在寫 css 就可以發現自己不小心寫了哪些 瀏覽器不支援的 css 屬性

效果如下圖

1. 安裝模組

$ npm install stylint stylelint-no-unsupported-browser-features

2. vscode 擴充套件下載 stylelint

3. package.json 加入 stylelint 設定

"scripts": {
  "lint:css": "stylelint **/*.{html,vue,css,sass,scss}"
},
"stylelint": {
  "plugins": [
    "stylelint-no-unsupported-browser-features"
  ],
  "rules": {
    "plugin/no-unsupported-browser-features": true,
    "property-no-vendor-prefix": true,
    "color-hex-length": "long"
  },
  "defaultSeverity": "warning"
},

測試

我們可以在一個 css 檔案裡面測試看看

.test-a {
  display: grid;
  will-change: transform;
}

.test-b {
  -webkit-animation: none;
}

vscode 會依據 stylelint 的設定, 即時提示目前檔案有哪些問題, 可以看到 -webkit-animation: none;, 已經被畫上了綠線, 並標示出 依據 stylelint-no-unsupported-browser-features, css-animation 屬性不被 Opera Mini 支援, 且依據 property-no-vendor-prefix, 直接寫 -webkit- 前綴是不被允許的

自動 fix

這是一個很好用的功能, 但其實是有條件的, 它會自動幫你在 rules 裡面寫的條件去修正錯誤, 但只限於 這邊, 後面有列出 Autofixable 的選項才可以, 這邊試了一個例子

.test-c {
  color: #fff;
}

因為 rules 裡的 color-hex-length": "long" 的關係, #fff 會出現警告提示, 在下了 npm run lint:css -- --fix, 之後 stylelint 會幫我們自動進行修正為

.test-c {
  color: #ffffff;
}

超級方便！

參考

• (https://juejin.im/post/5b8cff326fb9a019fd1474d6)
• (https://www.jishuwen.com/d/2VUS/zh-tw)
• (https://dotblogs.com.tw/explooosion/2018/09/30/141005)