Estoy usando PurgeCSS CLI para eliminar las clases CSS no utilizadas en mi proyecto React. Estoy usando este comando: purgecss --css src/**/*.css --content src/**/*.js
, lo que está haciendo es escanear todos los archivos js en /src, detectando clases no utilizadas en archivos css y devolviéndomelos en la consola. PurgeCSS contiene un indicador de salida para escribir archivos cambiados en un directorio específico, ¿hay alguna forma de reescribir archivos css en cada carpeta?
Puede usar la API programática para hacerlo.
Este código establece el contenido de purgecss en todos los archivos HTML y JS creados. Luego procesa cada archivo y sobrescribe el archivo.
./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
Deberá tener fast-glob
y postcss
instalados.