CODEWITHSUNDEEP
cssstylelint
Doug E Fresh
Doug E Fresh

Reputation: 840

css stylelint rule to catch 'selector is expected' error

As part of my process I use stylelint to look for css errors before build and deploy for our site. However someone checked in the following which fails on the css parser / minifier but passed stylelint. 

.example-class ,
/*.example-class-two span*/ {
..... removed for brevity ..... 
}

I can't seem to figure out any existing rule to enable to catch this. Is there one that I am missing? Otherwise, is it time to write a custom rule to catch this?

Upvotes: 0

Views: 708

Answers (1)

tekniskt
tekniskt

Reputation: 493

You'd need to write this rule as a plugin. stylelint used to have a rule selector-no-empty that handled your use case, but it was removed in version 7.8.0. You could use the rule as the starting point for a plugin. Here's the source.

Note that the rule was originally removed for the following reason:

It is beyond the scope of stylelint's core package to effectively validate against the CSS spec. Please investigate csstree and css-values for this functionality, and contribute to those projects and to stylelint plugins wrapping them.

There is currently a csstree stylelint plugin for checking the validity of your CSS, but selector validation is not ready yet. So you could just use the csstree stylelint plugin and wait for selector validation to land.

stylelint itself is not a CSS specification validator, it's designed more to detect code that might, despite being valid, have unintended consequences - with rules like declaration-block-no-shorthand-property-overrides, no-descending-specificity, no-duplicate-selectors etc.

Or to limit what CSS features can and can’t be used within a code base by a team - with rules like unit-blacklist, selector-max-id, selector-class-pattern etc.

Upvotes: 1

Related Questions