Stylelint rule to enforce selector and attribute on same line

Question

Is there a stylelint rule that can enforce a selector and attribute to be on the same line if there is only one attribute.

For example, this would error:

.foo{
  color: #111;
}

Because we want it to look like this:

.foo{ color: #111; }

Note, if there are multiple attributes then they should be on their own lines, for example:

.foo{
  color: #111;
  padding: 10px;
}

Answer 1

Is there a stylelint rule that can enforce a selector and attribute to be on the same line if there is only one attribute.

Not yet.

The declaration-block-single-line-max-declarations rule will get you halfway there. For example:

{
  "rules": {
    "declaration-block-single-line-max-declarations": 1
  }
}

Will disallow:

.foo{ color: #111; display: block; }

But allow:

.foo{ 
  color: #111;
}

What you need is a "declaration-block-multi-line-min-declarations" rule. You can create one as a stylelint plugin. However, I believe such a rule should be built into stylelint. You can open an issue and request to add the rule to stylelint.

You'll then be able to enforce your code style with:

{
  "rules": {
    "declaration-block-single-line-max-declarations": 1,
    "declaration-block-multi-line-min-declarations": 2
  }
}