eslint-plugin-svelte3 icon indicating copy to clipboard operation
eslint-plugin-svelte3 copied to clipboard

[fix] ignore css-unused-selector rule if <style global>

Open metonym opened this issue 3 years ago • 2 comments

Fixes #123

This PR detects if the style block contains the "global" attribute and filters "css-unused-selector" warnings if true.

The desired UX is to have the following code not emit an ESLint warning:

<!-- `h1` tags exist inside this component -->
<Component />

<style global>
  h1 { color: red }
</style>

I added the global-style sample to test this.

Run yarn test; no errors should be emitted from the global-style sample.

Without this modification, running yarn test on the global-style sample would return the following warnings (expected):

[
  {
    "ruleId": "css-unused-selector",
    "severity": 1,
    "message": "Unused CSS selector \"h1\"",
    "line": 2,
    "column": 3,
    "endLine": 2,
    "endColumn": 5
  }
]

metonym avatar Mar 26 '22 03:03 metonym

@dummdidumm Updated 🙏

metonym avatar Mar 28 '22 16:03 metonym

@dummdidumm Anything else I should do for this PR?

metonym avatar Apr 08 '22 16:04 metonym