Chore: Replaces sass-lint with stylelint (opensearch-project#1413)

* 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 with overrides to adhere to the
  newly-introduced rules from the stylelint configuration.
* 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 <[email protected]>

* fix(Style): Fixes flex style

Signed-off-by: Ashwin Pc <[email protected]>

* fix(lint): Fixes empty comment lint issue

Signed-off-by: Ashwin Pc <[email protected]>

* chore: rebase and updates yarn.lock

Signed-off-by: Ashwin Pc <[email protected]>

Co-authored-by: Tommy Markley <[email protected]>

Author: ashwin-pc

.prettierignore

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

.sass-lint.yml

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

.stylelintignore

@@ -0,0 +1,19 @@
+extends:
+  - stylelint-config-standard-scss
+rules:
+  # while we still use node-sass, only legacy rgb() notation is allowed
+  color-function-notation: "legacy"
+  # recommended to turn off descending specificity since we use a lot of nesting:
+  # https://stylelint.io/user-guide/rules/list/no-descending-specificity/
+  no-descending-specificity: null
+  # need to use global function/value names from EUI
+  function-name-case: null
+  value-keyword-case: null
+  scss/no-global-function-names: null
+  # 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_-]+$"

.stylelintrc.yml

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

examples/search_examples/public/index.scss

@@ -58,9 +58,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",
@@ -77,13 +77,10 @@
   "resolutions": {
     "**/@types/node": "^14.17.32",
     "**/ansi-regex": "^5.0.1",
-    "**/front-matter": "^4.0.2",
     "**/glob-parent": "^6.0.0",
     "**/hoist-non-react-statics": "^3.3.2",
     "**/json-schema": "^0.4.0",
     "**/kind-of": ">=6.0.3",
-    "**/merge": "^2.1.1",
-    "**/minimist": "^1.2.5",
     "**/node-jose": "^2.1.0",
     "**/qs": "^6.10.3",
     "**/trim": "^0.0.3",
@@ -428,11 +425,12 @@
     "regenerate": "^1.4.0",
     "reselect": "^4.0.0",
     "resize-observer-polyfill": "^1.5.1",
-    "sass-lint": "^1.12.1",
     "selenium-webdriver": "^4.0.0-alpha.7",
     "simple-git": "^3.4.0",
     "sinon": "^7.4.2",
     "strip-ansi": "^6.0.0",
+    "stylelint": "^14.5.2",
+    "stylelint-config-standard-scss": "^3.0.0",
     "supertest": "^6.2.2",
     "supertest-as-promised": "^4.0.2",
     "tape": "^5.0.1",

package.json

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

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

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

packages/osd-plugin-generator/template/public/index.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/_guide.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/_guide_code.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_code_viewer/_guide_code_viewer.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;
@@ -47,16 +59,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_components.scss

@@ -10,14 +10,14 @@
 
 .guideDemo__highlightGrid {
   .kuiFlexItem {
-    background: transparentize($euiColorPrimary, .9);
+    background: transparentize($euiColorPrimary, 0.9);
     padding: 16px;
   }
 }
 
 .guideDemo__highlightGridWrap {
   .kuiFlexItem div {
-    background: transparentize($euiColorPrimary, .9);
+    background: transparentize($euiColorPrimary, 0.9);
     padding: 16px;
   }
 }