[Bug]: Not working with component library

[truedrug]

Describe the bug

Hey folks, I am working on a react component library and trying to remove unused css from my final bundle.

Stack: React, tailwind, .less

Only having return <h1 className="text-red-2">Hello</h1>; from index.tsx. But not getting style rules for text-red-2

Let me know if any more info is required

To Reproduce

NA

Expected Behavior

Only text-red-2 class/rules should be present in the bundle. Currently nothing is present

Environment

macOS,
"@fullhuman/postcss-purgecss": "^5.0.0",
react ^18.x
webpack ^5.x

Add any other context about the problem here

webpack.common

const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    alias: {
      styles: path.resolve(__dirname, "..", "./styles"),
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.(ts|tsx)$/,
        use: ["babel-loader", "ts-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, "..", "dist"),
    filename: "index.js",
    library: "some-lib",
    libraryTarget: "umd",
    globalObject: "this",
    umdNamedDefine: true,
  },
  externals: {
    react: "react",
    antd: "antd",
  },
  stats: "errors-only",
};

webpack.prod

const path = require("path");
const common = require("./webpack.common.js");
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");
// const glob = require("glob-all");
const glob = require("glob");

const PATHS = {
  src: path.join(__dirname, "./src"),
};

const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const withReport = process.env.npm_config_report ? true : false;
const plugins = [
  new MiniCssExtractPlugin({
    filename: "some-lib.css",
  }),
  new PurgeCSSPlugin({
    paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
  }),
];

module.exports = merge(common, {
  mode: "production",
  devtool: "source-map",
  plugins: plugins.concat(withReport ? [new BundleAnalyzerPlugin()] : []),
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: "some-lib__[local]--[hash:base64:5]",
              },
            },
          },
          "postcss-loader",
        ],
      },
      {
        test: /\.less$/,
        use: [
          // MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: "some-lib-[local]--[hash:base64:5]",
              },
            },
          },
          "postcss-loader", //include postcss loader before less-loaders to make theme available in less
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                javascriptEnabled: true,
                math: "always",
              },
            },
          },
        ],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
          },
          output: {
            comments: false,
          },
        },
      }),
      new CssMinimizerPlugin({}),
    ],
  },
});

Code of Conduct

• I agree to follow this project's Code of Conduct