chore: replace deprecated webpack and babel plugins with modern alternatives (#2447)

* chore: add CONTRIBUTION_ROADMAP.md and update .gitignore

* docs: update CONTRIBUTION_ROADMAP marking A2 as completed

* docs: mark tasks B5 and A3 as completed in CONTRIBUTION_ROADMAP

* chore: replace deprecated webpack and babel plugins with modern alternatives

Author: renanfochetto

CONTRIBUTION_ROADMAP.md

@@ -152,7 +152,7 @@ React (complete View)
 
 ---
 
-#### A3 — Add test coverage with thresholds
+#### A3 — Add test coverage with thresholds - [COMPLETED ✔]
 
 **Summary:** Configure minimum test coverage and mandatory thresholds, establishing a quality baseline.
 
@@ -301,7 +301,7 @@ React (complete View)
 
 ---
 
-#### B5 — Remove unnecessary polyfills and investigate node-polyfill-webpack-plugin
+#### B5 — Remove unnecessary polyfills and investigate node-polyfill-webpack-plugin - [COMPLETED ✔]
 
 **Summary:** Remove unnecessary polyfills that increase bundle size without real benefit.
 

client/.babelrc

@@ -11,11 +11,11 @@
     "@babel/preset-react"
   ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-class-properties",
     "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-transform-modules-commonjs",
-    "@babel/plugin-proposal-private-methods",
-    "@babel/plugin-proposal-private-property-in-object"
+    "@babel/plugin-transform-private-methods",
+    "@babel/plugin-transform-private-property-in-object"
   ],
   "env": {
     "test": {
@@ -29,4 +29,4 @@
       ]
     }
   }
-}
+}

client/package.json

@@ -55,11 +55,11 @@
   "devDependencies": {
     "@babel/core": "^7.5.5",
     "@babel/eslint-parser": "^7.17.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-private-methods": "^7.16.11",
-    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-class-properties": "^7.28.6",
     "@babel/plugin-transform-modules-commonjs": "^7.5.0",
+    "@babel/plugin-transform-private-methods": "^7.28.6",
+    "@babel/plugin-transform-private-property-in-object": "^7.28.6",
     "@babel/plugin-transform-runtime": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-flow": "^7.14.5",
@@ -80,6 +80,7 @@
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "compression-webpack-plugin": "^10.0.0",
     "css-loader": "^3.5.3",
+    "css-minimizer-webpack-plugin": "^8.0.0",
     "eslint": "^7.6.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-import-resolver-webpack": "^0.12.1",
@@ -90,16 +91,14 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "extract-css-chunks-webpack-plugin": "^4.9.0",
-    "file-loader": "^6.0.0",
     "flow-bin": "^0.309.0",
     "flow-typed": "^3.8.0",
     "glob": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.x",
     "jest-canvas-mock": "^2.4.0",
     "jest-environment-jsdom": "^29.x",
-    "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "mini-css-extract-plugin": "^2.10.2",
     "prettier-eslint": "^11.0.0",
     "react-test-renderer": "^17.0.2",
     "sass": "^1.50.0",
@@ -108,7 +107,6 @@
     "stylelint-config-standard": "^20.0.0",
     "surge": "^0.23.1",
     "terser-webpack-plugin": "^5.3.6",
-    "url-loader": "^4.0.0",
     "webpack": "^5.104.1",
     "webpack-cli": "^5.1.4",
     "webpack-manifest-plugin": "^5.0.0",
@@ -138,7 +136,7 @@
       "lcov"
     ],
     "coverageDirectory": "coverage",
-    "coverageThreshold":  {
+    "coverageThreshold": {
       "global": {
         "statements": 80,
         "branches": 70,

client/webpack.config.js

@@ -5,9 +5,9 @@
 const glob = require('glob');
 const { resolve } = require('path');
 const CompressionPlugin = require('compression-webpack-plugin');
-const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
@@ -83,13 +83,7 @@ const config = {
       },
     },
     minimizer: devOrTestMode ? [] : [
-      new OptimizeCssAssetsPlugin({
-        cssProcessorOptions: {
-          discardComments: {
-            removeAll: true,
-          },
-        },
-      }),
+      new CssMinimizerPlugin(),
       new CompressionPlugin({
         filename: '[path][base].gz[query]',
         algorithm: 'gzip',
@@ -102,10 +96,9 @@ const config = {
   },
 
   plugins: [
-    new ExtractCssChunks({
+    new MiniCssExtractPlugin({
       filename: `${outputFilename}.css`,
       chunkFilename: `${outputFilename}.chunk.css`,
-      hot: !!devOrTestMode,
     }),
     new WebpackManifestPlugin({ publicPath: output.publicPath, writeToFileEmit: true }),
     // only load moment.js data for locales we support (see config/locale.rb)
@@ -124,7 +117,7 @@ const config = {
         test: /\.css$/,
         include: /node_modules/,
         use: [
-          ExtractCssChunks.loader,
+          MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
             options: {
@@ -140,15 +133,15 @@ const config = {
         test: /\.css$/,
         exclude: /node_modules/,
         use: [
-          ExtractCssChunks.loader,
+          MiniCssExtractPlugin.loader,
           cssLoaderWithModules,
         ],
       },
       {
         test: /\.(sass|scss)$/,
         include: /node_modules/,
         use: [
-          ExtractCssChunks.loader,
+          MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
             options: {
@@ -165,7 +158,7 @@ const config = {
         test: /\.(sass|scss)$/,
         exclude: /node_modules/,
         use: [
-          ExtractCssChunks.loader,
+          MiniCssExtractPlugin.loader,
           cssLoaderWithModules,
           'sass-loader',
         ],
@@ -176,27 +169,23 @@ const config = {
       },
       {
         test: /\.(png|jp(e*)g|svg|webp)$/,
-        use: [
-          {
-            loader: 'url-loader',
-            options: {
-              limit: 8000,
-              name: 'images/[contenthash]-[name].[ext]',
-            },
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 8000,
           },
-        ],
+        },
+        generator: {
+          filename: 'images/[contenthash]-[name][ext]',
+        }
       },
       {
         test: /\.(eot|svg|ttf|woff|woff2)$/,
         include: /node_modules/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: 'fonts/[contenthash]-[name].[ext]',
-            },
-          },
-        ],
+        type: 'asset/resource',
+        generator: {
+          filename: 'fonts/[contenthash]-[name][ext]',
+        }
       },
     ],
   },