Adds critical.css support to Bud
Install @roots/bud-criticalcss to your project.
Yarn:
yarn add @roots/bud-criticalcss --devnpm:
npm install @roots/bud-criticalcss --save-devYou 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>`);You must explicitly call bud.critical.enable to enable the extension.
bud.critical.enable();export default async (bud) => {
bud.critical.src(`http://example.test`).enable(bud.isProduction);
};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`));Specify the markup directly
bud.critical.html(`<html>...</html>`);Specify the width of the browser viewport
bud.critical.width(1920);Specify the height of the browser viewport
bud.critical.height(1080);Extract critical css from its source file. Extraction is enabled by default but can be disabled by passing false.
bud.critical.extract(false);Ignore certain CSS rules or declarations.
bud.critical.ignore({
decl: [/^transition/],
rule: [/^@font-face/],
});Enable or disable the extension.
It accepts an optional boolean argument. If no argument is provided, the extension will be enabled.
bud.critical.enable();Contributions are welcome from everyone.
We have contribution guidelines to help you get started.
@roots/bud-criticalcss is licensed under MIT.
Keep track of development and community news.
- Join us on Roots Slack by becoming a GitHub sponsor
- Participate on the Roots Discourse
- Follow @rootswp on Twitter
- Read and subscribe to the Roots Blog
- Subscribe to the Roots Newsletter
Bud is an open source project and completely free to use.
However, the amount of effort needed to maintain and develop new features and projects within the Roots ecosystem is not sustainable without proper financial backing. If you have the capability, please consider sponsoring Roots.
