Replace sass-lint with stylelint

.stylelintignore

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

.stylelintrc.yml

@@ -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_-]+$"

CHANGELOG.md

@@ -74,6 +74,7 @@
 - [CVE-2023-26115] Bump word-wrap from 1.2.3 to 1.2.4 ([#891](https://github.com/opensearch-project/oui/pull/891))
 - Bump Node version to 18.16.0 ([#900](https://github.com/opensearch-project/oui/pull/900))
 - Bump `node-sass` to a patched version based on `[email protected]` ([#977](https://github.com/opensearch-project/oui/pull/977)); see [patch commit](https://github.com/AMoo-Miki/node-sass/commit/43c74c0966b05c1e21a1e5e20a0c467ec8e669b4) for details.
+- Replace `sass-lint` with `stylelint` ([#949](https://github.com/opensearch-project/oui/pull/949))
 
 ### 🪛 Refactoring
 

package.json

@@ -20,12 +20,12 @@
     "clean": "node ./scripts/compile-clean.js",
     "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.js\"",
     "extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings",
-    "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-sass",
+    "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-style",
     "lint-fix": "yarn lint-es-fix",
     "lint-es": "eslint --cache \"{src,src-docs}/**/*.{ts,tsx,js}\" --max-warnings 0",
     "lint-es-fix": "yarn lint-es --fix",
-    "lint-sass": "sass-lint -v --max-warnings 0",
-    "lint-sass-fix": "sass-lint-auto-fix -c ./.sass-lint-fix.yml",
+    "lint-style": "stylelint \"{src,src-docs}/**/*.scss\" --max-warnings 0",
+    "lint-style-fix": "yarn lint-style --fix",
     "test": "yarn lint && yarn test-unit",
     "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
     "test-a11y": "node ./scripts/a11y-testing",
@@ -74,12 +74,6 @@
     "react-view/**/minimist": "^1.2.6",
     "react-view/@miksu/prettier/minimatch": "^3.0.8",
     "remark-parse/trim": "0.0.3",
-    "sass-lint-auto-fix/**/minimist": "^1.2.6",
-    "sass-lint-auto-fix/merge": "^2.1.1",
-    "sass-lint/**/minimist": "^1.2.6",
-    "sass-lint/eslint": "^7.10.0",
-    "sass-lint/front-matter": "^4.0.2",
-    "sass-lint/merge": "^2.1.1",
     "start-server-and-test/**/minimist": "^1.2.6",
     "webpack-dev-server/**/ansi-regex": "^5.0.1",
     "webpack-dev-server/chokidar/glob-parent": "^6.0.1",
@@ -216,6 +210,7 @@
     "moment-timezone": "^0.5.41",
     "node-sass": "npm:@amoo-miki/[email protected]",
     "pegjs": "^0.10.0",
+    "postcss": "^8.4.28",
     "postcss-cli": "^7.1.2",
     "postcss-inline-svg": "^4.1.0",
     "postcss-loader": "^4.0.1",
@@ -237,13 +232,13 @@
     "resolve": "^1.22.1",
     "rimraf": "^5.0.1",
     "sass-extract": "^2.1.0",
-    "sass-lint": "^1.13.1",
-    "sass-lint-auto-fix": "^0.21.2",
     "sass-loader": "npm:@bsfishy/sass-loader@node-sass-9",
     "sass-vars-to-js-loader": "^2.1.1",
     "shelljs": "^0.8.5",
     "start-server-and-test": "^2.0.0",
     "style-loader": "^1.2.1",
+    "stylelint": "^15.10.3",
+    "stylelint-config-standard-scss": "^10.0.0",
     "terser-webpack-plugin": "^4.1.0",
     "typescript": "4.0.5",
     "url-loader": "^4.1.0",

src-docs/src/components/guide_components.scss

@@ -16,7 +16,7 @@ $guideZLevelHighest: $ouiZLevel9 + 1000;
 $elasticLogoTextLight: #FFF;
 $elasticLogoTextDark: #1C1E23;
 
-#guide { // sass-lint:disable-line no-ids
+#guide {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
@@ -33,7 +33,7 @@ body {
 .ouiBody--headerIsFixed--double {
   @include ouiHeaderAffordForFixed($ouiHeaderHeightCompensation * 2);
 
-  #guide { // sass-lint:disable-line no-ids
+  #guide {
     min-height: calc(100vh - #{$ouiHeaderHeightCompensation * 2});
   }
 
@@ -46,11 +46,13 @@ body {
 
 .guideSideNav {
   @include ouiSideNavEmbellish;
+
   min-width: $guideSideNavWidth;
 }
 
 .guideSideNav__content {
   @include ouiYScroll;
+
   padding: 0 $ouiSizeL $ouiSizeL;
 }
 
@@ -100,7 +102,7 @@ body {
 .guideDemo__highlightLayout--playground > div:not(.ouiPage) {
   height: 100%;
   width: 100%;
-  padding: 0 !important; // sass-lint:disable-line no-important
+  padding: 0 !important;
 
   > .ouiPage--grow {
     height: 100%;
@@ -137,14 +139,12 @@ body {
   padding: $ouiSize;
 }
 
-// sass-lint:disable no-important
 .guideDemo__textLines {
   background-image: linear-gradient($ouiFocusBackgroundColor 1px, transparent 1px) !important;
   background-size: 100% 8px !important;
   background-position-y: 2px;
 }
 
-// sass-lint:disable no-important
 .guideDemo__textLines--s {
   background-image: linear-gradient($ouiFocusBackgroundColor 1px, transparent 1px) !important;
   background-size: 100% 7px !important;
@@ -179,7 +179,7 @@ body {
 }
 
 .guideDemo__ghostBackground {
-  @if (lightness($ouiTextColor) < 50) {
+  @if  lightness($ouiTextColor) < 50 {
     color: $ouiColorGhost;
     background: $ouiColorDarkestShade !important; // Override OuiPanel specificity
   }
@@ -247,6 +247,7 @@ body {
 
 .guideDemo__notificationEvent {
   @include ouiFontSizeS;
+
   display: flex;
   flex-direction: column;
 
@@ -324,10 +325,11 @@ body {
   color: $ouiColorAccentText;
 }
 
-
+/* stylelint-disable no-invalid-position-at-import-rule */
 @import '../views/guidelines/index';
 @import 'guide_section/index';
 @import 'guide_rule/index';
+/* stylelint-enable no-invalid-position-at-import-rule */
 
 @include ouiBreakpoint('xs', 's') {
   .guideSideNav {
@@ -348,17 +350,16 @@ body {
   min-width: 200px;
   flex-basis: 100% !important;
 
-  // sass-lint:disable-block mixins-before-declarations
   @include ouiBreakpoint('s', 'm') {
-    flex-basis: 45% !important; // sass-lint:disable-line no-important
+    flex-basis: 45% !important;
   }
 
   @include ouiBreakpoint('l') {
-    flex-basis: 30% !important; // sass-lint:disable-line no-important
+    flex-basis: 30% !important;
   }
 
   @include ouiBreakpoint('xl') {
-    flex-basis: 22% !important; // sass-lint:disable-line no-important
+    flex-basis: 22% !important;
   }
 }
 
@@ -383,7 +384,7 @@ body {
     width: 100%;
     height: auto;
 
-    &:before {
+    &::before {
       content: '';
       display: block;
       position: absolute;
@@ -458,7 +459,6 @@ body {
 }
 
 .guideHome__footerLogo {
-  // sass-lint:disable-block no-important
   vertical-align: middle;
   display: inline-block !important;
   margin-bottom: 0 !important;

src-docs/src/components/guide_section/_guide_section.scss

@@ -40,5 +40,5 @@
 }
 
 .guideSectionTabs__tab {
-  font-weight: $ouiFontWeightMedium !important; // sass-lint:disable-line no-important
+  font-weight: $ouiFontWeightMedium !important;
 }

src-docs/src/services/playground/_playground_compiler.scss

@@ -11,6 +11,6 @@
 
 .playgroundWrapper {
   > div {
-    display: block !important; // sass-lint:disable-line no-important
+    display: block !important;
   }
 }

src-docs/src/theme_dark.scss

@@ -9,10 +9,11 @@
  * GitHub history for details.
  */
 
-// sass-lint:disable no-url-domains, no-url-protocols
+/* stylelint-disable-next-line import-notation */
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
-@import url('https://rsms.me/inter/inter-ui.css');
 
+/* stylelint-disable-next-line import-notation */
+@import url('https://rsms.me/inter/inter-ui.css');
 @import '../../src/theme_dark';
 @import './components/guide_components';
 @import './services/playground/index';

src-docs/src/theme_light.scss

@@ -9,10 +9,11 @@
  * GitHub history for details.
  */
 
-// sass-lint:disable no-url-domains, no-url-protocols
+/* stylelint-disable-next-line import-notation */
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
-@import url('https://rsms.me/inter/inter-ui.css');
 
+/* stylelint-disable-next-line import-notation */
+@import url('https://rsms.me/inter/inter-ui.css');
 @import '../../src/theme_light';
 @import './components/guide_components';
 @import './services/playground/index';

src-docs/src/theme_next_dark.scss

@@ -9,9 +9,8 @@
  * GitHub history for details.
  */
 
-// sass-lint:disable no-url-domains, no-url-protocols
+/* stylelint-disable-next-line import-notation */
 @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
-
 @import '../../src/theme_next_dark';
 @import './components/guide_components';
 @import './services/playground/index';

src-docs/src/theme_next_light.scss

@@ -9,9 +9,8 @@
  * GitHub history for details.
  */
 
-// sass-lint:disable no-url-domains, no-url-protocols
+/* stylelint-disable-next-line import-notation */
 @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
-
 @import '../../src/theme_next_light';
 @import './components/guide_components';
 @import './services/playground/index';