Fix false negatives for multiline selectors in indentation

What is the problem you’re trying to solve?

Some of the selectors we use in one of our projects are quite long and thereby violate the max-line-length: 80 rule.

body:not([data-dialog="language-add"]):not([data-dialog="language-change"]) #dialog-content-language-add

We tend to resolve such issues by splitting up the line and indenting subsequent lines.

body:not([data-dialog="language-add"]):not([data-dialog="language-change"])
  #dialog-content-language-add

Because the alternative would be to not indent subsequent lines which, however, makes it diffcult to differentiate whether a line is a selector or merely a continuation of the previous selector.

body:not([data-dialog="language-add"]):not([data-dialog="language-change"])
#dialog-content-language-add

However, this results in a violation of our indentation: 2 rule and there doesn’t appear to be an option for excluding selectors

✖  Expected indentation of 0 spaces   indentation

Because of that and https://github.com/stylelint/stylelint/issues/3111 we currently have to disable the “indentation” rule for the entire block which is not ideal.

/* stylelint-disable indentation */
body:not([data-dialog="language-add"]):not([data-dialog="language-change"])
  #dialog-content-language-add
{
  display: none;
}
/* stylelint-enable indentation */

Furthermore, due to https://github.com/stylelint/stylelint/issues/2643, that means that we have to be extra careful when running stylelint --fix.

What solution would you like to see?

A new option for the “indentation” rule that allows lines that represent continuations of selectors to be indendent by one more level.

[jeddy3]

@fregante I believe that’s a separate problem. Can you create a new bug issue for it, please?

I think the following should be the default behaviour of the rule:

:is(
  a,
  b
) {}

We apply indentation to parens in at-rules and declaration-values, but not those in selectors. It should, though.

---

Revisiting the original issue, I think indenting multiline selectors should be the default behaviour rather than an option. I’ll change the labelling accordingly.

When both issues are fixed, we end up with:

body:not([data-dialog="language-add"]):not([data-dialog="language-change"]):is(
    a,
    b
  )
  #dialog-content-language-add,
.second-selector-in-list {}

[jeddy3]

Closing as stylistic rules are frozen. The community is welcome to migrate the rule to a plugin and fix this bug.