From c4b4bf4d5060fdc3ed394704ed78af0d0ff0c84e Mon Sep 17 00:00:00 2001 From: shubham2811 Date: Fri, 18 Oct 2024 14:51:17 +0530 Subject: [PATCH] fix: babel plugin --- .../update-postcss_2024-10-15-07-56.json | 2 +- packages/xarc-app-dev/package.json | 1 - .../src/config/babel/babelrc-client.ts | 26 +-------- .../xarc-app-dev/src/config/babel/babelrc.ts | 53 +------------------ 4 files changed, 3 insertions(+), 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 index 8a64708aa..27783708a 100644 --- 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 index 3f8d91fb2..2fdd03d18 100644 --- 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 index 61ff0358a..d825d4b2f 100644 --- 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 index 944978bdf..a3438d025 100644 --- 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(