search

zgreen / postcss-critical-css

PostCSS plugin to define and output critical CSS using custom atRules, and/or custom CSS properties. Critical CSS may be output to one or more files, as defined within the plugin options or within the CSS.
MIT License
86 stars 11 forks source link

critical-selector inefficient with @media rules #12

Closed jkphl closed 7 years ago

jkphl commented 7 years ago

When using critical-selector inside a @media rule, the complete rule content will be seen as critical. Based on your example.css:

@media {
    .foo {
        critical-selector: this;
        display: flex;
        width: calc(100% - 200px);
    }

    .bar {
        border: 10px solid gold;
        height: 100%;
    }

    .baz::before {
        content: 'test';
        position: fixed;
    }
}

I'd expect only the .foo selector to be considered critical, resulting in

@media{.foo{display:flex;width:calc(100% - 200px)}}

However, the whole stylesheet is copied to critical.css.

zgreen commented 7 years ago

Hmm, yeah. While working on https://github.com/zgreen/postcss-critical-css/issues/11 I think I may have found the cause of this; I'll try and roll a fix for this into that work. Thanks for the report.

jkphl commented 7 years ago

I wish I could help you with fixing this but unfortunately I won't be available for the next 2 weeks. We're about launching a project where we'd need this, so the sooner there's a fix the better. Thank you! :)

zgreen commented 7 years ago

@jkphl I've got a bit more work to do on it (mostly clean up) but #13 should address this issue (the test passes, currently). I'm going to try and merge it in the next day or two.

jkphl commented 7 years ago

Sounds great, @zgreen, thanks! Very much looking forward to the next release!

zgreen commented 7 years ago

Resolved by https://github.com/zgreen/postcss-critical-css/pull/13