Syntax highlighting of @each directive inside .vue style block

[aaadotpm]

Prerequisites

• Put an X between the brackets on this line if you have done all of the following:
  • Reproduced the problem in Safe Mode: https://flight-manual.atom.io/hacking-atom/sections/debugging/#using-safe-mode
  • Followed all applicable steps in the debugging guide: https://flight-manual.atom.io/hacking-atom/sections/debugging/
  • Checked the FAQs on the message board for common solutions: https://discuss.atom.io/c/faq
  • Checked that your issue isn't already filed: https://github.com/issues?utf8=✓&q=is%3Aissue+user%3Aatom
  • Checked that there is not already an Atom package that provides the described functionality: https://atom.io/packages

Description

Using @each SCSS directive inside a .vue file breaks subsequent syntax highlighting. Digging through grammars/scss.cson it seems like 'end': '\\s*((?=}))' is incorrect.

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

Commit is here internetfriendsforever@8e56bc8

Steps to Reproduce

1. use @each directive in

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

Expected behavior:

Normal syntax highlighting

Actual behavior:

Syntax highlighting after @each directive is broken. Affects both SCSS within the <style> block and the remaining code in the document.

Reproduces how often:

100% of the time for <style lang="scss"> blocks inside a .vue file
0% of the time in a pure .scss file.

Versions

Atom    : 1.40.1
Electron: 3.1.10
Chrome  : 66.0.3359.181
Node    : 10.2.0
apm  2.4.3
npm  6.2.0
node 10.2.1 x64
atom 1.40.1
python 2.7.10
git 2.20.1

Running Mac OS 10.14.6

Additional Information

[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 😄