Chore: Replace Sass-lint with Stylelint (#40617)

* chore(sass): introduce stylelint

* chore(sass): introduce stylelint config that closely matches sass-lint config

* chore: remove sass-lint from codebase

* style(theme): disable stylelint string-quotes rule

* chore(sass): introduce stylelint-prettier-config to prevent config conflicts

* chore: delete sass-lint file

* style(sass): fix remaining stylelint errors

.gitignore

@@ -63,6 +63,7 @@ public/css/*.min.css
 !.vscode/launch.json
 .vs/
 .eslintcache
+.stylelintcache
 
 /data/*
 /bin/*

package.json

@@ -19,7 +19,7 @@
     "test:accessibility-report": "./scripts/generate-a11y-report.sh",
     "lint": "yarn run lint:ts && yarn run lint:sass",
     "lint:ts": "eslint . --ext .js,.tsx,.ts --cache",
-    "lint:sass": "yarn run sass-lint -c public/sass/.sass-lint.yml 'public/sass/**/*.scss, packages/**/*.scss' -v -i '**/node_modules/**/*.scss'",
+    "lint:sass": "yarn stylelint '{public/sass,packages}/**/*.scss' --cache",
     "test:ci": "mkdir -p reports/junit && JEST_JUNIT_OUTPUT_DIR=reports/junit jest --ci --reporters=default --reporters=jest-junit -w ${TEST_MAX_WORKERS:-100%}",
     "lint:fix": "yarn lint --fix",
     "packages:build": "lerna run clean && lerna run build --ignore @grafana-plugins/input-datasource",
@@ -207,10 +207,12 @@
     "rimraf": "3.0.1",
     "rxjs-spy": "8.0.0",
     "sass": "1.32.13",
-    "sass-lint": "1.12.1",
     "sass-loader": "12.1.0",
     "sinon": "8.1.1",
     "style-loader": "3.3.0",
+    "stylelint": "13.13.1",
+    "stylelint-config-prettier": "9.0.3",
+    "stylelint-config-sass-guidelines": "8.0.0",
     "terser-webpack-plugin": "5.2.4",
     "testing-library-selector": "^0.1.3",
     "ts-jest": "26.4.4",

packages/grafana-ui/src/themes/_variables.scss.tmpl.ts

@@ -95,8 +95,9 @@ $height-lg: ${theme.v1.height.lg};
 
 // Typography
 // -------------------------
-
+/* stylelint-disable-next-line string-quotes */
 $font-family-sans-serif: ${theme.v1.typography.fontFamily.sansSerif};
+/* stylelint-disable-next-line string-quotes */
 $font-family-monospace: ${theme.v1.typography.fontFamily.monospace};
 
 $font-size-base: ${theme.v1.typography.size.base} !default;

public/sass/.sass-lint.yml

@@ -1,100 +0,0 @@
-options:
-  formatter: stylish
-rules:
-  quotes:
-    - 0
-    -
-      style: 'single'
-
-  brace-style:
-    - 2
-    -
-      style: '1tbs'
-
-  space-before-brace:
-    - 2
-
-  no-duplicate-properties:
-    - 0
-    -
-      exclude:
-        - 'font-size'
-        - 'word-break'
-
-  empty-line-between-blocks:
-    - 0
-    -
-      allow-single-line-rulesets: 1
-
-  # Extends
-  extends-before-mixins: 0
-  extends-before-declarations: 0
-  placeholder-in-extend: 0
-  # Mixins
-  mixins-before-declarations: 0
-
-  # Line Spacing
-  one-declaration-per-line: 0
-  single-line-per-selector: 0
-
-  # Disallows
-  no-color-keywords: 0
-  no-color-literals: 0
-  no-css-comments: 0
-  no-debug: 0
-  no-empty-rulesets: 1
-  no-extends: 0
-  no-ids: 0
-  no-important: 0
-  no-invalid-hex: 0
-  no-mergeable-selectors: 0
-  no-misspelled-properties: 0
-  no-qualifying-elements: 0
-  no-trailing-zero: 0
-  no-transition-all: 0
-  no-url-protocols: 0
-  no-vendor-prefixes: 0
-  no-warn: 0
-  property-units: 0
-  pseudo-element: 0
-
-  # Nesting
-  force-attribute-nesting: 0
-  force-element-nesting: 0
-  force-pseudo-nesting: 0
-
-  # Name Formats
-  class-name-format: 0
-  function-name-format: 0
-  id-name-format: 0
-  mixin-name-format: 0
-  placeholder-name-format: 0
-  variable-name-format: 0
-
-  # Style Guide
-  bem-depth: 0
-  border-zero: 0
-  clean-import-paths: 0
-  empty-args: 0
-  hex-length: 0
-  hex-notation: 0
-  indentation: 0
-  leading-zero: 0
-  nesting-depth: 0
-  property-sort-order: 0
-  shorthand-values: 0
-  url-quotes: 0
-  variable-for-property: 0
-  zero-unit: 0
-
-  # Inner Spacing
-  space-after-comma: 0
-  space-before-colon: 0
-  space-after-colon: 0
-  space-before-bang: 0
-  space-after-bang: 0
-  space-between-parens: 0
-  space-around-operator: 0
-
-  # Final Items
-  final-newline: 0

public/sass/_grafana.scss

@@ -71,7 +71,7 @@
 @import 'components/query_part';
 @import 'components/jsontree';
 @import 'components/edit_sidemenu';
-@import 'components/row.scss';
+@import 'components/row';
 @import 'components/json_explorer';
 @import 'components/code_editor';
 @import 'components/dashboard_grid';
@@ -79,7 +79,7 @@
 @import 'components/page_header';
 @import 'components/dashboard_settings';
 @import 'components/toolbar';
-@import 'components/add_data_source.scss';
+@import 'components/add_data_source';
 @import 'components/page_loader';
 @import 'components/toggle_button_group';
 @import 'components/popover-box';
@@ -100,4 +100,4 @@
 @import 'pages/explore';
 @import 'pages/plugins';
 @import 'old_responsive';
-@import 'components/view_states.scss';
+@import 'components/view_states';

public/sass/_variables.generated.scss

@@ -98,8 +98,9 @@ $height-lg: 48;
 
 // Typography
 // -------------------------
-
+/* stylelint-disable-next-line string-quotes */
 $font-family-sans-serif: "Roboto", "Helvetica", "Arial", sans-serif;
+/* stylelint-disable-next-line string-quotes */
 $font-family-monospace: 'Roboto Mono', monospace;
 
 $font-size-base: 14px !default;

public/sass/base/_icons.scss

@@ -7,7 +7,6 @@
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
-  display: inline-block;
   vertical-align: middle;
 }
 

