2.0.0-next.66cc7a90

kriasoft · Apr 26, 2018 · fce6d71 · fce6d71
1 parent 9ca8bea
commit fce6d71
Show file tree

Hide file tree

Showing 11 changed files with 333 additions and 173 deletions.
diff --git a/packages/react-app-tools/config/paths.js b/packages/react-app-tools/config/paths.js
@@ -11,8 +11,7 @@
 const path = require('path');
 const fs = require('fs');
 const url = require('url');
-const findPkg = require('find-pkg');
-const globby = require('globby');
+const findMonorepo = require('react-dev-utils/workspaceUtils').findMonorepo;
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebook/create-react-app/issues/637
@@ -58,7 +57,6 @@ module.exports = {
   appIndexJs: resolveApp('src/index.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
-  yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveApp('src/setupTests.js'),
   appNodeModules: resolveApp('node_modules'),
   publicUrl: getPublicUrl(resolveApp('package.json')),
@@ -80,7 +78,6 @@ module.exports = {
   appIndexJs: resolveApp('src/index.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
-  yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveApp('src/setupTests.js'),
   appNodeModules: resolveApp('node_modules'),
   publicUrl: getPublicUrl(resolveApp('package.json')),
@@ -106,7 +103,6 @@ if (useTemplate) {
     appIndexJs: resolveOwn('template/src/index.js'),
     appPackageJson: resolveOwn('package.json'),
     appSrc: resolveOwn('template/src'),
-    yarnLockFile: resolveOwn('template/yarn.lock'),
     testsSetup: resolveOwn('template/src/setupTests.js'),
     appNodeModules: resolveOwn('node_modules'),
     publicUrl: getPublicUrl(resolveOwn('package.json')),
@@ -120,40 +116,16 @@ if (useTemplate) {
 
 module.exports.srcPaths = [module.exports.appSrc];
 
-const findPkgs = (rootPath, globPatterns) => {
-  const globOpts = {
-    cwd: rootPath,
-    strict: true,
-    absolute: true,
-  };
-  return globPatterns
-    .reduce(
-      (pkgs, pattern) =>
-        pkgs.concat(globby.sync(path.join(pattern, 'package.json'), globOpts)),
-      []
-    )
-    .map(f => path.dirname(path.normalize(f)));
-};
-
-const getMonorepoPkgPaths = () => {
-  const monoPkgPath = findPkg.sync(path.resolve(appDirectory, '..'));
-  if (monoPkgPath) {
-    // get monorepo config from yarn workspace
-    const pkgPatterns = require(monoPkgPath).workspaces;
-    if (pkgPatterns == null) {
-      return [];
-    }
-    const pkgPaths = findPkgs(path.dirname(monoPkgPath), pkgPatterns);
-    // only include monorepo pkgs if app itself is included in monorepo
-    if (pkgPaths.indexOf(appDirectory) !== -1) {
-      return pkgPaths.filter(f => fs.realpathSync(f) !== appDirectory);
-    }
-  }
-  return [];
-};
+module.exports.useYarn = fs.existsSync(
+  path.join(module.exports.appPath, 'yarn.lock')
+);
 
 if (checkForMonorepo) {
   // if app is in a monorepo (lerna or yarn workspace), treat other packages in
   // the monorepo as if they are app source
-  Array.prototype.push.apply(module.exports.srcPaths, getMonorepoPkgPaths());
+  const mono = findMonorepo(appDirectory);
+  if (mono.isAppIncluded) {
+    Array.prototype.push.apply(module.exports.srcPaths, mono.pkgs);
+  }
+  module.exports.useYarn = module.exports.useYarn || mono.isYarnWs;
 }
diff --git a/packages/react-app-tools/config/webpack.config.dev.js b/packages/react-app-tools/config/webpack.config.dev.js
@@ -17,6 +17,7 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
 
@@ -45,6 +46,31 @@ const postCSSLoaderOptions = {
   ],
 };
 
+// style files regexes
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+// common function to get style loaders
+const getStyleLoaders = (cssOptions, preProcessor) => {
+  const loaders = [
+    require.resolve('style-loader'),
+    {
+      loader: require.resolve('css-loader'),
+      options: cssOptions,
+    },
+    {
+      loader: require.resolve('postcss-loader'),
+      options: postCSSLoaderOptions,
+    },
+  ];
+  if (preProcessor) {
+    loaders.push(require.resolve(preProcessor));
+  }
+  return loaders;
+};
+
 // 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.
@@ -242,41 +268,44 @@ module.exports = {
           // in development "style" loader enables hot editing of CSS.
           // By default we support CSS Modules with the extension .module.css
           {
-            test: /\.css$/,
-            exclude: /\.module\.css$/,
-            use: [
-              require.resolve('style-loader'),
-              {
-                loader: require.resolve('css-loader'),
-                options: {
-                  importLoaders: 1,
-                },
-              },
-              {
-                loader: require.resolve('postcss-loader'),
-                options: postCSSLoaderOptions,
-              },
-            ],
+            test: cssRegex,
+            exclude: cssModuleRegex,
+            use: getStyleLoaders({
+              importLoaders: 1,
+            }),
           },
           // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
           // using the extension .module.css
           {
-            test: /\.module\.css$/,
-            use: [
-              require.resolve('style-loader'),
-              {
-                loader: require.resolve('css-loader'),
-                options: {
-                  importLoaders: 1,
-                  modules: true,
-                  localIdentName: '[path]__[name]___[local]',
-                },
-              },
+            test: cssModuleRegex,
+            use: getStyleLoaders({
+              importLoaders: 1,
+              modules: true,
+              getLocalIdent: getCSSModuleLocalIdent,
+            }),
+          },
+          // Opt-in support for SASS (using .scss or .sass extensions).
+          // Chains the sass-loader with the css-loader and the style-loader
+          // to immediately apply all styles to the DOM.
+          // By default we support SASS Modules with the
+          // extensions .module.scss or .module.sass
+          {
+            test: sassRegex,
+            exclude: sassModuleRegex,
+            use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
+          },
+          // Adds support for CSS Modules, but using SASS
+          // using the extension .module.scss or .module.sass
+          {
+            test: sassModuleRegex,
+            use: getStyleLoaders(
               {
-                loader: require.resolve('postcss-loader'),
-                options: postCSSLoaderOptions,
+                importLoaders: 2,
+                modules: true,
+                getLocalIdent: getCSSModuleLocalIdent,
               },
-            ],
+              'sass-loader'
+            ),
           },
           // The GraphQL loader preprocesses GraphQL queries in .graphql files.
           {