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.
There are two ways to add integrations to your project. Let's try the most convenient option first!
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
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()],
});
Critters should now automatically inline the critical CSS of your HTML files.
You can override any of the default options from the configuration of:
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,
}),
],
});