@playform/inline/README.md

Inline 🦔

<table><tr> <td colspan="1"> <h3 align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://PlayForm.LTD/Dark/Image/GitHub/Astro.svg"> <source media="(prefers-color-scheme: light)" srcset="https://PlayForm.LTD/Image/GitHub/Astro.svg"> <img width="28" alt="Astro" src="https://PlayForm.LTD/Image/GitHub/Astro.svg"> </picture>  </h3> </td> <td colspan="3" valign="top"> <h3 align="center"> Related </h3> </td> </tr><tr><td valign="top" colspan="1"><a href="HTTPS://GitHub.Com/PlayForm/Compress/actions/workflows/Node.yml" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/PlayForm/Compress/Node.yml?branch=main&label=Build&logo=node.js&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/PlayForm/Compress/Node.yml?branch=main&label=Build&logo=node.js&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/github/actions/workflow/status/PlayForm/Compress/Node.yml?branch=main&label=Build&logo=node.js&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Build" title="Build"> </picture> </a><br><a href="HTTPS://NPMJS.Org/@playform/compress?activeTab=dependencies" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/librariesio/release/npm/@playform/compress?logo=dependabot&label=&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/librariesio/release/npm/@playform/compress?logo=dependabot&label=&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/librariesio/release/npm/@playform/compress?logo=dependabot&label=&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Dependency" title="Dependency"> </picture> </a><br><a href="HTTPS://NPMJS.Org/@playform/compress" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/@playform/compress?label=Version&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/v/@playform/compress?label=Version&logo=npm&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/npm/v/@playform/compress?label=Version&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Version" title="Version"> </picture> </a><br></td><td valign="top" colspan="1"><a href="HTTPS://GitHub.Com/PlayForm/Compress" target="_blank"><picture><source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/stars/PlayForm/Compress?style=flat&label=Star&logo=github&color=black&labelColor=black&logoColor=white&logoWidth=0"><source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/stars/PlayForm/Compress?style=flat&label=Star&logo=github&color=white&labelColor=white&logoColor=black&logoWidth=0"><img src="https://img.shields.io/github/stars/PlayForm/Compress?style=flat&label=Star&logo=github&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Star"></picture></a><br><a href="HTTPS://NPMJS.Org/@playform/compress" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/dt/@playform/compress?label=Download&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/dt/@playform/compress?label=Download&logo=npm&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/npm/dt/@playform/compress?label=Download&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Download" title="Download"> </picture> </a><br><a href="HTTPS://GitHub.Com/PlayForm/Compress" target="_blank"><b>Compress 🗜️</b></a></td><td valign="top" colspan="1"><a href="HTTPS://GitHub.Com/PlayForm/Format/actions/workflows/Node.yml" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/PlayForm/Format/Node.yml?branch=main&label=Build&logo=node.js&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/PlayForm/Format/Node.yml?branch=main&label=Build&logo=node.js&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/github/actions/workflow/status/PlayForm/Format/Node.yml?branch=main&label=Build&logo=node.js&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Build" title="Build"> </picture> </a><br><a href="HTTPS://NPMJS.Org/@playform/format?activeTab=dependencies" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/librariesio/release/npm/@playform/format?logo=dependabot&label=&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/librariesio/release/npm/@playform/format?logo=dependabot&label=&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/librariesio/release/npm/@playform/format?logo=dependabot&label=&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Dependency" title="Dependency"> </picture> </a><br><a href="HTTPS://NPMJS.Org/@playform/format" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/@playform/format?label=Version&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/v/@playform/format?label=Version&logo=npm&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/npm/v/@playform/format?label=Version&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Version" title="Version"> </picture> </a><br></td><td valign="top" colspan="1"><a href="HTTPS://GitHub.Com/PlayForm/Format" target="_blank"><picture><source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/stars/PlayForm/Format?style=flat&label=Star&logo=github&color=black&labelColor=black&logoColor=white&logoWidth=0"><source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/stars/PlayForm/Format?style=flat&label=Star&logo=github&color=white&labelColor=white&logoColor=black&logoWidth=0"><img src="https://img.shields.io/github/stars/PlayForm/Format?style=flat&label=Star&logo=github&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Star"></picture></a><br><a href="HTTPS://NPMJS.Org/@playform/format" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/dt/@playform/format?label=Download&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/dt/@playform/format?label=Download&logo=npm&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/npm/dt/@playform/format?label=Download&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Download" title="Download"> </picture> </a><br><a href="HTTPS://GitHub.Com/PlayForm/Format" target="_blank"><b>Format 🗻</b></a></td></tr></table>

# [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!

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

Using NPM:

```sh
npx astro add @playform/inline
```

Using Yarn:

```sh
yarn astro add @playform/inline
```

Using PNPM:

```sh
pnpx astro add @playform/inline
```

### Install dependencies manually

First, install the `Inline` integration like so:

```sh
npm install -D -E @playform/inline
```

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

```ts
export default {
	integrations: [(await import("@playform/inline")).default()],
};
```

## Getting started

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

### Default Inlining

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

- [`beasties`](HTTPS://github.com/DanielRoe/Beasties#usage)

or disable them entirely:

```ts
export default {
	integrations: [
		(await import("@playform/inline")).default({
			Beasties: false,
		}),
	],
};
```

### Add Multiple Paths

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

**`astro.config.ts`**

```ts
export default {
	integrations: [
		(await import("@playform/inline")).default({
			Path: ["./Target", "./Build"],
		}),
	],
};
```

### Input-Output Mapping

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

**`astro.config.ts`**

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

Or an array of the two.

**`astro.config.ts`**

```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"]]),
			],
		}),
	],
};
```

### File Filtering

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("@playform/inline")).default({
			Exclude: [
				"File.html",
				(File: string) => File === "./Target/index.html",
			],
		}),
	],
};
```

### Controlling Logging

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("@playform/inline")).default({
			Logger: 0,
		}),
	],
};
```

[Inline]: HTTPS://NPMJS.Org/@playform/inline
[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`](CHANGELOG.md) for a history of changes to this integration.