Stylelint & rules upgrade required

[funder7]

Issue type

• [ ] bug report
• [X] feature request
• [ ] question about the decisions made in the repository

Issue description

Current behavior: Actually Stylelint version is very old (installed: v7 VS current: v14). It is also configured without extending the stylelint-config-standard-scss ruleset. This may lead to unexpected syntax and/or style behavior. If one decides to include the stylelint-config-standard-scss in the project, then many errors arise, due to the syntax being arbitrary, and not compliant with (s)css standards. This leads also to husky blocking the commit.

Expected behavior: It's a good practice to have libraries updated to the latest compatible version, especially with CSS, where latest browser compatibility is a requirement. Extending a standard (or recommended) rule set, is the best way to write good code, and spot possible errors.

To do so, including stylelint-config-standard-scss in the project, and running lint:styles should finish without any error. Commits shouldn't be blocked by husky, due to style errors.

Steps to reproduce:

1. upgrade stylelint to the latest version: npm i stylelint@latest --save-dev
2. install the standard scss rule-set: npm i stylelint-config-standard-scss --save-dev
3. load the rules in the existing .stylelintrc.json by adding: "extends": "stylelint-config-standard-scss"
4. finally run the style lint script: npm run lint:styles

Related code:

There are many errors like the following:

src/app/pages/ui-features/typography/typography.component.scss
 34:3   ✖  Expected selector ".header" to come before selector ".font-row .header"                             no-descending-specificity
 34:3   ✖  Expected selector ".header" to come before selector ".headings-card .header"                        no-descending-specificity
 34:3   ✖  Expected selector ".header" to come before selector ".headings-card .header:last-child"             no-descending-specificity
 42:5   ✖  Expected selector ".header:last-child" to come before selector ".headings-card .header:last-child"  no-descending-specificity
 98:5   ✖  Expected selector ".colors h1" to come before selector ".header div:first-child h1"                 no-descending-specificity
 98:9   ✖  Expected selector ".colors h2" to come before selector ".header div:first-child h2"                 no-descending-specificity
 98:13  ✖  Expected selector ".colors h3" to come before selector ".header div:first-child h3"                 no-descending-specificity
 98:17  ✖  Expected selector ".colors h4" to come before selector ".header div:first-child h4"                 no-descending-specificity
 98:21  ✖  Expected selector ".colors h5" to come before selector ".header div:first-child h5"                 no-descending-specificity
 98:25  ✖  Expected selector ".colors h6" to come before selector ".header div:first-child h6"                 no-descending-specificity

Other information:

node: v14.7.3
npm: 8.3.0

Angular, Nebular

angular: ~12.1.0
nebular: 8.0.0

[Whisper40]

I can confirm that his PR works.