feat: use postcss plugin instead of webpack plugin

config/webpack.prod.config.js

@@ -18,8 +18,7 @@ const PostCssRTLCSS = require('postcss-rtlcss');
 const PostCssCustomMediaCSS = require('postcss-custom-media');
 
 // 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');
@@ -30,10 +29,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
@@ -116,6 +111,10 @@ module.exports = merge(commonConfig, {
                   PostCssRTLCSS(),
                   CssNano(),
                   PostCssCustomMediaCSS(),
+                  purgecss({
+                    content: ['./**/*.html', './**/*.js', './**/*.jsx'],
+                  }),
+
                 ],
               },
             },
@@ -196,12 +195,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

package.json

@@ -79,7 +79,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",