[SOLVED] Purge-css is removing all css stylings instead of just the unused ones

Purge-css is removing all css stylings instead of just the unused ones

I'm trying to use purgecss to remove any unused css, particularly the unused css from Bootstrap. With Purgecss setup, all my css is being removed, and only inline styling remains. This means purgecss is removing the styling for all css classes, not just the ones that aren't being used. I would like to get my configuration correct, so that only the css styles which are not being used are removed.

Since my React App also uses Post-css, I'm trying to to use the postcss-purgecss plugin, and have followed the instructions at that link for setup.

This is happening in development and production mode.

You can test out the problem on this branch of this github repo

You can view the result of whats happening at this url https://purge-css-failing.netlify.app/

postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  plugins: [
    purgecss({
        content: ['./src/**/*.html']
    }),
  ]
};

webpack.config.js

const path = require('path');
var webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { GenerateSW } = require("workbox-webpack-plugin");
const WebpackPwaManifest = require("webpack-pwa-manifest");

'use strict';
module.exports = {
  target: "web",
  mode: "development",
  entry: "./src/entryPoints/index.jsx",
  devtool: "source-map",
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
    filename: "[name]/[name].js",
  },
  module: {
    rules: {
      test: /\.(scss|css)$/,
      use: [
        MiniCssExtractPlugin.loader, // creates style nodes from JS strings
        {
          loader: "css-loader", // translates CSS into CommonJS
          options: {
            importLoaders: 1,
          },
        },
        "postcss-loader", // post process the compiled CSS
        "sass-loader", // compiles Sass to CSS, using Node Sass by default
      ],
    }
  },
  devServer: {...},
  resolve: {...},
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development"),
      },
    }),
    new HtmlWebpackPlugin({
      template: "./html/index.html",
      filename: "./index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[name].css",
    }),
    new WebpackPwaManifest({
      icons: [
        {
          src: path.resolve(
            "src/assets/images/Favicon/android-chrome-192x192Circle.png"
          ),
          sizes: "192x192",
          type: "image/png",
          purpose: "any maskable",
        },
        {
          src: path.resolve("src/assets/images/logo/icon.png"),
          sizes: "512x512",
          type: "image/png",
        },
      ],
      name: "Example",
      short_name: "Example",
      orientation: "portrait",
      start_url: "/",
      theme_color: "#000000",
      background_color: "#ffffff",
      description: "Description",
      display: "standalone", //property set to fullscreen, standalone, or minimal-ui
      prefer_related_applications: false, //Says if you would prefer that the user download a mobile app from the app store or something
    }),
    new GenerateSW({
      // option: 'value',
    }),
  ],
};

Solution

Since your app is a ReactJS App, you want to purge css classes not used in the Javascript bundle compiled for the dev or production environment.

You can update your postcss.config.js file to match on .js files.

module.exports = {
  plugins: [
    purgecss({
      content: ["./src/**/*.js"],
      // Treat every word in the bundle as a CSS selector
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []

    }),
  ]
};