Any custom component named style* breaks syntax highlighting #158

TMMeijers · 2021-06-30T12:56:47Z

Hi maintainers,

First of all, many thanks for your plugin! I use it with pleasure, it works really well.

I have encounted one issue recently, and I'm afraid I'm not proficient in vim-script / plugins to look into it myself.

What happens is that any custom component starting it's name with style, breaks the syntax highlighting. Probably because it starts CSS highlighting after the component.

Take for example the following Vue file (let's assume the StyleIcon component is globally registered):

<html>
  <div>
    <style-icon class="some-class">{{ data }}</style-icon>
  </div>
</html>

<script>
export default {
  name: 'Test',

  computed: {
    data() {
      return 'test'
    },
  },
}
</script>

<style>
.some-class {
  font-size: 20px;
}
</style>

The resulting highlighting is as follows:

If I change the name of the component to something else, let's say StylIcon, syntax highlighting works as expected:

Hopefully this bug report is useful. Let me know if you need something else.

Have a nice day!
Thomas

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Any custom component named style* breaks syntax highlighting #158

Any custom component named style* breaks syntax highlighting #158

TMMeijers commented Jun 30, 2021

Any custom component named style* breaks syntax highlighting #158

Any custom component named style* breaks syntax highlighting #158

Comments

TMMeijers commented Jun 30, 2021