ParseError on SCSS in a single-file component

[marekdedic]

Hi,
I have the following .svelte file:

// ... rest of component

<style lang="scss">
@use "./_smui-theme.scss";
@use '@material/theme' as theme;

  .breadcrumb {
    cursor: pointer;
    color: theme.$primary;
  }
</style>

When trying to lint this, I get ParseError on the $ character. I thing it is trying to parse the SCSS as JS...

This started happening after upgrading to typescript-eslint v5

[Conduitry]

Do you have a clonable repro of this not happening with this syntax? This plugin not dealing with languages that transpile to CSS is a known limitation, and is what https://github.com/sveltejs/eslint-plugin-svelte3#svelte3ignore-styles was created for.

[marekdedic]

Hi,
my bad, I didn't set ignore-styles :/ Thanks!

But yes, my code used to work just fine previously, e.g. https://github.com/skaut/shared-drive-mover/blob/33499b39decab6adc26fc7d20bdf825f4aff1fc8/src/frontend/App.svelte