Replaces sass-lint with stylelint

* Introduces standard scss rules from stylelint with only a few
  modifications.
* `yarn lint` now runs `yarn lint:style` instead of `yarn lint:sass`.
* Many of the files were updated with `yarn lint:style --fix`, but some
  of them had to be manually updated to adhere to the newly-introduced
  rules from the stylelint configuration. A major culprit was the
  `no-descending-specificity` rule.
* Some of the automated fixes that changed function names
  (e.g. EUI functions like `lightOrDarkTheme`) had to be overridden
  because EUI doesn't adhere to all of the rules. We can address this
  after we fold in and replace `node-sass` with Dart Sass.
* Includes a couple fixes such as fixing the class selector for
  `osdnSuggestionItem--value .osdSuggestionItem__text`.

Resolves opensearch-project#551
Resolves opensearch-project#1139
Resolves opensearch-project#1151
Resolves opensearch-project#1152
Resolves opensearch-project#1154

Signed-off-by: Tommy Markley <markleyt@amazon.com>

.prettierignore

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

.stylelintignore

@@ -0,0 +1,2 @@
+build
+target

.stylelintrc.yml

@@ -0,0 +1,12 @@
+extends:
+  - stylelint-config-standard-scss
+rules:
+  # while we still use node-sass, only legacy rgb() notation is allowed
+  color-function-notation: "legacy"
+  # camelCase names
+  keyframes-name-pattern: "^[a-z][a-zA-Z0-9_-]+$"
+  selector-class-pattern: "^[a-z][a-zA-Z0-9_-]+$"
+  selector-id-pattern: "^[a-z][a-zA-Z0-9_-]+$"
+  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_-]+$"

examples/search_examples/public/index.scss

@@ -0,0 +1 @@
+/* stylelint-disable no-empty-source */

package.json

@@ -56,9 +56,9 @@
     "start": "node scripts/opensearch_dashboards --dev",
     "debug": "node --nolazy --inspect scripts/opensearch_dashboards --dev",
     "debug-break": "node --nolazy --inspect-brk scripts/opensearch_dashboards --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",
     "uiFramework:start": "cd packages/osd-ui-framework && yarn docSiteStart",
     "uiFramework:build": "cd packages/osd-ui-framework && yarn docSiteBuild",
@@ -437,11 +437,12 @@
     "regenerate": "^1.4.0",
     "reselect": "^4.0.0",
     "resize-observer-polyfill": "^1.5.0",
-    "sass-lint": "^1.12.1",
     "selenium-webdriver": "^4.0.0-alpha.7",
     "simple-git": "1.116.0",
     "sinon": "^7.4.2",
     "strip-ansi": "^6.0.0",
+    "stylelint": "^14.5.2",
+    "stylelint-config-standard-scss": "^3.0.0",
     "supertest": "^3.1.0",
     "supertest-as-promised": "^4.0.2",
     "tape": "^5.0.1",

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

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

packages/osd-plugin-generator/template/public/index.scss

@@ -0,0 +1 @@
+// empty template

packages/osd-ui-framework/doc_site/src/components/guide/_guide.scss

@@ -64,25 +64,25 @@ html {
   background-color: $euiColorEmptyShade;
 }
 
-  .guideContentPage__hint {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    max-width: 260px;
-    max-height: 500px;
-    padding: 30px;
-    margin: 20px;
-    border-radius: 4px;
-    background-color: $euiColorLightestShade;
-    line-height: $guideLineHeight;
-  }
+.guideContentPage__hint {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  max-width: 260px;
+  max-height: 500px;
+  padding: 30px;
+  margin: 20px;
+  border-radius: 4px;
+  background-color: $euiColorLightestShade;
+  line-height: $guideLineHeight;
+}
 
-  .guideContentPage__content {
-    width: 100%;
-    max-width: 800px;
-    padding: 30px 60px;
-  }
+.guideContentPage__content {
+  width: 100%;
+  max-width: 800px;
+  padding: 30px 60px;
+}
 
 .guideHintArrow {
   position: absolute;

packages/osd-ui-framework/doc_site/src/components/guide_code/_guide_code.scss

@@ -1,6 +1,6 @@
 .guideCode {
   padding: 2px 4px;
-  font-family: 'Ubuntu Mono', monospace;
+  font-family: "Ubuntu Mono", monospace;
   background-color: $euiColorLightestShade;
   color: $euiColorDarkShade;
 }

packages/osd-ui-framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss

@@ -22,39 +22,39 @@
   }
 }
 
