critters icon indicating copy to clipboard operation
critters copied to clipboard

`pruneSource: true` not pruning files

Open ausmdw opened this issue 1 year ago • 0 comments

Hey guys :)

I am having trouble, I think I could be missing something very simple. I'm not sure if this is a bug, but using the pruneSource config item doesn't seem to do anything.

I was tinkering around with a critters astro plugin, astro-critters to inline critical CSS output from astro.

After a while I decided to cut out the plugin middleman and just work directly with the compiled files and a simple .mjs script so I could see what interactions critters took with the index.html and the CSS file.

Here is the following script setup:

import Critters from "critters";
import fs from "fs";

const critters = new Critters({
  path: "./dist",
  logLevel: "debug",
  pruneSource: true,
});

const file = fs.readFileSync("./dist/index.html", "utf-8");

const inlined = await critters.process(file);
fs.writeFileSync(inlined);

The inlining is working just fine. Approximately 50% of the CSS asset is inlined, however, the CSS asset remains unchanged at ~10kB.

# Shell Output
Inlined 5.72 kB (56% of original 10.1 kB) of assets/dd377348.be9e9362.css.

At least from the documentation, it is not clear to me if the CSS asset is automatically overwritten with pruneSource: true, or if extra work is necessary on my end to achieve this.

astro-plugin aside - am I missing some sort of configuration when working with critters bare-metal like this to get the CSS asset to be modified? :) Is there a method exposed from the critters class I could use?

Thanks for any insight or help!

ausmdw avatar Jul 11 '22 02:07 ausmdw