Inline

Overview

The Inline Astro integration brings the Critters plugin to your Astro project. Critters is a tool that inlines critical CSS for your app and lazy-loads the remaining CSS. Please note that Inline only works with statically generated builds and pre-rendered routes.

Features

• Automatic Critical CSS Inlining: Critters will automatically inline the critical CSS of your HTML files.
• Default Inlining Customization: You can override default options and configurations from the critters plugin.
• Multiple Paths Support: Add multiple paths to inline by specifying an array as the Path variable.
• Input-Output Mapping: Provide a map of paths for different input-output directories in your astro.config.* file.
• File Filtering: Exclude specific files from inlining by using regular expressions or functions in your astro.config.* file.
• Logging Control: Customize the logging level by setting the Logger parameter in your astro.config.* file.

Option 1: Using astro add

1. Run the following command in your project directory:
   Using NPM: astro add inline
   Using Yarn: astro add inline
   Using PNPM: astro add inline

Option 2: Manual Installation

1. Install the Inline integration:

   npm install @astro/inline
   

2. Apply the integration in your astro.config.* file:

   // astro.config.ts
   export default {
       integrations: [
           '@astro/inline'
       ]
   }
   

Summary

The Inline Astro integration simplifies the process of inlining critical CSS for your Astro project using the Critters plugin. By following the installation steps and customizing configurations in the astro.config.* file, you can efficiently manage and optimize your CSS resources.