Compiled template classes preserve whitespace

[royeden]

Version

2.6.13

Reproduction link

https://codesandbox.io/s/dazzling-cache-q8y8o?file=/src/App.vue

Steps to reproduce

Add whitespace between classes, for example with the latest changes in prettier sorting classes into individual newlines, an they'll end up with whitespace on production builds.

Example:

Template.vue:

<template>
  <div
    class="
      flex
      items-center
      w-full
      px-5
      py-3
      text-sm
      transition-colors
      duration-300
      ease-in-out
      focus:outline-none
      text-opacity-80
    "
  >
    <slot></slot>
  </div>
</template>

<script>
export default {}
</script>

Will be compiled to this

("div", { staticClass:"\n    flex\n    items-center\n    w-full\n    px-5\n    py-3\n    text-sm\n    transition-colors\n    duration-300\n    ease-in-out\n    focus:outline-none\n    text-opacity-80\n  "}, /* rest of the code */)

This happens regardless of whitespace preservation options in the compiler

What is expected?

Expected class names to be trimmed of whitespace during production builds.

What is actually happening?

Whitespace isn't trimmed in class names after compilation of templates.

[posva]

Note this would require a new option since it's different from whitespace as it's inside of an attribute value and spaces could be important for attributes other than class

Edit: or as mentioned in vuejs/core#4251, it could automatically apply to class and style

[18476757294]

不懂

[greg-owl]

Is this a feature request or a bug? Updating from Vue & the template compiler 2.5.16 to 2.6.14 has caused us a lot of issues with the vue/recommended lint setting... the removed white space has hosed a lot of views. Granted, we inherited some issues in our code base, but how is this not a breaking change?

[royeden]

I think I've fixed this issue/implemented this feature here.
I'm also looking into a fix for this in Vue 3 😄