Syntax highlighting of @each directive inside .vue style block

[aaadotpm]

Syntax highlighting of @each directive inside .vue style block

[aaadotpm]

Screenshot of syntax highlighting breaking

[rsese]

Thanks for the report - I assume for the .vue syntax highlighting you're using https://atom.io/packages/language-vue? That's what I installed to check things out -

Syntax highlighting after @each directive is broken.

I can reproduce on macOS 10.14.6 with 1.40.1 using:

<style lang="scss">
@each $key, $value in $map {
    .color-#{$key} {
      stroke: $value;
    }
 }
</style>

<script>
  import { pie, arc } from 'd3-shape'
</script>

With the @each:

Removing the @each section:

So the last </style> is highlighted correctly and the import line has highlighting too.

[rsese]

Replacing the line with 'end': '\\s*(?={)' as in the similar @if-directive fixes the issue.

See the following branch in our fork for a fix that solves the issue https://github.com/internetfriendsforever/language-sass/tree/each-directive-fix

Just wanted to check if you would you be up for opening a pull request to resolve the issue? Asking since you've done the leg-work here 😄