{"id":14959235,"url":"https://github.com/playform/inline","last_synced_at":"2026-01-28T16:14:30.326Z","repository":{"id":39671401,"uuid":"483526192","full_name":"PlayForm/Inline","owner":"PlayForm","description":"Inline 🦔","archived":false,"fork":false,"pushed_at":"2025-05-14T01:17:29.000Z","size":2631,"stargazers_count":229,"open_issues_count":1,"forks_count":10,"subscribers_count":2,"default_branch":"Current","last_synced_at":"2025-05-14T03:16:01.631Z","etag":null,"topics":["astro","astro-component","astro-critters","astro-inline","astro-integration","critical-css","critters","css","inline","inline-css","performance","playform","withastro"],"latest_commit_sha":null,"homepage":"https://NPMJS.Org/@playform/inline","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PlayForm.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"custom":"https://Stripe.PlayForm.Cloud/b/3csdQZfzn2LDaBOcMN","open_collective":"playform-cloud-collective"}},"created_at":"2022-04-20T05:59:04.000Z","updated_at":"2025-05-14T01:17:32.000Z","dependencies_parsed_at":"2023-08-16T09:14:16.914Z","dependency_job_id":"f53932dd-3f65-410e-859c-7740e3c44834","html_url":"https://github.com/PlayForm/Inline","commit_stats":{"total_commits":1293,"total_committers":2,"mean_commits":646.5,"dds":"0.23047177107501937","last_synced_commit":"ab376ba9cac7ac860e78f6e9a84cc31404910961"},"previous_names":["astro-community/astro-critters","playform/astrocritters","playform/inline","playform/crittersastro"],"tags_count":90,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PlayForm%2FInline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PlayForm%2FInline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PlayForm%2FInline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PlayForm%2FInline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PlayForm","download_url":"https://codeload.github.com/PlayForm/Inline/tar.gz/refs/heads/Current","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254384982,"owners_count":22062422,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","astro-component","astro-critters","astro-inline","astro-integration","critical-css","critters","css","inline","inline-css","performance","playform","withastro"],"created_at":"2024-09-24T13:19:12.900Z","updated_at":"2026-01-28T16:14:30.321Z","avatar_url":"https://github.com/PlayForm.png","language":"TypeScript","readme":"\u003ctable\u003e\u003ctr\u003e \u003ctd colspan=\"1\"\u003e \u003ch3 align=\"center\"\u003e \u003cpicture\u003e \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://PlayForm.Cloud/Dark/Image/GitHub/Astro.svg\"\u003e \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://PlayForm.Cloud/Image/GitHub/Astro.svg\"\u003e \u003cimg width=\"28\" alt=\"Astro\" src=\"https://PlayForm.Cloud/Image/GitHub/Astro.svg\"\u003e \u003c/picture\u003e  \u003c/h3\u003e \u003c/td\u003e \u003ctd colspan=\"3\" valign=\"top\"\u003e \u003ch3 align=\"center\"\u003e Related \u003c/h3\u003e \u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd valign=\"top\" colspan=\"1\"\u003e\u003ca href=\"https://GitHub.Com/PlayForm/Compress/actions/workflows/Node.yml\" target=\"_blank\"\u003e \u003cpicture\u003e \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/github/actions/workflow/status/PlayForm/Compress/Node.yml?branch=main\u0026label=Build\u0026logo=node.js\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\"\u003e \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://img.shields.io/github/actions/workflow/status/PlayForm/Compress/Node.yml?branch=main\u0026label=Build\u0026logo=node.js\u0026color=white\u0026labelColor=white\u0026logoColor=black\u0026logoWidth=0\"\u003e \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/PlayForm/Compress/Node.yml?branch=main\u0026label=Build\u0026logo=node.js\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\" alt=\"Build\" title=\"Build\"\u003e \u003c/picture\u003e \u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://NPMJS.Org/@playform/compress?activeTab=dependencies\" target=\"_blank\"\u003e \u003cpicture\u003e \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/librariesio/release/npm/@playform/compress?logo=dependabot\u0026label=\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\"\u003e \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://img.shields.io/librariesio/release/npm/@playform/compress?logo=dependabot\u0026label=\u0026color=white\u0026labelColor=white\u0026logoColor=black\u0026logoWidth=0\"\u003e \u003cimg src=\"https://img.shields.io/librariesio/release/npm/@playform/compress?logo=dependabot\u0026label=\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\" alt=\"Dependency\" title=\"Dependency\"\u003e \u003c/picture\u003e \u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://NPMJS.Org/@playform/compress\" target=\"_blank\"\u003e \u003cpicture\u003e \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/npm/v/@playform/compress?label=Version\u0026logo=npm\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\"\u003e \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://img.shields.io/npm/v/@playform/compress?label=Version\u0026logo=npm\u0026color=white\u0026labelColor=white\u0026logoColor=black\u0026logoWidth=0\"\u003e \u003cimg src=\"https://img.shields.io/npm/v/@playform/compress?label=Version\u0026logo=npm\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\" alt=\"Version\" title=\"Version\"\u003e \u003c/picture\u003e \u003c/a\u003e\u003cbr\u003e\u003c/td\u003e\u003ctd valign=\"top\" colspan=\"1\"\u003e\u003ca href=\"https://GitHub.Com/PlayForm/Compress\" target=\"_blank\"\u003e\u003cpicture\u003e\u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/github/stars/PlayForm/Compress?style=flat\u0026label=Star\u0026logo=github\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\"\u003e\u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://img.shields.io/github/stars/PlayForm/Compress?style=flat\u0026label=Star\u0026logo=github\u0026color=white\u0026labelColor=white\u0026logoColor=black\u0026logoWidth=0\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/PlayForm/Compress?style=flat\u0026label=Star\u0026logo=github\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\" alt=\"Star\"\u003e\u003c/picture\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://NPMJS.Org/@playform/compress\" target=\"_blank\"\u003e \u003cpicture\u003e \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/npm/d18m/@playform/compress?label=Download\u0026logo=npm\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\"\u003e \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://img.shields.io/npm/d18m/@playform/compress?label=Download\u0026logo=npm\u0026color=white\u0026labelColor=white\u0026logoColor=black\u0026logoWidth=0\"\u003e \u003cimg src=\"https://img.shields.io/npm/d18m/@playform/compress?label=Download\u0026logo=npm\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\" alt=\"Download\" title=\"Download\"\u003e \u003c/picture\u003e \u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://GitHub.Com/PlayForm/Compress\" target=\"_blank\"\u003e\u003cb\u003eCompress 🗜️\u003c/b\u003e\u003c/a\u003e\u003c/td\u003e\u003ctd valign=\"top\" colspan=\"1\"\u003e\u003ca href=\"https://GitHub.Com/PlayForm/Format/actions/workflows/Node.yml\" target=\"_blank\"\u003e \u003cpicture\u003e \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/github/actions/workflow/status/PlayForm/Format/Node.yml?branch=main\u0026label=Build\u0026logo=node.js\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\"\u003e \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://img.shields.io/github/actions/workflow/status/PlayForm/Format/Node.yml?branch=main\u0026label=Build\u0026logo=node.js\u0026color=white\u0026labelColor=white\u0026logoColor=black\u0026logoWidth=0\"\u003e \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/PlayForm/Format/Node.yml?branch=main\u0026label=Build\u0026logo=node.js\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\" alt=\"Build\" title=\"Build\"\u003e \u003c/picture\u003e \u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://NPMJS.Org/@playform/format?activeTab=dependencies\" target=\"_blank\"\u003e \u003cpicture\u003e \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/librariesio/release/npm/@playform/format?logo=dependabot\u0026label=\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\"\u003e \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://img.shields.io/librariesio/release/npm/@playform/format?logo=dependabot\u0026label=\u0026color=white\u0026labelColor=white\u0026logoColor=black\u0026logoWidth=0\"\u003e \u003cimg src=\"https://img.shields.io/librariesio/release/npm/@playform/format?logo=dependabot\u0026label=\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\" alt=\"Dependency\" title=\"Dependency\"\u003e \u003c/picture\u003e \u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://NPMJS.Org/@playform/format\" target=\"_blank\"\u003e \u003cpicture\u003e \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/npm/v/@playform/format?label=Version\u0026logo=npm\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\"\u003e \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://img.shields.io/npm/v/@playform/format?label=Version\u0026logo=npm\u0026color=white\u0026labelColor=white\u0026logoColor=black\u0026logoWidth=0\"\u003e \u003cimg src=\"https://img.shields.io/npm/v/@playform/format?label=Version\u0026logo=npm\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\" alt=\"Version\" title=\"Version\"\u003e \u003c/picture\u003e \u003c/a\u003e\u003cbr\u003e\u003c/td\u003e\u003ctd valign=\"top\" colspan=\"1\"\u003e\u003ca href=\"https://GitHub.Com/PlayForm/Format\" target=\"_blank\"\u003e\u003cpicture\u003e\u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/github/stars/PlayForm/Format?style=flat\u0026label=Star\u0026logo=github\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\"\u003e\u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://img.shields.io/github/stars/PlayForm/Format?style=flat\u0026label=Star\u0026logo=github\u0026color=white\u0026labelColor=white\u0026logoColor=black\u0026logoWidth=0\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/PlayForm/Format?style=flat\u0026label=Star\u0026logo=github\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\" alt=\"Star\"\u003e\u003c/picture\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://NPMJS.Org/@playform/format\" target=\"_blank\"\u003e \u003cpicture\u003e \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/npm/d18m/@playform/format?label=Download\u0026logo=npm\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\"\u003e \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://img.shields.io/npm/d18m/@playform/format?label=Download\u0026logo=npm\u0026color=white\u0026labelColor=white\u0026logoColor=black\u0026logoWidth=0\"\u003e \u003cimg src=\"https://img.shields.io/npm/d18m/@playform/format?label=Download\u0026logo=npm\u0026color=black\u0026labelColor=black\u0026logoColor=white\u0026logoWidth=0\" alt=\"Download\" title=\"Download\"\u003e \u003c/picture\u003e \u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://GitHub.Com/PlayForm/Format\" target=\"_blank\"\u003e\u003cb\u003e🗻 Format —\u003c/b\u003e\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\u003chr\u003e\n\n# [Inline] 🦔\n\nThis **[Astro integration][astro-integration]** brings [`beasties`][beasties] to\nyour Astro project.\n\nBeasties is a plugin that inlines your app's [critical CSS] and lazy-loads the\nrest.\n\n\u003e **Note**\n\u003e\n\u003e `Inline` will not inline your requests, only your statically generated build\n\u003e and pre-rendered routes.\n\n## Installation 🚀\n\nThere are two ways to add integrations to your project. Let's try the most\nconvenient option first!\n\n### `astro add` command\n\nAstro includes a CLI tool for adding first party integrations: `astro add`. This\ncommand will:\n\n1. (Optionally) Install all necessary dependencies and peer dependencies\n2. (Also optionally) Update your `astro.config.*` file to apply this integration\n\nTo install `Inline`, run the following from your project directory and follow\nthe prompts:\n\nUsing NPM:\n\n```sh\nnpx astro add @playform/inline\n```\n\nUsing Yarn:\n\n```sh\nyarn astro add @playform/inline\n```\n\nUsing PNPM:\n\n```sh\npnpx astro add @playform/inline\n```\n\n### Install dependencies manually\n\nFirst, install the `Inline` integration like so:\n\n```sh\nnpm install -D -E @playform/inline\n```\n\nThen, apply this integration to your `astro.config.*` file using the\n`integrations` property:\n\n```ts\nexport default {\n\tintegrations: [(await import(\"@playform/inline\")).default()],\n};\n```\n\n## Getting started\n\nBeasties will now automatically inline the critical CSS of your HTML files.\n\n### Default Inlining\n\nYou can override any of the default options from the configuration of:\n\n- [`beasties`](HTTPS://github.com/DanielRoe/Beasties#usage)\n\nor disable them entirely:\n\n```ts\nexport default {\n\tintegrations: [\n\t\t(await import(\"@playform/inline\")).default({\n\t\t\tBeasties: false,\n\t\t}),\n\t],\n};\n```\n\n### Add Multiple Paths\n\nYou can add multiple paths to inline by specifying an array as the `Path`\nvariable.\n\n**`astro.config.ts`**\n\n```ts\nexport default {\n\tintegrations: [\n\t\t(await import(\"@playform/inline\")).default({\n\t\t\tPath: [\"./Target\", \"./Build\"],\n\t\t}),\n\t],\n};\n```\n\n### Input-Output Mapping\n\nYou can also provide a map of paths for different input output directories.\n\n**`astro.config.ts`**\n\n```ts\nexport default {\n\tintegrations: [\n\t\t(await import(\"@playform/inline\")).default({\n\t\t\tPath: new Map([[\"./Source\", \"./Target\"]]),\n\t\t}),\n\t],\n};\n```\n\nOr an array of the two.\n\n**`astro.config.ts`**\n\n```ts\nexport default {\n\tintegrations: [\n\t\t(await import(\"@playform/inline\")).default({\n\t\t\tPath: [\n\t\t\t\t// Inline Target\n\t\t\t\t\"./Target\",\n\t\t\t\t// Inline Target one more time into a different directory\n\t\t\t\tnew Map([[\"./Target\", \"./TargetInline\"]]),\n\t\t\t],\n\t\t}),\n\t],\n};\n```\n\n### File Filtering\n\nYou can filter files to exclude specific ones from inlining. A filter can be an\narray of regular expressions or a single match. You can also use functions to\nmatch on file names:\n\n**`astro.config.ts`**\n\n```ts\nexport default {\n\tintegrations: [\n\t\t(await import(\"@playform/inline\")).default({\n\t\t\tExclude: [\n\t\t\t\t\"File.html\",\n\t\t\t\t(File: string) =\u003e File === \"./Target/index.html\",\n\t\t\t],\n\t\t}),\n\t],\n};\n```\n\n### Controlling Logging\n\nYou can control the logging level by setting the `Logger` parameter. The default\nvalue is `2`, but you can set it to `0` if you don't want to see debug messages:\n\n```ts\nexport default {\n\tintegrations: [\n\t\t(await import(\"@playform/inline\")).default({\n\t\t\tLogger: 0,\n\t\t}),\n\t],\n};\n```\n\n[Inline]: HTTPS://NPMJS.Org/@playform/inline\n[beasties]: HTTPS://github.com/DanielRoe/Beasties\n[astro-integration]: HTTPS://docs.astro.build/en/guides/integrations-guide/\n[critical CSS]:\n\tHTTPS://www.smashingmagazine.com/2015/08/understanding-critical-css/\n\n## Changelog\n\nSee [`CHANGELOG.md`](CHANGELOG.md) for a history of changes to this integration.\n","funding_links":["https://Stripe.PlayForm.Cloud/b/3csdQZfzn2LDaBOcMN","https://opencollective.com/playform-cloud-collective"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplayform%2Finline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplayform%2Finline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplayform%2Finline/lists"}