How can eslint be configured to work with svelte and postcss-nesting?

Question

Using postcss with plugin postcss-nesting in svelte is quite easy -- adding postcss-nesting to the preprocess config in svelte.config.js is the only thing needed:

import preprocess from "svelte-preprocess";
import postcssNesting from "postcss-nesting";

const config = {
    preprocess: preprocess({
        postcss: {
            plugins: [
                postcssNesting()
            ]
        }
    }),
    // ...
};

export default config;

Now I can define nested CSS using the "&" syntax.
For example, when I have this in an example.svelte file:

<div class="example">
    One <span class="nested">two</span> three
</div>

<style lang="postcss">
    .example {
        color: red;
        & .nested {
            text-decoration: underline;
        }
    }
</style>

However, I was not able to find a way that eslint does accept it. It reports that an identifier is expected after the & character.

Swellhead

change the lang to scss, works for me – Katy

@Katy That's not what has been asked though. – Soidisant

@Swellhead i have the same issue. Did you find the answer for postCSS nesting? – One

Answer 1

I had the same problem with postcss-nested when added postcss as npx script npx svelte-add@latest postcss. Adding postcss manually and setting postcss plugins in rollup.config.js like described in svelte-preprocess documentation instead of npx variant however works well.

1. Install dependencies npm i postcss postcss-nested -D
2. Replace preprocess: sveltePreprocess({ sourceMap: !production }), line with

   preprocess: sveltePreprocess({ 
    sourceMap: !production,
    postcss: {
        plugins: [
            require('postcss-nested')()
        ]
    }
   }),
   

Amain

I don't see how this will solve any eslint errors. I have it configured like this and eslint still doesn't recognise it. – Soidisant

I guess that solution fixes only build error, but not lint error. The identifier error when using nesting in postcss installed by npx script pops up during npm run dev. I struggled with that problem and found this question with no answer, so when I found the solution I decided to leave it there – Amain

Answer 2

No, it doesn't "work", but using the svelte3/ignore-styles setting you're able to use ESLint for the remaining <script> and html sections.

// eslint.config.js

  rules: {
    ...
  },
  settings: {
    'svelte3/ignore-styles': () => false,
    ...

Ignoring styles is the default when the <style> contains a lang= or type= attribute since eslint-plugin-svelte3 v3.3.0

Crosspatch