css-puppeteer

A simple tool for extracting CSS used when a user interacts with a page — built with puppeteer and the CSS Coverage functionality.

Usage

Using the tool is easy, simply import it and run it like so:

const generateCSS = require('css-puppeteer');
//Generate the css for your site
const css = await generateCSS(puppeteerConfig, options);

generateCSS(puppeteerConfig, options)

• puppeteerConfig <[Object]>
  • An options with which to launch puppeteer (https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions)
• options <[Object]>
  • url <[string]> starting url that you want to generate CSS from (you can navigate to more using the callback option)
  • filePath <[string]> Path to your CSS file (Either this or cssString is required)
  • cssString <[string]> A string of CSS (Either this or filePath is required)
  • callback <[function]> A function with actions you wish to perform. The callback is passed the page object from puppeteer.
• returns: <[Promise]<[String]>> which resolves to the CSS needed to render the page with the performed actions.

Extracts the necessary CSS from filePath or cssString needed to render the url with the viewport set in puppeteerConfig and performing the actions set in callback.

Example usage:

"use strict";
const { readFileSync, writeFileSync } = require('fs');
const generateCSS = require('css-puppeteer');

const styleSheetContent = readFileSync('./style.css', 'utf8');
const newCSS = await generateCSS(
        {
            defaultViewport: {
                width: 375,
                height: 812,
                hasTouch: true,
                isMobile: true
            }
        },
        {
            cssString: styleSheetContent,
            // filePath: './style.css',
            url: 'https://www.ebay.com',
            callback: actions
        }
    );
await writeFileSync('./critical.css', newCss);
console.log('All Done!');


function actions(page){
    await page.focus('input[title="Search"]');
    await page.keyboard.type('Playstation');
    //To make sure all content has rendered, we wait for the network to be completely idle
    await Promise.all(
        page.waitForNavigation( { waitUntil: "networkidle0" } ),
        page.click('input[type="submit"]')
    );
}