Critical-css-parser NPM

critical-css-parser

Critical-css-parser allows you to receive critical (above-the-fold) and the rest CSS. It might be helpful to speed up initial rendering of a web page. More information.

There are 3 types of input information: HTML and CSS, URL and localServer.

Critical-css-parser uses Puppeteer and DropCSS under the hood, so IT ALSO SUPPORTS ADAPTIVE DESIGN (BOTH DESKTOP AND MOBILE VERSIONS)! It also supports minifying (by CSSO).

This library is part of other projects: critical-css-inliner, webpack-critical-css-inliner

Installation

npm install --save-dev critical-css-parser

// or

yarn add --dev critical-css-parser

Examples

URL

const criticalCSSParser = require('critical-css-parser');

(async () => {

    const result = await criticalCSSParser({
        type: 'URL',
        URL: 'https://abvcss.github.io/abvcss-website/', // try to check your site
        enableGoogleFonts: false,
        whitelist: /#foo|\.bar/
    });

    console.log(result.critical); // ''

    console.log(result.rest); // ':not(pre)>code[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{'

})();

localServer

const criticalCSSParser = require('critical-css-parser');

(async () => {

    const result = await criticalCSSParser({
        type: 'localServer',
        entrypoint: './www',
        filename: 'index.html',
        enableGoogleFonts: true
    });

    console.log(result.critical); // 'html{font-size: 10pt;}div{color: red;}'

    console.log(result.rest); // 'p{color: red;}'

})();

HTML and CSS

const criticalCSSParser = require('critical-css-parser');

const html = `
    <html>
        <head></head>
        <body>
            <p>Hello <a href="#">World!</a></p>
        </body>
    </html>
`;

const css = `
    .card {
        padding: 8px;
    }

    p:hover a:first-child {
        color: red;
    }
`;

(async () => {

    const result = await criticalCSSParser({
        type: 'HTML',
        html,
        css,
        minify: true // good way to optimize size
    });

    console.log(result.critical); // 'p:hover a:first-child{color:red}'

    console.log(result.rest); // '.card{padding:8px}'

})();

Usage

criticalCSSParser

Pass options to criticalCSSParser({ ... }).

Parameters

options

Properties

type String One of: HTML, URL or localServer. REQUIRED
html String Your custom html code (default: '') REQUIRED FOR type === HTML
css String Your custom css code (default: '') REQUIRED FOR type === HTML
URL String URL of the page you need to optimize (default: '') REQUIRED FOR type === URL
entrypoint String Root of your application (default: '') REQUIRED FOR type === localServer
filename String Your index file (default: 'index.html')
enableGoogleFonts Boolean Set true to except Google Font styles (default: false)
whitelist RegExp Whitelist of the critical CSS (default: /#fooBazBarAboveTheFold8917/)
minify Boolean Set true to minify resulting styles (default: false)