Symbol path is incorrect when self-closing tags are used

[chriscalo]

The symbol path at the top of an editor tab is incorrect when using self-closing tags (notice the <Nav/>:

If I add a separate </Nav> closing tag, the symbol path is correct for this same cursor position:

[tommasongr]

I finally managed to take a look at this and #27. Unfortunately I encountered the same roadblock in both of them.

The problem is that self closing and paired tags overwrite each other when I try to define ad-hoc rules. I looked at the HTML extension from @panicinc and they don't have any rules for handling a case where a tag is both self closed and paired. In fact I had the same error in plain HTML...

Paired tag:

Self closing tag:

---

I'll use the case of #27 as an example.

This is how the standard style block is currently implemented:

<scope name="vue.embedded.block.style" spell-check="false" lookup="documentation">
        <starts-with>
	        <expression>(?=&lt;(?i:style)\b)</expression>
        </starts-with>
        <ends-with />
        <subscopes anchored="true" skip-whitespace="false">
	        <scope name="vue.tag.style.open">
		        <symbol type="tag-style">
			        <context behavior="start" group-by-name="true">
				        <auto-close string="&lt;/" completion="${name}&gt;" />
			        </context>
		        </symbol>
		        <starts-with>
			        <expression>&lt;((?i:style))</expression>
			        <capture number="1" name="vue.tag.name" />
		        </starts-with>
		        <ends-with>
			        <expression>/?&gt;</expression>
		        </ends-with>
		        <subscopes>
			        <include syntax="html" collection="attributes" />
		        </subscopes>
	        </scope>
	        <scope name="vue.embedded.block.style.content">
		        <starts-with>
			        <expression>(?&lt;=&gt;)</expression>
		        </starts-with>
		        <ends-with>
			        <expression>(?=&lt;/(?i:style)\b)</expression>
		        </ends-with>
		        <subsyntax name="css">
			        <cut-off>
				        <expression>(?=&lt;/(?i:style)\b)</expression>
			        </cut-off>
		        </subsyntax>
	        </scope>
        </subscopes>
</scope>

For allowing a self closing style I tried to use something like this:

<scope name="vue.tag.open.single" spell-check="false" lookup="documentation">
		<symbol type="tag-style">
			<context behavior="subtree" group-by-name="true" unclosed="truncate" />
		</symbol>
		<starts-with>
			<strings prefix="&lt;" suffix="\b" word-boundary="false" case-insensitive="true">
				<string>style</string>
			</strings>
			<capture number="1" name="vue.tag.name" />
		</starts-with>
		<ends-with>
			<expression>/?&gt;</expression>
		</ends-with>
		<subscopes>
			<include syntax="html" collection="attributes" />
		</subscopes>
</scope>

The problem is that the first overwrite the second or viceversa depending on the order I place them in code.

Maybe @logancollins can tell us something more about this error.

[chriscalo]

Thanks for looking into this, @tommasongr 🙏

I think you're saying this might be an issue in Panic itself. Also curious if @logancollins can add any insight.

Vue's single-file component syntax does allow using paired or self-closing tags, so things do feel broken if Nova syntax highlighting and symbol paths aren't correct.