From 96474a6789c02efb5b2b8c31d49b085e48a39e2a Mon Sep 17 00:00:00 2001
From: Ghassan Maslamani <ghassan.maslamani@gmail.com>
Date: Wed, 18 Jan 2023 23:20:49 +0200
Subject: [PATCH] feat: use postcss plugin instead of webpack plugin

---
 config/webpack.prod.config.js | 17 +++++---------
 package-lock.json             | 42 +++++++++++++++++------------------
 package.json                  |  2 +-
 3 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/config/webpack.prod.config.js b/config/webpack.prod.config.js
index ba7131450..271a0fe57 100644
--- a/config/webpack.prod.config.js
+++ b/config/webpack.prod.config.js
@@ -17,8 +17,7 @@ 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 purgecss = require('@fullhuman/postcss-purgecss');
 
 const HtmlWebpackNewRelicPlugin = require('../lib/plugins/html-webpack-new-relic-plugin');
 const commonConfig = require('./webpack.common.config');
@@ -29,10 +28,6 @@ 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
@@ -114,6 +109,10 @@ module.exports = merge(commonConfig, {
                   PostCssAutoprefixerPlugin(),
                   PostCssRTLCSS(),
                   CssNano(),
+                  purgecss({
+                    content: ['./**/*.html', './**/*.js', './**/*.jsx'],
+                  }),
+
                 ],
               },
             },
@@ -194,12 +193,6 @@ module.exports = merge(commonConfig, {
       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
diff --git a/package-lock.json b/package-lock.json
index 66a8ed2d2..93f7509e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@babel/preset-react": "7.16.0",
         "@edx/eslint-config": "3.1.1",
         "@edx/new-relic-source-map-webpack-plugin": "1.0.2",
+        "@fullhuman/postcss-purgecss": "^5.0.0",
         "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
         "@svgr/webpack": "6.2.1",
         "autoprefixer": "10.4.13",
@@ -48,7 +49,6 @@
         "postcss": "8.4.19",
         "postcss-loader": "6.2.1",
         "postcss-rtlcss": "3.5.1",
-        "purgecss-webpack-plugin": "^5.0.0",
         "react-dev-utils": "12.0.1",
         "react-refresh": "0.14.0",
         "resolve-url-loader": "5.0.0",
@@ -1956,6 +1956,17 @@
         "tslib": "^2.0.1"
       }
     },
+    "node_modules/@fullhuman/postcss-purgecss": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-5.0.0.tgz",
+      "integrity": "sha512-onDS/b/2pMRzqSoj4qOs2tYFmOpaspjTAgvACIHMPiicu1ptajiBruTrjBzTKdxWdX0ldaBb7wj8nEaTLyFkJw==",
+      "dependencies": {
+        "purgecss": "^5.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -13585,18 +13596,6 @@
         "purgecss": "bin/purgecss.js"
       }
     },
-    "node_modules/purgecss-webpack-plugin": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/purgecss-webpack-plugin/-/purgecss-webpack-plugin-5.0.0.tgz",
-      "integrity": "sha512-u8J0SxXdMekVOsbyV6hK1x6LlzJbE/mrC+UbNX0mLz5Jo/Jle8o4S3IFIRCgdzGdxtOBPCKW+UNgaULfKVmx2w==",
-      "dependencies": {
-        "purgecss": "^5.0.0",
-        "webpack": ">=5.0.0"
-      },
-      "peerDependencies": {
-        "webpack": ">=5.0.0"
-      }
-    },
     "node_modules/purgecss/node_modules/commander": {
       "version": "9.4.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-9.4.1.tgz",
@@ -18722,6 +18721,14 @@
         }
       }
     },
+    "@fullhuman/postcss-purgecss": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-5.0.0.tgz",
+      "integrity": "sha512-onDS/b/2pMRzqSoj4qOs2tYFmOpaspjTAgvACIHMPiicu1ptajiBruTrjBzTKdxWdX0ldaBb7wj8nEaTLyFkJw==",
+      "requires": {
+        "purgecss": "^5.0.0"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -27233,15 +27240,6 @@
         }
       }
     },
-    "purgecss-webpack-plugin": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/purgecss-webpack-plugin/-/purgecss-webpack-plugin-5.0.0.tgz",
-      "integrity": "sha512-u8J0SxXdMekVOsbyV6hK1x6LlzJbE/mrC+UbNX0mLz5Jo/Jle8o4S3IFIRCgdzGdxtOBPCKW+UNgaULfKVmx2w==",
-      "requires": {
-        "purgecss": "^5.0.0",
-        "webpack": ">=5.0.0"
-      }
-    },
     "qs": {
       "version": "6.10.5",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.5.tgz",
diff --git a/package.json b/package.json
index 3582ca7b6..31b0a5281 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "webpack-cli": "4.10.0",
     "webpack-dev-server": "4.7.3",
     "webpack-merge": "5.8.0",
-    "purgecss-webpack-plugin": "^5.0.0"
+    "@fullhuman/postcss-purgecss": "^5.0.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.18.6",