stylelint のアップデート

2021-02-20

はじめに

ESLint と Prettier のアップデートに引き続き、stylelint のアップデートを行いました。yarn upgrade-interactive --latest で一括アップデートしています。また、styled-components を CSS Modules に戻したため、設定の見直しを行っています。

npm パッケージのバージョンの差異

stylelint の npm パッケージの差異は以下の通りです。

     "react-docgen-typescript-loader": "^3.7.1",
     "react-docgen-typescript-webpack-plugin": "^1.1.0",
     "react-test-renderer": "^16.13.1",
-    "stylelint": "13.3.3",
+    "stylelint": "13.10.0",
-    "stylelint-config-prettier": "^8.0.0",
-    "stylelint-config-standard": "^19.0.0",
+    "stylelint-config-standard": "^20.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-order": "^4.0.0",
+    "stylelint-order": "^4.1.0",
-    "stylelint-processor-styled-components": "^1.9.0"

Prettier 関連のパッケージを削除

styled-components を CSS Modules に戻したため、Prettier と競合する可能性がなくなりました。そのため stylelint-config-prettier を削除しました。

styled-components 関連のパッケージを削除

styled-components を CSS Modules に戻したため、stylelint-config-styled-components stylelint-processor-styled-components を削除しました。

.stylelintignore を --ignore-path .gitignore で代用

--ignore-path .gitignore とすることで .gitignore を stylelint のチェックの対象外とするファイルの指定に使うことができます。対象外としたいファイルが .gitignore に含まれる場合、 .stylelintignore を別途用意する必要がないため便利です。

$ npx stylelint --ignore-path .gitignore 'src/**/*.{css,less,sass,scss}'

style.config.js を .stylelintrc.js に差し替え

.eslintrc.js .prettierrc.js と揃えるため style.config.js を .stylelintrc.js に差し替えました。また、styled-components を CSS Modules に戻したため、JSX 関連の設定を削除しています。

style.config.js

-const argv = require('yargs').argv;
-const glob = argv['_'] && argv['_'][0];
-const isJsxFile = glob && /.{jsx,tsx}/.test(glob);
-
-if (isJsxFile) {
-  module.exports = {
-    extends: [
-      'stylelint-config-standard',
-      'stylelint-config-styled-components',
-      './node_modules/prettier-stylelint/config.js',
-    ],
-    plugins: ['stylelint-order'],
-    processors: ['stylelint-processor-styled-components'],
-    rules: {
-      'declaration-empty-line-before': 'never',
-      'indentation': 2,
-      'no-missing-end-of-source-newline': null,
-      'string-quotes': 'single',
-      'order/properties-alphabetical-order': true
-    }
-  };
-}
-
-module.exports = {
-  extends: [
-               'stylelint-config-standard',
-               './node_modules/prettier-stylelint/config.js'
-       ],
-  ignoreFiles: [
-    '**/node_modules/**',
-    'src/styles/**'
-  ],
-  plugins: ['stylelint-order'],
-  rules: {
-    'declaration-empty-line-before': 'never',
-    'indentation': 2,
-    'no-missing-end-of-source-newline': null,
-    'string-quotes': 'single',
-    'order/properties-alphabetical-order': true
-  },
-};

.stylelintrc.js

+module.exports = {
+  extends: [
+    'stylelint-config-standard'
+  ],
+  plugins: [
+    'stylelint-order',
+  ],
+  rules: {
+    'string-quotes': 'single',
+    'order/properties-alphabetical-order': true
+  }
+}

mokajima.com