[7.x] [dev] Replace sass-lint with stylelint (#86177) (#88498)

Co-authored-by: Tyler Smalley <tylersmalley@me.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Dave Snider <dave.snider@gmail.com>

Co-authored-by: Tyler Smalley <tylersmalley@me.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Dave Snider <dave.snider@gmail.com>

.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

.sass-lint.yml

@@ -1,96 +0,0 @@
-files:
-  include:
-    - 'src/legacy/core_plugins/metrics/**/*.s+(a|c)ss'
-    - 'src/plugins/index_pattern_management/**/*.s+(a|c)ss'
-    - 'src/plugins/timelion/**/*.s+(a|c)ss'
-    - 'src/plugins/vis_type_vislib/**/*.s+(a|c)ss'
-    - 'src/plugins/vis_type_vega/**/*.s+(a|c)ss'
-    - 'src/plugins/vis_type_xy/**/*.s+(a|c)ss'
-    - 'src/plugins/visualizations/public/wizard/**/*.s+(a|c)ss'
-    - 'x-pack/plugins/canvas/**/*.s+(a|c)ss'
-    - 'x-pack/plugins/triggers_actions_ui/**/*.s+(a|c)ss'
-    - 'x-pack/plugins/lens/**/*.s+(a|c)ss'
-    - 'x-pack/plugins/cross_cluster_replication/**/*.s+(a|c)ss'
-    - 'x-pack/legacy/plugins/maps/**/*.s+(a|c)ss'
-    - 'x-pack/plugins/maps/**/*.s+(a|c)ss'
-    - 'x-pack/plugins/spaces/**/*.s+(a|c)ss'
-    - 'x-pack/plugins/security/**/*.s+(a|c)ss'
-    - 'x-pack/plugins/monitoring/**/*.s+(a|c)ss'
-  ignore:
-    - 'x-pack/plugins/canvas/shareable_runtime/**/*.s+(a|c)ss'
-rules:
-  quotes:
-    - 2
-    -
-      style: 'single'
-  # } else { style on one line, like our JS
-  brace-style:
-    - 2
-    -
-      style: '1tbs'
-  variable-name-format:
-    - 2
-    -
-      convention: 'camelcase'
-  # Needs regex, right now we ignore
-  class-name-format: 0
-  # Order how you please
-  property-sort-order: 0
-  hex-notation:
-    - 2
-    -
-      style: 'uppercase'
-  mixin-name-format:
-    - 2
-    -
-      allow-leading-underscore: false
-      convention: 'camelcase'
-  # Use none instead of 0 for no border
-  border-zero:
-    - 2
-    - convention: 'none'
-  force-element-nesting: 0
-  # something { not something{
-  space-before-brace:
-    - 2
-  force-pseudo-nesting: 0
-  # 2 spaces for indentation
-  indentation: 2
-  function-name-format:
-    - 2
-    -
-      allow-leading-underscore: false
-      convention: 'camelcase'
-  # This removes the need for ::hover
-  pseudo-element: 0
-  # ($var / 2) rather than ($var/2)
-  space-around-operator: 2
-  # We minify css, so this doesn't apply
-  no-css-comments: 0
-  # We use _ (underscores) for import path that don't directly compile
-  clean-import-paths: 0
-  # Allows input[type=search]
-  force-attribute-nesting: 0
-  no-qualifying-elements:
-    - 2
-    -
-      # Allows input[type=search]
-      allow-element-with-attribute: 1
-  # Files can end without a newline
-  final-newline: 0
-  # We use some rare duplicate property values for browser variance
-  no-duplicate-properties:
-    - 2
-    -
-      exclude:
-        - 'font-size'
-        - 'word-break'
-  # Put a line-break between sections of CSS, but allow quicky one-liners for legibility
-  empty-line-between-blocks:
-    - 2
-    -
-      allow-single-line-rulesets: 1
-  # Warns are nice for deprecations and development
-  no-warn: 0
-  # Transition all is useful in certain situations and there's no recent info to suggest slowdown
-  no-transition-all: 0

.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",
@@ -789,7 +789,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",
@@ -801,6 +800,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;

scripts/stylelint.js

@@ -18,4 +18,4 @@
  */
 
 require('../src/setup_node_env');
-require('../src/dev/run_sasslint');
+require('../src/dev/run_stylelint');

src/core/public/core_app/styles/_mixins.scss

@@ -1,4 +1,4 @@
-@mixin flex-parent($grow: 1, $shrink: 1, $basis: auto, $direction: column) {
+@mixin flexParent($grow: 1, $shrink: 1, $basis: auto, $direction: column) {
   flex: $grow $shrink $basis;
   display: flex;
   flex-direction: $direction;
@@ -40,7 +40,7 @@
     height: $size;
     width: 100%;
   } @else {
-    @warn("Direction unknown for kbnResizer");
+    @warn('Direction unknown for kbnResizer');
   }
 
   &:hover {
@@ -54,7 +54,7 @@
   }
 
   &::after {
-    content: "";
+    content: '';
     position: absolute;
     top: 0;
     left: 0;

src/dev/run_precommit_hook.js

@@ -19,7 +19,7 @@
 
 import { run, combineErrors, createFlagError } from '@kbn/dev-utils';
 import * as Eslint from './eslint';
-import * as Sasslint from './sasslint';
+import * as Stylelint from './stylelint';
 import { getFilesForCommit, checkFileCasing } from './precommit_hook';
 
 run(
@@ -47,7 +47,7 @@ run(
       errors.push(error);
     }
 
-    for (const Linter of [Eslint, Sasslint]) {
+    for (const Linter of [Eslint, Stylelint]) {
       const filesToLint = Linter.pickFilesToLint(log, files);
       if (filesToLint.length > 0) {
         try {

src/dev/run_stylelint.js

@@ -18,11 +18,19 @@
  */
 
 import { resolve } from 'path';
+import { buildCLI } from 'stylelint/lib/cli';
 
-process.argv.push('--no-exit'); // don't exit after encountering a rule error
-process.argv.push('--verbose'); // print results
+const options = buildCLI(process.argv.slice(2));
+
+const stylelintConfigPath = resolve(__dirname, '..', '..', '.stylelintrc');
+const stylelintIgnorePath = resolve(__dirname, '..', '..', '.stylelintignore');
+
+if (!options.input.length) {
+  process.argv.push('**/*.s+(a|c)ss');
+}
 process.argv.push('--max-warnings', '0'); // return nonzero exit code on any warnings
-process.argv.push('--config', resolve(__dirname, '..', '..', '.sass-lint.yml')); // configuration file
+process.argv.push('--config', stylelintConfigPath); // configuration file
+process.argv.push('--ignore-path', stylelintIgnorePath); // ignore file
 
 // common-js is required so that logic before this executes before loading sass-lint
-require('sass-lint/bin/sass-lint');
+require('stylelint/bin/stylelint');

src/dev/stylelint/lint_files.js

@@ -17,10 +17,16 @@
  * under the License.
  */
 
-import sassLint from 'sass-lint';
+import stylelint from 'stylelint';
 import path from 'path';
+import { safeLoad } from 'js-yaml';
+import fs from 'fs';
 import { createFailError } from '@kbn/dev-utils';
 
+// load the include globs from .stylelintrc and convert them to regular expressions for filtering files
+const stylelintPath = path.resolve(__dirname, '..', '..', '..', '.stylelintrc');
+const styleLintConfig = safeLoad(fs.readFileSync(stylelintPath));
+
 /**
  * Lints a list of files with eslint. eslint reports are written to the log
  * and a FailError is thrown when linting errors occur.
@@ -29,28 +35,21 @@ import { createFailError } from '@kbn/dev-utils';
  * @param  {Array<File>} files
  * @return {undefined}
  */
-export function lintFiles(log, files) {
+export async function lintFiles(log, files) {
   const paths = files.map((file) => file.getRelativePath());
 
-  const report = sassLint.lintFiles(
-    paths.join(', '),
-    {},
-    path.resolve(__dirname, '..', '..', '..', '.sass-lint.yml')
-  );
+  const options = {
+    files: paths,
+    config: styleLintConfig,
+    formatter: 'string',
+    ignorePath: path.resolve(__dirname, '..', '..', '..', '.stylelintignore'),
+  };
 
-  const failTypes = Object.keys(
-    report.reduce((failTypes, reportEntry) => {
-      if (reportEntry.warningCount > 0) failTypes.warning = true;
-      if (reportEntry.errorCount > 0) failTypes.errors = true;
-      return failTypes;
-    }, {})
-  );
-
-  if (!failTypes.length) {
-    log.success('[sasslint] %d files linted successfully', files.length);
-    return;
+  const report = await stylelint.lint(options);
+  if (report.errored) {
+    log.error(report.output);
+    throw createFailError('[stylelint] errors');
+  } else {
+    log.success('[stylelint] %d files linted successfully', files.length);
   }
-
-  log.error(sassLint.format(report));
-  throw createFailError(`[sasslint] ${failTypes.join(' & ')}`);
 }

src/dev/stylelint/pick_files_to_lint.js

@@ -17,17 +17,9 @@
  * under the License.
  */
 
-import fs from 'fs';
-import { safeLoad } from 'js-yaml';
 import { makeRe } from 'minimatch';
-import path from 'path';
 
-// load the include globs from .sass-lint.yml and convert them to regular expressions for filtering files
-const sassLintPath = path.resolve(__dirname, '..', '..', '..', '.sass-lint.yml');
-const sassLintConfig = safeLoad(fs.readFileSync(sassLintPath));
-const {
-  files: { include: includeGlobs },
-} = sassLintConfig;
+const includeGlobs = ['**/*.s+(a|c)ss'];
 const includeRegex = includeGlobs.map((glob) => makeRe(glob));
 
 function matchesInclude(file) {

src/plugins/advanced_settings/public/management_app/_advanced_settings.scss

@@ -17,7 +17,7 @@
  * under the License.
  */
 
- .mgtAdvancedSettings__field {
+.mgtAdvancedSettings__field {
   + * {
     margin-top: $euiSize;
   }
@@ -29,11 +29,11 @@
 
   &--unsaved .mgtAdvancedSettings__fieldTitle {
     // Simulates a left side border without shifting content
-    box-shadow: -$euiSizeXS 0px $euiColorWarning;
+    box-shadow: -$euiSizeXS 0 $euiColorWarning;
   }
   &--invalid .mgtAdvancedSettings__fieldTitle {
     // Simulates a left side border without shifting content
-    box-shadow: -$euiSizeXS 0px $euiColorDanger;
+    box-shadow: -$euiSizeXS 0 $euiColorDanger;
   }
 
   @include internetExplorerOnly {
@@ -57,7 +57,7 @@
 
 .mgtAdvancedSettingsForm__unsavedCountMessage {
   // Simulates a left side border without shifting content
-  box-shadow: -$euiSizeXS 0px $euiColorWarning;
+  box-shadow: -$euiSizeXS 0 $euiColorWarning;
   padding-left: $euiSizeS;
 }
 

src/plugins/charts/public/static/components/legend_toggle.scss

@@ -17,4 +17,3 @@
     top: 0;
   }
 }
-

src/plugins/dashboard/public/application/embeddable/grid/_dashboard_grid.scss

@@ -31,7 +31,7 @@
  * 1. Need to override the react grid layout height when a single panel is expanded. Important is required because
  * otherwise the height is set inline.
  */
- .dshLayout-isMaximizedPanel {
+.dshLayout-isMaximizedPanel {
   height: 100% !important; /* 1. */
   width: 100%;
   position: absolute !important; /* 1 */
@@ -66,7 +66,7 @@
   /**
    * Disable transitions from the library on each grid element.
    */
-   transition: none;
+  transition: none;
   /**
     * Copy over and overwrite the fill color with EUI color mixin (for theming)
     */

src/plugins/dashboard/public/application/embeddable/panel/_dashboard_panel.scss

@@ -8,7 +8,7 @@
 
 // Adjust borders/etc... for non-spaced out and expanded panels
 .dshLayout-withoutMargins,
-.dshDashboardGrid__item--expanded { 
+.dshDashboardGrid__item--expanded {
   .embPanel {
     box-shadow: none;
     border-radius: 0;

src/plugins/dashboard/public/application/top_nav/panel_toolbar/panel_toolbar.scss

@@ -6,7 +6,7 @@
 .panelToolbarButton {
   line-height: $euiButtonHeight; // Keeps alignment of text and chart icon
   background-color: $euiColorEmptyShade;
-  
+
   // Lighten the border color for all states
   border-color: $euiBorderColor !important; // sass-lint:disable-line no-important
 }

src/plugins/data/public/ui/filter_bar/_global_filter_group.scss

@@ -1,6 +1,6 @@
 // SASSTODO: Probably not the right file for this selector, but temporary until the files get re-organized
 .globalQueryBar {
-  padding: 0px $euiSizeS $euiSizeS $euiSizeS;
+  padding: 0 $euiSizeS $euiSizeS $euiSizeS;
 }
 
 .globalQueryBar:first-child {

src/plugins/data/public/ui/filter_bar/_global_filter_item.scss

@@ -26,7 +26,7 @@
 
 .globalFilterItem-isDisabled {
   color: $euiColorDarkShade;
-  background-color: transparentize($euiColorLightShade, 0.5);
+  background-color: transparentize($euiColorLightShade, .5);
   text-decoration: line-through;
   font-weight: $euiFontWeightRegular;
   font-style: italic;

src/plugins/data/public/ui/shard_failure_modal/_shard_failure_modal.scss

@@ -1,41 +1,41 @@
 // set width and height to fixed values to prevent resizing when you switch tabs
 .shardFailureModal {
-     min-height: 75vh;
-     width: 768px;
+  min-height: 75vh;
+  width: 768px;
 }
 
 .shardFailureModal__desc {
-    // set for IE11, since without it depending on the content the width of the list 
-    // could be much higher than the available screenspace
-    max-width: 686px;
+  // set for IE11, since without it depending on the content the width of the list
+  // could be much higher than the available screenspace
+  max-width: 686px;
 }
 
 .shardFailureModal__descTitle {
-    width: 20% !important;
-    margin-top: $euiSizeS;
+  width: 20% !important;
+  margin-top: $euiSizeS;
 }
 
 .shardFailureModal__descValue {
-    width: 80% !important;
-    margin-top: $euiSizeS;
+  width: 80% !important;
+  margin-top: $euiSizeS;
 }
 .shardFailureModal__keyValueTitle {
-    padding-right: $euiSizeS;
+  padding-right: $euiSizeS;
 }
 
 @include euiBreakpoint('xs','s') {
-    .shardFailureModal__keyValueTitle { 
-        display: block;
-        width: 100%;
-    }
-   
-    .shardFailureModal__descTitle {
-        display: block;
-        width: 100% !important;
-    }
-    
-    .shardFailureModal__descValue {
-        display: block;
-        width: 100% !important;
-    }
+  .shardFailureModal__keyValueTitle {
+    display: block;
+    width: 100%;
+  }
+
+  .shardFailureModal__descTitle {
+    display: block;
+    width: 100% !important;
+  }
+
+  .shardFailureModal__descValue {
+    display: block;
+    width: 100% !important;
+  }
 }

src/plugins/discover/public/application/angular/doc_table/_doc_table.scss

@@ -1,6 +1,7 @@
 /**
  * 1. Stack content vertically so the table can scroll when its constrained by a fixed container height.
  */
+// stylelint-disable selector-no-qualifying-type
 doc-table {
   @include euiScrollBar;
   overflow: auto;
@@ -18,12 +19,12 @@ doc-table {
     left: 0;
     right: 0;
     z-index: $euiZLevel1;
-    opacity: 0.5;
+    opacity: .5;
   }
 }
 
 .kbnDocTable__container.loading {
-  opacity: 0.5;
+  opacity: .5;
 }
 
 .kbnDocTable {
@@ -58,7 +59,7 @@ doc-table {
     }
 
     dt {
-      background-color: transparentize(shade($euiColorPrimary, 20%), 0.9);
+      background-color: transparentize(shade($euiColorPrimary, 20%), .9);
       color: $euiTextColor;
       padding: ($euiSizeXS / 2) $euiSizeXS;
       margin-right: $euiSizeXS;

src/plugins/discover/public/application/angular/doc_table/components/table_row/_details.scss

@@ -22,4 +22,3 @@
     border-top: none !important;
   }
 }
-

src/plugins/discover/public/application/angular/doc_table/components/table_row/_open.scss

@@ -4,7 +4,7 @@
  *    re-render which is SLOW.
  */
 
- .kbnDocTableOpen__button {
+.kbnDocTableOpen__button {
   appearance: none;
   background-color: transparent;
   padding: 0;

src/plugins/discover/public/application/components/discover.scss

@@ -70,7 +70,7 @@ discover-app {
 
   // SASSTODO: the visualizing component should have an option or a modifier
   .series > rect {
-    fill-opacity: 0.5;
+    fill-opacity: .5;
     stroke-width: 1;
   }
 }

src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss

@@ -13,7 +13,7 @@
     white-space: pre-wrap;
     color: $euiColorFullShade;
     vertical-align: top;
-    padding-top: $euiSizeXS * 0.5;
+    padding-top: $euiSizeXS * .5;
   }
   .kbnDocViewer__field {
     padding-top: $euiSizeS;

src/plugins/embeddable/public/lib/panel/_embeddable_panel.scss

@@ -94,7 +94,7 @@
   */
 
 .embPanel__optionsMenuButton {
-  background-color: transparentize($euiColorDarkestShade, 0.9);
+  background-color: transparentize($euiColorDarkestShade, .9);
   border-bottom-right-radius: 0;
   border-top-left-radius: 0;
 
@@ -156,7 +156,6 @@
   justify-content: center;
   flex-direction: column;
   overflow: auto;
-  text-align: center;
   padding: $euiSizeS;
 }
 
@@ -169,5 +168,6 @@
 .embPanel__content[data-loading] {
   pointer-events: none;
   filter: grayscale(100%);
+  /* stylelint-disable-next-line color-named */
   filter: gray;
 }

src/plugins/es_ui_shared/__packages_do_not_import__/ace/_ui_ace_keyboard_mode.scss

@@ -4,7 +4,7 @@
   bottom: 0;
   right: 0;
   left: 0;
-  background: transparentize($euiColorEmptyShade, 0.3);
+  background: transparentize($euiColorEmptyShade, .3);
   display: flex;
   flex-direction: column;
   justify-content: center;

src/plugins/home/public/application/components/_solutions_section.scss

@@ -66,11 +66,6 @@
   overflow: hidden;
 }
 
-.homSolutionPanel__header {
-  color: $euiColorEmptyShade;
-  padding: $euiSize;
-}
-
 .homSolutionPanel__icon {
   background-color: $euiColorEmptyShade !important;
   box-shadow: none !important;
@@ -93,6 +88,8 @@
 }
 
 .homSolutionPanel__header {
+  color: $euiColorEmptyShade;
+  padding: $euiSize;
   background-color: $euiColorPrimary;
   background-image: url('data:image/png;base64,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'),
     url('data:image/png;base64,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');

src/plugins/kibana_legacy/public/font_awesome/font_awesome.scss

@@ -2,21 +2,21 @@
   font-family: 'FontAwesome';
   src: url('~font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
   src: url('~font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
-  url('~font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
-  url('~font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
-  url('~font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
-  url('~font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
+    url('~font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
+    url('~font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
+    url('~font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
+    url('~font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 
-@import "font-awesome/scss/variables";
-@import "font-awesome/scss/core";
-@import "font-awesome/scss/icons";
+@import 'font-awesome/scss/variables';
+@import 'font-awesome/scss/core';
+@import 'font-awesome/scss/icons';
 
 // new file icon
 .#{$fa-css-prefix}-file-new-o:before { content: $fa-var-file-o; }
-.#{$fa-css-prefix}-file-new-o:after { content: $fa-var-plus; position: relative; margin-left: -1.0em; font-size: 0.5em; }
+.#{$fa-css-prefix}-file-new-o:after { content: $fa-var-plus; position: relative; margin-left: -1.0em; font-size: .5em; }
 
 // alias for alert types - allows class="fa fa-{{alertType}}"
 .fa-success:before { content: $fa-var-check; }

src/plugins/kibana_legacy/public/paginate/_paginate.scss

@@ -36,7 +36,7 @@ paginate {
           text-decoration: underline;
         }
 
-        &.active a {
+        &.active a { // stylelint-disable-line selector-no-qualifying-type
           text-decoration: none !important;
           font-weight: $euiFontWeightBold;
           color: $euiColorDarkShade;
@@ -54,4 +54,3 @@ paginate {
     }
   }
 }
-

src/plugins/kibana_react/public/markdown/_markdown.scss

@@ -18,7 +18,6 @@ $kbnDefaultFontSize: 14px;
 }
 
 .kbnMarkdown__body {
-
   // Font size variables
   $kbnMarkdownFontSizeS: canvasToEm(12px);
   $kbnMarkdownFontSize: canvasToEm(14px);
@@ -34,14 +33,14 @@ $kbnDefaultFontSize: 14px;
   $kbnMarkdownSizeXXS: canvasToEm(4px);
 
   // Grayscale variables
-  $kbnMarkdownAlphaLightestShade: rgba($euiColorFullShade,.05);
-  $kbnMarkdownAlphaLightShade: rgba($euiColorFullShade,.15);
-  $kbnMarkdownAlphaDarkShade: rgba($euiColorFullShade,.65);
+  $kbnMarkdownAlphaLightestShade: rgba($euiColorFullShade, .05);
+  $kbnMarkdownAlphaLightShade: rgba($euiColorFullShade, .15);
+  $kbnMarkdownAlphaDarkShade: rgba($euiColorFullShade, .65);
 
   // Reverse grayscale for opposite of theme
-  $kbnMarkdownAlphaLightestShadeReversed: rgba($euiColorEmptyShade,.05);
-  $kbnMarkdownAlphaLightShadeReversed: rgba($euiColorEmptyShade,.15);
-  $kbnMarkdownAlphaDarkShadeReversed: rgba($euiColorEmptyShade,.65);
+  $kbnMarkdownAlphaLightestShadeReversed: rgba($euiColorEmptyShade, .05);
+  $kbnMarkdownAlphaLightShadeReversed: rgba($euiColorEmptyShade, .15);
+  $kbnMarkdownAlphaDarkShadeReversed: rgba($euiColorEmptyShade, .65);
 
   &--reversed {
     color: $euiColorLightestShade;
@@ -171,19 +170,19 @@ $kbnDefaultFontSize: 14px;
 
   hr::before {
     display: table;
-    content: "";
+    content: '';
   }
 
   hr::after {
     display: table;
     clear: both;
-    content: "";
+    content: '';
   }
 
   // 6. Lists
   ul,
   ol {
-    padding-left: 0;
+    padding-left: $kbnMarkdownSizeL;
     margin-top: 0;
     margin-bottom: $kbnMarkdownSize;
   }
@@ -215,11 +214,6 @@ $kbnDefaultFontSize: 14px;
     margin-left: 0;
   }
 
-  ul,
-  ol {
-    padding-left: $kbnMarkdownSizeL;
-  }
-
   ul ul,
   ul ol,
   ol ol,
@@ -297,8 +291,8 @@ $kbnDefaultFontSize: 14px;
 
   code::before,
   code::after {
-    letter-spacing: -0.2em;
-    content: "\00a0";
+    letter-spacing: -.2em;
+    content: '\00a0';
   }
 
   pre {

src/plugins/maps_legacy/public/map/_leaflet_overrides.scss

@@ -1,7 +1,8 @@
+// stylelint-disable selector-no-qualifying-type
 // SASSTODO: Create these tooltip variables in EUI
 // And/Or create a tooltip mixin
-$temp-euiTooltipBackground: tintOrShade($euiColorFullShade, 25%, 90%);
-$temp-euiTooltipText: $euiColorGhost;
+$tempEUITooltipBackground: tintOrShade($euiColorFullShade, 25%, 90%);
+$tempEUITooltipText: $euiColorGhost;
 
 // Converted leaflet icon sprite into background svg for custom coloring (dark mode)
 $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' height='60' width='600'%3E%3Cg fill='#{hexToRGB($euiTextColor)}'%3E%3Cg%3E%3Cpath d='M18 36v6h6v-6h-6zm4 4h-2v-2h2v2z'/%3E%3Cpath d='M36 18v6h6v-6h-6zm4 4h-2v-2h2v2z'/%3E%3Cpath d='M23.142 39.145l-2.285-2.29 16-15.998 2.285 2.285z'/%3E%3C/g%3E%3Cpath d='M100 24.565l-2.096 14.83L83.07 42 76 28.773 86.463 18z'/%3E%3Cpath d='M140 20h20v20h-20z'/%3E%3Cpath d='M221 30c0 6.078-4.926 11-11 11s-11-4.922-11-11c0-6.074 4.926-11 11-11s11 4.926 11 11z'/%3E%3Cpath d='M270,19c-4.971,0-9,4.029-9,9c0,4.971,5.001,12,9,14c4.001-2,9-9.029,9-14C279,23.029,274.971,19,270,19z M270,31.5c-2.484,0-4.5-2.014-4.5-4.5c0-2.484,2.016-4.5,4.5-4.5c2.485,0,4.5,2.016,4.5,4.5C274.5,29.486,272.485,31.5,270,31.5z'/%3E%3Cg%3E%3Cpath d='M337,30.156v0.407v5.604c0,1.658-1.344,3-3,3h-10c-1.655,0-3-1.342-3-3v-10c0-1.657,1.345-3,3-3h6.345 l3.19-3.17H324c-3.313,0-6,2.687-6,6v10c0,3.313,2.687,6,6,6h10c3.314,0,6-2.687,6-6v-8.809L337,30.156'/%3E%3Cpath d='M338.72 24.637l-8.892 8.892H327V30.7l8.89-8.89z'/%3E%3Cpath d='M338.697 17.826h4v4h-4z' transform='rotate(-134.99 340.703 19.817)'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M381 42h18V24h-18v18zm14-16h2v14h-2V26zm-4 0h2v14h-2V26zm-4 0h2v14h-2V26zm-4 0h2v14h-2V26z'/%3E%3Cpath d='M395 20v-4h-10v4h-6v2h22v-2h-6zm-2 0h-6v-2h6v2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A";
@@ -23,7 +24,7 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
 .leaflet-clickable {
   &:hover {
     stroke-width: $euiSizeS;
-    stroke-opacity: 0.8;
+    stroke-opacity: .8;
   }
 }
 
@@ -78,8 +79,8 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
 .leaflet-popup-content-wrapper {
   margin: 0;
   padding: 0;
-  background: $temp-euiTooltipBackground;
-  color: $temp-euiTooltipText;
+  background: $tempEUITooltipBackground;
+  color: $tempEUITooltipText;
   border-radius: $euiBorderRadius !important; // Override all positions the popup might be at
 }
 
@@ -146,7 +147,7 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
 
 img.leaflet-tile {
   @if (lightness($euiTextColor) < 50) {
-    filter: brightness(1.03) grayscale(0.73);
+    filter: brightness(1.03) grayscale(.73);
   } @else {
     filter: invert(1) brightness(1.75) grayscale(1);
   }

src/plugins/navigation/public/index.scss

@@ -1 +1 @@
-@import "top_nav_menu/index";
+@import 'top_nav_menu/index';

src/plugins/timelion/public/_base.scss

@@ -16,4 +16,3 @@ input[type='checkbox'],
     opacity: .8;
   }
 }
-

src/plugins/timelion/public/directives/_form.scss

@@ -21,8 +21,7 @@
   }
 }
 
-// sass-lint:disable-block no-qualifying-elements
-select.form-control {
+select.form-control { // stylelint-disable-line selector-no-qualifying-type
   // Makes the select arrow similar to EUI's arrowDown icon
   background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"%3E%3Cpath fill="#{hexToRGB($euiTextColor)}" d="M13.0688508,5.15725038 L8.38423975,9.76827428 C8.17054415,9.97861308 7.82999214,9.97914095 7.61576025,9.76827428 L2.93114915,5.15725038 C2.7181359,4.94758321 2.37277319,4.94758321 2.15975994,5.15725038 C1.94674669,5.36691756 1.94674669,5.70685522 2.15975994,5.9165224 L6.84437104,10.5275463 C7.48517424,11.1582836 8.51644979,11.1566851 9.15562896,10.5275463 L13.8402401,5.9165224 C14.0532533,5.70685522 14.0532533,5.36691756 13.8402401,5.15725038 C13.6272268,4.94758321 13.2818641,4.94758321 13.0688508,5.15725038 Z"/%3E%3C/svg%3E');
   background-size: $euiSize;

src/plugins/timelion/public/directives/_index.scss

@@ -5,4 +5,3 @@
 @import './timelion_interval/index';
 @import './saved_object_finder';
 @import './form';
-

src/plugins/timelion/public/directives/_saved_object_finder.scss

@@ -24,7 +24,6 @@
   }
 }
 
-
 saved-object-finder {
 
   .timSearchBar {

src/plugins/timelion/public/directives/cells/_cells.scss

@@ -18,7 +18,6 @@
   opacity: .5;
 }
 
-
 .timCell__actions {
   position: absolute;
   bottom: $euiSizeXS;

src/plugins/vis_default_editor/public/_default.scss

@@ -13,7 +13,7 @@
 
 .visEditor__collapsibleSidebar {
   background: $euiColorLightestShade;
-  min-width: $vis-editor-sidebar-min-width;
+  min-width: $visEditorSidebarMinWidth;
   max-width: 100%;
   position: relative;
   flex-shrink: 0;

src/plugins/vis_default_editor/public/_sidebar.scss

@@ -3,7 +3,7 @@
 //
 
 .visEditorSidebar {
-  min-width: $vis-editor-sidebar-min-width;
+  min-width: $visEditorSidebarMinWidth;
 
   // a hack for IE, issue: https://github.com/elastic/kibana/issues/66586
   > .visEditorSidebar__formWrapper {
@@ -12,7 +12,7 @@
 }
 
 .visEditorSidebar__form {
-  @include flex-parent(1, 1, auto);
+  @include flexParent(1, 1, auto);
   max-width: 100%;
 }
 
@@ -24,7 +24,7 @@
   }
 
   @include euiBreakpoint('l', 'xl') {
-    @include flex-parent(1, 1, 1px);
+    @include flexParent(1, 1, 1px);
     @include euiScrollBar;
     overflow: auto;
   }

src/plugins/vis_default_editor/public/index.scss

@@ -1,4 +1,4 @@
-$vis-editor-sidebar-min-width: 350px;
+$visEditorSidebarMinWidth: 350px;
 
 // Main layout
 @import './default';

src/plugins/vis_type_markdown/public/markdown_vis.scss

@@ -12,7 +12,7 @@
 
 .visEditor--markdown {
   .visEditorSidebar__config > *,
-  .visEditor--markdown__textarea  {
+  .visEditor--markdown__textarea {
     flex-grow: 1;
   }
 

src/plugins/vis_type_table/public/legacy/_table_vis.scss

@@ -12,7 +12,7 @@
 
 .table-vis-container {
   kbn-agg-table-group > .table > tbody > tr > td {
-    border-top: 0px;
+    border-top: 0;
   }
 
   .pagination-other-pages {

src/plugins/vis_type_table/public/legacy/agg_table/_agg_table.scss

@@ -38,5 +38,5 @@ kbn-agg-table-group {
 }
 
 .small {
-  font-size: 0.9em !important;
+  font-size: .9em !important;
 }

src/plugins/vis_type_timeseries/public/application/_tvb_editor.scss

@@ -2,4 +2,3 @@
   overflow-y: auto;
   overflow-x: hidden;
 }
-

src/plugins/vis_type_timeseries/public/application/components/vis_types/_vis_types.scss

@@ -8,10 +8,10 @@
   }
   .tvbVisTimeSeriesDark {
     .echReactiveChart_unavailable {
-      color: #dfe5ef;
+      color: #DFE5EF;
     }
     .echLegendItem {
-      color: #dfe5ef;
+      color: #DFE5EF;
     }
   }
   .tvbVisTimeSeriesLight {

src/plugins/vis_type_timeseries/public/application/components/vis_types/markdown/_markdown.scss

@@ -29,5 +29,3 @@
     overflow: auto;
   }
 }
-
-

src/plugins/vis_type_timeseries/public/application/visualizations/views/_top_n.scss

@@ -1,5 +1,4 @@
 
-
 .tvbVisTopN {
   position: relative;
   overflow: auto;

src/plugins/vis_type_vega/public/components/vega_vis.scss

@@ -1,3 +1,4 @@
+// stylelint-disable selector-no-qualifying-type
 .vgaVis__wrapper {
   @include euiScrollBar;
 
@@ -109,7 +110,6 @@
   color: makeHighContrastColor($euiColorDanger, $calculateBackgroundColor);
 }
 
-
 // Style tooltip popup (gets created dynamically at the top level if dashboard has a Vega vis)
 // Adapted from https://github.com/vega/vega-tooltip
 

src/plugins/vis_type_vislib/public/vislib/lib/_index.scss

@@ -1,3 +1,2 @@
 @import './alerts';
 @import './layout/index';
-

src/plugins/vis_type_vislib/public/vislib/lib/layout/_layout.scss

@@ -25,123 +25,6 @@
 // Numbers in here are brittle
 //
 
-.visWrapper {
-  display: flex;
-  flex: 1 1 100%;
-  flex-direction: row;
-  min-height: 0;
-  min-width: 0;
-  overflow: hidden;
-  padding: $euiSizeS 0;
-}
-
-.visWrapper__column {
-  display: flex;
-  flex: 1 0 0;
-  flex-direction: column;
-  min-height: 0;
-  min-width: 0;
-}
-
-.visWrapper__splitCharts--column {
-  display: flex;
-  flex: 1 0 20px;
-  flex-direction: row;
-  min-height: 0;
-  min-width: 0;
-
-  .visWrapper__chart {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}
-
-.visWrapper__splitCharts--row {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 100%;
-  min-height: 0;
-  min-width: 0;
-
-  .visWrapper__chart {
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
-.visWrapper__chart {
-  display: flex;
-  flex: 1 0 0;
-  overflow: visible;
-  margin: 5px;
-  min-height: 0;
-  min-width: 0;
-}
-
-.visWrapper__alerts {
-  position: relative;
-}
-
-// General Axes
-
-.visAxis__column--top .axis-div svg {
-  margin-bottom: -5px;
-}
-
-// Y Axes
-
-.visAxis--x,
-.visAxis--y {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  min-width: 0;
-}
-
-.visAxis--x {
-  overflow: visible;
-}
-
-.visAxis__spacer--y {
-  min-height: 0;
-}
-
-.visAxis__column--y {
-  display: flex;
-  flex-direction: row;
-  flex: 1 0 ($euiSizeXL + $euiSizeXS);
-  min-height: 0;
-  min-width: 0;
-}
-
-.visAxis__splitTitles--y {
-  display: flex;
-  flex-direction: column;
-  min-height: $euiSizeM;
-  min-width: 0;
-}
-
-.visAxis__splitTitles--x {
-  display: flex;
-  flex-direction: row;
-  min-height: 1px;
-  max-height: $euiSize;
-  min-width: $euiSize;
-}
-
-.visAxis__splitAxes--x,
-.visAxis__splitAxes--y {
-  display: flex;
-  flex-direction: column;
-  min-height: ($euiSize + $euiSizeXS);
-  min-width: 0;
-}
-
-.visAxis__splitAxes--x {
-  flex-direction: row;
-  min-height: 0;
-}
-
 //
 // STYLE
 //
@@ -155,6 +38,14 @@
 // sass-lint:disable-block no-mergeable-selectors
 // Keep SVG and non-renamable selectors separately
 .visWrapper {
+  display: flex;
+  flex: 1 1 100%;
+  flex-direction: row;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: $euiSizeS 0;
+
   svg {
     overflow: visible;
   }
@@ -340,3 +231,110 @@
     fill: $visHoverBackgroundColor;
   }
 }
+
+.visWrapper__column {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.visWrapper__splitCharts--column {
+  display: flex;
+  flex: 1 0 20px;
+  flex-direction: row;
+  min-height: 0;
+  min-width: 0;
+
+  .visWrapper__chart {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+.visWrapper__splitCharts--row {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 100%;
+  min-height: 0;
+  min-width: 0;
+
+  .visWrapper__chart {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+.visWrapper__chart {
+  display: flex;
+  flex: 1 0 0;
+  overflow: visible;
+  margin: 5px;
+  min-height: 0;
+  min-width: 0;
+}
+
+.visWrapper__alerts {
+  position: relative;
+}
+
+// General Axes
+
+.visAxis__column--top .axis-div svg {
+  margin-bottom: -5px;
+}
+
+// Y Axes
+
+.visAxis--x,
+.visAxis--y {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.visAxis--x {
+  overflow: visible;
+}
+
+.visAxis__spacer--y {
+  min-height: 0;
+}
+
+.visAxis__column--y {
+  display: flex;
+  flex-direction: row;
+  flex: 1 0 ($euiSizeXL + $euiSizeXS);
+  min-height: 0;
+  min-width: 0;
+}
+
+.visAxis__splitTitles--y {
+  display: flex;
+  flex-direction: column;
+  min-height: $euiSizeM;
+  min-width: 0;
+}
+
+.visAxis__splitTitles--x {
+  display: flex;
+  flex-direction: row;
+  min-height: 1px;
+  max-height: $euiSize;
+  min-width: $euiSize;
+}
+
+.visAxis__splitAxes--x,
+.visAxis__splitAxes--y {
+  display: flex;
+  flex-direction: column;
+  min-height: ($euiSize + $euiSizeXS);
+  min-width: 0;
+}
+
+.visAxis__splitAxes--x {
+  flex-direction: row;
+  min-height: 0;
+}

src/plugins/visualizations/public/components/_visualization.scss

@@ -27,14 +27,14 @@
     display: flex;
     flex-direction: row;
     overflow: auto;
-    transition: opacity 0.01s;
+    transition: opacity .01s;
 
     // IE11 Hack
     //
     // Normally we would just set flex: 1 1 0%, which works as expected in IE11.
     // Unfortunately, a recent bug in Firefox causes this rule to be ignored, so we
     // have to use an IE-specific hack instead.
-    @include internetExplorerOnly(){
+    @include internetExplorerOnly() {
       flex: 1 0;
     }
 
@@ -45,7 +45,7 @@
 
   // SASSTODO: Can't find exact usage
   .loading {
-    opacity: 0.5;
+    opacity: .5;
   }
 
   // SASSTODO: Can't find exact usage
@@ -55,7 +55,7 @@
     left: 0;
     right: 0;
     z-index: 20;
-    opacity: 0.5;
+    opacity: .5;
   }
 }
 

src/plugins/visualizations/public/embeddable/_embeddables.scss

@@ -15,6 +15,11 @@
   .visLegend__toggle {
     border-bottom-right-radius: 0;
     border-top-left-radius: 0;
+    opacity: 0; /* 1 */
+
+    &:focus {
+      opacity: 1; /* 2 */
+    }
   }
 }
 
@@ -26,23 +31,15 @@
   * 3. Always show in editing mode
   */
 
-.embPanel_optionsMenuPopover[class*="-isOpen"],
-.embPanel:hover  {
+.embPanel_optionsMenuPopover[class*='-isOpen'],
+.embPanel:hover {
   .visLegend__toggle {
     opacity: 1;
   }
 }
 
-.embPanel .visLegend__toggle {
-  opacity: 0; /* 1 */
-
-  &:focus {
-    opacity: 1; /* 2 */
-  }
-}
-
 .embPanel--editing {
   .visLegend__toggle {
     opacity: 1; /* 3 */
   }
-}
+}

src/plugins/visualize/public/application/components/visualize_editor.scss

@@ -1,5 +1,5 @@
 .visEditor {
-  @include flex-parent();
+  @include flexParent();
 
   height: 100%;
 
@@ -23,7 +23,7 @@ a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */
 }
 
 .visEditor__content {
-  @include flex-parent();
+  @include flexParent();
   width: 100%;
   z-index: 0;
 }

src/plugins/visualize/public/application/components/visualize_listing.scss

@@ -12,7 +12,7 @@
 .visListingTable__experimentalIcon {
   width: $euiSizeL;
   vertical-align: baseline;
-  padding: 0 $euiSizeS;    
+  padding: 0 $euiSizeS;
   margin-left: $euiSizeS;
 }
 

test/scripts/jenkins_unit.sh

@@ -4,7 +4,7 @@ source test/scripts/jenkins_test_setup.sh
 
 # Lint
 ./test/scripts/lint/eslint.sh
-./test/scripts/lint/sasslint.sh
+./test/scripts/lint/stylelint.sh
 
 # Test
 ./test/scripts/test/jest_integration.sh

test/scripts/lint/sasslint.sh

@@ -1,6 +0,0 @@
-#!/usr/bin/env bash
-
-source src/dev/ci_setup/setup_env.sh
-
-checks-reporter-with-killswitch "Lint: sasslint" \
-  node scripts/sasslint

test/scripts/lint/stylelint.sh

@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+
+source src/dev/ci_setup/setup_env.sh
+
+checks-reporter-with-killswitch "Lint: stylelint" \
+  node scripts/stylelint

vars/tasks.groovy

@@ -24,7 +24,7 @@ def check() {
 def lint() {
   tasks([
     kibanaPipeline.scriptTask('Lint: eslint', 'test/scripts/lint/eslint.sh'),
-    kibanaPipeline.scriptTask('Lint: sasslint', 'test/scripts/lint/sasslint.sh'),
+    kibanaPipeline.scriptTask('Lint: stylelint', 'test/scripts/lint/stylelint.sh'),
   ])
 }
 

x-pack/plugins/canvas/public/components/element_card/element_card.scss

@@ -25,7 +25,7 @@
 .canvasElementCard {
   .euiCard__top {
     text-align: center;
-    width: calc(100% + #{$euiSize}* 2);
+    width: calc(100% + #{$euiSize} * 2);
     height: 85px;
     margin: calc(-1 * #{$euiSize}) calc(-1 * #{$euiSize}) 0;
   }

x-pack/plugins/canvas/public/components/fullscreen/fullscreen.scss

@@ -1,4 +1,5 @@
-body.canvas-isFullscreen { // sass-lint:disable-line no-qualifying-elements
+/* stylelint-disable selector-no-qualifying-type */
+body.canvas-isFullscreen {
   // following two rules are for overriding the header bar padding
   &.euiBody--headerIsFixed {
     padding-top: 0;

x-pack/plugins/canvas/public/components/toolbar/tray/tray.scss

@@ -7,4 +7,3 @@
   background-color: $euiFormBackgroundColor;
   border-radius: 0;
 }
-

x-pack/plugins/canvas/public/components/workpad/workpad.scss

@@ -12,7 +12,7 @@
   user-select: none;
   pointer-events: none;
   background-image: linear-gradient(to right, $euiColorMediumShade 1px, transparent 1px),
-  linear-gradient(to bottom, $euiColorMediumShade 1px, transparent 1px);
+    linear-gradient(to bottom, $euiColorMediumShade 1px, transparent 1px);
   background-size: 50px 50px;
   top: 0;
 }

x-pack/plugins/canvas/public/components/workpad_loader/workpad_dropzone/workpad_dropzone.scss

@@ -19,4 +19,4 @@
   .euiHealth {
     width: 100%;
   }
-} 
+}

x-pack/plugins/canvas/public/style/main.scss

@@ -3,7 +3,6 @@
 */
 $canvasElementCardWidth: 210px;
 
-
 .canvas.canvasContainerWrapper {
   display: flex;
   flex-grow: 1;

x-pack/plugins/canvas/shareable_runtime/components/footer/footer.module.scss

@@ -10,7 +10,7 @@
 }
 
 :global .kbnCanvas :local .bar {
-  transition: bottom 0.25s;
+  transition: bottom .25s;
   padding: $euiSizeM;
 }
 

x-pack/plugins/canvas/shareable_runtime/components/footer/scrubber.module.scss

@@ -9,7 +9,7 @@
   left: 0;
   right: 0;
   padding: $euiSizeS 0 ($euiSizeL * 2) 0;
-  transition: bottom 0.25s;
+  transition: bottom .25s;
   height: 172px;
 }
 

x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_field.scss

@@ -2,7 +2,7 @@
   font-size: $euiFontSizeS;
   line-height: $euiLineHeight;
   display: grid;
-  grid-template-columns: 0.85fr $euiSizeXL 1fr;
+  grid-template-columns: .85fr $euiSizeXL 1fr;
   grid-gap: $euiSizeXS;
 
   &__separator {

x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/product_card/product_card.scss

@@ -10,7 +10,7 @@
   &__imageContainer {
     max-height: 115px;
     overflow: hidden;
-    background-color: #0076cc;
+    background-color: #0076CC;
 
     @include euiBreakpoint('s', 'm', 'l', 'xl') {
       max-height: none;

x-pack/plugins/enterprise_search/public/applications/shared/layout/layout.scss

@@ -32,7 +32,7 @@
       position: absolute;
       right: $euiSize;
       top: $sideBarMobileHeight / 2;
-      transform: translateY(-50%) scale(0.9);
+      transform: translateY(-50%) scale(.9);
 
       .euiButton {
         min-width: 0;
@@ -52,7 +52,7 @@
     width: $sideBarWidth;
 
     background-color: $euiColorLightestShade;
-    box-shadow: inset (-1 * $euiSizeXS) 0 $euiSizeS (-1 * $euiSizeXS) rgba($euiShadowColor, 0.25);
+    box-shadow: inset (-1 * $euiSizeXS) 0 $euiSizeS (-1 * $euiSizeXS) rgba($euiShadowColor, .25);
 
     @include euiBreakpoint('xs', 's', 'm') {
       position: relative;

x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.scss

@@ -52,7 +52,7 @@ $euiSizeML: $euiSize * 1.25; // 20px - between medium and large ¯\_(ツ)_/¯
     font-weight: $euiFontWeightMedium;
     line-height: $euiFontSizeM;
 
-    $activeBgColor: rgba($euiColorFullShade, 0.05);
+    $activeBgColor: rgba($euiColorFullShade, .05);
 
     &--isActive {
       background-color: $activeBgColor;

x-pack/plugins/enterprise_search/public/applications/shared/truncate/truncated_content.scss

@@ -23,7 +23,7 @@
     padding: 0 2px;
     display: none;
     align-items: center;
-    box-shadow: 0 1px 3px rgba(black, 0.1);
+    box-shadow: 0 1px 3px $euiColorInk;
     border: 1px solid $euiBorderColor;
     width: auto;
     white-space: nowrap;

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/license_badge/license_badge.scss

@@ -4,8 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-.wsLicenseBadge {
-  &__text {
-    color: white;
-  }
+.wsLicenseBadge__text {
+  color: $euiColorGhost;
 }

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.scss

@@ -24,7 +24,7 @@
   }
 
   &__text {
-    text-shadow: 0 1px 2px rgba(black, 0.08);
+    text-shadow: 0 1px 2px rgba($euiColorInk, .08);
     justify-content: center;
     align-items: center;
     font-size: 1.125rem;
@@ -81,7 +81,7 @@
       font-weight: 500;
       color: $euiColorEmptyShade;
       font-size: .875rem;
-      text-shadow: 0 1px 2px rgba(black, 0.08);
+      text-shadow: 0 1px 2px rgba($euiColorInk, .08);
     }
 
     &__image {
@@ -105,8 +105,8 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    box-shadow: 0px 0px 12px rgba(black, 0.15);
-    background: white;
+    box-shadow: 0 0 12px rgba($euiColorInk, .15);
+    background: $euiColorGhost;
     text-align: left;
     text-overflow: ellipsis;
     min-width: 125px;
@@ -130,7 +130,7 @@
     position:absolute;
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
-    border-bottom: 6px solid white;
+    border-bottom: 6px solid $euiColorGhost;
     top: -6px;
     left: 16px;
   }

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/groups.scss

@@ -35,7 +35,7 @@
     color: $euiColorFullShade;
     box-shadow:
       inset 0 0 0 1px $euiColorLightShade,
-      0 2px 4px rgba(black, .05);
+      0 2px 4px rgba($euiColorInk, .05);
   }
 
   &:after {

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/recent_activity.scss

@@ -13,13 +13,13 @@
   &--error {
     font-weight: $euiFontWeightSemiBold;
     color: $euiColorDanger;
-    background: rgba($euiColorDanger, 0.1);
+    background: rgba($euiColorDanger, .1);
 
     &__label {
       margin-left: $euiSizeS * 1.75;
       font-weight: $euiFontWeightRegular;
       text-decoration: underline;
-      opacity: 0.7;
+      opacity: .7;
     }
   }
 

x-pack/plugins/graph/public/_main.scss

@@ -20,7 +20,7 @@
  * Utilities
  */
 
-.gphNoUserSelect{
+.gphNoUserSelect {
   user-select: none;
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: transparent;

x-pack/plugins/graph/public/angular/templates/_graph.scss

@@ -11,13 +11,12 @@
  * 1. Calculated px values come from the open/closed state of the global nav sidebar
  */
 
-
- #graphBasic {
-   display: flex;
-   flex-direction: column;
-   flex: 1;
-   overflow: hidden;
- }
+#graphBasic {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
 
 .gphGraph__container {
   display: flex;

x-pack/plugins/graph/public/angular/templates/_sidebar.scss

@@ -17,7 +17,7 @@
   }
 }
 
-.gphSidebar__header{
+.gphSidebar__header {
   margin-top: $euiSizeS;
   color: $euiColorEmptyShade;
   background-color: $euiColorDarkShade;
@@ -26,7 +26,7 @@
   margin-bottom: $euiSizeXS;
 }
 
-.gphSidebar__panel{
+.gphSidebar__panel {
   max-height: $euiSizeL * 10;
   overflow-y: hidden auto;
 }

x-pack/plugins/graph/public/components/field_manager/_field_editor.scss

@@ -4,7 +4,7 @@
 
 .gphFieldEditor__badge--disabled,
 .gphFieldEditor__badge--disabled:focus {
-  opacity: 0.7;
+  opacity: .7;
   text-decoration: line-through;
 }
 

x-pack/plugins/graph/public/components/graph_visualization/_graph_visualization.scss

@@ -13,16 +13,16 @@
   fill: $euiColorMediumShade;
   stroke: $euiColorMediumShade;
   stroke-width: 2;
-  stroke-opacity: 0.5;
+  stroke-opacity: .5;
 
   &:hover {
-    stroke-opacity: 0.95;
+    stroke-opacity: .95;
     cursor: pointer;
   }
 
   &--selected {
     stroke: $euiColorDarkShade;
-    stroke-opacity: 0.95;
+    stroke-opacity: .95;
   }
 }
 
@@ -54,7 +54,7 @@
   fill: $euiColorMediumShade;
   &--selected {
     stroke-width: $euiSizeXS;
-    stroke: transparentize($euiColorPrimary, 0.25);
+    stroke: transparentize($euiColorPrimary, .25);
   }
 }
 

x-pack/plugins/graph/public/components/legacy_icon/_legacy_icon.scss

@@ -8,7 +8,7 @@
   &--pickable {
     margin: $euiSizeXS;
     cursor: pointer;
-    opacity: 0.7;
+    opacity: .7;
   }
 
   &--pickable:hover,

x-pack/plugins/graph/public/components/venn_diagram/_venn_diagram.scss

@@ -1,9 +1,9 @@
 .gphVennDiagram__left {
   fill: $euiColorDanger;
-  fill-opacity: 0.5;
+  fill-opacity: .5;
 }
 
 .gphVennDiagram__right {
   fill: $euiColorPrimary;
-  fill-opacity: 0.5;
+  fill-opacity: .5;
 }

x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss

@@ -1,5 +1,4 @@
 
-
 /**
  * [1] Will center vertically the empty search result
  */

x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss

@@ -1,5 +1,5 @@
 .componentTemplatesListItem {
-  background-color: white;
+  background-color: $euiColorGhost;
   padding: $euiSizeM;
   border-bottom: $euiBorderThin;
   position: relative;
@@ -8,7 +8,7 @@
   &--selected {
     &::before {
       content: '';
-      background-color: rgba(255, 255, 255, 0.7);
+      background-color: rgba(255, 255, 255, .7);
       height: 100%;
       left: 0;
       position: absolute;

x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.scss

@@ -32,10 +32,10 @@
       &__count {
         font-weight: 600;
       }
-   }
+    }
 
-   &__content {
-     mask-image: none;
-   }
+    &__content {
+      mask-image: none;
+    }
   }
 }

x-pack/plugins/index_management/public/application/components/mappings_editor/_index.scss

@@ -49,67 +49,68 @@
 .mappingsEditor__fieldsList {
   .mappingsEditor__fieldsList .mappingsEditor__fieldsListItem__content,
   .mappingsEditor__createFieldContent {
-      &::before {
-        border-bottom: 1px solid $euiColorMediumShade;
-        content: '';
-        left: $euiSize;
-        position: absolute;
-        top: 50%;
-        width: $euiSizeS;
-      }
-      &::after {
-        border-left: 1px solid $euiColorMediumShade;
-        content: '';
-        left: $euiSize;
-        position: absolute;
-        top: calc(50% - #{$euiSizeS});
-        height: $euiSizeS;
-      }
+    &::before {
+      border-bottom: 1px solid $euiColorMediumShade;
+      content: '';
+      left: $euiSize;
+      position: absolute;
+      top: 50%;
+      width: $euiSizeS;
     }
-
-    .mappingsEditor__createFieldContent {
-      padding-left: $euiSizeXXL - $euiSizeXS; // [1]
+    &::after {
+      border-left: 1px solid $euiColorMediumShade;
+      content: '';
+      left: $euiSize;
+      position: absolute;
+      top: calc(50% - #{$euiSizeS});
+      height: $euiSizeS;
     }
+  }
 
-    .mappingsEditor__createFieldWrapper {
-      &--multiField {
-        .mappingsEditor__createFieldContent {
-          padding-left: $euiSize;
-        }
+  .mappingsEditor__createFieldContent {
+    padding-left: $euiSizeXXL - $euiSizeXS; // [1]
+  }
 
-        .mappingsEditor__createFieldContent {
-          &::before, &::after {
-            content: none;
-          }
-        }
+  .mappingsEditor__createFieldWrapper {
+    &--multiField {
+      .mappingsEditor__createFieldContent {
+        padding-left: $euiSize;
       }
-
-      &--toggle {
-        .mappingsEditor__createFieldContent {
-          padding-left: $euiSizeXXL - $euiSizeXS; // [1]
-        }
-      }
-    }
-
-    .mappingsEditor__fieldsList .mappingsEditor__fieldsListItem__content {
-      padding-left: $euiSizeXL; // [2]
-
-      &--toggle, &--multiField {
+      // stylelint-disable-next-line no-duplicate-selectors
+      .mappingsEditor__createFieldContent {
         &::before, &::after {
           content: none;
         }
       }
+    }
 
-      &--multiField {
-        padding-left: $euiSizeL;
-      }
-
-      &--toggle {
-        padding-left: 0;
+    &--toggle {
+      .mappingsEditor__createFieldContent {
+        padding-left: $euiSizeXXL - $euiSizeXS; // [1]
       }
     }
+  }
+
+  .mappingsEditor__fieldsList .mappingsEditor__fieldsListItem__content {
+    padding-left: $euiSizeXL; // [2]
+
+    &--toggle, &--multiField {
+      &::before, &::after {
+        content: none;
+      }
+    }
+
+    &--multiField {
+      padding-left: $euiSizeL;
+    }
+
+    &--toggle {
+      padding-left: 0;
+    }
+  }
 }
 
+// stylelint-disable selector-no-qualifying-type
 ul.esUiTree {
   padding: 0;
   margin: 0;

x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/_field_list_item.scss

@@ -29,7 +29,7 @@
 }
 
 .mappingsEditor__fieldsListItem__field--dim {
-  opacity: 0.3;
+  opacity: .3;
 
   &:hover {
     background-color: initial;

x-pack/plugins/index_management/public/index.scss

@@ -11,7 +11,7 @@
 
 .indTable {
   // The index table is a bespoke table and can't make use of EuiBasicTable's width settings
-  thead th.indTable__header--name {
+  thead th.indTable__header--name { // stylelint-disable-line selector-no-qualifying-type
     width: 25%;
   }
 

x-pack/plugins/infra/public/index.scss

@@ -14,4 +14,3 @@
   display: flex;
   flex-direction: column;
 }
-

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss

@@ -31,7 +31,7 @@
     }
   }
   $dropZoneButtonHeight: 60px;
-  $dropZoneButtonOffsetY: $dropZoneButtonHeight * 0.5;
+  $dropZoneButtonOffsetY: $dropZoneButtonHeight * .5;
 
   &__dropZoneButton {
     position: absolute;

x-pack/plugins/lens/public/_mixins.scss

@@ -5,10 +5,10 @@
   $hideHeight: $euiScrollBarCorner * 1.25;
   mask-image: linear-gradient(
     to right,
-    transparentize(red, .9) 0%,
-    transparentize(red, 0) $hideHeight,
-    transparentize(red, 0) calc(100% - #{$hideHeight}),
-    transparentize(red, .9) 100%
+    transparentize($euiColorDanger, .9) 0%,
+    transparentize($euiColorDanger, 0) $hideHeight,
+    transparentize($euiColorDanger, 0) calc(100% - #{$hideHeight}),
+    transparentize($euiColorDanger, .9) 100%
   );
 }
 

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss

@@ -12,7 +12,7 @@
 }
 
 // Targeting img as this won't target normal EuiIcon's only the custom svgs's
-img.lnsChartSwitch__chartIcon { // sass-lint:disable-line no-qualifying-elements
+img.lnsChartSwitch__chartIcon { // stylelint-disable-line selector-no-qualifying-type
   // The large icons aren't square so max out the width to fill the height
   width: 100%;
 }

x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss

@@ -38,5 +38,3 @@
     margin-right: $euiSizeS;
   }
 }
-
-