Consider the following code:
.foo {
margin-top: 10px;
}
.foo:first-child {
margin-top: unset;
}
If you have configured Stylelint to enable this plugin, then you'll correctly receive a linting error:
Expected ".foo:first-child" inside of ".foo". (csstools/use-nesting)
However, if you have any kind of comment between the two style declarations, then you no longer get a linting error. Eg.:
.foo {
margin-top: 10px;
}
+/**
+ * This comment breaks the linting!
+ */
.foo:first-child {
margin-top: unset;
}
I've read in #9 that it would be difficult to implement this plugin for non-sequential nodes, but it seems like it would be sensible to make a special exception for non-styling nodes like comments, no?
Consider the following code:
If you have configured Stylelint to enable this plugin, then you'll correctly receive a linting error:
However, if you have any kind of comment between the two style declarations, then you no longer get a linting error. Eg.:
.foo { margin-top: 10px; } +/** + * This comment breaks the linting! + */ .foo:first-child { margin-top: unset; }I've read in #9 that it would be difficult to implement this plugin for non-sequential nodes, but it seems like it would be sensible to make a special exception for non-styling nodes like comments, no?