question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Stylelint: fix current issues and prevent future issues

See original GitHub issue

Problem

We have stylelint in our repository, but we don’t run it systematically, so we currently have 1000+ errors:

% yarn stylelint -q '**/*.scss' | grep '✖' | wc -l
error Command failed with exit code 2.                                                                                                                                                                   
    1302

Solution

  1. Verify whether the rules causing errors make sense.
  2. Fix the current errors automatically (and - in a separate commit - manually if necessary).
  3. Run stylelint as part of lint-staged, to avoid introducing new errors.
  4. Run stylelint as part of the .github/workflows/testing.yml workflow.

Bonus: Integrate stylelint with ESLint (to avoid having to run it separately).

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:12 (11 by maintainers)

github_iconTop GitHub Comments

1reaction
caugnercommented, Jun 3, 2022

@mustaphaturhan Maybe

  • To fix declaration-property-value-disallowed-list, we should be able to replace border: none with border: 0.
  • For your no-descending-specificity example, the solution looks good to me.
  • To fix the no-duplicate-selectors error, we should then be able to merge the two blocks that start with ul.main-menu like this:
@media screen and (min-width: $screen-lg) {
  .open-on-focus-within {
    .submenu,
    .watch-submenu {
      display: none;
    }
  }

  ul.main-menu {
    .submenu {
      display: none;
    }

    .top-level-entry-container {
      &:hover,
      &:focus-within {
        .submenu {
          display: block;
        }
    }
  }

  // This allows keyboard nav to work more predictably on desktop dropdowns.
  .open-on-focus-within {
    &:focus-within {
      .watch-submenu {
        display: flex;
      }

      .submenu {
        display: block;
      }
    }
  }
}
1reaction
caugnercommented, Jun 2, 2022

Awesome, thank you so much! 🙏

Read more comments on GitHub >

github_iconTop Results From Across the Web

Managing issues - Stylelint
Managing issues. We manage issues consistently for the benefit of ourselves and our users. Labels​. Use labels. When you first triage an issue,...
Read more >
Stylelint not reporting any errors on Preact project #250 - GitHub
Running stylelint against any files doesn't generate any errors, nor does --fix do anything. This is the same config I use in all...
Read more >
How do I set stylelint to fix errors automatically? - Stack Overflow
auto-correct options for Stylelint. It fixes all issues for me. To check the errors first: npx stylelint "**/*.{css,scss}".
Read more >
Stylelint | WebStorm Documentation - JetBrains
Stylelint can automatically fix detected problems in the current file in unambiguous cases using the Stylelint Auto Fix functionality. To apply ...
Read more >
Level up your CSS linting using Stylelint - LogRocket Blog
Use VS Code with the Stylelint extension to provide squiggly underlines for errors, and I set errors to be fixed automatically on save;...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found