- AstroCritters/v2.1.9Latest
- Inline/v0.0.6
- Inline/v0.0.5
- AstroCritters/v2.1.8
- Inline/v0.0.4
- AstroCritters/v2.1.7
- Inline/v0.0.3
- Inline/v0.0.2
- Inline/v0.0.1
- CrittersAstro/v0.0.2
- CrittersAstro/v0.0.1
- v2.1.6
- v2.1.5
- v2.1.4
- v2.1.3
- v2.1.2
- v2.1.0
- v2.0.11
- v2.0.10
- v2.0.9
- v2.0.8
- v2.0.7
- v2.0.6
- v1.1.40
- v1.1.39
- v1.1.38
- v1.1.37
- v1.1.35
- v1.1.36
- v1.1.34
- v1.1.33
- v1.1.32
- v1.1.31
- v1.1.30
- v1.1.29
- v1.1.28
- v1.1.27
- v1.1.26
- v1.1.25
- v1.1.24
- v1.1.23
- v1.1.22
- v1.1.21
- v1.1.20
- v1.1.19
- v1.1.18
- v1.1.17
- v1.1.16
- v1.1.15
- v1.1.14
- v1.1.13
- v1.1.12
- v1.1.11
- v1.1.10
- v1.1.9
- v1.1.8
- v1.1.7
- v1.1.6
- v1.1.5
- v1.1.4
- v1.1.3
- v1.1.2
- v1.1.1
- v1.1.0
- 1.0.5
- v1.0.4
- v1.0.3
- v1.0.2
- v1.0.1
- v1.0.0
- v0.0.11
- v0.0.10
- v0.0.9
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!
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 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 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 another directory
new Map([["./dist", "./dist-inlined"]]),
],
}),
],
};
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,
}),
],
};
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",
],
}),
],
};
Changelog
See CHANGELOG.md for a history of changes to this integration.