Vetur: Syntax highlighting breaks with self-closed template/script/style tag

[Akryum]

• [x] I have searched through existing issues
• [x] I have read through docs
• [x] I have read FAQ

Info

• Platform: Win
• Vetur version: 0.11.5
• VS Code version: 1.19.0

Problem

The syntax highlighting breaks if a <template|script|style> tag is self-closed or empty and closed on the same line. The use case is using the src attribute.

The highlighting breaks after the first self-closed tag.

This seems to have started happening since update to vetur 0.11.5 and VS Code 1.19.0 from previous versions.

Reproducible Case

Breaks (self-closing):

<style src="myfile.styl" />

<template>
  <div class="base-image">
    <transition name="zoom">
      <img
        :key="src"
        class="img"
        :src="src"
      />
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
  },
}
</script>

<style lang="stylus" scoped>
@import "../styles/imports"

.base-image
  flex-box()
  box-center()
  background $md-grey-100
  border-radius 3px
</style>

The code before the self-closing tag is fine:

Breaks (empty):

<style src="myfile.styl"></style>

<template>
  <div class="base-image">
    <transition name="zoom">
      <img
        :key="src"
        class="img"
        :src="src"
      />
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
  },
}
</script>

<style lang="stylus" scoped>
@import "../styles/imports"

.base-image
  flex-box()
  box-center()
  background $md-grey-100
  border-radius 3px
</style>

Works (closing tag on next line):

<style src="myfile.styl">
</style>

<template>
  <div class="base-image">
    <transition name="zoom">
      <img
        :key="src"
        class="img"
        :src="src"
      />
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
  },
}
</script>

<style lang="stylus" scoped>
@import "../styles/imports"

.base-image
  flex-box()
  box-center()
  background $md-grey-100
  border-radius 3px
</style>

Breaks (example with template and script tags):

<template src="./myfile.html" />

<script src="./myScript.js" />

<style lang="stylus" scoped>
@import "../styles/imports"

.base-image
  flex-box()
  box-center()
  background $md-grey-100
  border-radius 3px
</style>

Works (example with template and script tags):

<template src="./myfile.html">
</template>

<script src="./myScript.js">
</script>

<style lang="stylus" scoped>
@import "../styles/imports"

.base-image
  flex-box()
  box-center()
  background $md-grey-100
  border-radius 3px
</style>

[ValentineStone]

Breaks (empty)

Just to clarify, non empty one line tags break formatting too

[octref]

@Akryum I'll release this later today.

@ValentineStone
If it's on the same line, it has to be a self-closing tag. I won't support your case. If you have styles, write it in multi-lines.

[octref]

While fixing https://github.com/vuejs/vetur/issues/593 I made the grammar like this:

If you write

<style>h1 { }</style>

The css parts won't get highlighted. But it won't break anything after it.

[Akryum]

@octref Did this make it into an update of the extension yet?

[octref]

Sorry has been on vacation. Will get an updated changelog from @HerringtonDarkholme then release a new version: https://github.com/vuejs/vetur/issues/643

[lusever]

This fix stops working if add a slash

[octref]

@lusever Can you create a new issue for it? Thanks.

[str1x]

same problem =C
Platform: macOS
Vetur version: 0.11.7
VS Code version: 1.23.1