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
npm install --save-dev critical-css-parser
// or
yarn add --dev critical-css-parserconst 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-]{'
})();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;}'
})();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}'
})();Pass options to criticalCSSParser({ ... }).
Parameters
options
Properties
-
typeString One of: HTML, URL or localServer. REQUIRED -
htmlString Your custom html code (default: '') REQUIRED FOR type === HTML -
cssString Your custom css code (default: '') REQUIRED FOR type === HTML -
URLString URL of the page you need to optimize (default: '') REQUIRED FOR type === URL -
entrypointString Root of your application (default: '') REQUIRED FOR type === localServer -
filenameString Your index file (default: 'index.html') -
enableGoogleFontsBoolean Set true to except Google Font styles (default:false) -
whitelistRegExp Whitelist of the critical CSS (default:/#fooBazBarAboveTheFold8917/) -
minifyBoolean Set true to minify resulting styles (default:false)
<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.
MIT license