feat: reduce size CSS output file ~70%

 The added plugin, reduce the CSS file by removing unused CSS
 The plugin is kinda recommended by bootstrap[^1], reducing
 unused CSS is generally recommended as well enchance web
 perforamce[^2]

 [^1]: https://getbootstrap.com/docs/5.2/customize/optimize/#unused-css
 [^2]: https://web.dev/css-web-vitals/#critical-css

 Related issue: openedx/wg-frontend/issues/138

Author: ghassanmas

config/webpack.prod.config.js

@@ -14,6 +14,10 @@ const path = require('path');
 const PostCssAutoprefixerPlugin = require('autoprefixer');
 const PostCssRTLCSS = require('postcss-rtlcss');
 
+// Reduce CSS file size by ~70%
+const { PurgeCSSPlugin } = require('purgecss-webpack-plugin')
+const glob = require('glob')
+
 const HtmlWebpackNewRelicPlugin = require('../lib/plugins/html-webpack-new-relic-plugin');
 const commonConfig = require('./webpack.common.config');
 const presets = require('../lib/presets');
@@ -23,6 +27,10 @@ dotenv.config({
   path: path.resolve(process.cwd(), '.env'),
 });
 
+const PATHS = {
+  src: path.join(__dirname, 'src')
+}
+
 const extraPlugins = [];
 if (process.env.ENABLE_NEW_RELIC !== 'false') {
   // Enable NewRelic logging only if the account ID is properly defined
@@ -183,6 +191,13 @@ module.exports = merge(commonConfig, {
     new MiniCssExtractPlugin({
       filename: '[name].[chunkhash].css',
     }),
+    
+    // The recommend usage by official docs
+    // https://purgecss.com/getting-started.html
+    new PurgeCSSPlugin({
+      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
+    }),
+
     // Generates an HTML file in the output directory.
     new HtmlWebpackPlugin({
       inject: true, // Appends script tags linking to the webpack bundles at the end of the body

package-lock.json

@@ -81,6 +81,7 @@
     "@babel/preset-typescript": "^7.18.6",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.11",
+    "purgecss-webpack-plugin": "^5.0.0",
     "typescript": "^4.8.2"
   },
   "peerDependencies": {