Add stylelint and scss configs

- see https://github.com/stylelint/stylelint/blob/main/docs/user-guide/get-started.md#using-a-community-shared-config

- note that adding postcss@8 is necessary for the scss config to work - see stylelint-scss/stylelint-config-standard-scss#5

.stylelintrc.js

@@ -0,0 +1,120 @@
+const camelCaseRegex = '^[a-z][\\w-]*$'; // Note: also allows `_` as part of BEM naming
+
+// TODO: Remove Sass-specific config & rules once we're completely off Sass
+module.exports = {
+  extends: ['stylelint-config-standard-scss', 'stylelint-config-prettier-scss'],
+  // @see https://stylelint.io/user-guide/rules
+  // @see https://github.com/stylelint-scss/stylelint-scss#list-of-rules
+  rules: {
+    // Enforce camelCase naming
+    'selector-class-pattern': camelCaseRegex,
+    'keyframes-name-pattern': camelCaseRegex,
+    'scss/dollar-variable-pattern': camelCaseRegex,
+    'scss/at-mixin-pattern': camelCaseRegex,
+    'scss/at-function-pattern': camelCaseRegex,
+    // TODO: This rule can be removed entirely (already lower by default) once we're fully off Sass
+    'function-name-case': [
+      'lower',
+      {
+        ignoreFunctions: [`/${camelCaseRegex}/`, 'MIN'],
+      },
+    ],
+
+    // Opinionated rules
+    'declaration-no-important': true,
+    'max-nesting-depth': [
+      2,
+      {
+        ignore: ['blockless-at-rules', 'pseudo-classes'],
+      },
+    ],
+    'block-no-empty': true,
+    'selector-no-qualifying-type': [
+      true,
+      {
+        ignore: ['attribute'], // Allows input[type=search]
+      },
+    ],
+
+    // 2 spaces for indentation
+    indentation: [
+      2,
+      {
+        indentInsideParens: 'once-at-root-twice-in-block',
+      },
+    ],
+    'string-quotes': 'single',
+    // Mimic 1tbs `} else {` brace style, like our JS
+    'block-opening-brace-space-before': 'always',
+    'block-closing-brace-newline-before': 'always-multi-line',
+    'scss/at-if-closing-brace-space-after': 'always-intermediate',
+    // Put a line-break between sections of CSS, but allow quick one-liners for legibility
+    'rule-empty-line-before': [
+      'always-multi-line',
+      {
+        except: ['first-nested'],
+        ignore: ['after-comment'],
+      },
+    ],
+    // Ensure multiple selectors on one line each
+    'selector-list-comma-newline-before': 'never-multi-line',
+    'selector-list-comma-newline-after': 'always',
+    // Trim unnecessary newlines/whitespace
+    'block-closing-brace-empty-line-before': 'never',
+    'declaration-empty-line-before': null,
+    'max-empty-lines': 1,
+    'no-eol-whitespace': true,
+    // Enforce spacing around various syntax symbols (colons, operators, etc.)
+    'declaration-colon-space-after': 'always-single-line',
+    'declaration-colon-space-before': 'never',
+    'function-calc-no-unspaced-operator': true,
+    'scss/operator-no-unspaced': true,
+    'selector-combinator-space-before': 'always',
+    'selector-combinator-space-after': 'always',
+    // Ensure trailing semicolons are always present on non-oneliners
+    'declaration-block-semicolon-newline-after': 'always-multi-line',
+
+    // Value preferences
+    'number-leading-zero': 'never',
+    'number-max-precision': null,
+    'color-hex-case': 'upper',
+    // Attempt to catch/flag non-variable color values
+    'color-named': 'never',
+    'color-no-hex': true,
+    // Prefer lowercase values, except for font names and currentColor
+    'value-keyword-case': [
+      'lower',
+      {
+        ignoreProperties: ['font-family', '/^\\$eui[\\w]+/'], // Allow fonts and Sass variables
+        ignoreKeywords: ['currentColor'],
+      },
+    ],
+    'declaration-block-no-duplicate-properties': [
+      true,
+      {
+        ignore: ['consecutive-duplicates'], // We occasionally use duplicate property values for cross-browser fallbacks
+      },
+    ],
+
+    // TODO: It may be worth investigating and updating these rules to their more modern counterparts
+    'selector-not-notation': 'simple',
+    'color-function-notation': 'legacy',
+    'alpha-value-notation': 'number',
+
+    // Disable various opinionated extended stylelint rules that EUI has not previously enforced
+    'no-descending-specificity': null,
+    'keyframe-selector-notation': null,
+    'declaration-block-no-redundant-longhand-properties': null,
+    'scss/no-global-function-names': null,
+    'scss/dollar-variable-empty-line-before': null,
+    'scss/at-rule-conditional-no-parentheses': null,
+    'scss/double-slash-comment-empty-line-before': null,
+    'scss/at-if-no-null': null,
+  },
+  ignoreFiles: [
+    'generator-eui/**/*.scss',
+    'src/global_styling/react_date_picker/**/*.scss',
+    'src/themes/amsterdam/global_styling/react_date_picker/**/*.scss',
+    'src/components/date_picker/react-datepicker/**/*.scss',
+  ],
+};

