Grab above the fold css

getCriticalCSS.js

/**
 * Get critical CSS and class names for elements matching a selector 
 */

function getCriticalCSS(selector) {

  try {

    const elements = document.querySelectorAll(selector);
    const classNames = new Set();
    let css = '';

    elements.forEach(element => {

      const classes = Array.from(element.classList)
        .map(name => `.${name}`)
        .join(' ');

      classNames.add(classes);

      const styles = getComputedStyle(element);

      let cssDeclarations = '';
      for (let i = 0; i < styles.length; i++) {
        const name = styles[i];
        const value = styles.getPropertyValue(name);
        cssDeclarations += `  ${name}: ${value};\n`;
      }

      css += `${classes} {\n${cssDeclarations}}\n`;

    });

    return css

  } catch (error) {
    // Handle errors  
  }

}

/**
 * Simple CSS minifier
 */ 

function minifyCSS(css) {

  return css
    .replace(/\n/g, '')
    .replace(/\s{2,}/g, ' ')
    .replace(/\s*([{}:;,>+\-\/])\s*/g, '$1');

}