Related
	Compress 🗜️		Format 🗻

[Inline] 🦔

This [Astro integration][astro-integration] brings [beasties][beasties] to
your Astro project.

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

> Note
>
> Inline 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!

$3

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 Inline, run the following from your project directory and follow
the prompts:

Using NPM:

``sh
npx astro add astro-beasties
`

Using Yarn:

`sh
yarn astro add astro-beasties
`

Using PNPM:

`sh
pnpx astro add astro-beasties
`

$3

First, install the Inline integration like so:

`sh
npm install -D -E astro-beasties
`

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

`ts
export default {
integrations: [(await import("astro-beasties")).default()],
};
`

Getting started

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

$3

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

- beasties

or disable them entirely:

`ts
export default {
integrations: [
(await import("astro-beasties")).default({
Beasties: false,
}),
],
};
`

$3

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

astro.config.ts

`ts
export default {
integrations: [
(await import("astro-beasties")).default({
Path: ["./Target", "./Build"],
}),
],
};
`

$3

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

astro.config.ts

`ts
export default {
integrations: [
(await import("astro-beasties")).default({
Path: new Map([["./Source", "./Target"]]),
}),
],
};
`

Or an array of the two.

astro.config.ts

`ts
export default {
integrations: [
(await import("astro-beasties")).default({
Path: [
// Inline Target
"./Target",
// Inline Target one more time into a different directory
new Map([["./Target", "./TargetInline"]]),
],
}),
],
};
`

$3

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

`ts
export default {
integrations: [
(await import("astro-beasties")).default({
Exclude: [
"File.html",
(File: string) => File === "./Target/index.html",
],
}),
],
};
`

$3

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:

`ts
export default {
integrations: [
(await import("astro-beasties")).default({
Logger: 0,
}),
],
};
`

[Inline]: HTTPS://NPMJS.Org/astro-beasties
[beasties]: HTTPS://github.com/DanielRoe/Beasties
[astro-integration]: HTTPS://docs.astro.build/en/guides/integrations-guide/
[critical CSS]:
HTTPS://www.smashingmagazine.com/2015/08/understanding-critical-css/

Changelog

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