Added react-app-rewire-styled-components

stylelint-processor-styled-components を有効にすると stylelint-config-airbnb が無効になるため、public に .stylelintrc.js を新規作成し対応。
styled-components/stylelint-processor-styled-components#187
fix オプションを有効にするとビルドでループが発生するため、package.json の resolution に stylelint-webpack-plugin を定義。
webpack-contrib/stylelint-webpack-plugin#96
stylelint-config-prettier を有効化。

Author: kotarella1110

.stylelintrc.js

@@ -1,4 +1,8 @@
 module.exports = {
   processors: ['stylelint-processor-styled-components'],
-  extends: ['stylelint-config-airbnb', 'stylelint-config-styled-components'],
+  extends: [
+    'stylelint-config-airbnb',
+    'stylelint-config-prettier',
+    'stylelint-config-styled-components',
+  ],
 };

config-overrides.js

@@ -1,12 +1,22 @@
 const rewireEslint = require('react-app-rewire-eslint');
+const rewireStylelint = require('react-app-rewire-stylelint');
 const rewireReactHotLoader = require('react-app-rewire-hot-loader');
 const rewireStyledComponents = require('react-app-rewire-styled-components');
 
 module.exports = (config, env) => {
   let overrodeConfig = Object.assign({}, config);
-  overrodeConfig = rewireEslint(config, env);
+  overrodeConfig = rewireEslint(overrodeConfig, env);
+  overrodeConfig = rewireStylelint.withLoaderOptions({
+    files: ['public/**/*.{s?(a|c)ss,html}'],
+    emitErrors: false,
+    fix: true,
+  })(overrodeConfig, env);
+  overrodeConfig = rewireStylelint.withLoaderOptions({
+    files: ['src/**/*.{js,jsx}'],
+    emitErrors: false,
+  })(overrodeConfig, env);
   overrodeConfig = rewireReactHotLoader(overrodeConfig, env);
-  overrodeConfig = rewireStyledComponents(config, env, {
+  overrodeConfig = rewireStyledComponents(overrodeConfig, env, {
     displayName: true,
   });
   return overrodeConfig;

lint-staged.config.js

@@ -1,9 +1,10 @@
 module.exports = {
   linters: {
     'docs/**': ['yarn lint:text --fix', 'git add'],
-    '**/*.js': ['yarn lint:js --fix', 'git add'],
-    '**/*.{css,scss,html}': ['yarn lint:css --fix', 'git add'],
-    '**/*.test.js': ['yarn coverage', 'git add'],
+    '**/*.{js,jsx}': ['yarn lint:js --fix', 'git add'],
+    'public/**/*.{s?(a|c)ss,html}': ['yarn lint:css --fix', 'git add'],
+    'src/**/*.{js,jsx}': ['yarn lint:sc', 'git add'],
+    '**/*.test.{js,jsx}': ['yarn coverage', 'git add'],
   },
   ignore: ['/node_modules/**', '/build/**'],
 };

package.json

@@ -15,11 +15,12 @@
     "test": "react-app-rewired test --env=jsdom",
     "coverage": "yarn test --coverage",
     "eject": "react-scripts eject",
-    "lint": "yarn lint:text && yarn lint:js && yarn lint:css",
-    "lint:fix": "concurrently 'yarn lint:text --fix' 'yarn lint:js --fix' 'yarn lint:css --fix'",
+    "lint": "concurrently 'yarn lint:text' 'yarn lint:js' 'yarn lint:css' 'yarn lint:sc'",
+    "lint:fix": "concurrently 'yarn lint:text --fix' 'yarn lint:js --fix' 'yarn lint:css --fix' 'yarn lint:sc'",
     "lint:text": "textlint 'docs/**'",
     "lint:js": "eslint .",
-    "lint:css": "stylelint 'src/**/*.{css,scss}' './public/index.html'",
+    "lint:css": "stylelint 'public/**/*.{s?(a|c)ss,html}'",
+    "lint:sc": "stylelint 'src/**/*.{js,jsx}'",
     "storybook": "start-storybook -p 9009 -s public",
     "build-storybook": "build-storybook -s public"
   },
@@ -56,22 +57,26 @@
     "react-app-rewire-eslint": "^0.2.3",
     "react-app-rewire-hot-loader": "^1.0.1",
     "react-app-rewire-styled-components": "^3.0.2",
+    "react-app-rewire-stylelint": "^0.1.1",
     "react-app-rewired": "^1.5.2",
     "react-test-renderer": "^16.4.1",
     "storybook-addon-jsx": "^5.3.0",
     "storybook-addon-smart-knobs": "^3.3.1",
-    "stylelint": "^8.0.0",
+    "stylelint": "^9.3.0",
     "stylelint-config-airbnb": "^0.0.0",
+    "stylelint-config-prettier": "^3.3.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-order": "^0.7.0",
     "stylelint-processor-styled-components": "^1.3.1",
     "stylelint-scss": "^1.2.1",
+    "stylelint-webpack-plugin": "0.10.4",
     "textlint": "^10.2.1",
     "textlint-rule-preset-ja-technical-writing": "^3.0.1",
     "textlint-rule-prh": "^5.0.1",
     "textlint-rule-spellcheck-tech-word": "^5.0.0"
   },
   "resolutions": {
+    "stylelint-webpack-plugin": "0.10.4",
     "eslint": "^4.19.1",
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",

public/.stylelintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['stylelint-config-airbnb', 'stylelint-config-prettier'],
+};

src/App/index.js

@@ -15,6 +15,7 @@ const AppHeader = style.header`
 `;
 
 const spin = keyframes`
+
   from {
     transform: rotate(0deg);
   }