[fix] CSS module support options and make it work for hapi-app sample (…

…#1775)
electrode-io · Jan 5, 2021 · 2416db2 · 2416db2
1 parent 12c11cc
commit 2416db2
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 50 deletions.
diff --git a/packages/xarc-app-dev/src/config/opt2/webpack-options.ts b/packages/xarc-app-dev/src/config/opt2/webpack-options.ts
@@ -55,11 +55,20 @@ export type WebpackOptions = {
   devArtifactsPath?: string;
 
   /**
-   * Set to true to explicitly enable CSS module support for all style files
-   * - **Default: `undefined` (auto detect)**
-   * - If not set, then check env `CSS_MODULE_SUPPORT`
+   * Configure CSS module support.
+   *
+   * Settings:
+   * 1. `true` or "cssOnly" (**default**): CSS module for any file with `.css` extension
+   * 2. RegExp: CSS module for any file that matches the custom RegExp
+   * 3. `"all"`: CSS module for all style files (`css`, `styl`, `sass`, `scss`)
+   * 4. `"byModExt"`: Use the preset RegExp that matches any file ending with `.mod.{ext}` or `.module.{ext}`
+   *    ie: `/\.(mod|module)\.(css|styl|sass|scss)$/i`
+   * 5. `false`: Disable CSS module completely
+   *
+   * - Legacy: You can also set this option with env `CSS_MODULE_SUPPORT`.
+   *
    */
-  cssModuleSupport?: boolean | RegExp;
+  cssModuleSupport?: boolean | RegExp | "all" | "byModExt" | "cssOnly";
 
   /**
    * Enable loading `@babel/polyfill` for application

diff --git a/packages/xarc-webpack/src/util/detect-css-module.ts b/packages/xarc-webpack/src/util/detect-css-module.ts
@@ -4,51 +4,51 @@ import * as _ from "lodash";
 const logger = require("@xarc/app-dev/lib/logger");
 
 function detectCSSModule(archetype) {
-  const cssModuleSupport = _.get(archetype, "webpack.cssModuleSupport", undefined);
-  const defaultRegExp = /\.(mod|module)\.(css|styl|sass|scss)/i;
-
-  /*
-   * cssModuleSupport default to undefined
-   * Default RexExp used - /\.(mod|module)\.(css|styl|sass|scss)/i
-   *
-   * cssModuleSupport:false => no CSS module support at all
-   * cssModuleSupport:true|undefined => enable CSS module support for any file that match the default RegExp
-   * cssModuleSupport:RegExp => enable CSS module support for any file that match the user provided RegExp
-   */
+  const cssModuleSupport = _.get(archetype, "webpack.cssModuleSupport", true);
+  const presetRegExp = {
+    cssOnly: /\.css$/i,
+    all: /\.(css|styl|sass|scss)$/i,
+    byModExt: /\.(mod|module)\.(css|styl|sass|scss)$/i
+  };
 
   if (cssModuleSupport === null) {
-    throw new Error(
-      `null is not a supported value for cssModuleSupport flag. Supported types are boolean or RexExp.`
-    );
+    throw new Error(`null is not a supported value for cssModuleSupport flag.`);
   }
-  if (cssModuleSupport === undefined) {
-    return { enableCssModule: true, cssModuleRegExp: defaultRegExp };
-  } else if (cssModuleSupport.constructor.name === "Boolean") {
-    return { enableCssModule: cssModuleSupport, cssModuleRegExp: defaultRegExp };
+
+  let cssModuleRegExp: RegExp | null = null;
+
+  if (cssModuleSupport === false) {
+    // turn off
+  } else if (cssModuleSupport === true) {
+    cssModuleRegExp = presetRegExp.cssOnly;
   } else if (cssModuleSupport.constructor.name === "String") {
-    let moduleExp;
-    try {
-      const lastSlash = cssModuleSupport.lastIndexOf("/");
-      moduleExp = new RegExp(
-        cssModuleSupport.slice(1, lastSlash),
-        cssModuleSupport.slice(lastSlash + 1)
-      );
-    } catch (err) {
-      logger.error(
-        `Could not parse user provided value "${cssModuleSupport}" for cssModuleSupport flag. Enabling CSS Module support for ${defaultRegExp}.`
-      );
-
-      moduleExp = defaultRegExp;
-    } finally {
-      return { enableCssModule: true, cssModuleRegExp: moduleExp };
+    cssModuleRegExp = presetRegExp[cssModuleSupport];
+    if (!cssModuleRegExp) {
+      try {
+        // in case we load the options from serialized xarc-options.json, where
+        // regexp are serialized to be a string
+        const lastSlash = cssModuleSupport.lastIndexOf("/");
+        cssModuleRegExp = new RegExp(
+          cssModuleSupport.substring(1, lastSlash),
+          cssModuleSupport.substring(lastSlash + 1)
+        );
+      } catch (err) {
+        logger.error(
+          `Could not parse cssModuleSupport RegExp string "${cssModuleSupport}". Enabling CSS Module support for all ".css" files.`
+        );
+
+        cssModuleRegExp = presetRegExp.cssOnly;
+      }
     }
   } else if (cssModuleSupport.constructor.name === "RegExp") {
-    return { enableCssModule: true, cssModuleRegExp: cssModuleSupport };
+    cssModuleRegExp = cssModuleSupport;
   } else {
     throw new Error(
       `Type ${typeof cssModuleSupport} is not supported for cssModuleSupport flag. Supported types are boolean or RexExp.`
     );
   }
+
+  return { enableCssModule: Boolean(cssModuleRegExp), cssModuleRegExp };
 }
 
 module.exports = detectCSSModule;
diff --git a/samples/hapi-app/fyn-lock.yaml b/samples/hapi-app/fyn-lock.yaml
@@ -2232,7 +2232,7 @@ $pkg:
    babel-plugin-react-css-modules: ^5.2.6
    css-modules-require-hook: ^4.0.2
    ignore-styles: ^5.0.1
-   isomorphic-loader: ^4.2.1
+   isomorphic-loader: ^4.2.2
    optional-require: ^1.0.0
    subapp-util: ^1.1.2
 '@xarc/app-dev':
@@ -2451,8 +2451,8 @@ $pkg:
    '@xarc/render-context': ^1.0.3
    '@xarc/subapp': ^0.0.3
    '@xarc/tag-renderer': ^1.0.3
-   react: ^16.13.1
-   react-dom: ^16.13.1
+   react: '>= 16'
+   react-dom: '>= 16'
   peerDependencies:
    tslib: ^2.0.3
 '@xarc/render-context':
@@ -7460,12 +7460,12 @@ isobject:
   dependencies:
    isarray: 1.0.0
 isomorphic-loader:
- _latest: 4.2.1
+ _latest: 4.2.2
  _:
-  ^4.2.1: 4.2.1
- 4.2.1:
-  $: sha512-k6/lRYHit1MAiwZ2eWKL3ZMZl8XEhGSxQz30UhvIWqj7b2boFC5cVVv4UGEGW3YoIK84+eHacbNqEGBDKtsIOA==
-  _: 'https://registry.npmjs.org/isomorphic-loader/-/isomorphic-loader-4.2.1.tgz'
+  ^4.2.2: 4.2.2
+ 4.2.2:
+  $: sha512-wBUDq1UgXcQZWYZPo767izp5c+srE0aK2b/jCVguVmTQLnh+kIx8UGE/X/aEFJnR5n3WzBl9yHDUKvrzmSHUVQ==
+  _: 'https://registry.npmjs.org/isomorphic-loader/-/isomorphic-loader-4.2.2.tgz'
 isstream:
  _latest: 0.1.2
  _:
@@ -10816,7 +10816,7 @@ raw-body:
 react:
  _latest: 17.0.1
  _:
-  '^16.0.0,^16.13.1': 16.14.0
+  '>= 16,^16.0.0': 16.14.0
  16.14.0:
   $: sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
   _: 'https://registry.npmjs.org/react/-/react-16.14.0.tgz'
@@ -10827,7 +10827,7 @@ react:
 react-dom:
  _latest: 17.0.1
  _:
-  '^16.0.0,^16.13.1': 16.14.0
+  '>= 16,^16.0.0': 16.14.0
  16.14.0:
   $: sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
   _: 'https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz'

diff --git a/samples/hapi-app/xclap.js b/samples/hapi-app/xclap.js
@@ -46,13 +46,17 @@ process.env.ENABLE_SHORTEN_CSS_NAMES = true;
 
 // process.env.KARMA_BROWSER = "phantomjs";
 
-const { getDevTaskRunner, loadXarcDevTasks } = require("@xarc/app-dev/lib/dev-tasks");
+const { getDevTaskRunner, loadXarcDevTasks, xclap } = require("@xarc/app-dev/lib/dev-tasks");
 
 const runner = getDevTaskRunner();
 runner.load({
   foo: runner.exec("echo hello from foo task")
 });
 
-loadXarcDevTasks();
+loadXarcDevTasks(xclap, {
+  webpackOptions: {
+    cssModuleSupport: "all"
+  }
+});
 
 //