Detalhes do pacote

@playform/inline

PlayForm15kSEE LICENSE IN LICENSE0.1.2

Inline 🦔

astro, astro-component, astro-integration, astro-beasties

readme (leia-me)

<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"> Astro </picture>

Related

<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"> Build </picture>
<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"> Dependency </picture>
<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"> Version </picture>
<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">Star</picture>
<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"> Download </picture>
Compress 🗜️
<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"> Build </picture>
<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"> Dependency </picture>
<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"> Version </picture>
<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">Star</picture>
<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"> Download </picture>
Format 🗻

Inline 🦔

This Astro integration brings 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:

npx astro add @playform/inline

Using Yarn:

yarn astro add @playform/inline

Using PNPM:

pnpx astro add @playform/inline

Install dependencies manually

First, install the Inline integration like so:

npm install -D -E @playform/inline

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

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:

or disable them entirely:

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

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

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

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

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:

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

[critical CSS]: HTTPS://www.smashingmagazine.com/2015/08/understanding-critical-css/

Changelog

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