#172 execute purgecss-plugin

cloudogu · Dec 9, 2021 · b34bd1a · b34bd1a
1 parent dbb8301
commit b34bd1a
Show file tree

Hide file tree

Showing 4 changed files with 246 additions and 80 deletions.
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "@babel/preset-env": "^7.13.5",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
+    "@fullhuman/postcss-purgecss": "^4.1.3",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
     "@types/react-router": "~4.4.5",
@@ -67,7 +68,7 @@
     "jest-cli": "^26.6.3",
     "jest-junit-reporter": "^1.1.0",
     "postcss-flexbugs-fixes": "3.2.0",
-    "postcss-loader": "2.0.8",
+    "postcss-loader": "4.0.3",
     "prettier": "^2.2.1",
     "raf": "3.4.0",
     "style-loader": "0.19.0",

diff --git a/pom.xml b/pom.xml
@@ -243,7 +243,7 @@
                 <version>2.5.0</version>
                 <configuration>
                     <node>
-                        <version>10.23.0</version>
+                        <version>12.13.0</version>
                     </node>
                     <pkgManager>
                         <type>YARN</type>

diff --git a/src/main/config/webpack.config.prod.js b/src/main/config/webpack.config.prod.js
@@ -14,6 +14,8 @@ const paths = require('./paths');
 const getClientEnvironment = require('./env');
 const TerserPlugin = require('terser-webpack-plugin-legacy');
 
+const purgecsss = require('@fullhuman/postcss-purgecss');
+
 // Webpack uses `publicPath` to determine where the app is being served from.
 // It requires a trailing slash, or the file assets will get an incorrect path.
 const publicPath = paths.servedPath;
@@ -191,19 +193,24 @@ module.exports = {
                       options: {
                         // Necessary for external CSS imports to work
                         // https://github.com/facebookincubator/create-react-app/issues/2677
-                        ident: 'postcss',
-                        plugins: () => [
-                          require('postcss-flexbugs-fixes'),
-                          autoprefixer({
-                            browsers: [
-                              '>1%',
-                              'last 4 versions',
-                              'Firefox ESR',
-                              'not ie < 9', // React doesn't support IE8 anyway
-                            ],
-                            flexbox: 'no-2009',
-                          }),
-                        ],
+                        postcssOptions: {
+                          ident: 'postcss',
+                          plugins: () => [
+                            require('postcss-flexbugs-fixes'),
+                            autoprefixer({
+                              browsers: [
+                                '>1%',
+                                'last 4 versions',
+                                'Firefox ESR',
+                                'not ie < 9', // React doesn't support IE8 anyway
+                              ],
+                              flexbox: 'no-2009',
+                            }),
+                            purgecsss({
+                              content: ['./src/**/*.html', './src/**/*.tsx', './src/**/*.ts', '**/*.css'],
+                            }),
+                          ],
+                        },
                       },
                     },
                   ],