Chore - Rebasing from latest 0.9.4 facebook

Author: Daniel Figueiredo

.gitignore

@@ -11,3 +11,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 /.changelog
+.idea/

README.md

@@ -86,6 +86,8 @@ module.exports = {
   nodePaths: nodePaths,
   publicUrl: getPublicUrl(resolveApp('package.json')),
   servedPath: getServedPath(resolveApp('package.json')),
+  testsCustomConfig: resolveApp('jest-config.json'),
+  browsersFile: resolveApp('browsers.json'),
 };
 
 // @remove-on-eject-begin
@@ -111,6 +113,8 @@ module.exports = {
   // These properties only exist before ejecting:
   ownPath: resolveOwn('.'),
   ownNodeModules: resolveOwn('node_modules'), // This is empty on npm 3
+  testsCustomConfig: resolveApp('jest-config.json'),
+  browsersFile: resolveApp('browsers.json'),
 };
 
 const ownPackageJson = require('../package.json');
@@ -140,6 +144,8 @@ if (
     // These properties only exist before ejecting:
     ownPath: resolveOwn('.'),
     ownNodeModules: resolveOwn('node_modules'),
+    testsCustomConfig: resolveApp('jest-config.json'),
+    browsersFile: resolveApp('browsers.json'),
   };
 }
 // @remove-on-eject-end

packages/react-scripts/config/paths.js

@@ -0,0 +1,9 @@
+const StyleLintPlugin = require('stylelint-webpack-plugin');
+
+module.exports = [
+  new StyleLintPlugin({
+    configFile: './.stylelintrc',
+    files: ['src/**/*.css'],
+    failOnError: false,
+  }),
+];

packages/react-scripts/config/rangle/plugins.js

@@ -0,0 +1,44 @@
+const webpack = require('webpack');
+const fs = require('fs');
+const paths = require('../paths');
+
+const defaultBrowsers = {
+  browsers: [
+    '>1%',
+    'last 4 versions',
+    'Firefox ESR',
+    'not ie < 9', // React doesn't support IE8 anyway
+  ]
+};
+
+// Check if there is a browsers.json file and loads it if exists
+// this allows us to customize the browsers list without having to eject
+function loadBrowsersConfig() {
+  return fs.existsSync(paths.browsersFile)
+    ? require(paths.browsersFile)
+    : defaultBrowsers
+}
+
+const postcssBasePlugins = [
+  require('postcss-modules-local-by-default'),
+  require('postcss-import')({
+    addDependencyTo: webpack,
+  }),
+  require('postcss-cssnext')(loadBrowsersConfig()),
+];
+const postcssDevPlugins = [];
+const postcssProdPlugins = [
+  require('cssnano')({
+    safe: true,
+    sourcemap: true,
+    autoprefixer: false,
+  }),
+];
+
+const postcssPlugins = postcssBasePlugins
+  .concat(process.env.NODE_ENV === 'production' ? postcssProdPlugins : [])
+  .concat(process.env.NODE_ENV === 'development' ? postcssDevPlugins : []);
+
+module.exports = () => {
+  return postcssPlugins;
+};

packages/react-scripts/config/rangle/postcss.js

@@ -34,6 +34,9 @@ const publicUrl = '';
 // Get environment variables to inject into our app.
 const env = getClientEnvironment(publicUrl);
 
+// Get postcss and cssnext config for webpack
+var postcss = require('./rangle/postcss');
+
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.
 // The production configuration is different and lives in a separate file.
@@ -201,16 +204,7 @@ module.exports = {
             loader: 'postcss-loader',
             options: {
               ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
-              plugins: () => [
-                autoprefixer({
-                  browsers: [
-                    '>1%',
-                    'last 4 versions',
-                    'Firefox ESR',
-                    'not ie < 9', // React doesn't support IE8 anyway
-                  ],
-                }),
-              ],
+              plugins: postcss,
             },
           },
         ],
