Add lint for rtl:ignore comment directives on nested style rules

[Goodwine]

Input

.foo {
  /* rtl:ignore */
  .bar {
    a: b;
  }
}

Output (playground)

.foo {
  /* rtl:ignore */      <------ This was not moved out.
}
.foo .bar {             <------ BUG: This is not ignored by RTLCSS as intended.
  a: b;
}

Context

/* rtl:ignore */ is an RTLCSS directive which makes RTLCSS skip the subsequent CSS node from being RTL-yfied. For example: /* rtl:ignore */ .foo { float:left; margin-right: 10px; } causes both declarations to remain unchanged by RTLCSS.

However, Sass loud comments (/* */) within a rule declaration aren't attached to anything. They don't "belong" to the subsequent node. And therefore, when Sass compiles to CSS, it "splits" the directive away from the nested rule block which the author intended as shown in the example above.

And to add a cherry on top, this could lead to a bug if there exists a declaration after the nested rule, like in this example:

.foo {
  /* rtl:ignore */
  .bar {
    a: b;
  }

  float: left;
}

Which produces:

.foo {
  /* rtl:ignore */
  float: left;      <----- BUG 2: This is now ignored by RTLCSS, but that wasn't intended.
}
.foo .bar {
  a: b;
}

[Goodwine]

BTW I'm looking to work on this this week unless :)

[kristerkari]

@Goodwine Thanks for the detailed description!

Looking at what you wrote, I started wondering if the problem is maybe a bit too specific to RTLCSS to be added as a rule to this library. I understand that your problem is related to Sass, but I bet that most of the users of stylelint-scss are not using RTLCSS.

Could this idea instead be turned into a separate stylelint plugin that would be published in npm? Stylelint supports the postcss-scss customSyntax, so it's really easy to make a rule support SCSS.

[Goodwine]

Since this affects any loud comment (not just RTLCSS), would it make sense to still implement this lint check as part of this repo if it was made more generic?

For example:

• check: Any loud comment that appears immediately before a nested style-rule or at-rule
• finding text: "A loud comment (/**/) over a nested rule does not follow the rule when Sass compiles to CSS. Use a quiet comment (//) or unnest the rule." (or better wording)
• auto-fix: transforms to quiet comment