How to split one main.css into 1.css and 2.css

[AlexKolykhalov]

How to split one main.css (contains style tokens of login.html and 400.html) into login.css (style tokens only login.html) and 400.css (style tokens only 400.html).
For example we have
main.css

.red {color: red}
.blue {color: blue}
.green {color: green}

login.html

<div class="red">Hello</div>

400.html

<div class="blue">Hello</div>
<div class="green">Hello</div>

I want to get login.css with .red token and 400.css with .blue and .green

At the moment i get login.css and 400.css which contains .red, .blue and .green in both files

My webpack.config.js

export default {
  target: "node",
  entry: {
    main:   "./index.js",
    login:  "./public/js/login.js",
    400:    "./public/js/400.js",
  },
  output: {
    path: resolve("output"),
    filename: [name].js,
    clean: true
  },
  externals: [ NodeExternals() ],
  externalsPresets: { node: true },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/html/400.html",
      filename: "public/400/400.html",
      chunks: ["400"],
    }),
    new HtmlWebpackPlugin({
      template: "./public/html/login.html",
      filename: "public/login/login.html",
      chunks: ["login"],
    }),
    new MiniCssExtractPlugin({
      filename: "public/[name].css",
    }),
    new PurgeCSSPlugin({
      paths: [
	resolve("public/html/400.html"),
	resolve("public/html/login.html"),
      ],
      fontFace: true,
      keyframes: true,
      variables: true,
      blocklist: [],
      safelist: {},
    }),
  ],
  module: {
    rules: [
      {
	test: /\.css$/,
	use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]
  },
};

[deepuvkrish]

To separate CSS styles properly, you need to configure the PurgeCSSPlugin for each HTML file and chunk separately. You can achieve this by setting up multiple PurgeCSSPlugin instances, each targeting only the relevant HTML file for its associated chunk.

import { resolve } from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import PurgeCSSPlugin from "purgecss-webpack-plugin";
import NodeExternals from "webpack-node-externals";
import glob from "glob";

export default {
  target: "node",
  entry: {
    main: "./index.js",
    login: "./public/js/login.js",
    400: "./public/js/400.js",
  },
  output: {
    path: resolve("output"),
    filename: "[name].js",
    clean: true,
  },
  externals: [NodeExternals()],
  externalsPresets: { node: true },
  plugins: [
    // HTML for 400 page
    new HtmlWebpackPlugin({
      template: "./public/html/400.html",
      filename: "public/400/400.html",
      chunks: ["400"],
    }),
    // HTML for login page
    new HtmlWebpackPlugin({
      template: "./public/html/login.html",
      filename: "public/login/login.html",
      chunks: ["login"],
    }),
    // Extract CSS
    new MiniCssExtractPlugin({
      filename: "public/[name].css",
    }),
    // PurgeCSS for 400 chunk
    new PurgeCSSPlugin({
      paths: glob.sync(resolve("public/html/400.html"), { nodir: true }),
      fontFace: true,
      keyframes: true,
      variables: true,
      blocklist: [],
      safelist: {}, // Add classes to retain even if not found in the HTML
    }),
    // PurgeCSS for login chunk
    new PurgeCSSPlugin({
      paths: glob.sync(resolve("public/html/login.html"), { nodir: true }),
      fontFace: true,
      keyframes: true,
      variables: true,
      blocklist: [],
      safelist: {},
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

[AlexKolykhalov]

Thanks for the reply,

For now I have chosen this implementation

for each CSS file that needs to be checked, for example

// PurgeCSS for login chunk
new PurgeCSSPlugin({
      only: ["login.css"] <-------- ADD THIS 
      paths: glob.sync(resolve("public/html/login.html"), { nodir: true }),
      fontFace: true,
      keyframes: true,
      variables: true,
      blocklist: [],
      safelist: {},
}),

With your implementation I get css file with tokens that are only in 400.html