Search code examples
configprettierstylelint

Lot of errors after upgrading stylelint to 14.0.0


I was upgrading stylelint to V14 according to this this migration guide.So I ran stylelint-config-standard-scss and have also added to stylelint config file. Since we are also using stylelint-prettier at the same time, so now the config file looks like this (there was never any other rules):

{
  "extends": ["stylelint-config-standard-scss","stylelint-prettier/recommended"]
}

However, when i run npm run stylelint i got many errors (which didn't exist before package updating):

modules/.../_style.scss
   1:1   ✖  Expected mixin name to be kebab-case                                                                 scss/at-mixin-pattern        
   3:3   ✖  Expected empty line before rule                                                                      rule-empty-line-before       
   6:14  ✖  Expected "0.75" to be "75%"                                                                          alpha-value-notation         
   8:3   ✖  Expected empty line before rule                                                                      rule-empty-line-before       
  27:3   ✖  Expected empty line before rule                                                                      rule-empty-line-before       
  32:3   ✖  Expected empty line before rule                                                                      rule-empty-line-before       
  37:3   ✖  Expected empty line before rule                                                                      rule-empty-line-before       
  40:3   ✖  Expected empty line before rule                                                                      rule-empty-line-before       
  50:3   ✖  Expected empty line before rule                                                                      rule-empty-line-before       
  51:14  ✖  Expected "0.8" to be "80%"                                                                           alpha-value-notation         
  53:3   ✖  Expected empty line before rule                                                                      rule-empty-line-before       
  55:14  ✖  Expected "1" to be "100%"                                                                            alpha-value-notation       
....

I guess it's because i didn't configure it correctly. But the thing i don't understand it why there were no rules before and now it seems i'd need to configure so many now. Are they added to the new version V14? Or is it a conflict between prettier and the new stylelint version?

Since i am pretty new to updating packages, my apologies if my question doesn't make so much sense. Any inputs are welcome! Thank you


Solution

  • You configured it correctly.

    The stylelint-config-standard-scss package is separate from the stylelint one and has its own CHANGELOG. Version 2.0.0 of the package turned on a dozen new rules. Additionally, the package updated the two shared configs it extends which, in turn, have their own CHANGELOGs:

    Both of these configs turned on new rules in their last major releases.

    In summary, by updating to version 2.0.0 of stylelint-config-standard-scss over two dozen new rules were turned on.

    Ideally, you should update your codebase to fix the problems. Alternatively, you can extend the config and turn off any rules you don't want.

    For example, to turn off the alpha-value-notation rule:

    {
      "extends": ["stylelint-config-standard-scss","stylelint-prettier/recommended"],
      "rules": {
        "alpha-value-notation": null
      }
    }