@alma-oss/stylelint-config 10.0.0-alpha.0

package/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2020, LMC s.r.o.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,146 @@
+# `@alma-oss/stylelint-config`
+
+[![npm version](https://img.shields.io/npm/v/@alma-oss/stylelint-config?label=npm%20package&logo=npm)](https://www.npmjs.org/package/@alma-oss/stylelint-config)
+[![Node version](https://img.shields.io/node/v/@alma-oss/stylelint-config.svg?style=flat&logo=nodedotjs)](https://nodejs.org/download/)
+[![Stylelint version](https://img.shields.io/npm/dependency-version/@alma-oss/stylelint-config/peer/stylelint?logo=stylelint)](https://github.com/stylelint/stylelint)
+
+> Alma Career’s config for Stylelint
+
+## Usage
+
+```bash
+# Yarn:
+yarn add --dev @alma-oss/stylelint-config stylelint-prettier
+
+# npm:
+npm install --save-dev @alma-oss/stylelint-config stylelint-prettier
+```
+
+> We assume you are using Prettier. That’s why we also recommend adding
+> `stylelint-prettier` above.
+
+Configuration extends community maintained config [stylelint-config-standard-scss](https://github.com/stylelint-scss/stylelint-config-standard-scss).
+
+This config:
+
+- Extends the [`stylelint-config-recommended` shared config](https://github.com/stylelint/stylelint-config-recommended) and configures its rules for SCSS;
+- extends the [`stylelint-config-recommended-scss` shared config](https://github.com/stylelint-scss/stylelint-config-recommended-scss) and configures its rules for SCSS;
+- extends the [`stylelint-config-standard` shared config](https://github.com/stylelint/stylelint-config-standard) and configures its rules.
+
+## Configuration
+
+- **`@alma-oss/stylelint-config`**
+
+Use this ruleset to configure Stylelint to work with your code.
+
+## Recommended Stylelint Configuration
+
+```js
+// .stylelintrc.mjs
+
+export default {
+  extends: ['@alma-oss/stylelint-config', 'stylelint-prettier/recommended'],
+};
+```
+
+<details>
+<summary><i>.stylelintrc</i> or <i>.stylelintrc.json</i></summary>
+
+```json
+{
+  "extends": ["@alma-oss/stylelint-config", "stylelint-prettier/recommended"]
+}
+```
+
+</details>
+
+<details>
+<summary><i>package.json</i></summary>
+
+```json
+{
+  "stylelint": {
+    "extends": ["@alma-oss/stylelint-config", "stylelint-prettier/recommended"]
+  }
+}
+```
+
+</details>
+
+## Checking Properties Order
+
+To further extend control over coding style of your stylesheets, we are also
+checking for properties order.
+
+The `order` config enforces a consistent order of content in your declaration blocks:
+
+1. Sass variables,
+2. CSS custom properties,
+3. Sass `@extend`,
+4. single-line Sass `@include`,
+5. declarations,
+6. nested rules,
+
+For better flexibility, block at-rules (like `@media`, `@supports`, and also Sass `@if`, `@each`, etc.) can be placed
+anywhere in the declaration block.
+
+Besides, properties in the declarations must be ordered by following categories:
+
+1. `all` properties,
+2. `content`,
+3. position,
+4. `appearance`,
+5. box model,
+6. typography,
+7. decorations,
+8. effects and transforms,
+9. interactions,
+10. transitions and animations.
+
+👉 To see the order of individual properties this config prescribes, please read
+the [`order` config itself](./rules/order.js).
+
+## Stylistic Rules
+
+Stylistic rules (like indentation etc.) [were dropped][stylelint-v16-stylistic-rules]
+in Stylelint v16. To enforce them, you can use
+[`stylelint-prettier`][stylelint-prettier]:
+
+```json
+// `.stylelintrc`
+{
+  "plugins": ["stylelint-prettier"],
+  "rules": {
+    "prettier/prettier": true
+  }
+}
+```
+
+## FAQ
+
+<details>
+<summary>How do I change the indentation?</summary>
+### With Prettier
+
+If using Prettier, you can configure the indentation in your Prettier config:
+
+```json
+{
+  "tabWidth": 2
+}
+```
+
+Or in your [`.editorconfig`][editorconfig]:
+
+```ini
+[*]
+indent_size = 2
+```
+
+👉 See [Prettier][prettier] documentation for more options.
+
+</details>
+
+[prettier]: https://prettier.io
+[stylelint-v16-stylistic-rules]: https://stylelint.io/migration-guide/to-16/#removed-deprecated-stylistic-rules
+[stylelint-prettier]: https://github.com/prettier/stylelint-prettier

package/index.js

@@ -0,0 +1,4 @@
+export default {
+  customSyntax: 'postcss-scss',
+  extends: ['./rules/scss', './rules/extras', './rules/order'],
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@alma-oss/stylelint-config",
+  "version": "10.0.0-alpha.0",
+  "description": "Alma Career's config for Stylelint",
+  "keywords": [
+    "stylelint",
+    "config",
+    "alma",
+    "career",
+    "preset"
+  ],
+  "author": "Tomáš Litera <tomas.litera@almacareer.com>",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "index.js",
+    "rules/extras.js",
+    "rules/order.js",
+    "rules/scss.js"
+  ],
+  "exports": {
+    ".": "./index.js",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lmc-eu/code-quality-tools",
+    "directory": "packages/stylelint-config"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "lint": "yarn lint:css",
+    "lint:css": "npm-run-all --serial lint:css:main lint:css:order lint:css:scss",
+    "lint:css:main": "stylelint --config index.js __tests__/__fixtures__/css-valid.css",
+    "lint:css:order": "stylelint --config rules/order.js __tests__/__fixtures__/css-valid.css",
+    "lint:css:scss": "stylelint --config rules/scss.js __tests__/__fixtures__/scss-valid.scss",
+    "test": "npm-run-all --serial lint test:unit",
+    "test:unit": "node --test"
+  },
+  "dependencies": {
+    "postcss-scss": "^4.0.3",
+    "stylelint-config-standard-scss": "^13.0.0",
+    "stylelint-order": "^6.0.0"
+  },
+  "devDependencies": {
+    "npm-run-all2": "9.0.3",
+    "stylelint": "16.26.1"
+  },
+  "peerDependencies": {
+    "stylelint": "^16.0.0"
+  },
+  "gitHead": "e0813802528e9cd92fd6c6a835058ad067f2d958"
+}

package/rules/extras.js

@@ -0,0 +1,118 @@
+export default {
+  rules: {
+    // No default value
+    // Reason: Color-named values disabled - desired lint should check for design system token values only.
+    // Docs: https://stylelint.io/user-guide/rules/list/color-named
+    'color-named': 'never',
+
+    // Reason: Except for utility classes and third-party overrides, !important can be avoided.
+    // Docs: https://stylelint.io/user-guide/rules/list/declaration-no-important
+    'declaration-no-important': true,
+
+    // Reasons:
+    // - Background images should be stored locally.
+    // - Lets make people think more about what actually needs to be animated. Only hardware-accelerable properties should be transitioned.
+    // Docs: https://stylelint.io/user-guide/rules/list/declaration-property-value-disallowed-list
+    'declaration-property-value-disallowed-list': [
+      {
+        '/^background/': ['http:', 'https:'],
+        '/^transition/': ['/all/'],
+      },
+      {
+        message:
+          'Transitioning all properties and absolute background URLs are not allowed (declaration-property-value-disallowed-list)',
+      },
+    ],
+
+    // No default value
+    // Reason: Declaring font weights in other ways is unsafe.
+    // Docs: https://stylelint.io/user-guide/rules/list/font-weight-notation
+    'font-weight-notation': 'numeric',
+
+    // Reason: Selector maximum class count should be just one but especially form parts/components
+    // need more complex selectors to add styles when validation is applied.
+    // Setting rule to "1" would be uneasy to pass in almost all projects so "2" is clearly just fine.
+    // In case of inevitable more complex selector it is allowed and recommended to locally disable that rule.
+    // Docs: https://stylelint.io/user-guide/rules/list/selector-max-class
+    'selector-max-class': 2,
+
+    // Reason: Keep selector specificity as low as possible by default.
+    // Docs: https://stylelint.io/user-guide/rules/list/selector-max-compound-selectors
+    'selector-max-compound-selectors': 3,
+
+    // Reason: IDs are handy for Javascript, not for CSS anymore.
+    // Docs: https://stylelint.io/user-guide/rules/list/selector-max-id
+    'selector-max-id': 0,
+
+    // Reason: Keep selector specificity as low as possible by default.
+    // Docs: https://stylelint.io/user-guide/rules/list/selector-max-specificity
+    'selector-max-specificity': '0,4,0',
+
+    // Reason: Most of the time, we should know what elements or classes we are targeting.
+    // Docs: https://stylelint.io/user-guide/rules/list/selector-max-universal
+    'selector-max-universal': 0,
+
+    // Reason: Avoid compound selectors' creation using nested ampersand SASS syntax.
+    // Main reasons why use this pattern:
+    // - Unification with design system components code style
+    // - Look up easily for the selector using fulltext search in IDEs
+    // - Better orientation in longer component's code when scrolled down
+    // - Makes `no-descending-specificity` stylelint rule work correctly
+    // - IDE's support clicking through from selector usage to its source
+    // Docs: https://stylelint.io/user-guide/rules/list/selector-nested-pattern/
+    'selector-nested-pattern': [
+      '(^&:)|(^&\\[)|(^&\\.(is\\-|has\\-))',
+      {
+        message:
+          'Only pseudo class selector, attribute selector and combination with state class is allowed (selector-nested-pattern)',
+      },
+    ],
+
+    // Reason: In most cases, it only needlessly increases selector specificity.
+    // Docs: https://stylelint.io/user-guide/rules/list/selector-no-qualifying-type
+    'selector-no-qualifying-type': true,
+
+    // Default value: 'always' with secondary options.
+    // Reason: Turned off to support grouping variables using empty lines.
+    // Docs: https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/dollar-variable-empty-line-before/README.md
+    'scss/dollar-variable-empty-line-before': null,
+
+    // Default value: 'never'
+    // Reasons:
+    // - The aim is unified syntax;
+    // - mixin is a callable function;
+    // - will not be misunderstood with extended selector.
+    // Docs: https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/at-mixin-argumentless-call-parentheses/README.md
+    'scss/at-mixin-argumentless-call-parentheses': 'always',
+
+    // Default value: true
+    // Reason: Since there is `max-line-length` rule se to max. 120 chars, it should be allowed to use a new line for better code readability.
+    // Docs: https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/operator-no-newline-after/README.md
+    'scss/operator-no-newline-after': null,
+
+    // Default value: true
+    // Reason: Since there is `max-line-length` rule se to max. 120 chars, it should be allowed to use a new line for better code readability.
+    // (same reason for rule above)
+    // Docs: https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/operator-no-newline-before/README.md
+    'scss/operator-no-newline-before': null,
+
+    // Default value: 'always'
+    // Reason: Support multi-line value definitions lets developer make code more readable.
+    // It is handy especially for uneasy math calculations.
+    // Docs: https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/dollar-variable-colon-space-after/README.md
+    'scss/dollar-variable-colon-space-after': 'always-single-line',
+
+    // Default value `comment-no-empty`: null
+    // Default value `scss/comment-no-empty`: true
+    // Reason: Allow empty lines in structured block comments.
+    // Docs: https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/comment-no-empty/README.md
+    'scss/comment-no-empty': null,
+
+    // Default value: true
+    // Reasons:
+    // - In some cases it is handy to use functions like `unquote`;
+    // - values come from Supernova, so you never know what you're going to get.
+    // Docs: https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/function-unquote-no-unquoted-strings-inside/README.md
+    'scss/function-unquote-no-unquoted-strings-inside': null,
+  },
+};

package/rules/order.js

@@ -0,0 +1,408 @@
+export default {
+  plugins: ['stylelint-order'],
+  rules: {
+    'order/order': [
+      'dollar-variables',
+      'custom-properties',
+      {
+        name: 'extend',
+        type: 'at-rule',
+      },
+      {
+        hasBlock: false,
+        name: 'include',
+        type: 'at-rule',
+      },
+      'declarations',
+      'rules',
+    ],
+    'order/properties-order': [
+      // All properties
+      'all',
+
+      // Content
+      'content',
+
+      // Position
+      'position',
+      'inset',
+      'inset-inline',
+      'inset-inline-start',
+      'inset-inline-end',
+      'inset-block',
+      'inset-block-start',
+      'inset-block-end',
+      'top',
+      'right',
+      'bottom',
+      'left',
+      'contain',
+      'contain-intrinsic-size',
+      'contain-intrinsic-inline-size',
+      'contain-intrinsic-width',
+      'contain-intrinsic-block-size',
+      'contain-intrinsic-height',
+      'isolation',
+      'z-index',
+
+      // General appearance
+      'appearance',
+
+      // Box model
+      'direction',
+      'container',
+      'container-name',
+      'container-type',
+      'display',
+      'flex',
+      'flex-grow',
+      'flex-shrink',
+      'flex-basis',
+      'flex-direction',
+      'flex-flow',
+      'flex-wrap',
+      'grid',
+      'grid-area',
+      'grid-template',
+      'grid-template-columns',
+      'grid-template-rows',
+      'grid-template-areas',
+      'grid-column',
+      'grid-column-start',
+      'grid-column-end',
+      'grid-row',
+      'grid-row-start',
+      'grid-row-end',
+      'grid-auto-columns',
+      'grid-auto-rows',
+      'grid-auto-flow',
+      'grid-gap',
+      'grid-column-gap',
+      'grid-row-gap',
+      'columns',
+      'column-count',
+      'column-fill',
+      'column-span',
+      'column-width',
+      'column-rule',
+      'column-rule-width',
+      'column-rule-style',
+      'column-rule-color',
+      'gap',
+      'column-gap',
+      'row-gap',
+      'place-self',
+      'place-content',
+      'place-items',
+      'align-self',
+      'align-content',
+      'align-items',
+      'justify-self',
+      'justify-content',
+      'justify-items',
+      'order',
+      'table-layout',
+      'empty-cells',
+      'shape-outside',
+      'shape-image-threshold',
+      'shape-margin',
+      'clip-path',
+      'float',
+      'clear',
+      'box-sizing',
+      'inline-size',
+      'min-inline-size',
+      'max-inline-size',
+      'width',
+      'min-width',
+      'max-width',
+      'block-size',
+      'min-block-size',
+      'max-block-size',
+      'height',
+      'min-height',
+      'max-height',
+      'aspect-ratio',
+      'object-fit',
+      'object-position',
+      'padding',
+      'padding-inline',
+      'padding-inline-start',
+      'padding-inline-end',
+      'padding-block',
+      'padding-block-start',
+      'padding-block-end',
+      'padding-top',
+      'padding-right',
+      'padding-bottom',
+      'padding-left',
+      'margin',
+      'margin-inline',
+      'margin-inline-start',
+      'margin-inline-end',
+      'margin-block',
+      'margin-block-start',
+      'margin-block-end',
+      'margin-top',
+      'margin-right',
+      'margin-bottom',
+      'margin-left',
+      'overflow',
+      'overflow-inline',
+      'overflow-x',
+      'overflow-block',
+      'overflow-y',
+      'overflow-anchor',
+
+      // Typography
+      'font',
+      'font-style',
+      'font-weight',
+      'font-size',
+      'font-size-adjust',
+      'line-height',
+      'font-family',
+      'font-variant',
+      'font-variant-alternates',
+      'font-variant-caps',
+      'font-variant-east-asian',
+      'font-variant-emoji',
+      'font-variant-ligatures',
+      'font-variant-numeric',
+      'font-variant-position',
+      'font-feature-settings',
+      'font-stretch',
+      'font-synthesis',
+      'font-synthesis-weight',
+      'font-synthesis-style',
+      'font-synthesis-small-caps',
+      'font-synthesis-position',
+      'font-kerning',
+      'font-optical-sizing',
+      'font-palette',
+      'font-display',
+      'src',
+      'letter-spacing',
+      'quotes',
+      'text-align',
+      'text-align-last',
+      'text-indent',
+      'text-decoration',
+      'text-decoration-color',
+      'text-decoration-line',
+      'text-decoration-style',
+      'text-decoration-thickness',
+      'text-decoration-skip-ink',
+      'text-underline-offset',
+      'text-underline-position',
+      'text-overflow',
+      'text-shadow',
+      'text-rendering',
+      'text-size-adjust',
+      'text-transform',
+      'text-wrap',
+      'text-wrap-mode',
+      'text-wrap-style',
+      'writing-mode',
+      'white-space',
+      'white-space-collapse',
+      'word-break',
+      'word-spacing',
+      'overflow-wrap',
+      'hyphens',
+      'vertical-align',
+      'list-style',
+      'list-style-image',
+      'list-style-position',
+      'list-style-type',
+      'counter-increment',
+      'counter-reset',
+      'counter-set',
+
+      // Decorations
+      'color-scheme',
+      'color',
+      'color-interpolation',
+      'accent-color',
+      'border',
+      'border-width',
+      'border-style',
+      'border-color',
+      'border-image',
+      'border-image-outset',
+      'border-image-repeat',
+      'border-image-slice',
+      'border-image-source',
+      'border-image-width',
+      'border-inline',
+      'border-inline-width',
+      'border-inline-style',
+      'border-inline-color',
+      'border-inline-start',
+      'border-inline-start-width',
+      'border-inline-start-style',
+      'border-inline-start-color',
+      'border-inline-end',
+      'border-inline-end-width',
+      'border-inline-end-style',
+      'border-inline-end-color',
+      'border-block',
+      'border-block-width',
+      'border-block-style',
+      'border-block-color',
+      'border-block-start',
+      'border-block-start-width',
+      'border-block-start-style',
+      'border-block-start-color',
+      'border-block-end',
+      'border-block-end-width',
+      'border-block-end-style',
+      'border-block-end-color',
+      'border-top',
+      'border-top-width',
+      'border-top-style',
+      'border-top-color',
+      'border-right',
+      'border-right-width',
+      'border-right-style',
+      'border-right-color',
+      'border-bottom',
+      'border-bottom-width',
+      'border-bottom-style',
+      'border-bottom-color',
+      'border-left',
+      'border-left-width',
+      'border-left-style',
+      'border-left-color',
+      'border-radius',
+      'border-start-start-radius',
+      'border-start-end-radius',
+      'border-end-start-radius',
+      'border-end-end-radius',
+      'border-top-left-radius',
+      'border-top-right-radius',
+      'border-bottom-right-radius',
+      'border-bottom-left-radius',
+      'border-collapse',
+      'border-spacing',
+      'background',
+      'background-image',
+      'background-position',
+      'background-position-x',
+      'background-position-y',
+      'background-size',
+      'background-repeat',
+      'background-attachment',
+      'background-origin',
+      'background-clip',
+      'background-color',
+      'background-blend-mode',
+      'paint-order',
+      'stroke',
+      'fill',
+      'outline',
+      'outline-color',
+      'outline-style',
+      'outline-width',
+      'outline-offset',
+      'box-decoration-break',
+      'box-shadow',
+
+      // Effects and transforms
+      'visibility',
+      'opacity',
+      'mix-blend-mode',
+      'filter',
+      'backdrop-filter',
+      'mask',
+      'mask-clip',
+      'mask-composite',
+      'mask-image',
+      'mask-mode',
+      'mask-origin',
+      'mask-position',
+      'mask-repeat',
+      'mask-size',
+      'mark-border',
+      'mask-border-mode',
+      'mask-border-outset',
+      'mask-border-repeat',
+      'mask-border-slice',
+      'mask-border-source',
+      'mask-border-width',
+      'mask-type',
+      'translate',
+      'rotate',
+      'scale',
+      'perspective',
+      'perspective-origin',
+      'transform',
+      'transform-box',
+      'transform-origin',
+      'transform-style',
+      'backface-visibility',
+      'image-orientation',
+      'image-rendering',
+
+      // Interactions
+      'user-select',
+      'pointer-events',
+      'resize',
+      'touch-action',
+      'scroll-behavior',
+      'scroll-snap-type',
+      'scroll-padding',
+      'scroll-padding-inline',
+      'scroll-padding-inline-start',
+      'scroll-padding-inline-end',
+      'scroll-padding-block',
+      'scroll-padding-block-start',
+      'scroll-padding-block-end',
+      'scroll-padding-top',
+      'scroll-padding-right',
+      'scroll-padding-bottom',
+      'scroll-padding-left',
+      'scroll-snap-align',
+      'scroll-margin',
+      'scroll-margin-inline',
+      'scroll-margin-inline-start',
+      'scroll-margin-inline-end',
+      'scroll-margin-block',
+      'scroll-margin-block-start',
+      'scroll-margin-block-end',
+      'scroll-margin-top',
+      'scroll-margin-right',
+      'scroll-margin-bottom',
+      'scroll-margin-left',
+      'scroll-snap-stop',
+      'overscroll-behavior',
+      'overscroll-behavior-inline',
+      'overscroll-behavior-block',
+      'overscroll-behavior-x',
+      'overscroll-behavior-y',
+      'caret-color',
+      'cursor',
+      'scrollbar-color',
+      'scrollbar-gutter',
+      'scrollbar-width',
+
+      // Transitions and animations
+      'transition',
+      'transition-property',
+      'transition-duration',
+      'transition-timing-function',
+      'transition-delay',
+      'transition-behavior',
+      'animation',
+      'animation-name',
+      'animation-duration',
+      'animation-timing-function',
+      'animation-delay',
+      'animation-iteration-count',
+      'animation-direction',
+      'animation-fill-mode',
+      'animation-play-state',
+      'will-change',
+    ],
+  },
+};

package/rules/scss.js

@@ -0,0 +1,49 @@
+export default {
+  extends: ['stylelint-config-standard-scss'],
+  rules: {
+    // Accept selector class pattern according to BEM methodology for general components
+    // and kebab-case for utility components.
+    // Docs: https://stylelint.io/user-guide/rules/list/selector-class-pattern
+    'selector-class-pattern': [
+      '(^([A-Z][a-zA-Z0-9]*)((--|__)[a-z][a-zA-Z0-9]*)*$)|(^([a-z][a-z0-9]*)(-[a-z0-9]+)*$)',
+      {
+        message:
+          'Expected class selector to be in format `MyComponent__myElement`, `MyComponent--modifier` ' +
+          'or `kebab-case` for utility classes (selector-class-pattern)',
+      },
+    ],
+
+    // Default value: true
+    // Reason: Generally developers don't quite understand flexbox and CSS grid. Let's avoid shorthands to easier readability for everyone.
+    // Docs: https://stylelint.io/user-guide/rules/list/declaration-block-no-redundant-longhand-properties
+    'declaration-block-no-redundant-longhand-properties': [
+      true,
+      {
+        ignoreShorthands: ['/^flex/', '/^grid/'],
+      },
+    ],
+
+    // All options remained as defaults except secondary option `blockless-after-blockless` that had changed to `blockless-after-same-name-blockless`.
+    // Reason: To keep `at rules` grouped.
+    // Docs: https://stylelint.io/user-guide/rules/list/at-rule-empty-line-before
+    'at-rule-empty-line-before': [
+      'always',
+      {
+        except: ['blockless-after-same-name-blockless', 'first-nested'],
+        ignore: ['after-comment'],
+        ignoreAtRules: ['else'],
+      },
+    ],
+
+    // Allow only kebab-case variables naming. For private variables also allow underscore prefix.
+    // Reason: To allow underscore prefix for private variables.
+    // Docs: https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/dollar-variable-pattern/README.md
+    'scss/dollar-variable-pattern': [
+      '^(_?[a-z][a-z0-9]*)(-[a-z0-9]+)*$',
+      {
+        message:
+          'Expected variable to be kebab-case. Underscore prefix for private variables is allowed (scss/dollar-variable-pattern)',
+      },
+    ],
+  },
+};