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)

criticalCSSParser({...}) returns:

<Promise<{ critical, rest }>>

critical - above-the-fold CSS. These styles you can put into your <style> tag.

rest - other CSS. You can lazy-load the rest like this.

License

MIT license

Keywords

FAQs

What is critical-css-parser?

Is critical-css-parser popular?

Is critical-css-parser well maintained?

Last updated on 01 Jan 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install