michaelwayman / node-sass-chokidar

A thin wrapper around node-sass to replicate the --watch using chokidar instead of Gaze
MIT License
291 stars 34 forks source link

negation pseudo-class :not being ignored #73

Closed ulybu closed 6 years ago

ulybu commented 6 years ago

Hi,

Under certain conditions the negation pseudo-class :not is ignored.

How to reproduce

From my understanding, all the following conditions must be reunited:

Example

.MyComp {
  color: black;
  :not(.MyComp--state1) { // single selector => works
    color: blue;
  }
  :not(.MyComp--state1, .MyComp--state2) { // doesn't work
    color: red;
  }
}

:not(.MyComp--state1, .MyComp--state2) { // not nested => works
  color: yellow;
}

outputs:

.MyComp {
  color: black; }
  .MyComp :not(.MyComp--state1) { //worked
    color: blue; }
  .MyComp { // ignored
    color: red; }

:not(.MyComp--state1, .MyComp--state2) { // worked
  color: yellow; }

Additional info

1 . Got that with node-sass-chodikar@1.3.3 2 . Worked with node-sass@4.7.2 2 . Worked when compiling directly with sass@1.13.0, output was:

.MyComp {
  color: black;
}
.MyComp :not(.MyComp--state1) {
  color: blue;
}
.MyComp :not(.MyComp--state1, .MyComp--state2) {
  color: red;
}

:not(.MyComp--state1, .MyComp--state2) {
  color: yellow;
}

Not super expert on css but couldn't find a reason why that wouldn't be allowed, moreover if sass allows it :/

Of course, an easy workaround is to un-nest the rule but that's only doable on my own source code, it gets really tricky if i have to inspect all third-party css. As it gets ignored silently, I see no other solution than regexp-ing

Thanks

update: Seems like this comes from node-sass, works in node-sass@4.7.2 and doesn't in 4.8.1, I'll repost over there