CSS class names with BEM modifiers not processed correctly in custom-style by Polymer when inside a media query

[baseten]

As a simple test case the following CSS inside shared-styles.css is imported as a custom-style:

.foo {
  width: 100px;
  height: 100px;
  background: #0f0;
}

@media screen and (min-width: 48rem) {
  .foo {
    background: #f00; 
  } 
}

.foo--bar {
  background: #00f;
}

@media screen and (min-width: 48rem) {
  .foo--bar {
    background: #000; 
  } 
}

After this is processed by Polymer (using version 1.2.0) it is output in the head like so:

.foo:not([style-scope]):not(.style-scope) {
  width: 100px;
  height: 100px;
  background: #0f0;
}

@media screen and (min-width: 48rem) {
  .foo:not([style-scope]):not(.style-scope) {
    background: #f00;
  }
}

.foo--bar:not([style-scope]):not(.style-scope) {
  background: #00f;
}

@media screen and (min-width: 48rem) {
  .foo--bar {
    background: #000; 
  }
}

Notice the :not([style-scope]):not(.style-scope) part is missing from .foo--bar within the media query, which means the rule with never be applied as it's specificity is too low to override the rule outside the media query.

[nazar-pc]

@baseten, can you clarify with more concrete example how do you import this style? What are files and how are they imported?
Tried various combinations, but can't reproduce with 1.1.5, 1.2.0 and git master code.

[baseten]

@nazar-pc Repo with minimal test case is here:

https://github.com/baseten/polymer-bem-test

[nazar-pc]

@baseten, fix for this issue is available in PR #2663
@ebidel, would you mind to review it?

[baseten]

@nazar-pc, only just had a chance to test this out. Working great, thanks!