package.json

@@ -26,8 +26,8 @@
     "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-sass": "yarn stylelint \"**/*.scss\"",
+    "lint-sass-fix": "yarn stylelint \"**/*.scss\" --fix",
     "test": "yarn lint && yarn test-unit",
     "test-ci": "yarn test && yarn test-cypress",
     "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
@@ -208,12 +208,12 @@
     "node-sass": "^6.0.1",
     "path": "^0.12.7",
     "pegjs": "^0.10.0",
+    "postcss": "^8.4.19",
     "postcss-cli": "^7.1.2",
     "postcss-inline-svg": "^4.1.0",
     "postcss-loader": "^7.0.1",
     "pre-commit": "^1.2.2",
     "prettier": "^2.1.2",
-    "prettier-stylelint": "^0.4.2",
     "process": "^0.11.10",
     "prompt": "^1.0.0",
     "prop-types": "^15.6.0",
@@ -233,12 +233,13 @@
     "redux-thunk": "^2.3.0",
     "resolve": "^1.17.0",
     "rimraf": "^3.0.2",
-    "sass-lint": "^1.13.1",
-    "sass-lint-auto-fix": "^0.21.2",
     "sass-loader": "^13.0.2",
     "shelljs": "^0.8.4",
     "start-server-and-test": "^1.11.3",
     "style-loader": "^3.3.1",
+    "stylelint": "^14.15.0",
+    "stylelint-config-prettier-scss": "^0.0.1",
+    "stylelint-config-standard-scss": "^6.1.0",
     "terser-webpack-plugin": "^5.3.5",
     "typescript": "4.5.3",
     "uglifyjs-webpack-plugin": "^2.2.0",

src-docs/src/components/guide_page/_guide_page.scss

@@ -4,7 +4,7 @@
 
 .guideBody {
   // Override euiHeaderAffordForFixed mixin since the page template handles this now
-  padding-top: 0 !important; // sass-lint:disable-line no-important
+  padding-top: 0 !important; // stylelint-disable-line declaration-no-important
 }
 
 .euiBody--headerIsFixed--double {
@@ -60,7 +60,6 @@
   color: $euiTitleColor;
 }
 
-
 @include euiBreakpoint('xs', 's') {
   .guideSideNav {
     width: 100%;

src-docs/src/components/guide_rule/_guide_rule.scss

@@ -17,5 +17,3 @@
     margin-top: 0;
   }
 }
-
-

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

@@ -22,13 +22,13 @@
 }
 
 .guideSectionTabs__tab > * {
-  font-weight: $euiFontWeightMedium !important; // sass-lint:disable-line no-important
+  font-weight: $euiFontWeightMedium !important; // stylelint-disable-line declaration-no-important
 }
 
 .guideDemo__ghostBackground {
   @if (lightness($euiTextColor) < 50) {
     color: $euiColorGhost;
     // Override EuiPanel specificity
-    background: $euiColorDarkestShade !important; // sass-lint:disable-line no-important
+    background: $euiColorDarkestShade !important; // stylelint-disable-line declaration-no-important
   }
 }

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

@@ -4,4 +4,3 @@ $knobTableRowMinHeight: 42px;
   min-height: $knobTableRowMinHeight;
   display: block;
 }
-

src-docs/src/views/datagrid/_datagrid.scss

@@ -1,9 +1,9 @@
 .euiDataGridRowCell--favoriteFranchise {
-  background: transparentize($color: #800080, $amount: .95) !important; // sass-lint:disable-line no-important
+  background: transparentize($color: #800080, $amount: .95) !important; // stylelint-disable-line declaration-no-important, color-no-hex
 }
 
 .euiDataGridHeaderCell--favoriteFranchise {
-  background: transparentize($color: #800080, $amount: .9) !important; // sass-lint:disable-line no-important
+  background: transparentize($color: #800080, $amount: .9) !important; // stylelint-disable-line declaration-no-important, color-no-hex
 }
 
 .euiDataGridRow--rowClassesDemo {

src-docs/src/views/empty_prompt/_empty_prompt.scss

@@ -1,6 +1,6 @@
 .guideDemo__emptyPromptPanelPicker {
   width: 100%;
-  gap: $euiSizeXL; // sass-lint:disable-line no-misspelled-properties
+  gap: $euiSizeXL;
 }
 
 .guideDemo__emptyPromptPanelPickerThumbBtn {
@@ -26,4 +26,4 @@
 .guideDemo__emptyPromptDemoPreview {
   border: 1px solid $guideDemoHighlightColor;
   overflow: hidden;
-}
+}