critical-css-generator.js

const penthouse = require('penthouse')
const fs = require('fs')
// force the critical css to include all variations of the header, as well as hero
// and breadcrumb (if one exists the other wont, we need both in the critical file)
// Also force inclusion of full width layout as well as two columns - a page may
// have one but never both
penthouse({
    url: 'https://demo.local/index.php',
    css: 'style.min.css',
    forceInclude: [
        //'.nhsuk-header__inverted',
        '.nhsuk-header',
        '.nhsuk-header--organisation',
        '.nhsuk-header--white',
        '.nhsuk-header:after',
        '.nhsuk-header__transactional-service-name',
        '.nhsuk-header__transactional-service-name--link',
        '.nhsuk-header__organisation-name',
        '.nhsuk-header__organisational-qualifier',
        '.nhsuk-organisation-name',
        '.nhsuk-organisation-descriptor',
        '.nhsuk-transaction-name',
        '.nhsuk-header__container',
        '.nhsuk-header__container:after',
        '.nhsuk-header__content',
        '.nhsuk-header__logo',
        '.nhsuk-logo__background',
        '.nhsuk-logo__text',
        '.nhsuk-logo',
        '.nhsuk-header--transactional .nhsuk-logo',
        '.nhsuk-header--organisation .nhsuk-header__logo .nhsuk-logo',
        '.nhsuk-header--transactional .nhsuk-header__logo .nhsuk-logo',
        '.nhsuk-header--organisation .nhsuk-header__link',
        '.nhsuk-header--transactional .nhsuk-header__link',
        '.nhsuk-header__menu',
        '.nhsuk-header__menu-toggle',
        '.nhsuk-header__search',
        '.nhsuk-header--white .nhsuk-header__search',
        '.nhsuk-breadcrumb__list',
        '.nhsuk-breadcrumb__item',
        '.nhsuk-breadcrumb__back',
        '.nhsuk-breadcrumb__backlink',
        '.nhsuk-icon__search',
        '.nhsuk-header--white .nhsuk-icon__search',
        '.nhsuk-icon',
        '.nhsuk-search__submit .nhsuk-icon__search',
        '.nhsuk-header--white .nhsuk-search__submit .nhsuk-icon__search',
        '.nhsuk-header__search-toggle',
        '.nhsuk-header__search-wrap',
        '.nhsuk-header--white .nhsuk-header__search-wrap',
        '.nhsuk-header__search-form',
        '.nhsuk-header--white .nhsuk-header__search-form',
        '.nhsuk-search__input',
        '.nhsuk-header--white .nhsuk-header__input',
        'input[type="text"]',
        '.nhsuk-header__link',
        '.nhsuk-header__navigation',
        '.nhsuk_header .nhsuk-header__navigation',
        '.nhsuk-header__navigation-title',
        '.nhsuk-header .nhsuk-header__navigation ul',
        '.nhsuk-header .nhsuk-header__navigation ul li',
        '.nhsuk-header .nhsuk-header__navigation ul li a',
        '.nhsuk-header .nhsuk-header__navigation ul li .nhsuk-icon__chevron-right',
        '.nhsuk-header__navigation-link',
        '.nhsuk-search__submit',
        '.nhsuk-header--white .nhsuk-search__submit',
        '.nhsuk-search__close',
        '.nhsuk-hero nhsuk-hero--image',
        '.nhsuk-hero--image-description',
        '.nhsuk-hero__overlay',
        '.nhsuk-hero-content',
        '.nhsuk-hero__arrow',
        '.nhsuk-breadcrumb',
        '.nhsuk-breadcrumb__list',
        '.nhsuk-breadcrumb__item',
        '.nhsuk-grid-column-one-third',
        '.nhsuk-grid-column-two-thirds',
        '.nhsuk-grid-column-full',
        '.nhsuk-grid-row',
        '.nhsuk-grid-row:after',
        '#secondary',
        '#secondary section',
        '.nightingale-latest-news',
        '.nhsuk-panel-group',
        '.nhsuk-panel-with-label',
        '.nhsuk-panel',
        '.widget-title',
        '.nhsuk-panel-with-label__label',
        '.nhsuk-header__navigation',
        '.nhsuk-header__navigation-title',
        '.nhsuk-header__navigation-list',
        '.nhsuk-header__navigation-item',
        '.nhsuk-header__navigation-link',
        '*, :after, :before',
        '.nhsuk-action-link',
        '.nhsuk-action-link__link',
        '.nhsuk-icon__arrow-right-circle',
        '.nhsuk-action-link__text',
        '.nhsuk-main-wrapper',
        '.nhsuk-width-container',
        '.screen-reader-text',
        '.nhsuk-u-visually-hidden',
        '.nhsuk-footer',
        '.nhsuk-footer__list',
        '.nhsuk-footer__list--three-columns',
        '.nhsuk-footer__list--three-columns li',
        '.nhsuk-footer__list-item',
        '.nhsuk-footer__list-item-link',
        'article, aside, footer, header, nav, section',
        '#cookie-notice',
        '.autocomplete__input',
        '.nhsuk-header--white .autocomplete__input',
        '.nhsuk-header .autocomplete-container',
        '.nhsuk-header__search-wrap input[type=text]',
        '.nhsuk-header .nhsuk-header__search-wrap input[type=text]',
        '.nhsuk-header.nhsuk-header--white input[type=text]',
        '.nhsuk-header.nhsuk-header--white .nhsuk-header__search-wrap input[type=text]',
        '#primary.clear',
        '.nhsuk-global-alert'
    ]
})
    .then(criticalCss => {
        // use the critical css
        fs.writeFileSync('partials/criticalcss.php', criticalCss)
    })