search

postcss / postcss-bem-linter

A BEM linter for postcss
MIT License
571 stars 35 forks source link

Update unWrapSelectors function to prevent wrong warnings. #141

Closed tardiva closed 5 years ago

tardiva commented 5 years ago

We used this scss for tests:

.dropdown_type_one {
  @media (min-width: $tablet-landscape) { 
    &.menu__item_selected {
      > .dropdown__handle {
        &::after {
          background-image: none;
        }
      }
    }
  }
  &.menu__item_some-modifier {
    > .dropdown__handle {
      background-image: none;
      &::after {
        @media (min-width: $tablet-landscape) {
          display: none;
        }
      }
    }
  }
}

And got the following output:

5:9  ✖  Invalid component selector ".dropdown_type_one.menu__item_selected > .dropdown__handle::after"        plugin/selector-bem-pattern
5:9  ✖  Invalid component selector ".dropdown_type_one.menu__item_some-modifier > .dropdown__handle::after"   plugin/selector-bem-pattern
13:5  ✖  Invalid component selector ".dropdown_type_one.menu__item_selected > .dropdown__handle"               plugin/selector-bem-pattern
13:5  ✖  Invalid component selector ".dropdown_type_one.menu__item_some-modifier > .dropdown__handle"          plugin/selector-bem-pattern

Each time when unWrapSelectors works for any rule with '::after' selector it will get all the nodes with such a selector and unwrap them. In our example it will produce duplication of warnings. Here is our solution to fix this.

simonsmith commented 5 years ago

Cheers!