Document that compressHTML doesn't remove all whitespace

[mayank99]

Astro Info

Astro:  v4.5.6
Output: static

Describe the Bug

Newlines are left as real whitespace in the HTML output, instead of being removed.

Input

<p>
 A
 <span>B</span>
 C
</p>

results in this output:

<p>
A
<span>B</span>
C
</p>

which looks like "A B C" when rendered (instead of "ABC").

The documentation says:

By default, Astro removes all whitespace from your HTML, including line breaks, from .astro components. This occurs both in development mode and in the final build.

It looks like this behavior might have changed in withastro/astro#7556 / compiler#816?

What's the expected result?

All whitespace should be collapsed, like the documentation says.

e.g. this should be the output:

<p>A<span>B</span>C</p>

If real whitespace is desired, it can always be manually added using {" "}. This makes the behavior more predictable.

---

If the current behavior is intentional, then it should be documented correctly.

I can also see valid uses for both scenarios. Maybe there should be a third mode for compressHTML? Or an option similar to html-minifier's "Collapse whitespace" and "Collapse inline tag whitespace"

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-zwd8ub?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[Princesseuh]

As far as I know, this is intended, compressHTML is never supposed to change the visual output of the website

[mayank99]

Isn't it already changing the visual output by removing indentation?

In any case, the current documentation is misleading.

And it would be useful to still have at least an opt-in mode where all whitespace is collapsed (similar to JSX). Currently this does not seem achievable even with a Vite plugin (transformIndexHtml does not get called on Astro-generated HTML).

[Princesseuh]

No (well it's not supposed to at least?), because spaces in this context always get collapsed to one. That's why Prettier formats

<span>
  
  
	Something
  
  
  
</span>

into

<span> Something </span>

because they end up with the same visual result, since the number of whitespace doesn't matter.

And it would be useful to still have at least an opt-in mode where all whitespace is collapsed (similar to JSX). Currently this does not seem achievable even with a Vite plugin (transformIndexHtml does not get called on Astro-generated HTML).

I agree, that'd be cool! Essentially turning the HTML into JSX, ha.

[Princesseuh]

Moving this issue to docs, since it's a docs issue in the end. It should be documented that compressHTML only compresses HTML in lossless manner and that in order to preserve the visual of the authored HTML, it might keep some whitespaces.

[Princesseuh]

@mayank99 Feel free to create a roadmap discussion https://github.com/withastro/roadmap/discussions with the compressHTML idea!

[mayank99]

Yeah, that makes sense to me. Thanks for the quick response

Edit: created discussion withastro/roadmap#868

[mayank99]

Worth also noting that the prettier plugin will sometimes forcibly insert meaningful whitespace, by breaking up long lines.

(If there was a way to trim whitespace, it wouldn't be an issue)

[sarah11918]

Thanks for the discussion here!

Would be happy if someone wanted to make a PR to adjust the wording per Erika's note that

compressHTML only compresses HTML in lossless manner and that in order to preserve the visual of the authored HTML, it might keep some whitespaces.

The change must be made here (in the main astro repo):
https://github.com/withastro/astro/blob/main/packages/astro/src/%40types/astro.ts#L721

And maybe update the content to something like:

This is an option to minify your HTML output and reduce the size of your HTML files. Astro removes whitespace from your HTML, including line breaks, from .astro components in a lossless manner. This means that some whitespace may be kept to preserve the visual rendering of your HTML. This occurs both in development mode and in the final build. To disable HTML compression, set the compressHTML flag to false.