Critical CSS build byAddy 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 availablebut they are not the only ones! 😏

Critical CSS uses as its enginepenthouse which has in turn a lot of configuration options. One of them, isforceInclude.

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'],},})