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');
@@ -225,6 +226,18 @@ module.exports = {
     ],
   },
   plugins: [
+    // Lint CSS with stylelint
+    new StyleLintPlugin({
+      // @remove-on-eject-begin
+      config: {
+        extends: 'stylelint-config-react-app',
+      },
+      configBasedir: paths.ownPath,
+      // @remove-on-eject-end
+      allowEmptyInput: true,
+      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,19 @@ module.exports = {
     ],
   },
   plugins: [
+    // Lint CSS with stylelint and fail on error
+    new StyleLintPlugin({
+      // @remove-on-eject-begin
+      config: {
+        extends: 'stylelint-config-react-app',
+      },
+      configBasedir: paths.ownPath,
+      // @remove-on-eject-end
+      allowEmptyInput: true,
+      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

@@ -54,6 +54,10 @@
     "react-dev-utils": "^0.5.2",
     "react-error-overlay": "^0.0.0",
     "style-loader": "0.16.1",
+    "stylelint": "7.10.1",
+    "stylelint-config-react-app": "0.0.1",
+    "stylelint-csstree-validator": "1.1.1",
+    "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

@@ -91,12 +91,12 @@ prompt(
     content = content
       // Remove dead code from .js files on eject
       .replace(
-        /\/\/ @remove-on-eject-begin([\s\S]*?)\/\/ @remove-on-eject-end/mg,
+        /\/\/ @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/mg,
+        /-- @remove-on-eject-begin([\s\S]*?)-- @remove-on-eject-end/gm,
         ''
       )
       .trim() + '\n';
@@ -165,6 +165,12 @@ prompt(
     extends: 'react-app',
   };
 
+  // Add stylelint config
+  console.log(`  Adding ${cyan('stylelint')} configuration`);
+  appPackage.stylelint = {
+    extends: 'stylelint-config-react-app',
+  };
+
   fs.writeFileSync(
     path.join(appPath, 'package.json'),
     JSON.stringify(appPackage, null, 2) + '\n'

packages/stylelint-config-react-app/README.md

@@ -0,0 +1,31 @@
+# stylelint-config-react-app
+
+This package includes the shareable stylelint configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).<br>
+Please refer to its documentation:
+
+* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
+* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
+
+## Usage in Create React App Projects
+
+The easiest way to use this configuration is with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.**
+
+## Usage Outside of Create React App
+
+If you want to use this stylelint configuration in a project not built with Create React App, you can install it with following steps.
+
+First, install this package, stylelint and the necessary plugins.
+
+  ```sh
+  npm install --save-dev stylelint-config-react-app stylelint@7.10.1 stylelint-csstree-validator@1.1.1
+  ```
+
+Then create a file named `.stylelintrc` with following contents in the root folder of your project:
+
+  ```js
+  {
+    "extends": "stylelint-config-react-app"
+  }
+  ```
+
+  That's it! You can override the settings from `stylelint-config-react-app` by editing the `.stylelintrc` file. Learn more about [configuring stylelint](https://stylelint.io/user-guide/configuration/) on the stylelint website.

packages/stylelint-config-react-app/index.js

@@ -0,0 +1,24 @@
+'use strict';
+
+module.exports = {
+  plugins: ['stylelint-csstree-validator'],
+  rules: {
+    'at-rule-no-unknown': true,
+    'color-no-invalid-hex': true,
+    'declaration-block-no-duplicate-properties': true,
+    'declaration-block-no-shorthand-property-overrides': true,
+    'function-linear-gradient-no-nonstandard-direction': true,
+    'media-feature-name-no-unknown': true,
+    'no-invalid-double-slash-comments': true,
+    'no-unknown-animations': true,
+    'property-no-unknown': true,
+    'selector-pseudo-class-no-unknown': true,
+    'selector-pseudo-element-no-unknown': true,
+    'selector-type-no-unknown': true,
+    'string-no-newline': true,
+    'unit-no-unknown': true,
+
+    // csstree syntax validator https://github.com/csstree/stylelint-validator
+    'csstree/validator': true,
+  },
+};

packages/stylelint-config-react-app/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "stylelint-config-react-app",
+  "version": "0.0.1",
+  "description": "stylelint configuration used by Create React App",
+  "repository": "facebookincubator/create-react-app",
+  "license": "BSD-3-Clause",
+  "bugs": {
+    "url": "https://github.com/facebookincubator/create-react-app/issues"
+  },
+  "files": [
+    "index.js"
+  ],
+  "peerDependencies": {
+    "stylelint": "^7.10.1",
+    "stylelint-csstree-validator": "^1.1.1"
+  },
+  "dependencies": {
+    "stylelint": "^7.10.1",
+    "stylelint-csstree-validator": "^1.1.1"
+  }
+}