Replace deprecated sass-lint for stylelint (#12774)

* chore(deps): install stylelint for SCSS

Signed-off-by: Mike Fiedler <[email protected]>

* lint: add stylelint configuration

Trying to match the existing `.sass-lint.yml` rules as much as we can.

Signed-off-by: Mike Fiedler <[email protected]>

* lint: address whitespace

Fixed based on the stylelint rules.

There's 65 remaining fixes if we choose to change enable:
- at-rule-empty-line-before
- declaration-empty-line-before

Signed-off-by: Mike Fiedler <[email protected]>

* lint: address pseudo selectors

With `selector-pseudo-element-colon-notation` enabled, we double-colon
pseudo selectors for visual specificity.

Signed-off-by: Mike Fiedler <[email protected]>

* lint: rename disables

Signed-off-by: Mike Fiedler <[email protected]>

* lint: handle shorthand properties

Refs: https://stylelint.io/user-guide/rules/shorthand-property-no-redundant-values/

Signed-off-by: Mike Fiedler <[email protected]>

* lint: simplify complex .not notation

Refs: https://stylelint.io/user-guide/rules/selector-not-notation/

Signed-off-by: Mike Fiedler <[email protected]>

* lint: handle color lints

Solves:

- alpha-value-notation: 5
- color-function-notation: 5
- color-hex-case: 3
- color-hex-length: 1

Signed-off-by: Mike Fiedler <[email protected]>

* lint: handle various one-off cases

- declaration-block-trailing-semicolon: 2
- font-family-name-quotes: 1
- length-zero-no-unit: 1
- number-leading-zero: 1
- property-no-vendor-prefix: 1
- value-keyword-case: 1

Signed-off-by: Mike Fiedler <[email protected]>

* lint: remove duplicate selectors

Introduced in #3397

Raises lint error for `no-duplicate-selectors`.

- Remove duplication
- Disable lint rule for the Pygments block, since it helps us visually
  organize our thoughts.

Signed-off-by: Mike Fiedler <[email protected]>

* refactor: replace my janky regex with plugin

Instead of trying to decipher in the future how I came up with the
selector pattern, use a plugin that implements the right selector
syntaxes.

We disable the inherited `selector-class-pattern` rule from
`stylelint-config-standard`.

Refs: stylelint/stylelint-config-standard#209

Signed-off-by: Mike Fiedler <[email protected]>

* test: run stylelint instead of sass-lint

Signed-off-by: Mike Fiedler <[email protected]>

* chore: remove deprecated sass-lint

Signed-off-by: Mike Fiedler <[email protected]>

Signed-off-by: Mike Fiedler <[email protected]>

Author: miketheman

.dockerignore

@@ -1,4 +1,5 @@
 .git/*
+.stylelintcache
 node_modules
 dev/*
 **/*.pyc

.gitignore

@@ -35,3 +35,4 @@ tags
 *.sw*
 
 .DS_Store
+.stylelintcache

.sass-lint.yml

@@ -0,0 +1,54 @@
+{
+  "extends": [
+    "stylelint-config-standard-scss"
+  ],
+  "plugins": [
+    "stylelint-selector-bem-pattern"
+  ],
+  "ignoreFiles": [
+    "warehouse/static/sass/tools/bourbon/**/*",
+    "warehouse/static/sass/tools/neat/**/*",
+    "warehouse/static/sass/resets/_boxsizing.scss",
+    "warehouse/static/sass/resets/_reset.scss"
+  ],
+  "reportDescriptionlessDisables": true,
+  "reportInvalidScopeDisables": true,
+  "reportNeedlessDisables": true,
+  "rules": {
+    "at-rule-empty-line-before": null,
+    "comment-empty-line-before": [
+      "always",
+      {
+        "ignoreComments": [
+          "/rtl/"
+        ]
+      }
+    ],
+    "comment-whitespace-inside": null,
+    "declaration-empty-line-before": null,
+    "font-family-no-missing-generic-family-keyword": [
+      true,
+      {
+        "ignoreFontFamilies": [
+          "/^Font Awesome.*$/"
+        ]
+      }
+    ],
+    "max-empty-lines": 2,
+    "max-line-length": [
+      120,
+      {
+        "ignore": [
+          "comments"
+        ]
+      }
+    ],
+    "no-descending-specificity": null,
+    "plugin/selector-bem-pattern": {
+      "preset": "bem"
+    },
+    "selector-class-pattern": null,
+    "scss/dollar-variable-colon-space-after": "at-least-one-space",
+    "scss/no-global-function-names": null
+  }
+}

.stylelintrc.json

@@ -10,4 +10,4 @@ export LANG="${ENCODING:-en_US.UTF-8}"
 
 # Actually run our tests.
 ./node_modules/.bin/eslint 'warehouse/static/js/**' 'tests/frontend/**' --ignore-pattern 'warehouse/static/js/vendor/**'
-./node_modules/.bin/sass-lint --verbose
+npm run stylelint

bin/static_lint

@@ -150,7 +150,7 @@ services:
       - ./warehouse:/opt/warehouse/src/warehouse:z
       - ./webpack.config.js:/opt/warehouse/src/webpack.config.js:z
       - ./.babelrc:/opt/warehouse/src/.babelrc:z
-      - ./.sass-lint.yml:/opt/warehouse/src/.sass-lint.yml:z
+      - ./.stylelintrc.json:/opt/warehouse/src/.stylelintrc.json:z
       - ./tests/frontend:/opt/warehouse/src/tests/frontend:z
       - ./bin:/opt/warehouse/src/bin:z