Remove unused CSS in Angular using PurgeCSS

Question

I am having issues when removing unused CSS using PurgeCSS (webpack plugin) on my Angular 16 process build process. I can get my final CSS minimized but it seems it is not done fully because when I inspect the generated I get things like variables and other classes being injected so that the end file is bigger than it should be.

My current configuration is webpack.config.js:

const glob = require('glob');
const { PurgeCSSPlugin } = require('purgecss-webpack-plugin');

    module.exports = {
      plugins: [
        new PurgeCSSPlugin({ 
          paths: glob.sync('./src/**/*', { nodir: true }),
          safelist: {
            standard: [/^leaflet-/]
          }
        })
      ]
    };

I have the custom-webpack in my angular.json:

"build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/robots.txt",
              "src/ads.txt",
              {
                "glob": "**/*",
                "input": "node_modules/leaflet/dist/images/",
                "output": "./assets"
              }
            ],
            "styles": [
              "src/styles.scss",
              "src/styles-fonts.scss"
            ],
            "scripts": [],
            "customWebpackConfig": {
              "path": "webpack.config.js"
            }
          },

In my styles.scss I do have the following imports:

/* You can add global styles to this file, and also import other style files */
@import "bootstrap/dist/css/bootstrap.min.css";
@import "~@ng-select/ng-select/themes/default.theme.css";

And the final file size is 30Kb which is OK. That however I think is bigger than it should be because I don't have much CSS in my code. Anyway, looking at different posts or even the official documentation of the package (https://purgecss.com/plugins/webpack.html#options), if I do:

const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");
const glob = require("glob");
const PATHS = {
  src: path.join(__dirname, "src"),
};

// In the webpack configuration
new PurgeCSSPlugin({
  paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
});

Then I get a styles.css of 6KB which I say it's about right (between 6-15KB I would say it would be correct) and it's got some bootstrap css in it, however when I deploy it then the styles are messed up, so thought that path is wrong.

Then I tried setting up a postbuild process using purgecss like this:

const { PurgeCSS } = require('purgecss');
const fs = require('fs');

(async () => {
    console.log('Removing unused CSS from files...');

    const purgecss = await new PurgeCSS().purge({
      content: ['./dist/browser/*.html', './dist/browser/*.js'],
      css: ["./dist/browser/*.css"],
      safelist: {
        standard: [/^leaflet-/]
      },
      variables: true
    });

    purgecss.map(({css, file}) => {
        console.log(file);
        fs.writeFileSync(file, css);
    });
})();

and I got around 30Kbs as well. I noticed that flags like keyframes do remove them from the final CSS but the variables don't seem to have any effect and all of them are present in the file. Why is that? Is there another way to set it up to get the truly only-used CSS outputted?

I'm using Angular v16.2.2 and PurgeCSS v5.0.0