🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.
APACHE-2.0 License
Bot releases are visible (Hide)
html-webpack-plugin
by @merceyz in https://github.com/GoogleChromeLabs/critters/pull/91
Full Changelog: https://github.com/GoogleChromeLabs/critters/compare/critters-webpack-plugin-3.0.1...critters-webpack-plugin-3.0.2
Published by developit almost 3 years ago
:where
selector by @jeripeierSBB in https://github.com/GoogleChromeLabs/critters/pull/93
-webkit-keyframes
(often generated by scss) by @JessicaSachs in https://github.com/GoogleChromeLabs/critters/pull/96 (see #86)preload:false
option by @kurtextrem in https://github.com/GoogleChromeLabs/critters/pull/95
Full Changelog: https://github.com/GoogleChromeLabs/critters/compare/critters-0.0.15...critters-0.0.16
Published by developit almost 3 years ago
document.head
(#87, thanks @rschristian!)Published by developit almost 3 years ago
critters-webpack-plugin
is now powered by a refactored standalone critters
module. Processing now uses JSDOM and css-select (huge thanks thanks @janicklas-ralph and @alan-agius4 - #61, #80, #82)Full Changelog: https://github.com/GoogleChromeLabs/critters/compare/2.5.0...critters-webpack-plugin-3.0.0
Published by developit almost 3 years ago
This fixes a bug in [email protected]
where HTTP (as opposed to HTTPS) remote stylesheets were not skipped (thanks @alan-agius4 - #83)
Full Changelog: https://github.com/GoogleChromeLabs/critters/compare/critters-0.0.12...critters-0.0.13
Published by developit almost 3 years ago
Full Changelog: https://github.com/GoogleChromeLabs/critters/compare/57c4b40fb96d74e8c5ac5b00cbcd84a3c491db77...critters-0.0.12
additionalStylesheets
option, which allows inlining the critical styles from any emitted Webpack CSS asset matching the given pattern(s). Thanks @prateekbh for implementing this in #45!plugins: [
new CrittersPlugin({
// inline styles from all CSS files, even if not referenced from our HTML:
includeMatchingStylesheets: ['*.css']
})
]
Published by developit almost 5 years ago
This is a patch release for Critters 1.x, which includes a backported fix for a bug where Keyframe rules would be erroneously treated as non-critical CSS. Special thanks to @filoozom and @pathacks for pointing out this should be backported and doing the work.
Please note this fix has already been shipped in Critters 2.x.
For those looking to install 1.x directly: npm i critters-webpack-plugin@legacy
logLevel
option! "silent" disables size & selector errors. Other values described here. (#25, thanks @gribnoysup!)<style>
and minified together for better compression (pass mergeStylesheets:false
to disable)minimumExternalSize
option avoids lazy-loading tiny non-critical stylesheets, simply inlining them if they're smaller than a given number of bytes.Critters now updates external stylesheets to remove any rules & selectors it inlined! No more duplicate CSS. You can turn this off and get the 1.x behavior using the pruneSource: false
option.
A new inlineThreshold
option tells Critters to completely inline stylesheets below a certain size without reducing them to "critical" rules. If you're building an application with a really small amount of CSS required for the first view and it's already in a dedicated file/asset, this option is for you!