@otterlord/astro-critters

 Related

astro-compress 🗜️ AstroJS compression utilities. Compress HTML, CSS, JavaScript and more!

astro-rome 🏛️ AstroJS Rome tools. Format, lint and check your Astro website with Rome.

NOTE This package is an archived fork of astro-critters. This package will not receive updates. Please look for an alternative as soon as possible.

astro-critters 🦔

This Astro integration brings critters to your Astro project.

Critters is a plugin that inlines your app's critical CSS and lazy-loads the rest.

Note

astro-critters will not inline your requests, only your statically generated build and pre-rendered routes.

Installation

There are two ways to add integrations to your project. Let's try the most convenient option first!

astro add command

Astro includes a CLI tool for adding first party integrations: astro add. This command will:

• (Optionally) Install all necessary dependencies and peer dependencies
• (Also optionally) Update your astro.config.* file to apply this integration

To install astro-critters, run the following from your project directory and follow the prompts:

Using NPM:

npx astro add astro-critters

Using Yarn:

yarn astro add astro-critters

Using PNPM:

pnpx astro add astro-critters

Install dependencies manually

First, install the astro-critters integration like so:

npm install -D -E astro-critters

Then, apply this integration to your astro.config.* file using the integrations property:

import critters from "astro-critters";

export default {
	integrations: [critters()],
};

Getting started

Critters will now automatically inline the critical CSS of your HTML files.

You can override any of the default options from the configuration of:

• critters

or disable them entirely:

import critters from "astro-critters";

export default {
	integrations: [
		critters({
			critters: false,
		}),
	],
};

If your path is different than dist be sure to update it accordingly:

import critters from "astro-critters";

export default {
	outDir: "./build",
	integrations: [
		critters({
			path: "./build",
		}),
	],
};

You can add multiple paths to inline by specifying an array as the path variable.

astro.config.ts

import critters from "astro-critters";

export default {
	integrations: [
		critters({
			path: ["./build", "./dist"],
		}),
	],
};

You can also provide a map of paths for different input output directories.

astro.config.ts

import critters from "astro-critters";

export default {
	integrations: [
		critters({
			path: new Map([["./input", "./output"]]),
		}),
	],
};

Or an array of the two.

astro.config.ts

import critters from "astro-critters";

export default {
	integrations: [
		critters({
			path: [
				// Inline dist
				"./dist",

				// Inline dist one more time into a different directory
				new Map([["./dist", "./dist-inlined"]]),
			],
		}),
	],
};

You can provide a filter to exclude files in your build. A filter can be an array of regexes or a single match. You can use functions, as well to match on file names.

astro.config.ts

import critters from "astro-critters";

export default {
	integrations: [
		critters({
			exclude: [
				"my-awesome.html",
				(file: string) => file === "./dist/index.html",
			],
		}),
	],
};

Set logger to 0 if you do not want to see debug messages. Default is 2.

import critters from "astro-critters";

export default {
	integrations: [
		critters({
			logger: 0,
		}),
	],
};

Changelog

See CHANGELOG.md for a history of changes to this integration.