usus
usus copied to clipboard
gajus
Multiple viewports, mobile + non-mobile
Is there a way to call usus to obtain a single stylesheet with "critical" CSS for all possible viewport sizes, and mobile and retina options?
Motivation: We don't know the client's viewport size on the server side, so the critical CSS should include the necessary CSS for all viewport sizes.
Motivation: We don't know the client's viewport size on the server side, so the critical CSS should include the necessary CSS for all viewport sizes.
Probably the best way to do it is to call usus multiple times, extract css for different viewports, and then use a minifier.
Also, see "Bonus: rendering device specific pages" in https://medium.com/@gajus/pre-rendering-spa-for-seo-and-improved-perceived-page-loading-speed-47075aa16d24.
Making usus capture this information is possible too, just need to be careful of the feature creep.
I don't think the minifier solution is viable, because concatenating CSS may result in different selector priorities? WRT feature creep, this actually seems like the most common use case.
Yes I want this too! @glebm waddup!
PS Usus is by far the easiest way to get CSS that's in use... tried a couple other things and none of the others worked well with just one CLI command. Well done.
Note: posting from work, which makes me feel guilty for commenting b/c I don't pay anything
PPS I'd be open to contributing to make this happen.
@glebm Have you cross-checked accuracy of uncss?
I have not had much luck with uncss (https://github.com/giakki/uncss/issues/313). In addition to the problems described in the latter issue, the generated CSS does not represent the critical path, i.e. the page looks broken if loaded just with the CSS obtained from uncss.
Not saying not to use uncss. They will eventually fix it (presumably implementing the same features as usus provides via headless Chrome). Just the current (PhantomJS) implementation is broken.
uncss does not use phantomjs anymore, the current version uses jsdom. I haven't checked the coverage numbers in Chrome devtools yet, but visually looks ok
I used uncss and it ended up working for me after I removed @font-face calls which were messing stuff up for me. It did preserve all the media queries I needed without needing to specify them myself, so that was helpful. Thanks gajus & gleb!
@font-face worked for me but I filter them out with filter-css anyway because custom fonts are not critical (even icon fonts)
More on the same discussion, https://github.com/gajus/usus/issues/17
I used uncss and it ended up working for me after I removed @font-face calls which were messing stuff up for me.
This gave me an idea for another feature... https://github.com/gajus/usus/issues/21