stylelint-config-plus

stylelint-config-recommended
stylelint-config-standard
@stylistic/stylelint-plugin
stylelint-order
stylelint-config-html (*.html, *.vue and so on)

Install

npm i stylelint-config-plus -D

Usage

// stylelint.config.js
export default {
    extends: ["stylelint-config-plus"]
};

Rules

Base on stylelint@16.9.0 (2024/9/4)
| |Rules|Count| | |:-:|-----|----:|--:| | |All rules| 191| | |✔️|Defined in plus| 135|70.7%| | ❌|Undefined| 56|29.3%| | ✅|Recommended + Standard| 70|36.6%| |🔧|Fixable| 95|49.7%| |🎨|Stylistic| 64|33.5%|

Details

| |Rules|Type|Enabled|Value| |--:|:----|:---|:-----:|:----| | 1|alpha-value-notation|✅🔧| ✔️ |

<summary>Details</summary>["percentage",{"exceptProperties":["opacity","fill-opacity","flood-opacity","stop-opacity","stroke-opacity"]}]

| | 2|annotation-no-unknown|✅ | ✔️ |true| | 3|at-rule-allowed-list| | ❌ | | | 4|at-rule-disallowed-list| | ❌ | | | 5|at-rule-empty-line-before|✅🔧| ✔️ |

<summary>Details</summary>["always",{"except":["blockless-after-same-name-blockless","first-nested"],"ignore":["after-comment"]}]

| | 6|at-rule-no-unknown|✅ | ✔️ |true| | 7|at-rule-no-vendor-prefix|✅🔧| ✔️ |true| | 8|at-rule-property-required-list| | ❌ | | | 9|block-no-empty|✅ | ✔️ |true| | 10|color-function-notation|✅🔧| ✔️ |"modern"| | 11|color-hex-alpha| | ❌ | | | 12|color-hex-length|✅🔧| ✔️ |"short"| | 13|color-named| | ❌ | | | 14|color-no-hex| | ❌ | | | 15|color-no-invalid-hex|✅ | ✔️ |true| | 16|comment-empty-line-before|✅🔧| ✔️ |

<summary>Details</summary>["always",{"except":["first-nested"],"ignore":["stylelint-commands"]}]

| | 17|comment-no-empty|✅ | ✔️ |true| | 18|comment-pattern| | ❌ | | | 19|comment-whitespace-inside|✅🔧| ✔️ |"always"| | 20|comment-word-disallowed-list| | ❌ | | | 21|custom-media-pattern|✅ | ✔️ |

<summary>Details</summary>

["^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",{"message":"(name) => \"Expected custom media query name \"${name}\" to be kebab-case\""}]

| | 22|custom-property-empty-line-before|✅🔧| ✔️ |

<summary>Details</summary>["always",{"except":["after-custom-property","first-nested"],"ignore":["after-comment","inside-single-line-block"]}]

| | 23|custom-property-no-missing-var-function|✅ | ✔️ |true| | 24|custom-property-pattern|✅ | ✔️ |

<summary>Details</summary>

["^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",{"message":"(name) => \"Expected custom property name \"${name}\" to be kebab-case\""}]

| | 25|declaration-block-no-duplicate-custom-properties|✅ | ✔️ |true| | 26|declaration-block-no-duplicate-properties|✅🔧| ✔️ |

<summary>Details</summary>[true,{"ignore":["consecutive-duplicates-with-different-syntaxes"]}]

| | 27|declaration-block-no-redundant-longhand-properties|✅🔧| ✔️ |true| | 28|declaration-block-no-shorthand-property-overrides|✅ | ✔️ |true| | 29|declaration-block-single-line-max-declarations|✅ | ✔️ |1 | | 30|declaration-empty-line-before|✅🔧| ✔️ |

<summary>Details</summary>["always",{"except":["after-declaration","first-nested"],"ignore":["after-comment","inside-single-line-block"]}]

| | 31|declaration-no-important| | ❌ | | | 32|declaration-property-max-values| | ❌ | | | 33|declaration-property-unit-allowed-list| | ❌ | | | 34|declaration-property-unit-disallowed-list| | ❌ | | | 35|declaration-property-value-allowed-list| | ❌ | | | 36|declaration-property-value-disallowed-list| | ❌ | | | 37|declaration-property-value-no-unknown| | ❌ | | | 38|font-family-name-quotes|✅🔧| ✔️ |"always-where-recommended"| | 39|font-family-no-duplicate-names|✅ | ✔️ |true| | 40|font-family-no-missing-generic-family-keyword|✅ | ✔️ |true| | 41|font-weight-notation|🔧| ✔️ |undefined| | 42|function-allowed-list| | ❌ | | | 43|function-calc-no-unspaced-operator|✅🔧| ✔️ |true| | 44|function-disallowed-list| | ❌ | | | 45|function-linear-gradient-no-nonstandard-direction|✅ | ✔️ |true| | 46|function-name-case|✅🔧| ✔️ |"lower"| | 47|function-no-unknown|✅ | ✔️ |true| | 48|function-url-no-scheme-relative| | ❌ | | | 49|function-url-quotes|✅🔧| ✔️ |"always"| | 50|function-url-scheme-allowed-list| | ❌ | | | 51|function-url-scheme-disallowed-list| | ❌ | | | 52|hue-degree-notation|✅🔧| ✔️ |"angle"| | 53|import-notation|✅🔧| ✔️ |"url"| | 54|keyframe-block-no-duplicate-selectors|✅ | ✔️ |true| | 55|keyframe-declaration-no-important|✅ | ✔️ |true| | 56|keyframe-selector-notation|✅🔧| ✔️ |

