   |   🗜️ Compress — |    |   🗻 Format — |
🦔 Inline —
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
Inlinewill not inline your requests, only your statically generated build and pre-rendered routes.
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 Inline, run the following from your project directory and follow
the prompts:
Using NPM:
npx astro add @playform/inlineUsing Yarn:
yarn astro add @playform/inlineUsing PNPM:
pnpx astro add @playform/inlineFirst, install the Inline integration like so:
npm install -D -E @playform/inlineThen, apply this integration to your astro.config.* file using the
integrations property:
export default {
integrations: [(await import("@playform/inline")).default()],
};Critters will 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:
export default {
integrations: [
(await import("@playform/inline")).default({
Critters: false,
}),
],
};You can add multiple paths to inline by specifying an array as the Path
variable.
astro.config.ts
export default {
integrations: [
(await import("@playform/inline")).default({
Path: ["./Target", "./Build"],
}),
],
};You can also provide a map of paths for different input output directories.
astro.config.ts
export default {
integrations: [
(await import("@playform/inline")).default({
Path: new Map([["./Source", "./Target"]]),
}),
],
};Or an array of the two.
astro.config.ts
export default {
integrations: [
(await import("@playform/inline")).default({
Path: [
// Inline Target
"./Target",
// Inline Target one more time into a different directory
new Map([["./Target", "./TargetInline"]]),
],
}),
],
};You can filter files to exclude specific ones from inlining. A filter can be an array of regular expressions or a single match. You can also use functions to match on file names:
astro.config.ts
export default {
integrations: [
(await import("@playform/inline")).default({
Exclude: [
"File.html",
(File: string) => File === "./Target/index.html",
],
}),
],
};You can control the logging level by setting the Logger parameter. The default
value is 2, but you can set it to 0 if you don't want to see debug messages:
export default {
integrations: [
(await import("@playform/inline")).default({
Logger: 0,
}),
],
};See CHANGELOG.md for a history of changes to this integration.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent