Merge pull request #5 from ananavati/cssmodules

[MINOR] CSS-Modules + CSS-Next support for the app-archetype
electrode-io · Sep 3, 2016 · 8ef05c6 · 8ef05c6
2 parents 48abbf2 + 8e433c1
commit 8ef05c6
Showing 1 changed file with 62 additions and 7 deletions.
diff --git a/packages/electrode-archetype-react-app/config/webpack/partial/extract.js b/packages/electrode-archetype-react-app/config/webpack/partial/extract.js
@@ -1,29 +1,84 @@
 "use strict";
 
+var glob = require("glob");
+var Path = require("path");
+
 var archetype = require("../../archtype");
 var mergeWebpackConfig = archetype.devRequire("webpack-partial").default;
 
 var ExtractTextPlugin = archetype.devRequire("extract-text-webpack-plugin");
 var CSSSplitPlugin = archetype.devRequire("css-split-webpack-plugin").default;
+var atImport = archetype.devRequire("postcss-import");
+var cssnext = archetype.devRequire("postcss-cssnext");
 
 var autoprefixer = archetype.devRequire("autoprefixer-stylus");
 var cssLoader = archetype.devRequire.resolve("css-loader");
 var styleLoader = archetype.devRequire.resolve("style-loader");
 var stylusLoader = archetype.devRequire.resolve("stylus-relative-loader");
+var postcssLoader = archetype.devRequire.resolve("postcss-loader");
+
+/**
+ * [cssModuleSupport By default, this archetype assumes you are using CSS-Modules + CSS-Next]
+ *
+ * Stylus is also supported for which the following cases can occur.
+ *
+ * case 1: *only* *.css exists => CSS-Modules + CSS-Next
+ * case 2: *only* *.styl exists => stylus
+ * case 3: *both* *.css & *.styl exists => CSS-Modules + CSS-Next takes priority
+ *          with a warning message
+ * case 4: *none* *.css & *.styl exists => CSS-Modules + CSS-Next takes priority
+ */
+
+var cssNextExists = (glob.sync(Path.join(process.cwd() + "/client/styles/*.css")).length > 0);
+var stylusExists = (glob.sync(Path.join(process.cwd() + "/client/styles/*.styl")).length > 0);
+
+// By default, this archetype assumes you are using CSS-Modules + CSS-Next
+var cssModuleSupport = true;
+
+if (stylusExists && !cssNextExists) {
+  cssModuleSupport = false;
+} else if (stylusExists && cssNextExists) {
+  /* eslint-disable no-console */
+  console.log(`\n\n **** you have demo.css & demo.styl please delete *.styl
+    and upgrade to using *.css for CSS-Modules + CSS-Next support **** \n\n`);
+  /* eslint-enable no-console */
+}
 
 module.exports = function () {
   return function (config) {
-    var query = cssLoader + "?-autoprefixer!" + stylusLoader;
+    var stylusQuery = cssLoader + "?-autoprefixer!" + stylusLoader;
+    var cssQuery = cssLoader + "?modules&-autoprefixer!" + postcssLoader;
+
+    // By default, this archetype assumes you are using CSS-Modules + CSS-Next
+    var loaders = [{
+      name: "extract-css",
+      test: /\.css$/,
+      loader: ExtractTextPlugin.extract(styleLoader, cssQuery)
+    }];
+
+    if (!cssModuleSupport) {
+      loaders.push({
+        name: "extract-stylus",
+        test: /\.styl$/,
+        loader: ExtractTextPlugin.extract(styleLoader, stylusQuery)
+      });
+    }
+
     return mergeWebpackConfig(config, {
       module: {
-        loaders: [{
-          name: "extract",
-          test: /\.styl$/,
-          loader: ExtractTextPlugin.extract(styleLoader, query)
-        }]
+        loaders: loaders
+      },
+      postcss: function () {
+        return cssModuleSupport ? [atImport, cssnext({
+          browsers: ["last 2 versions", "ie >= 9", "> 5%"]
+        })] : [];
       },
       stylus: {
-        use: [autoprefixer({browsers: ["last 2 versions", "ie >= 9", "> 5%"]})]
+        use: function() {
+          return !cssModuleSupport ? [autoprefixer({
+            browsers: ["last 2 versions", "ie >= 9", "> 5%"]
+          })] : [];
+        }
       },
       plugins: [
         new ExtractTextPlugin(config.__wmlMultiBundle