DOCSEARCHbyAlgolia
Submit Docs

Inline Astro Integration

repository·Current·Indexed 43 days ago

https://github.com/playform/inline

An Astro integration that uses the beasties library to inline critical CSS into HTML files and lazy-load remaining styles to improve page load performance for statically generated and pre-rendered routes.

Tokens
898
Snippets
3
Records
5
Agent score
5%

What's inside Inline

  1. Understand why `astro` is a dependency with a wildcard version

    Current

    In @playform/inline (and related PlayForm packages), astro is listed in dependencies using a wildcard version ("astro": "*") instead of being listed in peerDependencies.

    This approach is used to ensure:

    • Type availability: TypeScript can resolve astro types during integration builds and for consumers.
    • No version pinning: It prevents the integration from forcing a specific version of Astro onto the host project, which avoids breaking builds when the host project upgrades Astro (e.g., moving from v5 to v6).
    • No installation friction: It avoids triggering peer dependency validation logic in package managers like npm, which can cause errors or require users to use the legacy-peer-deps flag.
    • Automatic deduplication: Package managers like npm and yarn will reuse the host project's existing astro installation because the wildcard * satisfies any version requirement.

  2. Configure Inline in `astro.config.*`

    Current

    The Inline integration uses beasties to inline critical CSS and lazy-load the rest. It only works on statically generated builds and pre-rendered routes.

    Default Behavior

    By default, it automatically inlines critical CSS. You can disable the entire integration by passing { Beasties: false } to the configuration object.

    Path Configuration

    You can specify which paths to process using the Path option:

    • Array of strings: Specify multiple directories to inline.
    • Map: Provide an input-to-output mapping using new Map([["input", "output"]]).
    • Mixed Array: An array containing both strings and Maps to handle multiple targets or specific mappings.

    File Filtering

    Use the Exclude option to prevent specific files from being inlined. Supported formats include:

    • A string (exact filename match).
    • An array of regular expressions.
    • A function that takes a filename string and returns a boolean.

    Logging

    Control the verbosity of logs using the Logger option. The default value is 2. Set it to 0 to suppress debug messages.

  3. Install the Inline Astro integration

    Current

    You can install the Inline integration using the Astro CLI or manually via npm/yarn/pnpm.

    Using astro add (Recommended)

    Run the following command in your project directory and follow the prompts to install dependencies and update your astro.config.* file automatically.

    Manual Installation

    1. Install the package as a dev dependency: npm install -D -E @playform/inline
    2. Add it to your astro.config.* file using the integrations property.
    export default {
	integrations: [(await import("@playform/inline")).default()],
};

  4. Configure paths for inlining

    Current

    Use the Path option to define which directories should be processed. You can provide a simple array of paths, or a Map to define specific input-to-output mappings.

    // Multiple paths
Path: ["./Target", "./Build"]

// Input-Output mapping
Path: new Map([["./Source", "./Target"]])

// Mixed array (Target directory + a specific mapping)
Path: [
  "./Target",
  new Map([["./Target", "./TargetInline"]]),
]