I want purgecss to wipe out all of my unused css for both environment. During dev as well as prod. I am not using any thing like tailwind css. I have sass and with mixins and include, I generated some class. Most of these will never be used. But still just so, whenever I write a className to my element, I dont want to go back and write the css for that. So i wrote something that will generate a lot of unused css.

But then I want to purge those css when I do npm run dev or npm run build.

I have tried different things. Can't list them out. Spent about two days. What I currently have is:

// utils.scss

// Mixin for generating padding utilities for a range of px and rem values
@mixin generate-padding-classes($min, $max) {
  @for $i from $min to $max {
    .px-#{$i}px {
      padding-inline: #{$i}px;
    }
    .py-#{$i}px {
      padding-block: #{$i}px;
    }
    .p-#{$i}px {
      padding: #{$i}px;
    }

    .px-#{$i}rem {
      padding-inline: #{$i}rem;
    }
    .py-#{$i}rem {
      padding-block: #{$i}rem;
    }
    .p-#{$i}rem {
      padding: #{$i}rem;
    }
  }
}

// Example usage: Generate padding utilities from 1 to 100
@include generate-padding-classes(1, 100);

Now this will generate css classes that will never be used. I just did this so I dont have to come back and write css. And I intend to write some more template or whatever we call them. So there will be large set of unused css.

Also in global.css I added a css to see if its not working with scss file.

In globals.css I have

.unusedCss {
  background: silver;
}

But when I did npm run build all these css even in globals.css were still there.

This is postcss.config.ts file

import { Plugin } from "postcss";
import purgecss from "@fullhuman/postcss-purgecss";

const config: { plugins: Plugin[] } = {
  plugins: [
    require("postcss-preset-env")({
      stage: 0,
    }),
    purgecss({
      content: [
        "./app/**/*.{js,jsx,ts,tsx}", // Paths to your Next.js app content
        "./public/**/*.html", // If you have static HTML files
      ],
      defaultExtractor: (content) => content.match(/[\w-/:]+(?=\s*{)/g) || [], // Extracting class names and other CSS selectors
    }),
  ],
};

export default config;