Update messing with media queries

We updated our app from ^0.3.5 to 0.5.0 and we’re having a bunch of specificity issues where the plugin is rendering css in the wrong places and/or using css classes weirdly.

Example

We have a component with the following sass code in it:

 h1 {
    font-size: 34px;
    text-align: center;
    margin: 40px 0 20px;
    @media (max-width: #{$screen-xs-max}) {
      font-size: 24px;
    }
 }

In the old version, this would correctly have the same class twice with one of them having a @media query that affects mobile. However, in the version, the css class changes for mobile and has one less selector. Basically, it goes from .a .b h1 to .a h1 and this causes the browser to render the desktop styles instead.

Any thoughts about what this might be?

[webark]

ohh hahaha!! nice. ok cool. I’m going to close this issue then. Thanks!

[bryanhickerson]

@webark when I said the regression was unrelated, I was actually referring to the same app that hassan reported this issue for 😄