Nested scss is fails to parse correctly.

[jmurphy-dev]

It seems like this subsyntax fails to match for nested scss.

<subsyntax name="scss">
	<cut-off>
		<expression>(?=&lt;/(?i:style)\b)</expression>
	</cut-off>
</subsyntax>						

here is an example from a .sass file of nested selectors highlighting correctly

here is the most basic pathological example in a .vue file:

I tried changing the subsyntax to a subscopes but either I dont know how to correctly make changes to installed plugins or this doesn't fix the problem.

<subscopes repeat="true">
        <include syntax="scss" />
</subscopes>

[tommasongr]

Hi there!

Oh gosh! Thanks for the catch!
I looked at it and it was worst than you initially find out... Apparently all the not standard syntaxes both for css and javascript were ignored all together. It was a matter of the order in which the alternative scopes were specified in the syntax. I'm so
sorry for this... I usually stick to the standard css and js and I have never come across this.

I'll push the fix ASAP

[jmurphy-dev]

Thanks man, I use the tool everyday, really nice work.

[tommasongr]

Just pushed v5.4 with the fix! Let me know if it works

By the way stay tuned for a major update in the coming days. I'm looking at leaving Vetur for the new Volar language server.

[jmurphy-dev]

@tommasongr Thanks, nested class selectors are working properly now, however it looks like there is still some issues parsing at-rules.

Here is a test snippet.

.icon-grid {
  @media (max-width: calc(#{$lg} - 1px)) {
    grid-template-columns: 1fr;
  }
  .grid-item {

    @media (max-width: calc(#{$lg} - 1px)) {
      padding-bottom: 5.7rem;
    }
    h4 {
      @media (max-width: calc(#{$lg} - 1px)) {
        padding: 2rem 0 0.6rem;
      }
    }

    img {
      @media (max-width: calc(#{$lg} - 1px)) {
        height: 7.5rem;
      }
    }
  }
}

in a .vue file:

in a .scss file:

Let me know if I can provide any additional information.

[chriscalo]

I've noticed that <style lang="scss"> blocks seem to parse as CSS. Meaning, as long as you use CSS syntax, everything syntax highlights correctly, but as soon as you use SCSS-specific syntax, everything breaks.

Another clue is that if you use the keyboard shortcut to add a comment (Cmd /), it uses CSS comments (/* */) instead of SCSS comments (//).