Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

metonym
Copy link

@metonym metonym commented Mar 26, 2022

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
  }
]

Copy link
Member

@dummdidumm dummdidumm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree with this change. It's support for a svelte-preprocess option, not "vanilla Svelte", but that doesn't make it less viable in my opinion.
If you change the formatting (tabs instead of spaces) we're good to go 👍

@metonym
Copy link
Author

metonym commented Mar 28, 2022

@dummdidumm Updated 🙏

@metonym
Copy link
Author

metonym commented Apr 8, 2022

@dummdidumm Anything else I should do for this PR?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Using <script global> or :global selector doesn't silence eslint warnings
3 participants