supported stylus, css modules, common path alias

Author: Qrysto

packages/react-scripts/config/paths.js

@@ -116,25 +116,3 @@ module.exports = {
 
 var reactScriptsPath = path.resolve('node_modules/react-scripts');
 var reactScriptsLinked = fs.existsSync(reactScriptsPath) && fs.lstatSync(reactScriptsPath).isSymbolicLink();
-
-// config before publish: we're in ./packages/react-scripts/config/
-if (!reactScriptsLinked && __dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1) {
-  module.exports = {
-    appPath: resolveApp('.'),
-    ownPath: resolveOwn('.'),
-    appBuild: resolveOwn('../../build'),
-    appPublic: resolveOwn('template/public'),
-    appHtml: resolveOwn('template/public/index.html'),
-    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'),
-    ownNodeModules: resolveOwn('node_modules'),
-    nodePaths: nodePaths,
-    publicUrl: getPublicUrl(resolveOwn('package.json')),
-    servedPath: getServedPath(resolveOwn('package.json'))
-  };
-}
-// @remove-on-eject-end

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

@@ -81,16 +81,17 @@ module.exports = {
     // We placed these paths second because we want `node_modules` to "win"
     // if there are any conflicts. This matches Node resolution mechanism.
     // https://github.com/facebookincubator/create-react-app/issues/253
-    modules: ['node_modules'].concat(paths.nodePaths).concat(paths.appSrc),
+    modules: ['node_modules'].concat(paths.nodePaths),
     // These are the reasonable defaults supported by the Node ecosystem.
     // We also include JSX as a common component filename extension to support
     // some tools, although we do not recommend using it, see:
     // https://github.com/facebookincubator/create-react-app/issues/290
-    extensions: ['.js', '.json', '.jsx'],
+    extensions: ['.js', '.json', '.jsx', 'styl'],
     alias: {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web'
+      'react-native': 'react-native-web',
+      'common': path.resolve(paths.appSrc, 'common'),
     }
   },
   // @remove-on-eject-begin
@@ -137,7 +138,7 @@ module.exports = {
         exclude: [
           /\.html$/,
           /\.(js|jsx)$/,
-          /\.css$/,
+          /\.styl$/,
           /\.json$/,
           /\.svg$/
         ],
@@ -169,12 +170,14 @@ module.exports = {
       // In production, we use a plugin to extract that CSS to a file, but
       // in development "style" loader enables hot editing of CSS.
       {
-        test: /\.css$/,
+        test: /\.styl$/,
         use: [
           'style-loader', {
             loader: 'css-loader',
             options: {
-              importLoaders: 1
+              importLoaders: 2,
+              modules: true,
+              localIdentName: '[path]-[name]-[local]-[hash:base64:4]',
             }
           }, {
             loader: 'postcss-loader',
@@ -193,6 +196,8 @@ module.exports = {
                 ]
               }
             }
+          }, {
+            loader: 'stylus-loader'
           }
         ]
       },

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

@@ -91,11 +91,12 @@ module.exports = {
     // We also include JSX as a common component filename extension to support
     // some tools, although we do not recommend using it, see:
     // https://github.com/facebookincubator/create-react-app/issues/290
-    extensions: ['.js', '.json', '.jsx'],
+    extensions: ['.js', '.json', '.jsx', 'styl'],
     alias: {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web'
+      'react-native': 'react-native-web',
+      'common': path.resolve(paths.appSrc, 'common'),
     }
   },
   // @remove-on-eject-begin
@@ -144,7 +145,7 @@ module.exports = {
         exclude: [
           /\.html$/,
           /\.(js|jsx)$/,
-          /\.css$/,
+          /\.styl$/,
           /\.json$/,
           /\.svg$/
         ],
@@ -179,14 +180,16 @@ module.exports = {
       // use the "style" loader inside the async code so CSS from them won't be
       // in the main CSS file.
       {
-        test: /\.css$/,
+        test: /\.styl$/,
         loader: ExtractTextPlugin.extract(Object.assign({
           fallback: 'style-loader',
           use: [
             {
               loader: 'css-loader',
               options: {
-                importLoaders: 1
+                importLoaders: 2,
+                modules: true,
+                localIdentName: '[hash:base64:6]',
               }
             }, {
               loader: 'postcss-loader',
@@ -205,6 +208,8 @@ module.exports = {
                   ]
                 }
               }
+            }, {
+              loader: 'stylus-loader'
             }
           ]
         }, extractTextPluginOptions))

packages/react-scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sero.ai-react-scripts",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Configuration and scripts for Create React App. Customized for sero.ai team.",
   "repository": "Qrysto/create-react-app",
   "license": "BSD-3-Clause",
@@ -59,6 +59,8 @@
     "recursive-readdir": "2.1.1",
     "strip-ansi": "3.0.1",
     "style-loader": "0.13.1",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^2.5.0",
     "url-loader": "0.5.7",
     "webpack": "2.2.1",
     "webpack-dev-server": "2.4.1",