Configured stylelint-scss 🌽

config/stylelint.config.js

@@ -8,6 +8,7 @@ export default () => ({
     files: ['**/*.scss'], // TODO: Extend and make dry
     rules: {
       '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
       'property-no-unknown': null, // scss/property-no-unknown
       ...Rules.DeclarationStrictValue,

config/stylelint/constants.ts

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

config/stylelint/rules/scss.ts

@@ -1,3 +1,92 @@
 // https://github.com/stylelint-scss/stylelint-scss
 
-export default {}
+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,
+  '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,
+  '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,
+  '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,
+  '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,
+  'scss/property-no-unknown': true,
+  // 'scss/selector-nest-combinators': 'always',
+  'scss/selector-no-redundant-nesting-selector': true,
+  // 'scss/selector-no-union-class-name': false,
+}

package.json

@@ -44,7 +44,7 @@
     "stylelint-config-property-sort-order-smacss": "10.0.0",
     "stylelint-declaration-strict-value": "1.10.6",
     "stylelint-order": "6.0.4",
-    "stylelint-scss": "6.4.1"
+    "stylelint-scss": "6.5.0"
   },
   "devDependencies": {
     "@babel/core": "7.24.6",

yarn.lock

@@ -2364,7 +2364,7 @@ css-property-sort-order-smacss@~2.2.0:
   resolved "https://registry.yarnpkg.com/css-property-sort-order-smacss/-/css-property-sort-order-smacss-2.2.0.tgz#c2cb4741e5580fe2f6d968ccde0946e8b689033c"
   integrity sha512-nXutswsivIEBOrPo/OZw2KQjFPLvtg68aovJf6Kqrm3L6FmTvvFPaeDrk83hh0+pRJGuP3PeKJwMS0E6DFipdQ==
 
-css-tree@^2.3.1:
+css-tree@2.3.1, css-tree@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
   integrity sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==
@@ -3153,7 +3153,7 @@ is-path-inside@^3.0.3:
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
-is-plain-object@^5.0.0:
+is-plain-object@5.0.0, is-plain-object@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
   integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
@@ -4128,11 +4128,6 @@ postcss-media-query-parser@^0.2.3:
   resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
   integrity sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==
 
-postcss-resolve-nested-selector@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
-  integrity sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==
-
 postcss-resolve-nested-selector@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.4.tgz#0068767902fb40f0e6cd7b24faee4fa4bc14a5da"
@@ -4143,14 +4138,6 @@ postcss-safe-parser@^7.0.0:
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz#6273d4e5149e286db5a45bc6cf6eafcad464014a"
   integrity sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==
 
-postcss-selector-parser@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz#49694cb4e7c649299fea510a29fa6577104bcf53"
-  integrity sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==
-  dependencies:
-    cssesc "^3.0.0"
-    util-deprecate "^1.0.2"
-
 postcss-selector-parser@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz#5be94b277b8955904476a2400260002ce6c56e38"
@@ -4597,15 +4584,17 @@ [email protected], stylelint-order@^6.0.4:
     postcss "^8.4.32"
     postcss-sorting "^8.0.2"
 
-stylelint-scss@6.4.1:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-6.4.1.tgz#78a197bbcdf9a61b7365769a9a42dddc722a24c5"
-  integrity sha512-+clI2bQC2FPOt06ZwUlXZZ95IO2C5bKTP0GLN1LNQPVvISfSNcgMKv/VTwym1mK9vnqhHbOk8lO4rj4nY7L9pw==
+stylelint-scss@6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-6.5.0.tgz#c5495f254195c41b97f9bc995e4d3725b375447a"
+  integrity sha512-yOnYlr71wrTPT3rYyUurgTj6Rw7JUtzsZQsiPEjvs+k/yqoYHdweqpw6XN/ARpxjAuvJpddoMUvV8aAIpvUwTg==
   dependencies:
+    css-tree "2.3.1"
+    is-plain-object "5.0.0"
     known-css-properties "^0.34.0"
     postcss-media-query-parser "^0.2.3"
-    postcss-resolve-nested-selector "^0.1.1"
-    postcss-selector-parser "^6.1.0"
+    postcss-resolve-nested-selector "^0.1.4"
+    postcss-selector-parser "^6.1.1"
     postcss-value-parser "^4.2.0"
 
 [email protected], stylelint@^16.8.0: