Force include classes in critical CSS
1 min read
Critical CSS build by Addy Osmani is a useful library that extracts and inlines critical-path CSS in HTML pages.
In the documentation page, there are a lot of configurations available but they are not the only ones! 😏
Critical CSS uses as its engine penthouse which has in turn a lot of configuration options. One of them, is forceInclude
.
forceInclude: [...]
description from docs 📚:
Array of css selectors to keep in critical css, even if not appearing in critical viewport. Strings or regex (f.e. ['.keepMeEvenIfNotSeenInDom', /^.button/])
For instance, if we want to add a cta class injected via JS and not available in DOM nodes when the critical path is generated, we have to configure our critical CSS options like this:
critical.generate({
base: './',
src: 'template-homepage.html',
css: ['production/css/style-1.css' , 'production/css/style-2.css'],
....
penthouse: {
forceInclude: ['OPTIONAL-CLASS-HERE'],
},
})