Transform Order With WebC

[korverdev]

I'm trying to minify inline HTML and CSS for a website using WebC layouts closely following the examples provide in Eleventy's documentation. I've added a transform like so to accomplish this:

async function minifyHtml(content) {
    if (this.page.outputPath.endsWith(".html")) {
        return htmlMinifier.minify(content, {...});
    }
}

eleventyConfig.addTransform("minify-html", minifyHtml);

But the transform I've added appears to be running before WebC's transforms. It's getting inline CSS that look like this and is removing the comment causing all CSS to get dropped:

<style>/*__EleventyBundle:get:css:default:EleventyBundle__*/</style>

<!-- Gets minified to this. -->
<style></style>

Am I going about this the wrong way or is there some way to force an order to when transforms run?

[dwighthouse]

Ran into this today. I think you're doing it right. It's just that it appears Webc inserts its bundle data after html transforms, which is probably wrong.

[dwighthouse]

@korverdev Did some more reading. Found this issue. It suggests updating to 3.0 (Canary) and forcing the bundler plugin to happen first (option 1), or to do the CSS minification on the bundled content itself (option 2).

I HAVE to use option 1 because I am minifying not just the css, but also the classnames (which requires both the css and html be complete and on the page). Option 1 does work, however. I consider it a hack. Transforms (for html) should be the last thing that runs, or else there should be a way to run things "at the very end".