How to overwrite css files modified in PurgeCSS CLI

user_9196570 0
Viewed 90

I'm using PurgeCSS CLI to delete unused css classes in my React project. I'm using this command: purgecss --css src/**/*.css --content src/**/*.js, what is doing is scanning all the js files in /src, detecting unused classes in css files and returning them to me in the console. PurgeCSS contains an --output flag to write files changed in an specific directory, is there any way to rewrite css files in each folder?

reactjs css javascript
2 Answers

You can use the programmatic API to do so.

This code sets the purgecss's content to all the built HTML and JS files. Then processes each file and overwrites the file.

./scripts/purgecss.mjs

import { readFile, writeFile, stat } from "fs/promises"
import glob from "fast-glob"
import purgecss from "@fullhuman/postcss-purgecss"
import postcss from "postcss"

const sourceFiles = await glob(["./dist/**/*.html", "./dist/**/*.js"], {
  dot: true,
  cwd: process.cwd(),
  onlyFiles: true,
  absolute: true,
})

const cssFiles = await glob(["./dist/**/*.css"], {
  dot: true,
  cwd: process.cwd(),
  onlyFiles: true,
  absolute: true,
})

const postcssProcessor = postcss([
  purgecss({
    content: sourceFiles,
  }),
])

await Promise.all([
  ...cssFiles.map(async (cssFile) => {
    const cssString = await readFile(cssFile, "utf8")
    const { css, map } = await postcssProcessor.process(cssString, { from: cssFile, to: cssFile, map: true })
    await writeFile(cssFile, css)
    if (map !== undefined) {
      await writeFile(cssFile.replace(/\.css$/, ".css.map"), map.toString())
    }
    console.log(`${cssFile}: ${(await stat(cssFile)).size / 1024} KB`)
  }),
])


npm run build && node ./scripts/purgecss.mjs

You will need to have fast-glob and postcss installed.

user_79102990

Here is another answer that uses the Purgecss programmatic API directly.

This code sets the purgecss's content to all the built HTML and JS files. Then processes each file and overwrites the file.

./scripts/purgecss.mjs

import { writeFile, stat } from "fs/promises"
import { PurgeCSS } from "purgecss"


const purgeCSSResult = await new PurgeCSS().purge({
  content: ["./dist/**/*.js", "./dist/**/*.html"],
  css: ["./dist/**/*.css"],
})

await Promise.all([
  ...purgeCSSResult.map(async ({ css, file }) => {
    const initialSize = (await stat(file)).size / 1024

    await writeFile(file, css)

    const postSize = (await stat(file)).size / 1024
    console.log(`${file}: ${initialSize} -> ${postSize} KB`)
  }),
])

npm run build && node ./scripts/purgecss.mjs
user_79102990
Related