Force include classes in critical CSS

#css #javascript

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