Nested CSS sometimes doesn't highlight as expected

[smlombardi]

I am using nested CSS and sometimes the coloring work and sometimes the above happens.

here is the code:

span[data-pc-section='current'] {
  @apply mr-32;
}
[data-pc-group-section='pagedropdown'] {
  @apply h-8 p-1 text-sm;
  [data-pc-section='trigger'] {
    @apply w-4 text-sm;
  }
  [data-pc-section='input'] {
    transform: translateY(-8px);
  }
}

[uncenter]

That's an issue with nested CSS in VS Code in general. See below how the same issue is present with the default VS Code dark theme:

If you instruct VS Code to regard the file as SCSS (or change the extension to .scss) the issue disappears.

[uncenter]

Probably related to the upstream issue microsoft/vscode-css#9?