Created extensible Stylelint configuration 🖍️

.depcheckrc

@@ -1,4 +1,9 @@
 ignores: [
+  "@stylistic/stylelint-plugin",
+  "stylelint-config-property-sort-order-smacss",
+  "stylelint-declaration-strict-value",
+  "stylelint-order",
+  "stylelint-scss",
   "@types/jest",
   "rimraf"
 ]

TODO

@@ -27,13 +27,14 @@
 - [eslint-plugin-compat](https://github.com/amilajack/eslint-plugin-compat)
 - [eslint-plugin-json](https://github.com/azeemba/eslint-plugin-json)
 
-## Stylelint Rules
-
-- [ ] stylelint-config-property-sort-order-smacss
-- [ ] stylelint-config-standard-scss
-- [ ] stylelint-declaration-strict-value
-- [ ] stylelint-order
-- [ ] stylelint-scss
+## Stylelint Rules/Config
+
+- [x] @stylistic/stylelint-plugin
+- [x] stylelint
+- [x] stylelint-declaration-strict-value
+- [x] stylelint-order
+- [x] stylelint-scss
+- [x] stylelint-config-property-sort-order-smacss
 
 ## Configuration Files
 

config/stylelint.config.js

@@ -0,0 +1,52 @@
+import postcssLess from 'postcss-less'
+import postcssScss from 'postcss-scss'
+
+import Rules from './stylelint/rules'
+
+export default () => ({
+  extends: [
+    'stylelint-config-property-sort-order-smacss',
+  ],
+  overrides: [{
+    customSyntax: postcssScss,
+    files: ['**/*.scss'],
+    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.Scss,
+    },
+    plugins: [
+      'stylelint-scss',
+    ],
+  }, {
+    customSyntax: postcssLess,
+    files: ['**/*.less'],
+    rules: {
+      'annotation-no-unknown': null,
+      'import-notation': 'string',
+      'media-query-no-invalid': null,
+      'no-invalid-position-at-import-rule': [true, {
+				ignoreAtRules: ['use', 'forward'],
+			}],
+    },
+  }],
+  plugins: [
+    '@stylistic/stylelint-plugin',
+    'stylelint-declaration-strict-value',
+    'stylelint-order',
+  ],
+  rules: {
+    ...Rules.DeclarationStrictValue,
+    ...Rules.Order,
+    ...Rules.Stylelint,
+    ...Rules.Stylistic,
+  },
+})

config/stylelint/constants.ts

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

config/stylelint/rules/declaration-strict-value.ts

@@ -0,0 +1,9 @@
+// https://github.com/AndyOGo/stylelint-declaration-strict-value
+
+export default {
+  'scale-unlimited/declaration-strict-value': [
+    ['/color$/', 'fill', 'stroke', 'font-size'], {
+      disableFix: true,
+    },
+  ],
+}

config/stylelint/rules/index.ts

@@ -0,0 +1,15 @@
+import DeclarationStrictValue from './declaration-strict-value'
+import Order from './order'
+import Scss from './scss'
+import Stylelint from './stylelint'
+import Stylistic from './stylistic'
+
+const Rules = {
+  DeclarationStrictValue,
+  Order,
+  Scss,
+  Stylelint,
+  Stylistic,
+}
+
+export default Rules

config/stylelint/rules/order.ts

@@ -0,0 +1,28 @@
+// https://github.com/hudochenkov/stylelint-order
+
+export default {
+  'order/order': [
+    'custom-properties',
+    'dollar-variables',
+    'less-mixins',
+    'at-variables',
+    {
+      name: 'extends',
+      type: 'at-rule',
+    },
+    'at-rules',
+    'declarations',
+    'rules',
+    {
+      hasBlock: true,
+      name: 'include',
+      parameter: 'media',
+      type: 'at-rule',
+    },
+    {
+      hasBlock: true,
+      name: 'media',
+      type: 'at-rule',
+    },
+  ],
+}

config/stylelint/rules/scss.ts

@@ -0,0 +1,102 @@
+// https://github.com/stylelint-scss/stylelint-scss
+
+import { REGEX_PATTERNS } from '../constants'
+
+export default {
+  'scss/at-each-key-value-single-line': true,
+  'scss/at-else-closing-brace-newline-after': 'always-last-in-chain',
+  'scss/at-else-closing-brace-space-after': 'always-intermediate',
+  'scss/at-else-empty-line-before': 'never',
+  'scss/at-else-if-parentheses-space-before': 'always',
+  'scss/at-extend-no-missing-placeholder': true,
+  // 'scss/at-function-named-arguments': ['always', {
+  //   ignore: ['single-argument'],
+  //   ignoreFunctions: [],
+  // }],
+  'scss/at-function-parentheses-space-before': 'never',
+  '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,
+  // 'scss/at-import-partial-extension-allowed-list': [],
+  // 'scss/at-import-partial-extension-disallowed-list': [],
+  'scss/at-mixin-argumentless-call-parentheses': 'never',
+  // 'scss/at-mixin-named-arguments': ['always', {
+  //   ignore: ['single-argument'],
+  // }],
+  'scss/at-mixin-no-risky-nesting-selector': true,
+  'scss/at-mixin-parentheses-space-before': 'never',
+  '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,
+  'scss/at-use-no-redundant-alias': true,
+  'scss/at-use-no-unnamespaced': true,
+  'scss/block-no-redundant-nesting': true, // This rule might need to be disabled when writing overriding styles. In such cases, it is recommended to disable the rule in the file to make it clear that the nesting is intentional.
+  'scss/comment-no-empty': true,
+  'scss/comment-no-loud': true,
+  'scss/declaration-nested-properties': 'never',
+  'scss/declaration-nested-properties-no-divided-groups': true,
+  // 'scss/declaration-property-value-no-unknown': true, // Experimental
+  'scss/dimension-no-non-numeric-values': true,
+  'scss/dollar-variable-colon-newline-after': 'always-multi-line',
+  'scss/dollar-variable-colon-space-after': 'always-single-line',
+  'scss/dollar-variable-colon-space-before': 'never',
+  'scss/dollar-variable-default': [true, {
+    ignore: 'local',
+  }],
+  'scss/dollar-variable-empty-line-after': ['always', {
+    except: ['before-dollar-variable'],
+    ignore: ['before-comment'],
+  }],
+  'scss/dollar-variable-empty-line-before': ['always', {
+    except: ['after-dollar-variable', 'first-nested'],
+    ignore: ['after-comment'],
+  }],
+  'scss/dollar-variable-first-in-block': [true, {
+    ignore: ['comments', 'imports'],
+  }],
+  'scss/dollar-variable-no-missing-interpolation': true,
+  'scss/dollar-variable-no-namespaced-assignment': true,
+  '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'],
+  }],
+  // 'scss/double-slash-comment-inline': 'always',
+  'scss/double-slash-comment-whitespace-inside': 'always',
+  'scss/function-calculation-no-interpolation': true,
+  'scss/function-color-relative': true,
+  // 'scss/function-disallowed-list': [],
+  'scss/function-no-unknown': true,
+  'scss/function-quote-no-quoted-strings-inside': true,
+  'scss/function-unquote-no-unquoted-strings-inside': true,
+  'scss/load-no-partial-leading-underscore': true,
+  'scss/load-partial-extension': 'never',
+  // 'scss/map-keys-quotes': 'always',
+  'scss/media-feature-value-dollar-variable': ['always', {
+    ignore: ['keywords'],
+  }],
+  // 'scss/no-dollar-variables': true,
+  'scss/no-duplicate-dollar-variables': true,
+  'scss/no-duplicate-mixins': true,
+  'scss/no-global-function-names': true,
+  'scss/no-unused-private-members': true,
+  'scss/operator-no-newline-after': true,
+  'scss/operator-no-newline-before': true,
+  'scss/operator-no-unspaced': true,
+  'scss/partial-no-import': true,
+  '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,
+  // 'scss/selector-no-union-class-name': false,
+}