Compressing html results in hydration errors

[preetamslot]

Hi,
I am using Vue, and compressing the HTML gives me hydration errors on every Vue component.
Is there a way to fix this?

[NikolaRHristov]

I'll take a look. Check the options for html-minifier-terser https://github.com/Playform/astro-compress/blob/main/src/options/html.ts and modify them a bit.

These are the defaults used by astro-compress:

const defaultOptions: Options = {
	html: {
		caseSensitive: true,
		collapseBooleanAttributes: true,
		collapseInlineTagWhitespace: false,
		collapseWhitespace: true,
		conservativeCollapse: false,
		continueOnParseError: false,
		customAttrAssign: [],
		customAttrCollapse: "",
		customAttrSurround: [],
		customEventAttributes: [/^on[a-z]{3,}$/],
		decodeEntities: false,
		html5: true,
		ignoreCustomComments: [],
		ignoreCustomFragments: [],
		includeAutoGeneratedTags: true,
		keepClosingSlash: true,
		maxLineLength: null,
		minifyCSS: true,
		minifyJS: true,
		minifyURLs: false,
		preserveLineBreaks: false,
		preventAttributesEscaping: false,
		processConditionalComments: true,
		processScripts: ["module"],
		quoteCharacter: "",
		removeAttributeQuotes: true,
		removeComments: true,
		removeEmptyAttributes: true,
		removeEmptyElements: false,
		removeOptionalTags: false,
		removeRedundantAttributes: true,
		removeScriptTypeAttributes: true,
		removeStyleLinkTypeAttributes: true,
		removeTagWhitespace: true,
		sortAttributes: true,
		sortClassName: true,
		trimCustomFragments: false,
		useShortDoctype: false,
	},
};

It could be the removeEmptyAttributes option. Try setting it to false and re-running the build script.

import { defineConfig } from 'astro/config'

export default defineConfig({
	integrations: [
		compress({
			html: {
				removeEmptyAttributes: false,
			},
		}),
	],
};

[preetamslot]

Thanks!

html: {
	removeEmptyAttributes: false,
	}

Worked for me!

[preetamslot]

Just see that if i use

compress({
			html: {
				removeEmptyAttributes: false,
			},
		}),

all other HTML compressions are not processed, so I had no hydration errors.

The critter in my case was removeComments.
if true it gave hydration errors even if my code did not have any <!--comments -->

What worked for me was:

html: {
        caseSensitive: true,
        collapseBooleanAttributes: true,
        collapseInlineTagWhitespace: false,
        collapseWhitespace: true,
        conservativeCollapse: false,
        continueOnParseError: false,
        customAttrAssign: [],
        customAttrCollapse: "",
        customAttrSurround: [],
        customEventAttributes: [/^on[a-z]{3,}$/],
        decodeEntities: false,
        html5: true,
        ignoreCustomComments: [],
        ignoreCustomFragments: [],
        includeAutoGeneratedTags: true,
        keepClosingSlash: true,
        maxLineLength: null,
        minifyCSS: true,
        minifyJS: true,
        minifyURLs: false,
        preserveLineBreaks: false,
        preventAttributesEscaping: false,
        processConditionalComments: true,
        processScripts: ["module"],
        quoteCharacter: "",
        removeAttributeQuotes: true,
        removeComments: false,
        removeEmptyAttributes: false,
        removeEmptyElements: false,
        removeOptionalTags: false,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        removeTagWhitespace: true,
        sortAttributes: true,
        sortClassName: true,
        trimCustomFragments: false,
        useShortDoctype: false,
      },

[NikolaRHristov]

Thank you! I don't know about the comments issue, but this made me fix another one regarding the options merging. Right now, they're merged flat, but I made it merge deep, so now no other issues like that should emerge.

[NikolaRHristov]

I'll take a closer look at the comments one another time. But it is set to false for now in v0.0.17

[NikolaRHristov]

Fixed in 0aa6056