Feature Request: NecessaryParentReference

[ifyoumakeit]

Regarding the use of combinators, ampersand, and UnnecessaryParentReference.

SCSS shouldn't really compile ~ & because it creates invalid CSS. UnnecessaryParentReference leads developers to drop the ampersands proceeding a combinator, despite SCSS not doing what it's supposed to do in the ~ & case. The parent selector is nice, but maybe there should be an additional linter to use & ~ & when the second value starts with an ampersand.

SCSS

.foo {  
  & ~ & {
    background: green; // Valid
  }
  ~ & {
    background: black; // Invalid
  }
}

CSS

.foo ~ .foo {
  background: green;
}
~ .foo {
  background: black;
}

Issue brought up with SASS: https://github.com/sass/sass/issues/1836

Maybe NecessaryParentReference?

[ifyoumakeit]

Edited and changed title for clarity.

[sds]

Hey @ifyoumakeit, this request makes sense to me. It's a quirky behavior of Sass that ultimately makes sense but is initially confusing. Thanks for the suggestion—happy to merge a pull request with the implementation.

[wouter-muller]

+1

I have a similar case where i do the following:

  li {
    .....

    & + li::before {
      .....
    }
  }

SCSS-lint is complaining about the use of the 2nd li as it thinks it is an unnecessary parent selector, but if i replace it with & my CSS doesn't work anymore.

[Mifrill]

btw, thanks for this linter, it's really helpful!

I've also have similar issue with ember-component-css

the rule of usage is:

& {  // ampersand refers to the component itself (parent selector)
  padding: 2px;
}

https://github.com/ebryn/ember-component-css#usage

but linter is raised the offense:

Unnecessary parent selector (&) 

well it's broke the build because CC is using this linter: https://docs.codeclimate.com/docs/scss-lint