fix archetype stylus issue (#887)

electrode-io · Jul 31, 2018 · ef1515c · ef1515c
1 parent 295b11d
commit ef1515c
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 24 deletions.
diff --git a/packages/electrode-archetype-react-app-dev/config/archetype.js b/packages/electrode-archetype-react-app-dev/config/archetype.js
@@ -9,6 +9,7 @@ const devDir = Path.join(__dirname, "..");
 const devRequire = require(`../require`);
 const configDir = `${devDir}/config`;
 const xenvConfig = devRequire("xenv-config");
+const detectCSSModule = require("./webpack/util/detect-css-module");
 
 const webpackConfigSpec = {
   devHostname: { env: ["WEBPACK_HOST", "WEBPACK_DEV_HOST"], default: "localhost" },
@@ -17,7 +18,7 @@ const webpackConfigSpec = {
   reporterSocketPort: { env: "WEBPACK_REPORTER_SOCKET_PORT", default: 5000 },
   https: { env: "WEBPACK_DEV_HTTPS", default: false },
   devMiddleware: { env: "WEBPACK_DEV_MIDDLEWARE", default: false },
-  cssModuleSupport: { env: "CSS_MODULE_SUPPORT", default: undefined },
+  cssModuleSupport: { env: "CSS_MODULE_SUPPORT", type: "boolean", default: detectCSSModule() },
   cssModuleStylusSupport: { env: "CSS_MODULE_STYLUS_SUPPORT", default: false },
   enableBabelPolyfill: { env: "ENABLE_BABEL_POLYFILL", default: false },
   enableNodeSourcePlugin: { env: "ENABLE_NODESOURCE_PLUGIN", default: false },

diff --git a/packages/electrode-archetype-react-app-dev/config/babel/babelrc-client b/packages/electrode-archetype-react-app-dev/config/babel/babelrc-client
@@ -57,7 +57,7 @@
     "test": {
       "plugins": ["dynamic-import-node"]
     },
-    "development": {
+    "css-module-dev": {
       "plugins": [
         ["babel-plugin-react-css-modules", {
           "context": "./src",
@@ -76,7 +76,7 @@
         }]
       ]
     },
-    "production": {
+    "css-module-prod" : {
       "plugins": [
         "babel-plugin-transform-react-constant-elements",
         ["transform-react-remove-prop-types", {
@@ -98,6 +98,14 @@
           }
         }]
       ]
+    },
+    "production": {
+      "plugins": [
+        "babel-plugin-transform-react-constant-elements",
+        ["transform-react-remove-prop-types", {
+           "removeImport": true
+        }]
+      ]
     }
   }
 }
diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/partial/extract-style.js b/packages/electrode-archetype-react-app-dev/config/webpack/partial/extract-style.js
@@ -3,7 +3,6 @@
 const archetype = require("electrode-archetype-react-app/config/archetype");
 const Path = require("path");
 const webpack = require("webpack");
-const glob = require("glob");
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const CSSSplitPlugin = require("css-split-webpack-plugin").default;
@@ -30,10 +29,9 @@ const sassLoader = require.resolve("sass-loader");
  * case 3: *only* *.scss => normal CSS => CSS-Modules + CSS-Next
  */
 
-let cssModuleSupport = archetype.webpack.cssModuleSupport;
+const cssModuleSupport = archetype.webpack.cssModuleSupport;
 const cssModuleStylusSupport = archetype.webpack.cssModuleStylusSupport;
 const enableShortenCSSNames = archetype.webpack.enableShortenCSSNames;
-const AppMode = archetype.AppMode;
 
 const enableShortHash = process.env.NODE_ENV === "production" && enableShortenCSSNames;
 const localIdentName = `${enableShortHash ? "" : "[name]__[local]___"}[hash:base64:5]`;
@@ -48,22 +46,6 @@ const cssScssQuery = `${cssLoader}${cssLoaderOptions}!${postcssLoader}!${sassLoa
 
 const rules = [];
 
-const cssExists = glob.sync(Path.resolve(AppMode.src.client, "**", "*.css")).length > 0;
-const stylusExists = glob.sync(Path.resolve(AppMode.src.client, "**", "*.styl")).length > 0;
-const scssExists = glob.sync(Path.resolve(AppMode.src.client, "**", "*.scss")).length > 0;
-
-/*
- * cssModuleSupport default to undefined
- *
- * when cssModuleSupport not specified:
- * *only* *.css, cssModuleSupport sets to true
- * *only* *.styl, cssModuleSupport sets to false
- * *only* *.scss, cssModuleSupport sets to false
- */
-if (cssModuleSupport === undefined) {
-  cssModuleSupport = cssExists && !stylusExists && !scssExists;
-}
-
 module.exports = function() {
   rules.push(
     {

diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/util/detect-css-module.js b/packages/electrode-archetype-react-app-dev/config/webpack/util/detect-css-module.js
@@ -0,0 +1,25 @@
+"use strict";
+
+const Path = require("path");
+const glob = require("glob");
+const archetype = require("electrode-archetype-react-app/config/archetype");
+const AppMode = archetype.AppMode;
+
+function detectCSSModule() {
+  const cssExists = glob.sync(Path.resolve(AppMode.src.client, "**", "*.css")).length > 0;
+  const stylusExists = glob.sync(Path.resolve(AppMode.src.client, "**", "*.styl")).length > 0;
+  const scssExists = glob.sync(Path.resolve(AppMode.src.client, "**", "*.scss")).length > 0;
+
+  /*
+ * cssModuleSupport default to undefined
+ *
+ * when cssModuleSupport not specified:
+ * *only* *.css, cssModuleSupport sets to true
+ * *only* *.styl, cssModuleSupport sets to false
+ * *only* *.scss, cssModuleSupport sets to false
+ */
+
+  return cssExists && !stylusExists && !scssExists;
+}
+
+module.exports = detectCSSModule;
diff --git a/packages/electrode-archetype-react-app/arch-clap.js b/packages/electrode-archetype-react-app/arch-clap.js
@@ -359,6 +359,12 @@ function makeTasks() {
         `--colors`
       );
     },
+    ".set.babel.env": () => {
+      const webpackConfig = archetype.webpack;
+      if(webpackConfig.cssModuleSupport && webpackConfig.enableShortenCSSNames) {
+        process.env.BABEL_ENV = (process.env.NODE_ENV === "production") ? "css-module-prod" : "css-module-dev";
+      }
+    },
     "build-browser-coverage": {
       desc: "Build browser coverage",
       task: [
@@ -375,6 +381,7 @@ function makeTasks() {
     },
 
     "build-dist": [
+      ".set.babel.env",
       ".clean.build",
       "build-dist-dll",
       "build-dist-min",
@@ -518,6 +525,7 @@ Individual .babelrc files were generated for you in src/client and src/server
         const args = taskArgs(this.argv);
 
         return [
+          ".set.babel.env",
           ".webpack-dev",
           [
             archetype.webpack.devMiddleware ? "" : "wds.dev",
@@ -824,8 +832,7 @@ Individual .babelrc files were generated for you in src/client and src/server
     Object.assign(tasks, {
       "build-dist-dll": {
         dep: [".mk-dll-dir", ".mk-dist-dir", ".production-env"],
-        task: () =>
-          exec(`webpack --config`, quote(webpackConfig("webpack.config.dll.js")), `--colors`)
+        task: () => exec(`webpack --config`, quote(webpackConfig("webpack.config.dll.js")), `--colors`)
       },
       "copy-dll": () => shell.cp("-r", "dll/*", "dist")
     });