Align configuration with popular presets 🏡

Presets;

1. `stylelint-config-standard-scss`
  1.1. `stylelint-config-standard`
    1.1.1. `stylelint-config-recommended`
  1.2. `stylelint-config-recommended-scss`
    1.2.1. `stylelint-config-recommended`

Changes;

- Disabled rules not relevant to SCSS/Sass.
- Updated kebab-case regex pattern to allow numbers.
- Improved messages for rules using regex patterns.
- Support custom elements.

config/stylelint.config.js

@@ -7,9 +7,15 @@ export default () => ({
   overrides: [{
     files: ['**/*.scss'], // TODO: Extend and make dry
     rules: {
+      'annotation-no-unknown': null,
       'at-rule-no-unknown': null, // scss/at-rule-no-unknown
       'comment-no-empty': null, // scss/comment-no-empty
       'function-no-unknown': null, // scss/function-no-unknown
+      'import-notation': 'string',
+      'media-query-no-invalid': null,
+      'no-invalid-position-at-import-rule': [true, {
+				ignoreAtRules: ['use', 'forward'],
+			}],
       'property-no-unknown': null, // scss/property-no-unknown
       ...Rules.DeclarationStrictValue,
       ...Rules.Scss,

config/stylelint/constants.ts

@@ -1,6 +1,6 @@
 const REGEX_PATTERNS = {
   HYPHENATED_BEM: '^[a-z]+(-[a-z]+)*(__[a-z]+)*$',
-  KEBAB: '^[a-z]+(-[a-z]+)*$',
+  KEBAB: '^[a-z][a-z0-9]*(-[a-z0-9]+)*$',
 }
 
 export {

config/stylelint/rules/scss.ts

@@ -14,7 +14,9 @@ export default {
   //   ignoreFunctions: [],
   // }],
   'scss/at-function-parentheses-space-before': 'never',
-  'scss/at-function-pattern': REGEX_PATTERNS.KEBAB,
+  'scss/at-function-pattern': [REGEX_PATTERNS.KEBAB, {
+    message: 'Expected function name to be kebab-case',
+  }],
   'scss/at-if-closing-brace-newline-after': 'always-last-in-chain',
   'scss/at-if-closing-brace-space-after': 'always-intermediate',
   'scss/at-if-no-null': true,
@@ -26,7 +28,9 @@ export default {
   // }],
   'scss/at-mixin-no-risky-nesting-selector': true,
   'scss/at-mixin-parentheses-space-before': 'never',
-  'scss/at-mixin-pattern': REGEX_PATTERNS.KEBAB,
+  'scss/at-mixin-pattern': [REGEX_PATTERNS.KEBAB, {
+    message: 'Expected mixin name to be kebab-case',
+  }],
   'scss/at-root-no-redundant': true,
   'scss/at-rule-conditional-no-parentheses': true,
   'scss/at-rule-no-unknown': true,
@@ -58,7 +62,9 @@ export default {
   }],
   'scss/dollar-variable-no-missing-interpolation': true,
   'scss/dollar-variable-no-namespaced-assignment': true,
-  'scss/dollar-variable-pattern': REGEX_PATTERNS.KEBAB,
+  'scss/dollar-variable-pattern': [REGEX_PATTERNS.KEBAB, {
+    message: 'Expected variable name to be kebab-case',
+  }],
   'scss/double-slash-comment-empty-line-before': ['always', {
     except: ['first-nested'],
     ignore: ['between-comments', 'stylelint-commands'],
@@ -86,7 +92,9 @@ export default {
   'scss/operator-no-newline-before': true,
   'scss/operator-no-unspaced': true,
   'scss/partial-no-import': true,
-  'scss/percent-placeholder-pattern': REGEX_PATTERNS.KEBAB,
+  'scss/percent-placeholder-pattern': [REGEX_PATTERNS.KEBAB, {
+    message: 'Expected placeholder name to be kebab-case',
+  }],
   'scss/property-no-unknown': true,
   // 'scss/selector-nest-combinators': 'always',
   'scss/selector-no-redundant-nesting-selector': true,

config/stylelint/rules/stylelint.ts

@@ -12,7 +12,9 @@ const descending = {
 
 const duplicate = {
   'declaration-block-no-duplicate-custom-properties': true,
-  'declaration-block-no-duplicate-properties': true,
+  'declaration-block-no-duplicate-properties': [true, {
+    ignore: ['consecutive-duplicates-with-different-syntaxes'],
+  }],
   'font-family-no-duplicate-names': true,
   'keyframe-block-no-duplicate-selectors': true,
   'no-duplicate-at-import-rules': true,
@@ -72,7 +74,9 @@ const unknown = {
   'property-no-unknown': true,
   'selector-pseudo-class-no-unknown': true,
   'selector-pseudo-element-no-unknown': true,
-  'selector-type-no-unknown': true,
+  'selector-type-no-unknown': [true, {
+    ignore: ['custom-elements'],
+  }],
   'unit-no-unknown': true,
 }
 
@@ -102,7 +106,9 @@ const allowedDisallowedAndRequired = {
   'function-url-no-scheme-relative': true,
   // 'function-url-scheme-allowed-list': [],
   // 'function-url-scheme-disallowed-list': [],
-  'length-zero-no-unit': true,
+  'length-zero-no-unit': [true, {
+    ignore: ['custom-properties'],
+  }],
   // 'media-feature-name-allowed-list': [],
   // 'media-feature-name-disallowed-list': [],
   'media-feature-name-no-vendor-prefix': true,
@@ -126,7 +132,9 @@ const allowedDisallowedAndRequired = {
   // 'selector-pseudo-element-disallowed-list': [],
   // 'unit-allowed-list': [],
   // 'unit-disallowed-list': [],
-  'value-no-vendor-prefix': true,
+  'value-no-vendor-prefix': [true, {
+    ignoreValues: ['box', 'inline-box'],
+  }],
 }
 
 const caseSensitive = {
@@ -165,7 +173,7 @@ const maxAndMin = {
     ignore: ['blockless-at-rules', 'pseudo-classes'],
     ignoreAtRules: ['media'],
   }],
-  'number-max-precision': 2,
+  'number-max-precision': 3,
   'selector-max-attribute': 2,
   'selector-max-class': 3,
   'selector-max-combinators': 3,
@@ -179,14 +187,22 @@ const maxAndMin = {
 }
 
 const notation = {
-  'alpha-value-notation': 'number',
+  'alpha-value-notation': ['percentage', {
+    exceptProperties: [
+      'opacity',
+      'fill-opacity',
+      'flood-opacity',
+      'stop-opacity',
+      'stroke-opacity',
+    ],
+  }],
   'color-function-notation': 'modern',
   'color-hex-length': 'short',
   'font-weight-notation': ['numeric', {
     ignore: ['relative'],
   }],
   'hue-degree-notation': 'angle',
-  'import-notation': 'string',
+  'import-notation': 'url',
   'keyframe-selector-notation': 'percentage-unless-within-keyword-only-block',
   'lightness-notation': 'percentage',
   'media-feature-range-notation': 'context',
@@ -196,11 +212,21 @@ const notation = {
 
 const pattern = {
   // 'comment-pattern': '',
-  'custom-media-pattern': REGEX_PATTERNS.KEBAB,
-  'custom-property-pattern': REGEX_PATTERNS.KEBAB,
-  'keyframes-name-pattern': REGEX_PATTERNS.KEBAB,
-  'selector-class-pattern': REGEX_PATTERNS.HYPHENATED_BEM,
-  'selector-id-pattern': REGEX_PATTERNS.KEBAB,
+  'custom-media-pattern': [REGEX_PATTERNS.KEBAB, {
+    message: (name: string) => `Expected custom media query name "${name}" to be kebab-case`,
+  }],
+  'custom-property-pattern': [REGEX_PATTERNS.KEBAB, {
+    message: (name: string) => `Expected custom property name "${name}" to be kebab-case`,
+  }],
+  'keyframes-name-pattern': [REGEX_PATTERNS.KEBAB, {
+    message: (name: string) => `Expected keyframe name "${name}" to be kebab-case`,
+  }],
+  'selector-class-pattern': [REGEX_PATTERNS.HYPHENATED_BEM, {
+    message: (selector: string) => `Expected class selector "${selector}" to be BEM hyphenated`,
+  }],
+  'selector-id-pattern': [REGEX_PATTERNS.KEBAB, {
+    message: (selector: string) => `Expected id selector "${selector}" to be kebab-case`,
+  }],
   // 'selector-nested-pattern': '',
 }