fix: babel plugin

electrode-io · Oct 18, 2024 · c4b4bf4 · c4b4bf4
1 parent 8b6ed0e
commit c4b4bf4
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 79 deletions.
diff --git a/common/changes/@xarc/app-dev/update-postcss_2024-10-15-07-56.json b/common/changes/@xarc/app-dev/update-postcss_2024-10-15-07-56.json
@@ -2,7 +2,7 @@
   "changes": [
     {
       "packageName": "@xarc/app-dev",
-      "comment": "migrate babel-plugin-react-css-modules which is not maintained to @dr.pogodin/babel-plugin-react-css-modules",
+      "comment": "remove babel-plugin-react-css-modules which is not maintained",
       "type": "none"
     }
   ],

diff --git a/packages/xarc-app-dev/package.json b/packages/xarc-app-dev/package.json
@@ -62,7 +62,6 @@
     "ansi-to-html": "^0.7.2",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-minify-dead-code-elimination": "^0.5.2",
-    "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.2",
     "babel-plugin-transform-node-env-inline": "^0.4.3",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "boxen": "^5.0.0",

diff --git a/packages/xarc-app-dev/src/config/babel/babelrc-client.ts b/packages/xarc-app-dev/src/config/babel/babelrc-client.ts
@@ -79,7 +79,6 @@ const basePlugins = [
 
 const { BABEL_ENV, NODE_ENV, ENABLE_KARMA_COV } = process.env;
 
-const enableCssModule = Boolean(_.get(xOptions, "webpack.cssModuleSupport"));
 const enableKarmaCov = ENABLE_KARMA_COV === "true";
 const isProduction = (BABEL_ENV || NODE_ENV) === "production";
 // const isTest = (BABEL_ENV || NODE_ENV) === "test";
@@ -96,30 +95,7 @@ const plugins = basePlugins.concat(
       },
     ],
   ],
-  // css module support
-  enableCssModule && [
-    [
-      "@dr.pogodin/babel-plugin-react-css-modules",
-      {
-        context: "./src",
-        generateScopedName: `${
-          isProduction ? "" : "[name]__[local]___"
-        }[hash:base64:5]`,
-        filetypes: {
-          ".scss": {
-            syntax: "postcss-scss",
-            plugins: ["postcss-nested"],
-          },
-          ".styl": {
-            syntax: "sugarss",
-          },
-          ".less": {
-            syntax: "postcss-less",
-          },
-        },
-      },
-    ],
-  ],
+
   enableKarmaCov && [
     getPluginFrom(
       ["@xarc/opt-karma", "electrode-archetype-opt-karma"],

diff --git a/packages/xarc-app-dev/src/config/babel/babelrc.ts b/packages/xarc-app-dev/src/config/babel/babelrc.ts
@@ -8,7 +8,7 @@
 import ck from "chalker";
 import { makeOptionalRequire } from "optional-require";
 import _ from "lodash";
-import { getPluginFrom, loadXarcOptions, detectCSSModule } from "./common";
+import { getPluginFrom, loadXarcOptions } from "./common";
 
 const optionalRequire = makeOptionalRequire(require);
 
@@ -36,59 +36,11 @@ const addFlowPlugin = Boolean(enableFlow && optFlow);
 const { BABEL_ENV, NODE_ENV, XARC_BABEL_TARGET, ENABLE_KARMA_COV } =
   process.env;
 
-const enableCssModule = detectCSSModule(xOptions);
 const enableKarmaCov = ENABLE_KARMA_COV === "true";
 const isProduction = (BABEL_ENV || NODE_ENV) === "production";
 // const isTest = (BABEL_ENV || NODE_ENV) === "test";
 const isNodeTarget = XARC_BABEL_TARGET === "node";
 
-/**
- * https://www.npmjs.com/package/babel-plugin-react-css-modules
- *
- * This plugin enhances the CSS module support from css-loader.  It adds a new
- * prop styleName in addition to the className prop.  This also automatically
- * make it work for SSR.
- *
- * Currently, looks like the author has been inactive on maintaining this plugin
- * and there's some compatibility issue with css-loader 4.x.
- * https://github.com/gajus/babel-plugin-react-css-modules/issues/291
- *
- * Resolution: migrate to @dr.pogodin/babel-plugin-react-css-modules
- *
- * @returns null or settings for @dr.pogodin/babel-plugin-react-css-modules
- */
-const getReactCssModulePlugin = (): any => {
-  if (!enableCssModule) {
-    return null;
-  }
-
-  const enableShortenCSSNames = xOptions.webpack.enableShortenCSSNames;
-  const enableShortHash = isProduction && enableShortenCSSNames;
-  return [
-    [
-      "@dr.pogodin/babel-plugin-react-css-modules",
-      {
-        context: "./src",
-        generateScopedName: `${
-          enableShortHash ? "" : "[name]__[local]___"
-        }[hash:base64:5]`,
-        filetypes: {
-          ".scss": {
-            syntax: "postcss-scss",
-            plugins: ["postcss-nested"],
-          },
-          ".styl": {
-            syntax: "sugarss",
-          },
-          ".less": {
-            syntax: "postcss-less",
-          },
-        },
-      },
-    ],
-  ];
-};
-
 const basePlugins = [
   // plugin to transpile async/await to Promise
   // not for node.js because it has native async/await
@@ -157,9 +109,6 @@ const plugins = basePlugins.concat(
         },
       ],
     ],
-  // css module support
-  // Note: this is needed for server side (node.js) also.
-  getReactCssModulePlugin(),
   !isNodeTarget &&
     enableKarmaCov && [
       getPluginFrom(