media query support - Githubissues

theKashey / used-styles

📝All the critical styles you've used to render a page.

MIT License

137 stars 9 forks source link

media query support #21

Closed hnrchrdl closed 4 years ago

hnrchrdl commented 4 years ago

are media queries supposed to be supported by this library? I guess not properly, I do not seem to get any critical css for selectors that are behind media queries.

theKashey commented 4 years ago

Should work, there is even an issue about the cases when it should not - https://github.com/theKashey/used-styles/issues/10

However add I've added a few test to double check, and they are all green.

hnrchrdl commented 4 years ago

thanks a lot for looking into this. tests look good. the problem is with filtering used selectors, at least when using criticalStylesToString.

for example considering the following css

h1 {
  margin-top: 50px;
}
h1 {
  @include breakpoint(small only) {
    margin-top: 30px;
  }
}

it would only interleave the first rule. the second one with the media query is filtered because the selector was already used.

theKashey commented 4 years ago

Not sure that's a valid CSS. It's more looks like SASS

theKashey commented 4 years ago

In short

the tests I've added are working great
there is another place there error is happening - the filter function
https://github.com/theKashey/used-styles/blob/5c61ccb9a845b0ec03494bca9a07ce43e8343560/src/reporters/critical.ts#L35

theKashey commented 4 years ago

Should be fine from now on.