Overview

AstroCritters is an Astro integration that brings critters to your Astro project. With the Critters plugin, you can inline your app’s critical CSS and lazy-load the rest. However, it’s important to note that AstroCritters will only inline your statically generated build and pre-rendered routes, and not inline your requests.

Features

• Inline Critical CSS: AstroCritters automatically inlines the critical CSS of your HTML files.
• Override Default Options: You have the option to override any of the default options from the configuration of Critters or disable them entirely.
• Adding Multiple Paths: You can add multiple paths to inline by specifying an array as the Path variable.
• Input-Output Mapping: AstroCritters allows you to provide a map of paths for different input-output directories.
• File Filtering: You can filter files to exclude specific ones from inlining by using regular expressions or functions to match file names.
• Controlling Logging: You have the ability to control the logging level by setting the Logger parameter.

Installation

There are two ways to add the AstroCritters integration to your project.

1. The most convenient option is to use the astro add command. This command will install all necessary dependencies and peer dependencies, and update your astro.config.* file to apply the integration. To install AstroCritters using this method, run the following command in your project directory:

npx astro add critters

2. Alternatively, you can install the dependencies manually by running the following command:

npm install critters

After installing the dependencies, you need to apply the AstroCritters integration to your astro.config.* file using the integrations property.

Summary

AstroCritters is an Astro integration that allows you to inline critical CSS and lazy-load the rest in your Astro project. It provides various features such as overriding default options, adding multiple paths to inline, file filtering, input-output mapping, and controlling logging. By following the installation guide, you can easily add AstroCritters to your project and take advantage of its powerful features.