sass / sassc-ruby

Use libsass with Ruby!
MIT License
366 stars 156 forks source link

Wrong CSS generation with &:not(&..) in nested syntax #180

Open nastya-soroko opened 4 years ago

nastya-soroko commented 4 years ago

Version: 2.2.1

This style is compiling to CSS correctly:

  .base {
    &:not(&--no-matches-message) {
      overflow: hidden;
    }
  }

Compiled CSS:

  .base:not(.base--no-matches-message) {
    overflow: hidden;
  }

With a parent class, it is generating the wrong CSS:

  .parent {
    .base {
      &:not(&--no-matches-message) {
        overflow: hidden;
      }
    }
  }

Compiled CSS goes without :not:

  .parent .base {
    overflow: hidden;
  }

But it expected to be:

  .parent .base:not(.parent .base--no-matches-message) {
    overflow: hidden;
  }

There is a thing about :not and selectors, normally it should be one class for :not. In the last sample, :not(.parent .base--no-matches-message) it will work as :not(.parent--no-matches-message), because The ability to list more than one selector is experimental and not yet widely supported(source https://developer.mozilla.org/en-US/docs/Web/CSS/:not). Anyway, it should be a way to handle it somehow, when it is combined with &. Sass library was generating it as in the expected sample and current behavior is breaking change after migration from sass.

Can be related to: https://github.com/sass/sassc-ruby/issues/91, https://github.com/sass/sassc-ruby/issues/165