From e6ef71e4e79fe6ce207df75b2adedd85c66e8175 Mon Sep 17 00:00:00 2001 From: Patrick Taylor Date: Tue, 20 Aug 2024 00:02:20 +0100 Subject: [PATCH] =?UTF-8?q?Align=20configuration=20with=20popular=20preset?= =?UTF-8?q?s=20=F0=9F=8F=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 6 ++++ config/stylelint/constants.ts | 2 +- config/stylelint/rules/scss.ts | 16 ++++++--- config/stylelint/rules/stylelint.ts | 50 ++++++++++++++++++++++------- 4 files changed, 57 insertions(+), 17 deletions(-) diff --git a/config/stylelint.config.js b/config/stylelint.config.js index f2760df..f2619d0 100644 --- a/config/stylelint.config.js +++ b/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, diff --git a/config/stylelint/constants.ts b/config/stylelint/constants.ts index 0126a60..2f7d194 100644 --- a/config/stylelint/constants.ts +++ b/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 { diff --git a/config/stylelint/rules/scss.ts b/config/stylelint/rules/scss.ts index 0ab8824..e30ce66 100644 --- a/config/stylelint/rules/scss.ts +++ b/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, diff --git a/config/stylelint/rules/stylelint.ts b/config/stylelint/rules/stylelint.ts index 981daa5..0f49e4b 100644 --- a/config/stylelint/rules/stylelint.ts +++ b/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': '', }