Compiler: condense known attributes whitespace
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:
Since class whitespace is kept as-is by compiler, our production build contains very noticeable "holes" that needlessly contribute to its size:
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, exceptcontent
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.
Related issue in vue 2 https://github.com/vuejs/vue/issues/12113