catppuccin / vscode

🦌 Soothing pastel theme for VSCode & Azure Data Studio
https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc-pack
MIT License
1.37k stars 49 forks source link

Nested CSS coloring issues #397

Open smlombardi opened 4 months ago

smlombardi commented 4 months ago

srcassetsmain css — primevue-tests_20240602 _113138@2x

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 commented 4 months ago

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:

Screenshot 2024-06-02 at 11 46 20 (Code)

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

Screenshot 2024-06-02 at 11 48 04 (Code)

uncenter commented 4 months ago

Probably related to the upstream issue https://github.com/microsoft/vscode-css/issues/9?