preact-cli-plugin-critical-css

preact-cli-plugin-critical-css

Preact CLI plugin that adds critical css to your pre-rendered routes using html-critical-webpack-plugin.

Installation

Install via npm:

npm i -D preact-cli-plugin-critical-css

or yarn:

yarn add preact-cli-plugin-critical-css --dev

then include it in your project by creating a preact.config.js file:

import criticalCssPlugin from "preact-cli-plugin-critical-css";

export default (config, env) => {
	const options = {
		// Passed directly to the 'critical' module (this is optional)
	};

	criticalCssPlugin(config, env, options);
};

Default options

The plugin sets some default options which can be overridden:

const defaultOptions = {
	// Inline the generated critical-path CSS.
	inline: true,

	// Minify critical-path CSS when inlining.
	minify: true,

	// Extract inlined styles from referenced stylesheets.
	extract: false,

	// Viewport width
	width: 1280,

	// Viewport height.
	height: 600,

	// Your build directory to find css files.
	base: path.resolve(env.dest),

	// The path to a prerendered route. (e.g. index.html)
	src: filePath,

	// Write the generated critical-path CSS to this file.
	dest: filePath
};

Configuration

Full list of possible options that are passed to critical are available here.

License

MIT © matthewlynch