
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
astro-critters
Advanced tools
| Related — | ||
| 🗜️ Compress — | | 🗻 Format — |
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
Inline
will not inline your requests, only your statically generated build and pre-rendered routes.
There are two ways to add integrations to your project. Let's try the most convenient option first!
astro add
commandAstro includes a CLI tool for adding first party integrations: astro add
. This
command will:
astro.config.*
file to apply this integrationTo install Inline
, 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
First, install the Inline
integration like so:
npm install -D -E astro-critters
Then, apply this integration to your astro.config.*
file using the
integrations
property:
export default {
integrations: [(await import("astro-critters")).default()],
};
Critters will now automatically inline the critical CSS of your HTML files.
You can override any of the default options from the configuration of:
or disable them entirely:
export default {
integrations: [
(await import("astro-critters")).default({
Critters: false,
}),
],
};
You can add multiple paths to inline by specifying an array as the Path
variable.
astro.config.ts
export default {
integrations: [
(await import("astro-critters")).default({
Path: ["./Target", "./Build"],
}),
],
};
You can also provide a map of paths for different input output directories.
astro.config.ts
export default {
integrations: [
(await import("astro-critters")).default({
Path: new Map([["./Source", "./Target"]]),
}),
],
};
Or an array of the two.
astro.config.ts
export default {
integrations: [
(await import("astro-critters")).default({
Path: [
// Inline Target
"./Target",
// Inline Target one more time into a different directory
new Map([["./Target", "./TargetInline"]]),
],
}),
],
};
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("astro-critters")).default({
Exclude: [
"File.html",
(File: string) => File === "./Target/index.html",
],
}),
],
};
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("astro-critters")).default({
Logger: 0,
}),
],
};
See CHANGELOG.md
for a history of changes to this integration.
FAQs
🦔 Inline —
The npm package astro-critters receives a total of 822 weekly downloads. As such, astro-critters popularity was classified as not popular.
We found that astro-critters demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.