@roots/bud-criticalcss
This extension is experimental.
This extension generates 'above-the-fold' css from your application styles.
For more information on this technique check out this web.dev article.
Installation​
- npm
- Yarn
- pnpm
npm install @roots/bud-criticalcss --save-dev
yarn add @roots/bud-criticalcss --dev
pnpm add @roots/bud-criticalcss --save-dev
Usage​
Identify source markup​
You may use bud.critical.src to specify a URL or a path on disk to the markup that will be used to generate critical styles.
bud.critical.src(`http://example.test`)
bud.critical.src(bud.path('path/to/index.html'))
Or, you may use bud.critical.html to provide the markup directly.
bud.critical.html(`<html>...</html>`)
Enable the extension​
You must explicitly call bud.critical.enable to enable the extension.
bud.critical.enable()
Example​
export default async bud => {
bud.critical.src(`http://example.test`).enable(bud.isProduction)
}
API​
bud.critical.src​
Specify the source with a URL:
bud.critical.src(`http://example.test`)
Specify the source with a local filepath:
bud.critical.src(bud.path(`@src`, `template.html`))
bud.critical.html​
Specify the markup directly
bud.critical.html(`<html>...</html>`)
bud.critical.width​
Specify the width of the browser viewport
bud.critical.width(1920)
bud.critical.height​
Specify the height of the browser viewport
bud.critical.height(1080)
bud.critical.extract​
Extract critical css from its source file. Extraction is enabled by default but can be disabled by passing false.
bud.critical.extract(false)
bud.critical.ignore​
Ignore certain CSS rules or declarations.
bud.critical.ignore({
decl: [/^transition/],
rule: [/^@font-face/],
})
bud.critical.enable​
Enable or disable the extension.
It accepts an optional boolean argument. If no argument is provided, the extension will be enabled.
bud.critical.enable()