fix: PR review

README.rst

@@ -185,12 +185,13 @@ or to test with an existing project you can do the following:
 Optimization
 -----------
 To increase optimization by reducing unused CSS, you can set ``USE_PURGECSS=true`` in ``.env`` or as ENV var in the corresponding MFE.
-However, that would lead to an increase in build time by 30%. It's thus recommended to use this option after finishing with changes of an MFE, not while developing.
-This shall increase performance by 20% as measured by `lighthouse`_. For more information about `optimizing MFEs see this issue`_.
+However, note that doing this will increase build time by 30%. It's thus not recommended to use this option during development.
+On the other hand, enabling PurgeCSS will increase browser performance for the end user by as much as 20% (as measured by `lighthouse`_).  Operators are encouraged to do so for production deployments.
 
-.. _lighthouse: https://developer.chrome.com/docs/lighthouse/overview/
-.. _optimizing MFEs see this issue: https://github.com/openedx/wg-frontend/issues/138
+For more information about optimizing MFEs, refer to the `issue #138`_ in the wg-frontend repository.
 
+.. _lighthouse: https://developer.chrome.com/docs/lighthouse/overview/
+.. _issue #138: https://github.com/openedx/wg-frontend/issues/138
 .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-build.svg?branch=master
    :target: https://travis-ci.com/edx/frontend-build
 .. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-build

config/webpack.prod.config.js

@@ -29,15 +29,12 @@ dotenv.config({
   path: path.resolve(process.cwd(), '.env'),
 });
 
-// Default plugins for PostCSS loader
-
-const postCSSLoaderPlugins = [
-  PostCssAutoprefixerPlugin(),
-  PostCssRTLCSS(),
-  CssNano(),
-  PostCssCustomMediaCSS(),
-];
-
+const extraPostCssPlugins = [];
+if (process.env.USE_PURGESS) { // If USE_PURGECSS is set we append it.
+  extraPostCssPlugins.push(purgecss({
+    content: ['./**/*.html', './**/*.js', './**/*.jsx', './**/*.ts', './**/*.tsx'],
+  }));
+}
 const extraPlugins = [];
 if (process.env.ENABLE_NEW_RELIC !== 'false') {
   // Enable NewRelic logging only if the account ID is properly defined
@@ -115,12 +112,13 @@ module.exports = merge(commonConfig, {
             loader: 'postcss-loader',
             options: {
               postcssOptions: {
-                plugins: process.env.USE_PURGECSS // If USE_PURGECSS is set we append it,
-                  ? [...postCSSLoaderPlugins,
-                    purgecss({
-                      content: ['./**/*.html', './**/*.js', './**/*.jsx', './**/*.ts', './**/*.tsx'],
-                    })]
-                  : postCSSLoaderPlugins,
+                plugins: [
+                  PostCssAutoprefixerPlugin(),
+                  PostCssRTLCSS(),
+                  CssNano(),
+                  PostCssCustomMediaCSS(),
+                  ...extraPostCssPlugins,
+                ],
               },
             },
           },
@@ -199,7 +197,6 @@ module.exports = merge(commonConfig, {
     new MiniCssExtractPlugin({
       filename: '[name].[chunkhash].css',
     }),
-
     // 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

@@ -35,6 +35,7 @@
     "@babel/preset-react": "7.18.6",
     "@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.5.1",
     "autoprefixer": "10.4.13",
@@ -55,7 +56,6 @@
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
     "file-loader": "6.2.0",
-    "glob": "^8.1.0",
     "html-webpack-plugin": "5.5.0",
     "identity-obj-proxy": "3.0.0",
     "image-minimizer-webpack-plugin": "3.3.0",
@@ -78,17 +78,15 @@
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-cli": "4.10.0",
     "webpack-dev-server": "4.7.3",
-    "webpack-merge": "5.8.0",
-    "@fullhuman/postcss-purgecss": "^5.0.0"
+    "webpack-merge": "5.8.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.18.6",
     "@types/jest": "^26.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.11",
     "ts-jest": "^26.5.0",
-    "typescript": "^4.9.4",
-    "purgecss-webpack-plugin": "^5.0.0"
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
     "react": "^16.9.0 || ^17.0.0"