• Stars
    star
    160
  • Rank 234,703 (Top 5 %)
  • Language
    TypeScript
  • License
    Other
  • Created over 2 years ago
  • Updated 9 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

πŸ¦” Inline CSS.

Astro
Related


Stars
AstroCompress
πŸ—œοΈ AstroJS compression utilities.
Compress HTML, CSS, JavaScript and more!


Build
Dependencies
Version
Downloads

Stars
AstroRome
πŸ›οΈ AstroJS Rome tools.
Format, lint and check your Astro website with Rome.


Build
Dependencies
Version
Downloads

πŸ¦” AstroCritters

This Astro integration brings critters to your Astro project.

Critters is a plugin that inlines your app's critical CSS and lazy-loads the rest.

Note

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

Using NPM:

npx astro add astro-critters

Using Yarn:

yarn astro add astro-critters

Using PNPM:

pnpx astro add astro-critters

Install dependencies manually

First, install the AstroCritters integration like so:

npm install -D -E astro-critters

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

import Critters from "astro-critters";

export default {
	integrations: [Critters()],
};

Getting started

Critters 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:

import Critters from "astro-critters";

export default {
	integrations: [
		Critters({
			Critters: false,
		}),
	],
};

Adding Multiple Paths

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

astro.config.ts

import Critters from "astro-critters";

export default {
	integrations: [
		Critters({
			Path: ["./Target", "./Build"],
		}),
	],
};

Input-Output Mapping

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

astro.config.ts

import Critters from "astro-critters";

export default {
	integrations: [
		Critters({
			Path: new Map([["./Source", "./Target"]]),
		}),
	],
};

Or an array of the two.

astro.config.ts

import Critters from "astro-critters";

export default {
	integrations: [
		Critters({
			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

import Critters from "astro-critters";

export default {
	integrations: [
		Critters({
			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:

import Critters from "astro-critters";

export default {
	integrations: [
		Critters({
			Logger: 0,
		}),
	],
};

Changelog

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