Vue: With `whitespace:condense` all &nbsps;, even meaningful, are converted to spaces

Created on 29 Jan 2020 · 5Comments · Source: vuejs/vue

Version

2.6.11

Reproduction link

https://gist.github.com/aimozg/c073eea5a55062e3dcd8f887a8567807

Steps to reproduce

Run example.js in Node.

Alternative steps/Detailed explanation:

Setup Vue template compiler with whitespace: 'condense'. (it is default for vue-cli).
Render template with   entity, e.g. <p>a b</p>
Inspect template for actual non-breaking space character

What is expected?

  entity rendered as non-breaking space character; example.js output should contain

---- whitespace: condense
// code
NBSP FOUND

What is actually happening?

  entity is rendered as plain space, example.js output contains

---- whitespace: condense
// code
NBSP NOT FOUND

The whitespace is stripped by this compiler code:

if (!inPre && whitespaceOption === 'condense') {
  // condense consecutive whitespaces into single space
  text = text.replace(whitespaceRE, ' ')
}

and " "s are replaced by "\xA0"s with entity decoder earlier.

Related issues is https://github.com/vuejs/vue/issues/10485

Suggestion:

Narrower whitespaceRE regexp, like /[ \t\r\n]+/g.

bug compiler has PR

Source

aimozg

👍5

Most helpful comment

Shouldn't we not touch non-breakable spaces in general? That's what I would personally expect if I use one in my template. It would also fix the issue you mentioned

posva on 29 Jan 2020

👍4

All 5 comments

Shouldn't we not touch non-breakable spaces in general? That's what I would personally expect if I use one in my template. It would also fix the issue you mentioned

posva on 29 Jan 2020

👍4

Setup Vue template compiler with whitespace: 'condense'. (it is default for vue-cli).

Wait, I'm confused. Is condense really the default? I'm seeing multiple things that claim preserve is actually the default.

I've been struggling to figure out why none of my non-breakable spaces are working. I was going to try forcing preserve, but then saw:

Evan saying default is preserve https://github.com/vuejs/vue/issues/9208#issuecomment-450012518

And compiler option docs that echo that statement https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#options

Now after seeing @aimozg say condense is actually default, I went ahead and manually set preserve and sure enough! Everything's back to normal!

Are the docs/implementation wrong?

Either way, why would condense eliminate nbsp? Very unexpected behavior. I agree they shouldn't be touched.

chasebank on 30 Apr 2020

👍3

White spaces are preserved in Vue core to ensure backward compatibility while in latest versions of Vue CLI we configure that to condense by default.