{"id":14970798,"url":"https://github.com/rumaan/astro-critical-css","last_synced_at":"2025-06-26T16:33:13.515Z","repository":{"id":65383654,"uuid":"584497891","full_name":"rumaan/astro-critical-css","owner":"rumaan","description":"Inline Critical (above-the-fold) CSS in your Astro Project","archived":false,"fork":false,"pushed_at":"2024-12-10T14:04:01.000Z","size":1774,"stargazers_count":19,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-11T11:49:31.551Z","etag":null,"topics":["astro","astro-integration","astro-library","critical-css","css","typescript","typescript-library"],"latest_commit_sha":null,"homepage":"https://astro-critical-css.vercel.app","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rumaan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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}},"created_at":"2023-01-02T18:30:14.000Z","updated_at":"2025-04-24T13:06:15.000Z","dependencies_parsed_at":"2024-09-03T09:43:09.345Z","dependency_job_id":"b85d4964-6945-458f-9f14-245ef432fad6","html_url":"https://github.com/rumaan/astro-critical-css","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/rumaan/astro-critical-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rumaan%2Fastro-critical-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rumaan%2Fastro-critical-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rumaan%2Fastro-critical-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rumaan%2Fastro-critical-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rumaan","download_url":"https://codeload.github.com/rumaan/astro-critical-css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rumaan%2Fastro-critical-css/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262102322,"owners_count":23259237,"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-integration","astro-library","critical-css","css","typescript","typescript-library"],"created_at":"2024-09-24T13:44:10.081Z","updated_at":"2025-06-26T16:33:13.471Z","avatar_url":"https://github.com/rumaan.png","language":"Astro","readme":"# Astro Critical CSS Integration\n\nAstro Integration for [Critical](https://github.com/addyosmani/critical) package which inlines critical-path CSS into HTML and lazy loads remaining CSS which can greatly improve [First Contentful Paint (FCP)](https://web.dev/fcp/).\n\nRead more about it here: [Extracting Critical CSS](https://web.dev/extract-critical-css/).\n\n## Installation \u0026 Usage\n\n### Astro Add\n\n```sh\nnpx astro add astro-critical-css\n# or\nyarn astro add astro-critical-css\n```\n\n### Manually\n\n```sh\n# npm\nnpm install -D astro-critical-css\n# yarn\nyarn add -D astro-critical-css\n```\n\nIn your `astro.config.mjs`:\n\n```ts\nimport criticalCSS from \"astro-critical-css\";\n\nexport default defineConfig({\n  integrations: [criticalCSS()],\n});\n```\n\nDuring build this integration will look at all the static HTML files and run them through [Critical](https://github.com/addyosmani/critical). (Which depends on Puppeteer/Chromium.)\n\n## Options\n\nIf you need options, `criticalCSS` supports the following config options:\n\n```ts\n// Options\ncriticalCSS({\n  /** Silence log output (plugin specific, everything else is for criticalCSS) */\n  silent: boolean,\n  /** glob pattern to match html files, use this to selectively pick html files into which critical css will be inlined (ex: just the home page excluding nested pages).\n   * By default, all html files in the dist directory will be inlined.\n   */\n  htmlPathRegex: string,\n  /* HTML source to operate against */\n  html: string,\n  /* Array of CSS file paths, file globs, Vinyl objects, or source CSS strings */\n  css: (string | unknown)[],\n  /* Location of where to save the output of an operation. Use an object with 'html' and 'css' props if you want to store both. */\n  target: string | { html: string, css: string, uncritical: string },\n  /* Viewport width */\n  width: number,\n  /* Viewport height */\n  height: number,\n  /* Array of dimensions. Takes precedence over `width` and `height` if set. */\n  dimensions: { width: number, height: number }[],\n  /* Remove the inlined styles from any stylesheets referenced in the HTML.\n    * It generates new references based on extracted content so it's safe to\n    * use for multiple HTML files referencing the same stylesheet. Use with\n    * caution. Removing the critical CSS per page results in a unique async\n    * loaded CSS file for every page. Meaning you can't rely on cache across\n    * multiple pages. */\n  extract: boolean,\n  /* Inline images */\n  inlineImages: boolean,\n  /* List of directories/urls for assets lookup */\n  assetPaths: string[],\n  /* Max file size for base64 inlined images */\n  maxImageFileSize: number,\n  /* Custom rebase options or function */\n  rebase: RebaseOptions | ((url: string) =\u003e string),\n  /* Ignore CSS rules (array or object) */\n  ignore: (string | IgnoreOptions)[] | IgnoreOptions,\n  /* Ignore inlined stylesheets */\n  ignoreInlinedStyles: boolean,\n  /* User agent to use when fetching remote src */\n  userAgent: string,\n  /* Penthouse configuration options */\n  penthouse: object,\n  /* Configuration options for got */\n  request: object,\n  /* Configuration options for CleanCSS */\n  cleanCSS: object,\n  /* Basic authorization: user */\n  user: string,\n  /* Basic authorization: pass */\n  pass: string,\n  /* Throw error on CSS parsing errors */\n  strict: boolean,\n});\n```\n\n## Logging\n\nBy default, `astro-critical-css` will log the output of the operation.\n\n![default console output](./public/default-logging.jpg)\n\nIf you want to silence the logs, you can pass the `silent` option:\n\n```ts\nimport criticalCSS from \"astro-critical-css\";\n\nexport default defineConfig({\n  integrations: [criticalCSS({ silent: true })],\n});\n```\n\nIf you want verbose logging, set the `DEBUG` environment variable:\n\n```sh\nDEBUG=astro-critical-css npx astro build\n# or\nDEBUG=astro* npx astro build\n```\n\n![debug console output](./public/debug-logging.jpg)\n\n## Astro SSR Mode\n\n### Note for \u003c Astro 2.0\n\n⚠️ If your project uses [Astro SSR](https://docs.astro.build/en/guides/server-side-rendering/#enabling-ssr-in-your-project) mode, this integration will only inline HTML files that pre-rendered on build. You will need to enable [`experimental.prerender`](https://docs.astro.build/en/reference/configuration-reference/#experimentalprerender) in your astro config.\n\n### Astro 2.0 and above\n\nCheck out [Hybrid Renderering](https://docs.astro.build/en/guides/server-side-rendering/#hybrid-rendering)\n\n## Similar Libraries\n\n- [astro-critters](https://github.com/astro-community/astro-critters)\n","funding_links":[],"categories":["🌟 Community Integrations"],"sub_categories":["Performance \u0026 Optimization"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frumaan%2Fastro-critical-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frumaan%2Fastro-critical-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frumaan%2Fastro-critical-css/lists"}