<summary>Details</summary>"percentage-unless-within-keyword-only-block"

| | 57|keyframes-name-pattern|✅ | ✔️ |

<summary>Details</summary>["^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",{"message":"(name) => \"Expected keyframe name \"${name}\" to be kebab-case\""}]

| | 58|length-zero-no-unit|✅🔧| ✔️ |

<summary>Details</summary>[true,{"ignore":["custom-properties"]}]

| | 59|lightness-notation|✅🔧| ✔️ |"percentage"| | 60|max-nesting-depth| | ❌ | | | 61|media-feature-name-allowed-list| | ❌ | | | 62|media-feature-name-disallowed-list| | ❌ | | | 63|media-feature-name-no-unknown|✅ | ✔️ |true| | 64|media-feature-name-no-vendor-prefix|✅🔧| ✔️ |true| | 65|media-feature-name-unit-allowed-list| | ❌ | | | 66|media-feature-name-value-allowed-list| | ❌ | | | 67|media-feature-name-value-no-unknown| | ❌ | | | 68|media-feature-range-notation|✅🔧| ✔️ |"context"| | 69|media-query-no-invalid|✅ | ✔️ |true| | 70|named-grid-areas-no-invalid|✅ | ✔️ |true| | 71|no-descending-specificity|✅ | ✔️ |true| | 72|no-duplicate-at-import-rules|✅ | ✔️ |true| | 73|no-duplicate-selectors|✅ | ✔️ |true| | 74|no-empty-source|✅ | ✔️ |true| | 75|no-invalid-double-slash-comments|✅ | ✔️ |true| | 76|no-invalid-position-at-import-rule|✅ | ✔️ |true| | 77|no-irregular-whitespace|✅ | ✔️ |true| | 78|no-unknown-animations| | ❌ | | | 79|no-unknown-custom-media| | ❌ | | | 80|no-unknown-custom-properties| | ❌ | | | 81|number-max-precision|✅ | ✔️ |4 | | 82|property-allowed-list| | ❌ | | | 83|property-disallowed-list| | ❌ | | | 84|property-no-unknown|✅ | ✔️ |true| | 85|property-no-vendor-prefix|✅🔧| ✔️ |true| | 86|rule-empty-line-before|✅🔧| ✔️ |

<summary>Details</summary>["always-multi-line",{"except":["first-nested"],"ignore":["after-comment"]}]

| | 87|rule-selector-property-disallowed-list| | ❌ | | | 88|selector-anb-no-unmatchable|✅ | ✔️ |true| | 89|selector-attribute-name-disallowed-list| | ❌ | | | 90|selector-attribute-operator-allowed-list| | ❌ | | | 91|selector-attribute-operator-disallowed-list| | ❌ | | | 92|selector-attribute-quotes|✅🔧| ✔️ |"always"| | 93|selector-class-pattern|✅ | ✔️ |

<summary>Details</summary>

["^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",{"message":"(selector) => \"Expected class selector \"${selector}\" to be kebab-case\""}]

| | 94|selector-combinator-allowed-list| | ❌ | | | 95|selector-combinator-disallowed-list| | ❌ | | | 96|selector-disallowed-list| | ❌ | | | 97|selector-id-pattern|✅ | ✔️ |

<summary>Details</summary>

["^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",{"message":"(selector) => \"Expected id selector \"${selector}\" to be kebab-case\""}]

| | 98|selector-max-attribute| | ❌ | | | 99|selector-max-class| | ❌ | | |100|selector-max-combinators| | ❌ | | |101|selector-max-compound-selectors| | ❌ | | |102|selector-max-id| | ❌ | | |103|selector-max-pseudo-class| | ❌ | | |104|selector-max-specificity| | ❌ | | |105|selector-max-type| | ❌ | | |106|selector-max-universal| | ❌ | | |107|selector-nested-pattern| | ❌ | | |108|selector-no-qualifying-type| | ❌ | | |109|selector-no-vendor-prefix|✅🔧| ✔️ |true| |110|selector-not-notation|✅🔧| ✔️ |"complex"| |111|selector-pseudo-class-allowed-list| | ❌ | | |112|selector-pseudo-class-disallowed-list| | ❌ | | |113|selector-pseudo-class-no-unknown|✅ | ✔️ |true| |114|selector-pseudo-element-allowed-list| | ❌ | | |115|selector-pseudo-element-colon-notation|✅🔧| ✔️ |"double"| |116|selector-pseudo-element-disallowed-list| | ❌ | | |117|selector-pseudo-element-no-unknown|✅ | ✔️ |true| |118|selector-type-case|✅🔧| ✔️ |"lower"| |119|selector-type-no-unknown|✅ | ✔️ |

<summary>Details</summary>[true,{"ignore":["custom-elements"]}]

| |120|shorthand-property-no-redundant-values|✅🔧| ✔️ |true| |121|string-no-newline|✅ | ✔️ |true| |122|time-min-milliseconds| | ❌ | | |123|unit-allowed-list| | ❌ | | |124|unit-disallowed-list| | ❌ | | |125|unit-no-unknown|✅ | ✔️ |true| |126|value-keyword-case|✅🔧| ✔️ |"lower"| |127|value-no-vendor-prefix|✅🔧| ✔️ |

<summary>Details</summary>[true,{"ignoreValues":["box","inline-box"]}]

Changelog

CHANGELOG.md

Package detail