eleventy icon indicating copy to clipboard operation
eleventy copied to clipboard

addTransform with minifyCSS option enabled removes inline styles generated by eleventy-bundle-pluging

Open sarhov opened this issue 1 year ago • 0 comments

Operating system

macOS Sonoma Version 14.2.1

Eleventy

2.0.1

Describe the bug

	eleventyConfig.addTransform("htmlmin", async function(content) {
		// Prior to Eleventy 2.0: use this.outputPath instead
		if( this.page.outputPath && this.page.outputPath.endsWith(".html") ) {
		  let minified = htmlmin.minify(content, {
			useShortDoctype: true,
			removeComments: true,
			collapseWhitespace: true,
			minifyCSS: true
		  });
		  return minified;
		}
	
		return content;
	  });

if I add the option minifyCSS: true we will not have inline styles from eleventy-plugin-bundle plugin, I guess because this happens before css bundle is ready?

Because if I add manually the following, the html-minifier doesn't remove it from output

<style>
  body{
    background: #9c0;
  }
</style>

If I remove minifyCSS: true option it would minifiy html only.

Will be great to have an option to minify the output completely, including inline css, at release remove the new lines and whitespaces.

Reproduction steps

  1. Go to 'eleventy.config.js'
  2. Add transform code with minifyCss option true
  3. Run npm run build 4.Check the output html file, the inline css from bundle plugin is missing.

Expected behavior

To minify the inline css too using the transforms and minifyCSS option enabled

Reproduction URL

No response

Screenshots

image

As we can see from the screenshot the manual added code is minified

<style>
  body{
    background: #9c0;
  }
</style>

but the bundled css from eleventy-bundle-plugin is missing, just empty <style> tags

sarhov avatar Feb 10 '24 04:02 sarhov