critical-css-parser
Advanced tools
Critical-css-parser allows you to receive critical (above-the-fold) and rest CSS. It might be helpful to speed up initial rendering of a web page. More information
Critical-css-parser uses Puppeteer and DropCSS under the hood, so it also supports adaptive design.
npm install --save-dev critical-css-parser
// or
yarn add --dev critical-css-parser
Pass options to criticalCSSParser({ ... }).
Parameters
optionsProperties
type String One of: HTML, URL or localServer. REQUIREDhtml String Your custom html code (default: '') REQUIRED FOR type === HTMLcss String Your custom css code (default: '') REQUIRED FOR type === HTMLwhitelist RegExp Whitelist of the critical CSS (default: /#fooBazBarAboveTheFold8917/)URL String URL of the page you need to optimize (default: '') REQUIRED FOR type === URLenableGoogleFonts Boolean Set true to except Google Font styles (default: false)entrypoint String Root of your application (default: '') REQUIRED FOR type === localServerfilename String Your index file (default: 'index.html')minify Boolean 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.
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
});
console.log(result.critical); // 'p:hover a:first-child{color:red}'
console.log(result.rest); // '.card{padding: 8px;}'
})();
const criticalCSSParser = require('critical-css-parser');
(async () => {
const result = await criticalCSSParser({
type: 'URL',
URL: 'https://enigmatic-dawn-63122.herokuapp.com/',
enableGoogleFonts: false
});
console.log(result.critical); // ''
console.log(result.rest); // '.Toastify__toast-container{z-index:9999;position:fixed; ...'
})();
const criticalCSSParser = require('critical-css-parser');
(async () => {
const result = await criticalCSSParser({
type: 'localServer',
entrypoint: './www',
filename: 'index.html',
enableGoogleFonts: false
});
console.log(result.critical); // 'html{font-size: 10pt;}div{color: red;}'
console.log(result.rest); // 'p{color: red;}'
})();
MIT license
FAQs
Get critical (above-the-fold) and the rest CSS using Puppeteer.
We found that critical-css-parser demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
The EU Cyber Resilience Act is prompting compliance requests that open source maintainers may not be obligated or equipped to handle.
Security News
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
Research
/Security News
Undocumented protestware found in 28 npm packages disrupts UI for Russian-language users visiting Russian and Belarusian domains.