style(stylelint): upgrade, run systematically, disable rules with err…

…ors (#7035)

* build(deps-dev): bump stylelint from 13.13.1 to 14.8.5

Also bumps:
- stylelint-config-recommended from 5.0.0 to 7.0.0
- stylelint-config-sass-guidelines from 8.0.0 to 9.0.1
- stylelint-prettier from 1.2.0 to 2.0.0
- stylelint-scss from 3.21.0 to 4.2.0

* style(lint-staged): run stylelint, add extension to config file

* ci(testing): add stylelint step

* style(stylelint): order rules alphabetically

* style(stylelint): disable rules with errors

Co-authored-by: Mustafa Turhan <[email protected]>

.github/workflows/testing.yml

@@ -41,6 +41,9 @@ jobs:
       - name: Lint ESLint
         run: yarn eslint
 
+      - name: Lint stylelint
+        run: yarn stylelint
+
   test:
     runs-on: ubuntu-latest
 

.lintstagedrc.json

@@ -0,0 +1,5 @@
+{
+  "*": "prettier --ignore-unknown --write",
+  "*.{js,jsx,tsx}": "eslint --fix",
+  "*.{css,scss}": "stylelint --fix"
+}

.stylelintrc.json

@@ -7,19 +7,34 @@
   ],
   "plugins": ["stylelint-scss"],
   "rules": {
-    "max-nesting-depth": [
-      3,
-      {
-        "ignoreAtRules": ["media"]
-      }
-    ],
-    "declaration-no-important": true,
-    "font-weight-notation": "named-where-possible",
-    "selector-no-qualifying-type": [
-      true,
-      {
-        "ignore": ["class"]
-      }
-    ]
+    "a11y/media-prefers-reduced-motion": null,
+    "a11y/no-outline-none": null,
+    "a11y/selector-pseudo-class-focus": null,
+    "block-no-empty": null,
+    "color-named": null,
+    "custom-property-no-missing-var-function": null,
+    "declaration-block-no-duplicate-properties": null,
+    "declaration-property-value-disallowed-list": null,
+    "font-family-no-missing-generic-family-keyword": null,
+    "function-no-unknown": null,
+    "function-url-quotes": null,
+    "length-zero-no-unit": null,
+    "max-nesting-depth": null,
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": null,
+    "no-invalid-position-at-import-rule": null,
+    "no-irregular-whitespace": null,
+    "order/order": null,
+    "order/properties-alphabetical-order": null,
+    "property-no-vendor-prefix": null,
+    "rule-empty-line-before": null,
+    "scss/at-extend-no-missing-placeholder": null,
+    "scss/selector-no-redundant-nesting-selector": null,
+    "selector-class-pattern": null,
+    "selector-max-compound-selectors": null,
+    "selector-max-id": null,
+    "selector-no-qualifying-type": null,
+    "selector-pseudo-element-colon-notation": null,
+    "shorthand-property-no-redundant-values": null
   }
 }

package.json

@@ -35,6 +35,7 @@
     "start:server": "ts-node server",
     "start:static-server": "cross-env ENV_FILE=testing/.env ts-node server/static.ts",
     "style-dictionary": "style-dictionary build -c sd-config.js",
+    "stylelint": "stylelint \"**/*.scss\"",
     "test": "yarn prettier-check && yarn test:client && yarn test:kumascript && yarn test:content && yarn test:testing",
     "test:client": "cd client && tsc --noEmit && node scripts/test.js --env=jsdom",
     "test:content": "jest content",
@@ -220,13 +221,13 @@
     "source-map-loader": "^4.0.0",
     "style-dictionary": "^3.7.1",
     "style-loader": "^3.3.1",
-    "stylelint": "^13.13.1",
+    "stylelint": "^14.8.5",
     "stylelint-a11y": "^1.2.3",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-recommended": "^5.0.0",
-    "stylelint-config-sass-guidelines": "^8.0.0",
-    "stylelint-prettier": "^1.2.0",
-    "stylelint-scss": "^3.21.0",
+    "stylelint-config-recommended": "^7.0.0",
+    "stylelint-config-sass-guidelines": "^9.0.1",
+    "stylelint-prettier": "^2.0.0",
+    "stylelint-scss": "^4.2.0",
     "swr": "^1.3.0",
     "tailwindcss": "^3.1.8",
     "terser-webpack-plugin": "^5.3.6",

scripts/lint.sh

@@ -21,3 +21,9 @@ echo "Lint ESLint"
 echo "-----------"
 
 yarn eslint
+
+echo "--------------"
+echo "Lint stylelint"
+echo "--------------"
+
+yarn stylelint