Inline critical CSS and async load the rest.
npm install beastcss> Inline critical CSS and asynchronous load the rest.
``sh`
npm i -D beastcss
or
`sh`
yarn add -D beastcss
or
`sh`
pnpm add -D beastcss
`js
import fs from 'fs/promises';
import Beastcss from 'beastcss';
const beastcss = new Beastcss({
// optional configuration (see below).
});
(async () => {
// get the html string to process
const html = await fs.readFile('index.html', 'utf-8');
// call the process method of the previously instantiated Beastcss class
const processedHTML = await beastcss.process(html);
// do something with the processed html string
await fs.writeFile('index.html', processedHTML, 'utf-8');
})();
`
The resulting HTML string will have its critical CSS inlined and any corresponding external stylesheet links tweaked to be loaded asynchronously by a browser.
Process one or more html strings then call the pruneSources() method to remove critical css from external stylesheet files.
`js
const Beastcss = require('beastcss');
const beastcss = new Beastcss({
pruneSource: true, // required
// ... others options
});
(async () => {
// process html strings sequentially
const processedHtml = await beastcss.process(html);
const processedHtml2 = await beastcss.process(html2);
const processedHtml3 = await beastcss.process(html3);
// or process html strings in parallel
const processedHtmls = await Promise.all([
beastcss.process(html),
beastcss.process(html2),
beastcss.process(html3),
]);
// Remove critical css from external stylesheets
await beastcss.pruneSources();
})();
`
Apply critical CSS processing to the html.
`typescript`
async function process(
html: string,
processId?: string | number
): Promise
> Notes: processId parameter is passed to the logger. It helps to identify logging for each call to the process method in case multiple calls to the method are made in parallel.
Remove all previously collected critical CSS from external stylesheets.
`typescript`
async function pruneSources(processId?: string | number): Promise
Returns the sha256 hash of the script containing the event handlers for asynchronously loaded external stylesheets.
This is useful for Content Security Policy.
`typescript`
function getScriptCSPHash(): string | null;
Free up memory by clearing cached stylesheets and critical selectors collected when pruneSource option is enabled.
`typescript`
function clear(): void;
Set the logging verbosity.
`typescript`
function setVerbosity(
logLevel?: 'debug' | 'info' | 'warn' | 'error' | 'silent'
): void;
> Notes: use the level set in the logLevel option if no parameter is passed.
Type: String
Default: process.cwd()
Location of the absolute base path of CSS files. Set to the current working directory by default.
Type: String
Default: ''
Public path to remove when finding actual CSS resource paths.
Type: Boolean
Default true
Process external stylesheets .
Type: Boolean
Default true
Process internal stylesheets .
Type: Array
Default []
Array of Globs for matching additional stylesheets to be used while looking for critical CSS.
Type: Number
Default 0
Completely inline external stylesheets below a given size in bytes.
Type: Boolean
Default: false
Minify css with lightningcss.
Type: string[]
Default ['> 0.5%', 'last 2 versions', 'Firefox ESR', 'not dead']
The browser targets passed to lightningcss when minifying css.
Type: Boolean
Default true
Merge