-  .guideCodeViewer__header {
-    padding: 0 20px 6px;
-    line-height: $guideLineHeight;
-    border-bottom: $euiBorderThin;
-    font-size: 14px;
-    font-weight: 700;
-    margin-bottom: 10px;
-  }
+.guideCodeViewer__header {
+  padding: 0 20px 6px;
+  line-height: $guideLineHeight;
+  border-bottom: $euiBorderThin;
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
 
-  .guideCodeViewer__closeButton {
-    position: absolute;
-    top: 0;
-    right: 10px;
-    cursor: pointer;
-    padding: 10px;
-    border-radius: 3px;
-    color: $guideTextColor;
-
-    &:hover {
-      color: $guideLinkHoverColor;
-    }
+.guideCodeViewer__closeButton {
+  position: absolute;
+  top: 0;
+  right: 10px;
+  cursor: pointer;
+  padding: 10px;
+  border-radius: 3px;
+  color: $guideTextColor;
+
+  &:hover {
+    color: $guideLinkHoverColor;
   }
+}
 
-  .guideCodeViewer__title {
-    padding: 0 20px 6px;
-    border-bottom: $euiBorderThin;
-    line-height: $guideLineHeight;
-    font-size: 14px;
-  }
+.guideCodeViewer__title {
+  padding: 0 20px 6px;
+  border-bottom: $euiBorderThin;
+  line-height: $guideLineHeight;
+  font-size: 14px;
+}
 
-  .guideCodeViewer__content {
-    margin: 0 0 16px;
-  }
+.guideCodeViewer__content {
+  margin: 0 0 16px;
+}
 
 // HLJS
 
@@ -64,7 +64,7 @@
   color: $euiColorDarkShade;
   font-size: 14px;
   line-height: 1.3;
-  font-family: 'Ubuntu Mono', monospace;
+  font-family: "Ubuntu Mono", monospace;
 }
 
 .hljs-keyword {

packages/osd-ui-framework/doc_site/src/components/guide_components.scss

@@ -1,3 +1,15 @@
+@import "guide/guide";
+@import "guide_code/guide_code";
+@import "guide_code_viewer/guide_code_viewer";
+@import "guide_demo/guide_demo";
+@import "guide_link/guide_link";
+@import "guide_nav/guide_nav";
+@import "guide_page/guide_page";
+@import "guide_page_side_nav/guide_page_side_nav";
+@import "guide_sandbox/guide_sandbox";
+@import "guide_section/guide_section";
+@import "guide_text/guide_text";
+
 $guideVerticalRhythm: $euiSize;
 $guideLineHeight: $euiSizeL;
 $guideNavHeight: 60px;
@@ -13,6 +25,7 @@ $guideBaseBackgroundColor: $euiColorLightestShade;
 $guidePanelBackgroundColor: $euiColorEmptyShade;
 $guideTextColor: $euiColorDarkestShade;
 $guideLinkColor: $euiColorPrimary;
+/* stylelint-disable-next-line scss/no-global-function-names */
 $guideLinkHoverColor: darken($euiColorPrimary, 10%);
 
 // Breakpoints
@@ -47,16 +60,3 @@ $guideNormalBreakpoint: 1900px;
     background-color: transparent;
   }
 }
-
-
-@import "guide/guide";
-@import "guide_code/guide_code";
-@import "guide_code_viewer/guide_code_viewer";
-@import "guide_demo/guide_demo";
-@import "guide_link/guide_link";
-@import "guide_nav/guide_nav";
-@import "guide_page/guide_page";
-@import "guide_page_side_nav/guide_page_side_nav";
-@import "guide_sandbox/guide_sandbox";
-@import "guide_section/guide_section";
-@import "guide_text/guide_text";

packages/osd-ui-framework/doc_site/src/components/guide_demo/_guide_demo.scss

@@ -10,14 +10,16 @@
 
 .guideDemo__highlightGrid {
   .kuiFlexItem {
-    background: transparentize($euiColorPrimary, .9);
+    /* stylelint-disable-next-line scss/no-global-function-names */
+    background: transparentize($euiColorPrimary, 0.9);
     padding: 16px;
   }
 }
 
 .guideDemo__highlightGridWrap {
   .kuiFlexItem div {
-    background: transparentize($euiColorPrimary, .9);
+    /* stylelint-disable-next-line scss/no-global-function-names */
+    background: transparentize($euiColorPrimary, 0.9);
     padding: 16px;
   }
 }