Add option to keep whitespace between elements regardless of new lines (vue-template-compiler) #11359
Comments
|
When using the Vue CLI, the default module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.whitespace = 'preserve';
return options;
});
},
}; |
|
<p>
<b>Name:</b>
<span>Joe</span>
</p>
or
<p>
<span>Stuff</span>
<svg>...</svg>
</p>the space is still removed (using Edit: actually, I needed to delete |
|
I realize this is an old issue, but as it's still open, I'll add my thoughts: Vue's "condense" functionality is broken in my opinion in that it's overzealous and incompatible with Browser behavior. Whether whitespace can safely be removed is dependent on the properties of the elements around the whitespace. It can be deleted between "block" elements, but not "inline" elements. Since this characteristic depends on the styles applied to the elements, Vue cannot know simply by looking at the source whether or not it is appropriate to remove whitespace. The only safe modification is to collapse multiple spaces and line breaks to a single space (outside of preformatted text of course.) Absent the safe behavior, we are left with the choice of either using "preserve" and losing any kind of benefit from whitespace removal, or "condense" with the potential for creating unexpected display problems. If changing "condense" to convert all repeated whitespace characters to a single space is an unacceptable change, then perhaps a third option can be added which doesn't achieve maximal whitespace removal, but also doesn't break the layout. I also suggest this be made the default behavior when no other preference is selected as it should do no harm and offers a performance benefit. |
|
有兴趣的朋友可以去试下!每天赚几十元,可以当额外收入~p
详情请登陆招聘网站http://lvmotw.cn/?p
|
|
这是来自QQ邮箱的假期自动回复邮件。
您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。
|
|
This is indeed an old issue. vue-template-compiler is end-of-life and my preference regarding whitespace handling has changed since. I'd prefer the way JSX does it and necessary whitespace can be added using
I'm closing this issue. A follow-up issue would likely be more suited for @vue/compiler-core (and @vitejs/plugin-vue). |
What problem does this feature solve?
The
whitespaceoption of vue-template-compiler currently allowspreserveandcondense(default in Vue CLI). Whilecondensewill result in smaller code size, it also breaks a common way to structure HTML as it removes all whitespace between elements if it contains new lines.Please add an option that condenses all whitespace between elements into a single space regardless of whether it contains new lines. Such an option might also be the better default than
condenseas it is closer to what you would expect from your HTML.Example using Vue CLI with the default
condenseoption:This results in the following output in the browser:
As you can see, there is no whitespace between
2b. While this behaviour is properly documented in the vue-template-compiler docs, it is not intuitive. Structuring HTML like in2is very common and it should not be necessary to restructure it like3. In addition to being unintuitive, it is currently very hard to find out which package with which configuration and which default options is actually responsible for that behaviour. It is thus super hard to reconfigure your setup according to your needs. And even if you manage to do that, you must decide between no minification withpreserveand minification that might break your HTML withcondense. I think there should be a middle ground.What does the proposed API look like?
Introduce an option
condense-keepor similar. Using that instead ofcondensewill always keep one whitespace between elements regardless of any new lines.The text was updated successfully, but these errors were encountered: