Replace sass-lint with stylelint (#27137)

.stylelintrc.json

@@ -0,0 +1,69 @@
+{
+    "extends": "stylelint-config-standard-scss",
+    "ignoreFiles": [
+        "static/src/stylesheets/icons/**/*.scss",
+        "static/src/stylesheets/email/foundation-emails/**/*.scss",
+        "static/src/stylesheets/atoms/vars.scss"
+    ],
+    "rules": {
+        "selector-class-pattern": null,
+        "at-rule-empty-line-before": null,
+        "selector-pseudo-element-colon-notation": null,
+        "scss/dollar-variable-pattern": null,
+        "selector-id-pattern": null,
+        "scss/no-global-function-names": null,
+        "scss/at-rule-conditional-no-parentheses": null,
+        "value-keyword-case": null,
+        "scss/load-no-partial-leading-underscore": null,
+        "scss/at-mixin-pattern": null,
+        "scss/at-mixin-argumentless-call-parentheses": null,
+        "no-descending-specificity": null,
+        "scss/operator-no-unspaced": null,
+        "rule-empty-line-before": null,
+        "scss/dollar-variable-colon-space-after": null,
+        "no-duplicate-selectors": null,
+        "length-zero-no-unit": null,
+        "comment-whitespace-inside": null,
+        "font-family-no-missing-generic-family-keyword": null,
+        "scss/percent-placeholder-pattern": null,
+        "alpha-value-notation": null,
+        "block-no-empty": null,
+        "color-function-notation": null,
+        "color-hex-length": null,
+        "comment-empty-line-before": null,
+        "declaration-block-no-redundant-longhand-properties": null,
+        "declaration-block-no-shorthand-property-overrides": null,
+        "declaration-block-single-line-max-declarations": null,
+        "declaration-empty-line-before": null,
+        "font-family-name-quotes": null,
+        "font-family-no-duplicate-names": null,
+        "function-linear-gradient-no-nonstandard-direction": null,
+        "function-url-quotes": null,
+        "hue-degree-notation": null,
+        "keyframes-name-pattern": null,
+        "media-feature-name-no-vendor-prefix": null,
+        "media-feature-range-notation": null,
+        "named-grid-areas-no-invalid": null,
+        "no-empty-source": null,
+        "no-invalid-position-at-import-rule": null,
+        "number-max-precision": null,
+        "property-no-unknown": null,
+        "property-no-vendor-prefix": null,
+        "scss/at-else-closing-brace-newline-after": null,
+        "scss/at-else-closing-brace-space-after": null,
+        "scss/at-else-empty-line-before": null,
+        "scss/at-if-closing-brace-newline-after": null,
+        "scss/at-if-closing-brace-space-after": null,
+        "scss/at-mixin-parentheses-space-before": null,
+        "scss/comment-no-empty": null,
+        "scss/dollar-variable-empty-line-before": null,
+        "scss/double-slash-comment-empty-line-before": null,
+        "scss/double-slash-comment-whitespace-inside": null,
+        "scss/operator-no-newline-after": null,
+        "selector-attribute-quotes": null,
+        "selector-not-notation": null,
+        "selector-type-no-unknown": null,
+        "unit-no-unknown": null,
+        "value-no-vendor-prefix": null
+    }
+}

package.json

@@ -128,12 +128,13 @@
 		"rimraf": "^2.6.1",
 		"rxjs": "^6.6.7",
 		"sass-graph": "^4.0.1",
-		"sass-lint": "1.13.1",
 		"sass-loader": "^10.4.1",
 		"sass-mq": "~5.0.1",
 		"semver": "^5.4.1",
 		"split": "^1.0.0",
 		"stream-to-observable": "^0.2.0",
+		"stylelint": "^16.5.0",
+		"stylelint-config-standard-scss": "^13.1.0",
 		"svgo": "^2.3.0",
 		"tcp-ping": "^0.1.1",
 		"ts-jest": "29.1.2",

tools/__tasks__/validate-head/sass.js

@@ -22,7 +22,7 @@ module.exports = {
                                 batchedFiles.map(filePath =>
                                     execa
                                         .shell(
-                                            `git show HEAD:${filePath} | sass-lint --no-exit --verbose --max-warnings 0 '${filePath}'`
+                                            `git show HEAD:${filePath} | yarn stylelint --max-warnings 0 '${filePath}'`
                                         )
                                         .catch(e => {
                                             errors.push(e);

tools/__tasks__/validate/sass.js

@@ -1,4 +1,4 @@
 module.exports = {
     description: 'Lint Sass',
-    task: 'sass-lint --no-exit --verbose --max-warnings 0',
+    task: 'stylelint **/*.scss',
 };