emotionにlintを追加して、効率的に開発を行う

CSS in JS でのlint(今回はemotion)の設定を行ったのときのその時に行ったことになります。

今回使用するパッケージのバージョン

{
    "@types/react": "^17.0.2",
    "next": "^10.0.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "postcss-jsx": "^0.36.4",
    "prettier": "^2.2.1",
    "stylelint": "^13.12.0",
    "stylelint-config-recess-order": "^2.3.0",
    "stylelint-declaration-block-no-ignored-properties": "^2.3.0",
    "stylelint-no-unsupported-browser-features": "^4.1.4",
    "stylelint-prettier": "^1.2.0"
}

今回行う stylelint.config.jsのファイル内容

module.exports = {
  // add your custom config here
  // https://stylelint.io/user-guide/configuration
  plugins: [
    'stylelint-declaration-block-no-ignored-properties',
    'stylelint-no-unsupported-browser-features',
    'stylelint-prettier',
  ],
  extends: ['stylelint-config-recess-order'],
  rules: {
    'prettier/prettier': true,
    'plugin/declaration-block-no-ignored-properties': true,
    'plugin/no-unsupported-browser-features': [
      true,
      {
        severity: 'warning',
      },
    ],
    'font-family-no-missing-generic-family-keyword': true,
    'declaration-block-no-shorthand-property-overrides': true,
    'declaration-block-trailing-semicolon': 'always',
    'selector-pseudo-element-colon-notation': 'double',
  },
}

入れているstylelintのパッケージ

stylelint-config-recess-order

cssの要素の順番を変更してくれるパッケージ

www.npmjs.com

stylelint-declaration-block-no-ignored-properties

.hoge {
  display: inline;
  width: 100px;
}

のようなインライン要素に対して、横幅を設定している時など適応しない要素があるときにエラーを出力してくれるパッケージ

www.npmjs.com

stylelint-no-unsupported-browser-features

.hoge {
  display: grid;
}

などの.browserslistrcに記載されているブラウザーに対応していないプロパティを記載したときにエラーを出してくれるパッケージ

github.com

stylelint-prettier

stylelintとprettierとの連携してくれるパッケージ

www.npmjs.com

emotionとの連携を行う

github.com

postcss-jsxのインストール

今回の場合、インストールを行わなくても動きましたが念のためインストールを行ます。

$ npm install -D postcss-jsx

www.npmjs.com

stylelintのscriptを追加

{
  script: {
    "stylelint": "stylelint --fix **/*.{ts,tsx,css}"
  }
}