[dev] Replace sass-lint with stylelint (#86177)

Co-authored-by: Tyler Smalley <[email protected]>
Co-authored-by: Kibana Machine <[email protected]>
Co-authored-by: Dave Snider <[email protected]>

.ci/teamcity/checks/sasslint.sh → .ci/teamcity/checks/stylelint.sh

@@ -4,5 +4,5 @@ set -euo pipefail
 
 source "$(dirname "${0}")/../util.sh"
 
-checks-reporter-with-killswitch "Lint: sasslint" \
-  node scripts/sasslint
+checks-reporter-with-killswitch "Lint: stylelint" \
+  node scripts/stylelint

.prettierignore

@@ -0,0 +1,2 @@
+# use stylelint
+*.scss

.stylelintignore

@@ -0,0 +1,3 @@
+x-pack/plugins/canvas/shareable_runtime/**/*.s+(a|c)ss
+build
+target

.stylelintrc

@@ -0,0 +1,84 @@
+plugins:
+  - stylelint-scss
+rules:
+  color-no-invalid-hex: true
+  function-calc-no-invalid: true
+  string-no-newline: true
+  unit-no-unknown: true
+  property-no-unknown:
+    - true
+    # Used in css modules
+    - ignoreProperties:
+      - composes
+  block-no-empty: true
+  selector-pseudo-class-no-unknown:
+    - true
+    # Used in css modules
+    - ignorePseudoClasses:
+      - local
+      - global
+  selector-pseudo-element-no-unknown: true
+  media-feature-name-no-unknown: true
+  at-rule-no-unknown:
+    - true
+    # Sass related mixins
+    - ignoreAtRules:
+      - include
+      - mixin
+      - if
+      - else
+      - each
+      - extend
+      - function
+      - return
+      - for
+  comment-no-empty: true
+  no-duplicate-at-import-rules: true
+  no-duplicate-selectors: true
+  no-extra-semicolons: true
+  alpha-value-notation: number
+  color-named: never
+  length-zero-no-unit: true
+  no-eol-whitespace: true
+  max-empty-lines: 1
+  # no-descending-specificity: true
+  number-leading-zero: never
+  color-hex-case: upper
+  string-quotes: single
+  indentation: 2
+  declaration-block-no-duplicate-properties:
+    - true
+    # We use some rare duplicate property values for browser variance
+    - ignoreProperties:
+      - font-size
+      - word-break
+      - composes
+      - filter
+      - background
+      - width
+      - transition
+      - display
+
+  # ($var / 2) rather than ($var/2)
+  function-calc-no-unspaced-operator: true
+
+  # something { not something{
+  block-opening-brace-space-before: always
+
+  # TODO: # Allows input[type=search]
+  selector-no-qualifying-type:
+    - true
+    - ignore:
+      - attribute
+
+  # Put a line-break between sections of CSS, but allow quicky one-liners for legibility
+  block-closing-brace-newline-after:
+    - always-multi-line
+    - ignoreAtRules:
+        - if
+        - else
+
+  # camelCase mixin, function, and variable names
+  scss/at-mixin-pattern: "^[a-z][a-zA-Z0-9]+$"
+  scss/at-function-pattern: "^[a-z][a-zA-Z0-9]+$"
+  scss/dollar-variable-pattern: "^[a-z][a-zA-Z0-9]+$"

.teamcity/src/builds/Lint.kt

@@ -6,18 +6,18 @@ import kibanaAgent
 
 object Lint : BuildType({
   name = "Lint"
-  description = "Executes Linting, such as eslint and sasslint"
+  description = "Executes Linting, such as eslint and stylelint"
 
   kibanaAgent(2)
 
   steps {
     script {
-      name = "Sasslint"
+      name = "Stylelint"
 
       scriptContent =
         """
           #!/bin/bash
-          ./.ci/teamcity/checks/sasslint.sh
+          ./.ci/teamcity/checks/stylelint.sh
         """.trimIndent()
     }
 

package.json

@@ -51,9 +51,9 @@
     "start": "node scripts/kibana --dev",
     "debug": "node --nolazy --inspect scripts/kibana --dev",
     "debug-break": "node --nolazy --inspect-brk scripts/kibana --dev",
-    "lint": "yarn run lint:es && yarn run lint:sass",
+    "lint": "yarn run lint:es && yarn run lint:style",
     "lint:es": "node scripts/eslint",
-    "lint:sass": "node scripts/sasslint",
+    "lint:style": "node scripts/stylelint",
     "makelogs": "node scripts/makelogs",
     "kbn:watch": "node scripts/kibana --dev --logging.json=false",
     "build:types": "rm -rf ./target/types && tsc --p tsconfig.types.json",
@@ -793,7 +793,6 @@
     "resize-observer-polyfill": "^1.5.0",
     "resolve": "^1.7.1",
     "rxjs-marbles": "^5.0.6",
-    "sass-lint": "^1.12.1",
     "sass-loader": "^8.0.2",
     "sass-resources-loader": "^2.0.1",
     "selenium-webdriver": "^4.0.0-alpha.7",
@@ -805,6 +804,8 @@
     "string-replace-loader": "^2.2.0",
     "strong-log-transformer": "^2.1.0",
     "style-loader": "^1.1.3",
+    "stylelint": "13.8.0",
+    "stylelint-scss": "^3.18.0",
     "superagent": "^3.8.2",
     "supertest": "^3.1.0",
     "supertest-as-promised": "^4.0.2",

packages/kbn-optimizer/src/__fixtures__/mock_repo/plugins/bar/public/index.scss

@@ -1,3 +1,4 @@
 body {
+  /* stylelint-disable-next-line color-named */
   color: green;
 }

packages/kbn-optimizer/src/__fixtures__/mock_repo/plugins/bar/public/legacy/_other_styles.scss

@@ -1,3 +1,4 @@
 p {
+  /* stylelint-disable-next-line color-named */
   background-color: rebeccapurple;
 }

packages/kbn-optimizer/src/__fixtures__/mock_repo/plugins/bar/public/legacy/styles.scss

@@ -1,4 +1,4 @@
-@import "./other_styles.scss";
+@import './other_styles.scss';
 
 body {
   width: $globalStyleConstant;