[major] remove old css module hooks

electrode-io · Jan 29, 2021 · ac074cb · ac074cb
1 parent 56b8d2d
commit ac074cb
Show file tree

Hide file tree

Showing 8 changed files with 1,341 additions and 1,578 deletions.
diff --git a/packages/xarc-app-dev/package.json b/packages/xarc-app-dev/package.json
@@ -58,6 +58,7 @@
     "babel-plugin-dynamic-import-node": "^2.2.0",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-minify-dead-code-elimination": "^0.5.0",
+    "babel-plugin-react-css-modules": "^5.2.6",
     "babel-plugin-transform-node-env-inline": "^0.4.3",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.20",
     "boxen": "^4.2.0",

diff --git a/packages/xarc-app/package.json b/packages/xarc-app/package.json
@@ -37,9 +37,6 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "babel-plugin-react-css-modules": "^5.2.6",
-    "css-modules-require-hook": "^4.0.2",
-    "ignore-styles": "^5.0.1",
     "isomorphic-loader": "^4.4.0",
     "optional-require": "^1.0.0",
     "subapp-util": "^1.1.2",
@@ -108,12 +105,6 @@
     "lines": 0,
     "cache": false
   },
-  "fyn": {
-    "dependencies": {
-      "subapp-util": "../subapp-util"
-    },
-    "devDependencies": {}
-  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -139,5 +130,10 @@
       "@xarc/module-dev/config/test/setup.js"
     ],
     "recursive": true
+  },
+  "fyn": {
+    "dependencies": {
+      "subapp-util": "../subapp-util"
+    }
   }
 }
diff --git a/packages/xarc-app/src/index.ts b/packages/xarc-app/src/index.ts
@@ -11,48 +11,25 @@ const Path = require("path");
 const constants = require("../lib/constants");
 const logger = require("../lib/logger");
 const devArchetype = optionalRequire("@xarc/app-dev/config/archetype");
+const devRequire = optionalRequire("@xarc/app-dev/require");
+const optionalDevRequire = require("optional-require")(devRequire);
 
 let AppMode;
 
