critical-css-parser's Introduction

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)

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

critical-css-parser's People

Contributors

Stargazers

Watchers

critical-css-parser's Issues

it's possible to remove necessary css and break above-the-fold

@ABVanton200

#card {
  position: absolute;
  top: 1000%;
}

this will probably remove this #card element, then drop its CSS and on the real page it will now (wrongly) appear above the fold.

i can't think of a solution to this. but you may want to mention that stuff like this can happen if elements are moved below the fold by css only.

Errors, closing tags

Any tips on configuring linting rules in this bad boy? dropcss.cs.js throws error around this line:
'var TAG_OPEN = 1;'

error:

if (VOIDS.has(tag) || m2[1] == "/>")

TypeError: Cannot read property '1' of null
at next (.....\node_modules\dropcss\dist\dropcss.cjs.js:70:28)
at tokenize (.....\node_modules\dropcss\dist\dropcss.cjs.js:87:3)
at export_parse .....\node_modules\dropcss\dist\dropcss.cjs.js:195:15)
at dropcss (.....\node_modules\dropcss\dist\dropcss.cjs.js:969:10)
at n (.....\node_modules\critical-css-parser\dist\index.modern.js:1:2055)
at module.exports (.....\node_modules\critical-css-parser\dist\index.modern.js:1:3197)
at async module.exports (.....\node_modules\critical-css-inliner\dist\index.modern.js:1:512)
at async .\critical_css_inliner.js:5:3

'critical_css_inliner.js is script it's running from, same error with critical-css-parser and critical_css_inliner

Recommend Projects

abvanton200 / critical-css-parser Goto Github PK