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.

Installation

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

(experimental) astro add command

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

1. (Optionally) Install all necessary dependencies and peer dependencies
2. (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:

astro.config.ts

import type { AstroUserConfig } from "astro";
import critters from "astro-critters";

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

Getting started

Critters should 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 type { AstroUserConfig } from "astro";
import critters from "astro-critters";

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

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

import type { AstroUserConfig } from "astro";
import critters from "astro-critters";

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

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

import type { AstroUserConfig } from "astro";
import critters from "astro-critters";

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