+function getXarcDev() {
+  return devArchetype ? devArchetype() : {};
+}
+
 function getAppMode() {
   if (!AppMode) {
-    AppMode = devArchetype ? devArchetype().AppMode : makeAppMode(constants.PROD_DIR);
+    AppMode = getXarcDev().AppMode || makeAppMode(constants.PROD_DIR);
   }
 
   return AppMode;
 }
 
 function getXarcCwd() {
-  const archetype = devArchetype && devArchetype();
-  return (archetype && archetype.cwd) || process.env.XARC_CWD || process.cwd();
-}
-
-/**
- * Load CSS module run time hook
- *
- * @param options - options for the hook
- */
-export function cssModuleHook(
-  options: {
-    /**
-     * template for scope name to generate, default: "[hash:base64]"
-     */
-    generateScopedName?: string;
-    /**
-     * rootDir - src or lib in production
-     */
-    rootDir?: string;
-    /**
-     * any other options for css-modules-require-hook
-     */
-    [key: string]: any;
-  } = {}
-) {
-  const defaultRootDirPath = process.env.NODE_ENV === "production" ? "lib" : "src";
-  options.generateScopedName = options.generateScopedName || "[hash:base64]";
-  options.rootDir = options.rootDir || Path.resolve(getXarcCwd(), defaultRootDirPath);
-
-  require("css-modules-require-hook")(options);
+  return getXarcDev().cwd || process.env.XARC_CWD || process.cwd();
 }
 
 /**
@@ -80,7 +57,14 @@ export type XarcCdnAssetsMappingOptions = {
   prodOnly?: boolean;
 };
 
+/**
+ * Setup assets mapping to CDN URLs
+ *
+ * @param options - asset mapping options
+ * @returns nothing
+ */
 export const setupIsomorphicCdnAssetsMapping = (options?: XarcCdnAssetsMappingOptions) => {
+  // only setup CDN mapping for production mode
   if (!options || (options.prodOnly && process.env.NODE_ENV !== "production")) {
     return;
   }
@@ -154,18 +138,6 @@ type XarcSupportOptions = {
    * - Object: options to be passed to @babel/register
    */
   babelRegister?: any;
-  /**
-   * - boolean: if true, then load and setup CSS module runtime for node.js
-   * - object: options to be passed to cssModuleHook
-   */
-  cssModuleHook?: boolean | object;
-  /**
-   * if no CSS module hook, then a default ignore hook is load to avoid errors
-   * when trying to load CSS modules.
-   *
-   * Set this to false to avoid loading the ignore hook.
-   */
-  ignoreStyles?: boolean;
   /**
    * Set to false to avoid loading node.js require hook to handle isomorphic assets.
    */
@@ -207,12 +179,11 @@ export function load(
   options: XarcSupportOptions = {}
 ): Promise<any> {
   if (options.babelRegister) {
-    const babelRegister = optionalRequire("@babel/register");
+    const babelRegister = optionalDevRequire("@babel/register");
     if (!babelRegister) {
-      console.log(
-        "To use @babel/register mode, you need to install the @babel/register and support modules."
+      console.error(
+        "To use @babel/register mode, you need to install @xarc/app-dev in devDependencies."
       );
-      console.log("Please see documentation for more details.");
       return process.exit(1);
     }
     const regOptions = Object.assign(
@@ -229,53 +200,6 @@ export function load(
     babelRegister(regOptions);
   }
 
-  /**
-   * Any app that needs CSS module support has to set this flag when calling
-   * support.  We can't default this to enabled because it would break apps
-   * that doesn't use CSS modules.
-   *
-   * css-modules-require-hook: handle css-modules on node.js server.
-   * similar to Babel's babel/register it compiles CSS modules in runtime.
-   *
-   * generateScopedName - Short alias for the postcss-modules-scope plugin's option.
-   * Helps you to specify the custom way to build generic names for the class selectors.
-   * You may also use a string pattern similar to the webpack's css-loader.
-   *
-   * https://github.com/css-modules/css-modules-require-hook#generatescopedname-function
-   * https://github.com/webpack/css-loader#local-scope
-   * https://github.com/css-modules/postcss-modules-scope
-   */
-  if (options.cssModuleHook === true || Object.keys(options.cssModuleHook || {}).length > 0) {
-    const opts = Object.assign(
-      {
-        generateScopedName: `${
-          process.env.NODE_ENV === "production" ? "" : "[name]__[local]___"
-        }[hash:base64:5]`,
-        extensions: [".scss", ".styl", ".less", ".css"],
-        preprocessCss: function(css, filename) {
-          if (filename.endsWith(".styl")) {
-            return require("stylus")(css)
-              .set("filename", filename)
-              .render();
-          } else if (filename.endsWith(".scss")) {
-            return require("node-sass").renderSync({
-              css,
-              file: filename
-            }).css;
-          } else {
-            return css;
-          }
-        },
-        processorOpts: { parser: require("postcss-less").parse }
-      },
-      options.cssModuleHook || {}
-    );
-
-    cssModuleHook(opts);
-  } else if (options.ignoreStyles !== false) {
-    optionalRequire("ignore-styles");
-  }
-
   let promise;
 
   if (options.isomorphicExtendRequire !== false) {

diff --git a/samples/hapi-app-css-modules/package.json b/samples/hapi-app-css-modules/package.json
@@ -39,6 +39,7 @@
     "prod": "echo 'Starting standalone server in PROD mode'; NODE_ENV=production node ./lib/server/"
   },
   "dependencies": {
+    "@babel/runtime": "^7.12.5",
     "@hapi/good": "^8.2.4",
     "@hapi/good-console": "^8.1.2",
     "@hapi/inert": "^5.1.2",
@@ -83,4 +84,4 @@
     }
   },
   "optionalDependencies": {}
-}
+}
diff --git a/samples/hapi-app-css-modules/src/client/components/home.jsx b/samples/hapi-app-css-modules/src/client/components/home.jsx
@@ -10,7 +10,20 @@ class Home extends React.Component {
   }
 
   render() {
-    return <div className={`${styles.wrapper}`}>Hello World!</div>;
+    return (
+      <div>
+        <h2>
+          If CSS modules is working, then the following text should be large, centered, with a thick
+          blue border.
+        </h2>
+        <div className={`${styles.wrapper}`}>Hello World!</div>
+        <h2>
+          If the styleName syntax is working, then the following text should have the same effect.
+        </h2>
+        <div styleName="styles.wrapper">CSS Module using styleName!</div>
+        <h2>Make sure to also verify SSR result by disable JavaScript.</h2>
+      </div>
+    );
   }
 }
 

diff --git a/samples/hapi-app-css-modules/src/client/components/styles.css b/samples/hapi-app-css-modules/src/client/components/styles.css
@@ -1,3 +1,5 @@
 .wrapper {
   font-size: 5em;
+  border: solid 5px blue;
+  text-align: center;
 }