Subscribe on changes!

Compiler: condense known attributes whitespace

avatar
Aug 4th 2021

What problem does this feature solve?

Compiler automatically condense whitespace between elements (to a certain extent, controllable with whitespace option).

It does not condense spaces inside attributes. This can't be done in general because some whitespaces inside data-mine could be significant, but there are two well-known attributes that have non-significant whitespace and could easily be large: style and css (more could be added to the list).

Here we use prettier, which formats code in its own way -- and puts attributes on multiple lines when they're too big. We also use Tailwind, which means we sometimes end up with a lot of classes on one tag.

Combine both and this markup is not unheard of in our codebase: image

Since class whitespace is kept as-is by compiler, our production build contains very noticeable "holes" that needlessly contribute to its size: image

If you look closely you see two elements whose css attribute is ~50% space for ~50% content.

Edge case: should we pay attention to spaces inside quotes for style? I can't come up with a reasonable example where this might be significant, but in theory it might. content: ' ' could be significant ws, except content is only useful in generated content -> not in an inline style.

What does the proposed API look like?

No new API. The difference is in build output: style and class attributes should always have their whitespace condensed.

avatar
Aug 4th 2021