Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vue SRR renders newline characters into class attributes #7859

Closed
brophdawg11 opened this issue Mar 19, 2018 · 2 comments · Fixed by #8037
Closed

Vue SRR renders newline characters into class attributes #7859

brophdawg11 opened this issue Mar 19, 2018 · 2 comments · Fixed by #8037
Labels
has PR improvement

Comments

@brophdawg11
Copy link

Version

2.5.16

Reproduction link

Gist

Steps to reproduce

  • Download the above gist to an index.js file
  • npm install --save vue vue-server-renderer
  • node index.js

What is expected?

Once rendered in the browser, all 6 long-classname-* class styles should be applied to the second element.

What is actually happening?

Because the class attribute is rendered with long-classname-3\n, the styles for long-classname-3 are not applied

This can be worked around by adding a space before the mid-attribute line break, however this doesn't play nicely with the ESLint no-trailing-spaces rule and the settings for many common editors.
sodatea added a commit to sodatea/vue that referenced this issue Apr 16, 2018
@sodatea
fix(ssr): fix double escaping of staticClass values (vuejs#7859)
3d440a4
@rogden
Copy link

rogden commented May 3, 2018

I'm experiencing this issue as well. Using Tailwind CSS in Vue SFCs, it is helpful to break the class names onto multiple lines to avoid long single lines. The \n character is breaking the class names. Hopefully this makes it into the next release.

brophdawg11 added a commit to brophdawg11/vue that referenced this issue May 4, 2018
@brophdawg11
fix(SSR): Properly handle newlines and whitespace in SSR classnames
6b71f97 
When encountering newlines in SSR classnames, do not render "\n"" and
instead replace the new line with a space.

Once newlines are removed, indentation from subsequent lines can leave
classnames abnormally spaced out, so replace multiple spaces with a
single space

fix vuejs#7859
@brophdawg11 brophdawg11 mentioned this issue May 4, 2018
Closed
13 tasks
@brophdawg11
Copy link
Author

Finally got some time to dig into this and opened a PR: #8130

@sodatea sodatea mentioned this issue May 4, 2018
Merged
13 tasks
@sodatea sodatea added the has PR label Jun 4, 2018
brophdawg11 added a commit to brophdawg11/vue that referenced this issue Jun 30, 2018
@brophdawg11
fix(SSR): Consolidate dual-regex approach to single regex
20d1cf7 
fix vuejs#7859
yyx990803 pushed a commit that referenced this issue Aug 20, 2018
@sodatea @yyx990803
fix(ssr): fix double escaping of staticClass values (#7859) (#8037)
c21b89e
f2009 pushed a commit to f2009/vue that referenced this issue Jan 25, 2019
@sodatea
fix(ssr): fix double escaping of staticClass values (vuejs#7859) (vue…
576e98f 
…js#8037)
aJean pushed a commit to aJean/vue that referenced this issue Aug 19, 2020
@sodatea @aJean
fix(ssr): fix double escaping of staticClass values (vuejs#7859) (vue…
4dd99db 
…js#8037)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
has PR improvement
Projects
None yet
Milestone
No milestone
4 participants
@rogden @brophdawg11 @sodatea @blake-newman