Suppressing CssSyntaxError for inline styles in svelte files

What is the problem you’re trying to solve?

Hello, I am currently trying to implement stylelint in a project that uses svelte and several postcss plugins. The problem occurs in the parsing of inline styles in the svelte file.

We sometimes use the style tag of an html element to define a dynamic custom property as in the following case:

<nav
  class="Menu"
  slot="sticky"
  style="
    --nbMenuItems: { displayedItems.length };
    { getStyleUrlVars({ arrowRight }) }"
>

The output in this case is

<nav class="Menu svelte-1q3olh0" slot="sticky" style="--nbMenuItems: 3;--arrowRight: url('/client/assets/icon_arrow-2_right-7f4ce63b.svg');">

Here I get an error

src/components/AnchorMenu/AnchorMenu.svelte
 40:7  ✖  Unknown word   CssSyntaxError

I would like to turn off the parsing for inline style tags. Is this possible?

this is also the case with "defaultSeverity": "warning", as discussed here

Thanks in advance and for all the hard work that goes into stylelint!

What solution would you like to see?

I would like to have an option that allows for parsing only content between <style> tags but otherwise the possibility of doing something like this

<nav
   class="Menu"
   slot="sticky"
  style="
    --nbMenuItems: { displayedItems.length };
    /* stylelint-disable-line */
    { getStyleUrlVars({ arrowRight }) }
    /* stylelint-enable-line */
    "
 >

[kelvindecosta]

Hey everyone!

The following fix worked for me:

• Install these dependencies:

  npm i -D postcss-html stylelint-config-html
  

• Add stylelint-config-html/svelte to extends

Hope this helps!

[ota-meshi]

If you are using a js file for your config, changing it to use postcss-safe-parser for CSS parsing with postcss-html will make the parser accept some syntax errors. So it may work for you.

{
// ...
overrides: [
  {
    files: ['*.svelte', '**/*.svelte'],
    customSyntax: require('postcss-html')({ css: 'postcss-safe-parser' }),
  }
]
}

You may need to explicitly install postcss-safe-parser.

https://github.com/ota-meshi/postcss-html#advanced-use-cases https://github.com/postcss/postcss-safe-parser