public/sass/components/_dropdown.scss

@@ -184,11 +184,11 @@
 // Open state for the dropdown
 // ---------------------------
 .open {
-  & > .dropdown-menu {
+  > .dropdown-menu {
     display: block;
   }
 
-  & > .dropdown > .dropdown-menu {
+  > .dropdown > .dropdown-menu {
     // Panel menu. TODO: See if we can merge this with above
     display: block;
   }

public/sass/components/_gf-form.scss

@@ -304,7 +304,7 @@ $input-border: 1px solid $input-border-color;
     top: 50%;
     margin-top: -7px;
 
-    & + .gf-form-input {
+    + .gf-form-input {
       position: relative;
       z-index: 2;
       padding-left: $space-xl;

public/sass/components/_jsontree.scss

@@ -12,7 +12,7 @@ json-tree {
     }
 
     &::before,
-    & > .json-tree-key {
+    > .json-tree-key {
       cursor: pointer;
     }
   }

public/sass/components/_slate_editor.scss

@@ -13,7 +13,6 @@
   padding: 6px 8px;
   min-height: $input-height;
   width: 100%;
-  line-height: $line-height-base;
   color: $text-color;
   background-color: $input-bg;
   background-image: none;

public/sass/pages/_history.scss

@@ -57,7 +57,7 @@
 .diff-json-added {
   color: $diff-json-changed-fg;
 
-  & .diff-line-number {
+  .diff-line-number {
     color: $diff-json-changed-num;
   }
 }
@@ -108,7 +108,7 @@
   padding: 10px 15px;
   margin: $space-md 0;
 
-  & .diff-group {
+  .diff-group {
     padding: 0 5px;
   }
 }
@@ -128,7 +128,7 @@
 .diff-list {
   padding-left: 40px;
 
-  & .diff-list {
+  .diff-list {
     padding-left: 0;
   }
 }
@@ -137,7 +137,7 @@
   color: $gray-2;
   line-height: 2.5;
 
-  & > div {
+  > div {
     display: inline;
   }
 }

public/sass/utils/_hacks.scss

@@ -1,5 +1,4 @@
 // <3: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
-// sass-lint:disable no-empty-rulesets
 @keyframes onAutoFillStart {
   from {
     /**/

stylelint.config.js

@@ -0,0 +1,45 @@
+module.exports = {
+  extends: ['stylelint-config-sass-guidelines', 'stylelint-config-prettier'],
+  ignoreFiles: ['**/node_modules/**/*.scss'],
+  rules: {
+    'at-rule-no-vendor-prefix': null,
+    'color-hex-case': null,
+    'color-hex-length': null,
+    'color-named': null,
+    'declaration-block-no-duplicate-properties': [
+      true,
+      {
+        ignore: 'consecutive-duplicates-with-different-values',
+        ignoreProperties: ['font-size', 'word-break'],
+      },
+    ],
+    // Disable equivalent "borderZero" sass-lint rule
+    'declaration-property-value-disallowed-list': {
+      border: [0],
+      'border-top': [0],
+      'border-right': [0],
+      'border-bottom': [0],
+      'border-left': [0],
+    },
+    'function-comma-space-after': null,
+    'function-url-quotes': null,
+    'length-zero-no-unit': null,
+    'max-nesting-depth': null,
+    'number-no-trailing-zeros': null,
+    'order/order': null,
+    'order/properties-alphabetical-order': null,
+    'property-no-vendor-prefix': null,
+    'rule-empty-line-before': null,
+    'scss/at-function-pattern': null,
+    'scss/at-mixin-pattern': null,
+    'scss/dollar-variable-pattern': null,
+    'scss/at-extend-no-missing-placeholder': 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,
+    'value-no-vendor-prefix': null,
+  },
+};