Add stylelint

packages/react-scripts/config/webpack.config.dev.js

@@ -16,6 +16,7 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const StyleLintPlugin = require('stylelint-webpack-plugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
@@ -224,6 +225,17 @@ module.exports = {
     ],
   },
   plugins: [
+    // Lint CSS with stylelint
+    new StyleLintPlugin({
+      // @remove-on-eject-begin
+      config: {
+        extends: 'stylelint-config-standard',
+      },
+      configBasedir: paths.ownPath,
+      // @remove-on-eject-end
+      context: paths.appSrc,
+      files: ['**/*.css'],
+    }),
     // Makes some environment variables available in index.html.
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

packages/react-scripts/config/webpack.config.prod.js

@@ -16,6 +16,7 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
+const StyleLintPlugin = require('stylelint-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
@@ -233,6 +234,18 @@ module.exports = {
     ],
   },
   plugins: [
+    // Lint CSS with stylelint and fail on error
+    new StyleLintPlugin({
+      // @remove-on-eject-begin
+      config: {
+        extends: 'stylelint-config-standard',
+      },
+      configBasedir: paths.ownPath,
+      // @remove-on-eject-end
+      context: paths.appSrc,
+      files: ['**/*.css'],
+      failOnError: true,
+    }),
     // Makes some environment variables available in index.html.
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

packages/react-scripts/package.json

@@ -53,6 +53,9 @@
     "promise": "7.1.1",
     "react-dev-utils": "^0.5.2",
     "style-loader": "0.16.1",
+    "stylelint": "7.7.0",
+    "stylelint-config-standard": "15.0.0",
+    "stylelint-webpack-plugin": "0.6.0",
     "url-loader": "0.5.8",
     "webpack": "2.4.1",
     "webpack-dev-server": "2.4.4",

packages/react-scripts/scripts/eject.js

@@ -56,19 +56,16 @@ prompt(
   const folders = ['config', 'config/jest', 'scripts', 'scripts/utils'];
 
   // Make shallow array of files paths
-  const files = folders.reduce(
-    (files, folder) => {
-      return files.concat(
-        fs
-          .readdirSync(path.join(ownPath, folder))
-          // set full path
-          .map(file => path.join(ownPath, folder, file))
-          // omit dirs from file list
-          .filter(file => fs.lstatSync(file).isFile())
-      );
-    },
-    []
-  );
+  const files = folders.reduce((files, folder) => {
+    return files.concat(
+      fs
+        .readdirSync(path.join(ownPath, folder))
+        // set full path
+        .map(file => path.join(ownPath, folder, file))
+        // omit dirs from file list
+        .filter(file => fs.lstatSync(file).isFile())
+    );
+  }, []);
 
   // Ensure that the app folder is clean and we won't override any files
   folders.forEach(verifyAbsent);
@@ -88,18 +85,19 @@ prompt(
     if (content.match(/\/\/ @remove-file-on-eject/)) {
       return;
     }
-    content = content
-      // Remove dead code from .js files on eject
-      .replace(
-        /\/\/ @remove-on-eject-begin([\s\S]*?)\/\/ @remove-on-eject-end/mg,
-        ''
-      )
-      // Remove dead code from .applescript files on eject
-      .replace(
-        /-- @remove-on-eject-begin([\s\S]*?)-- @remove-on-eject-end/mg,
-        ''
-      )
-      .trim() + '\n';
+    content =
+      content
+        // Remove dead code from .js files on eject
+        .replace(
+          /\/\/ @remove-on-eject-begin([\s\S]*?)\/\/ @remove-on-eject-end/gm,
+          ''
+        )
+        // Remove dead code from .applescript files on eject
+        .replace(
+          /-- @remove-on-eject-begin([\s\S]*?)-- @remove-on-eject-end/gm,
+          ''
+        )
+        .trim() + '\n';
     console.log(`  Adding ${cyan(file.replace(ownPath, ''))} to the project`);
     fs.writeFileSync(file.replace(ownPath, appPath), content);
   });
@@ -165,6 +163,12 @@ prompt(
     extends: 'react-app',
   };
 
+  // Add stylelint config
+  console.log(`  Adding ${cyan('stylelint')} configuration`);
+  appPackage.stylelint = {
+    extends: 'stylelint-config-standard',
+  };
+
   fs.writeFileSync(
     path.join(appPath, 'package.json'),
     JSON.stringify(appPackage, null, 2) + '\n'