Highlighting breaks when using single quotes around inline JS

[trych]

Hi there,

I was just using the Vue syntax highlighting in Sublime Text 4 and I noticed a highlighting bug:

When there is inline JS within markup that is surrounded by single quotes, the highlighting breaks at double quotes within this inline code.

The way it breaks and the scopes it returns seems to depend on the fact if it is a single line or multi-line statement. Here's what it looks for a multi-line statement:

And here is what happens with a single line statement (first pair of double quotes seems to be fine there, but it seems to think the inline code ends after the first double quote pair:

Would be great, if someone could look into this. Thanks!

[deathaxe]

It breaks due to embedding JavaScript expressions, only. IIRC, it was requested by another contributor or maintainer.

https://github.com/vuejs/vue-syntax-highlight/blob/ec6e5e72d38e97f6122688a1cef3ddb123f437c1/Vue%20Component.sublime-syntax#L609

The reason for doing so is to properly highlight mappings/json in attribute values.

https://github.com/vuejs/vue-syntax-highlight/blob/ec6e5e72d38e97f6122688a1cef3ddb123f437c1/tests/syntax_tests_mustage.vue#L41-L48

Following tests pass successfully as well.

   <p v-attrib='{"key": "value"}'>
//  ^^^ meta.tag - meta.attribute-with-value
//     ^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html - meta.string
//              ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
//               ^^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html meta.string.html meta.interpolation.vue source.js.embedded.vue meta.mapping
//                               ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
//                                ^ meta.tag - meta.attribute-with-value
//                                 ^ - meta.tag

A fix would include to drop #expression-statement and loosing that ability?!

[trych]

A fix would include to drop #expression-statement and loosing that ability?!

I don't know, I'm not the one to make that call. I just noticed the broken syntax highlighting, when I was using what is imho perfectly valid vue.js inline code.

If this breaks something else and there is no way to have both features working at the same time, I guess I have to live with it and either swap my quoting or my editor for vue projects. (edit: or better yet, I just make a local override for the package, that should be easy enough, I guess).

Since all this syntax highlighting is way over my head, I can not contribute anything to any solutions either unfortunately. Feel free to close this, if the the mappings/json highlighting should be kept.

[rchl]

Why don't you wrap attributes in double quotes like a normal person would do? ;) Just kidding, no offense. But still looks weird to me given that double quotes was a standard since the invention of HTML.

[trych]

I knew that I would get this comment. ;)

No good reason really, just started using it that way around at some point and saw no issue with it until now.

[deathaxe]

Looking at the syntax file, both single-quoted and double quoted attribute values are implemented the same way. There's no obvoius reason for single quotes to fail that badly, while double quoted ones don't.

Even more strange is, removing the patterns for double quoted values, partly fixes highlighting of single quoted ones.

I'd say there's something strange going on, but I haven't been able to track down the root cause.