@@ -244,6 +238,9 @@ module.exports = {
     // makes the discovery automatic so you don't have to restart.
     // See https://github.com/facebookincubator/create-react-app/issues/186
     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+
+    // rangle custom plugins such as stylelint
+    ...require('./rangle/plugins'),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

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

@@ -37,6 +37,9 @@ const publicUrl = publicPath.slice(0, -1);
 // Get environment variables to inject into our app.
 const env = getClientEnvironment(publicUrl);
 
+// Get postcss and cssnext config for webpack
+var postcss = require('./rangle/postcss');
+
 // Assert this just to be safe.
 // Development builds of React are slow and not intended for production.
 if (env.stringified['process.env'].NODE_ENV !== '"production"') {
@@ -206,16 +209,7 @@ module.exports = {
                   loader: 'postcss-loader',
                   options: {
                     ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
-                    plugins: () => [
-                      autoprefixer({
-                        browsers: [
-                          '>1%',
-                          'last 4 versions',
-                          'Firefox ESR',
-                          'not ie < 9', // React doesn't support IE8 anyway
-                        ],
-                      }),
-                    ],
+                    plugins: postcss,
                   },
                 },
               ],
@@ -283,6 +277,9 @@ module.exports = {
     new ManifestPlugin({
       fileName: 'asset-manifest.json',
     }),
+
+    // rangle custom plugins such as stylelint
+    ...require('./rangle/plugins'),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

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

@@ -1,14 +1,14 @@
 {
-  "name": "react-scripts",
-  "version": "0.9.4",
-  "description": "Configuration and scripts for Create React App.",
-  "repository": "facebookincubator/create-react-app",
+  "name": "@rangle/react-scripts",
+  "version": "0.0.9",
+  "description": "Rangle's custom configuration and scripts for Create React App.",
+  "repository": "rangle/create-react-app",
   "license": "BSD-3-Clause",
   "engines": {
     "node": ">=4"
   },
   "bugs": {
-    "url": "https://github.com/facebookincubator/create-react-app/issues"
+    "url": "https://github.com/rangle/rangle-starter/issues"
   },
   "files": [
     "babelrc",
@@ -51,10 +51,22 @@
     "http-proxy-middleware": "0.17.3",
     "jest": "18.1.0",
     "object-assign": "4.1.1",
+    "postcss-cssnext": "^2.9.0",
+    "postcss-import": "^9.0.0",
     "postcss-loader": "1.3.3",
+    "postcss-modules-local-by-default": "^1.1.1",
     "promise": "7.1.1",
+    "react": "^15.3.0",
     "react-dev-utils": "^0.5.2",
+    "react-redux": "^5.0.1",
+    "react-router": "^3.0.0",
+    "react-router-redux": "^4.0.7",
+    "redux": "^3.6.0",
+    "redux-form": "^6.4.3",
+    "stylelint": "^7.7.1",
+    "stylelint-webpack-plugin": "^0.5.1",
     "style-loader": "0.13.2",
+    "tachyons": "^4.6.1",
     "url-loader": "0.5.8",
     "webpack": "2.2.1",
     "webpack-dev-server": "2.4.1",

packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/logo.svg

@@ -46,7 +46,13 @@ prompt(
     }
   }
 
-  const folders = ['config', 'config/jest', 'scripts', 'scripts/utils'];
+  const folders = [
+    'config',
+    'config/jest',
+    'config/rangle',
+    'scripts',
+    'scripts/utils',
+  ];
 
   // Make shallow array of files paths
   const files = folders.reduce(
@@ -101,10 +107,10 @@ prompt(
   const ownPackage = require(path.join(ownPath, 'package.json'));
   const appPackage = require(path.join(appPath, 'package.json'));
   const babelConfig = JSON.parse(
-    fs.readFileSync(path.join(ownPath, '.babelrc'), 'utf8')
+    fs.readFileSync(path.join(ownPath, 'babelrc'), 'utf8')
   );
   const eslintConfig = JSON.parse(
-    fs.readFileSync(path.join(ownPath, '.eslintrc'), 'utf8')
+    fs.readFileSync(path.join(ownPath, 'eslintrc'), 'utf8')
   );
 
   console.log(cyan('Updating the dependencies'));
@@ -179,6 +185,11 @@ prompt(
     }
   }
 
+  if (fs.existsSync(paths.testsCustomConfig)) {
+    console.log(cyan('Removing custom jest-config.json...'));
+    fs.removeSync(paths.testsCustomConfig);
+  }
+
   if (fs.existsSync(paths.yarnLockFile)) {
     console.log(cyan('Running yarn...'));
     spawnSync('yarnpkg', [], { stdio: 'inherit' });

packages/react-scripts/package.json

@@ -21,7 +21,7 @@ module.exports = (resolve, rootDir, isEjecting) => {
 
   // TODO: I don't know if it's safe or not to just use / as path separator
   // in Jest configs. We need help from somebody with Windows to determine this.
-  const config = {
+  let config = {
     collectCoverageFrom: ['src/**/*.{js,jsx}'],
     setupFiles: [resolve('config/polyfills.js')],
     setupTestFrameworkScriptFile: setupTestsFile,
@@ -45,5 +45,20 @@ module.exports = (resolve, rootDir, isEjecting) => {
   if (rootDir) {
     config.rootDir = rootDir;
   }
+
+  // If there is a jest-config.json in the root folder, merge it with
+  // the default configuration. This allows threshold and few other
+  // configs to be defined at the project level as you would normally do
+  // inside your package.json -> "jest": { ... }
+  // This solution issue will probably turn out to be something better than this,
+  // but this change is a simple work around for now.
+  // https://github.com/facebookincubator/create-react-app/issues/922
+  if (fs.existsSync(paths.testsCustomConfig)) {
+    config = Object.assign(
+      {},
+      config,
+      require(paths.testsCustomConfig)
+    );
+  }
   return config;
 };