suitcss / stylelint-suitcss

A collection of Stylelint plugins for SUIT CSS

stylelint-suitcss

A collection of stylelint plugins for SUIT CSS.

Installation

npm install stylelint-suitcss --save-dev

# or

yarn add stylelint-suitcss --dev

Usage

Add stylelint-suitcss to your stylelint config plugins array, then add rules you need to the rules object.

// .stylelintrc
{
  "plugins": [
    "stylelint-suitcss"
  ],
  "rules": {
    "suitcss/custom-property-no-outside-root": true,
    "suitcss/root-no-standard-properties": true,
    "suitcss/selector-root-no-composition": true
  }
}

Available rules

• custom-property-no-outside-root - Disallow custom properties outside of :root rules.
• root-no-standard-properties - Disallow standard properties inside :root rules.
• selector-root-no-composition - Disallow the composition of :root in selectors.

stylelint-suitcss's Issues

Disable `no-descending-specificity`

This rule is usually but not always right. Case in point, it gets confused in SCSS contexts:

254:3 ✖ Expected selector .wp-block-pullquote p to come before selector .wp-block-quote.is-large p no-descending-specificity
254:3 ✖ Expected selector .wp-block-pullquote p to come before selector .wp-block-quote.is-style-large p no-descending-specificity
274:3 ✖ Expected selector .wp-block-quote.is-style-large p to come before selector .wp-block-pullquote.is-style-solid-color blockquote p no-descending-specificity
274:3 ✖ Expected selector .wp-block-quote.is-large p to come before selector .wp-block-pullquote.is-style-solid-color blockquote p no-descending-specificity

Question about disabling custom-property-no-outside-root

What is the risk in disabling this? I have some cases where I would like to override the value of a custom property inside a selector. Say:

:root {
  --color: blue;
}

.foo {
  --color: red;
}

I get the stylelint warning without disabling the rule, and I thought i would see what the issue with it is?

Update postcss-selector-parser

postcss-selector-parser is set to version 2.2.3, this version of postcss-selector-parser uses flatten 1.0.2 which is deprecated and causes warnings when installing dependencies.

postcss-selector-parser is up to version 6 which doesn't use flatten.

https://www.npmjs.com/package/postcss-selector-parser

Update stylelint to v8

stylelint-config-suitcss is using stylelint v8 in its dependencies but also uses stylelint-suitcss having stylelint v7.

An upgrade is required to v8 to fetch stylelint only at one place (in the global node_modules).

In a complex JS system, having both v7 and v8 is causing troubles for me.

See PR #2

Does it work with stylelint 11.0.0?

I can see it depends on stylelint ^9.0.0

stylelint-suitcss/package.json

Line 36 in b58c578

"stylelint": "^9.0.0"

Will it work with stylelint 11.0.0?