{"id":13804058,"url":"https://github.com/bezoerb/inline-critical","last_synced_at":"2025-05-15T16:08:24.666Z","repository":{"id":19310068,"uuid":"22547925","full_name":"bezoerb/inline-critical","owner":"bezoerb","description":"Inline critical path CSS and async load existing stylesheets","archived":false,"fork":false,"pushed_at":"2024-12-14T10:51:38.000Z","size":3433,"stargazers_count":116,"open_issues_count":10,"forks_count":14,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-10T01:06:40.746Z","etag":null,"topics":["critical-path","css","inline"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bezoerb.png","metadata":{"files":{"readme":"README.md","changelog":"History.md","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":"2014-08-02T14:41:35.000Z","updated_at":"2025-03-17T22:43:19.000Z","dependencies_parsed_at":"2023-01-14T12:57:36.918Z","dependency_job_id":"1e76582b-2f57-4fca-a24b-4e568f31fdfc","html_url":"https://github.com/bezoerb/inline-critical","commit_stats":{"total_commits":402,"total_committers":12,"mean_commits":33.5,"dds":"0.38557213930348255","last_synced_commit":"91e1818d63d3b36215bcdd9271a151b0948c7ee1"},"previous_names":[],"tags_count":79,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bezoerb%2Finline-critical","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bezoerb%2Finline-critical/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bezoerb%2Finline-critical/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bezoerb%2Finline-critical/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bezoerb","download_url":"https://codeload.github.com/bezoerb/inline-critical/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254374475,"owners_count":22060611,"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":["critical-path","css","inline"],"created_at":"2024-08-04T01:00:40.983Z","updated_at":"2025-05-15T16:08:24.633Z","avatar_url":"https://github.com/bezoerb.png","language":"HTML","funding_links":[],"categories":["Inline sources (styles, scripts)"],"sub_categories":[],"readme":"# inline-critical\n\nInline critical-path css and load the existing stylesheets asynchronously.\nExisting link tags will also be wrapped in `\u003cnoscript\u003e` so the users with javascript disabled will see the site rendered normally.\n\n[![npm version][npm-image]][npm-url] [![Build Status][ci-image]][ci-url] [![Download][dlcounter-image]][dlcounter-url] [![Coverage Status][coveralls-image]][coveralls-url]\n\n## Installation\n\nThis module is installed via npm:\n\n```bash\nnpm install inline-critical\n```\n\n## Example Usage\n\n```js\nconst inline = require('inline-critical');\nconst html = fs.readFileSync('test/fixtures/index.html', 'utf8');\nconst critical = fs.readFileSync('test/fixtures/critical.css', 'utf8');\nconst inlined = inline(html, critical);\n```\n\n## Example Usage ignoring stylesheet per regex\n\n```js\nconst inline = require('inline-critical');\nconst html = fs.readFileSync('test/fixtures/index.html', 'utf8');\nconst critical = fs.readFileSync('test/fixtures/critical.css', 'utf8');\n\nconst inlined = inline(html, critical, {\n  ignore: [/bootstrap/],\n});\n```\n\n## CLI\n\ninline-critical works well with standard input.\nYou can either pass in the html\n\n```bash\ncat index.html | inline-critical critical.css\n```\n\nor just flip things around\n\n```bash\ncat critical.css | inline-critical index.html\n```\n\nor pass in the file as an option\n\n```bash\ninline-critical critical.css index.html\n```\n\nwithout having to worry about the correct order\n\n```bash\ninline-critical index.html critical.css\n```\n\nRun `inline-critical --help` to see the list of options.\n\n## inline(html, styles, options?)\n\n- `html` is the HTML you want to use to inline your critical styles, or any other styles\n- `styles` are the styles you're looking to inline\n- `options` is an optional configuration object\n  - `strategy` select the [preload strategy](#preloadstrategy)\n  - `extract` will remove the inlined styles from any stylesheets referenced in the HTML\n  - `basePath` will be used when extracting styles to find the files references by `href` attributes\n  - `ignore` ignore matching stylesheets when inlining.\n  - `selector` defines the element used by loadCSS as a reference for inlining.\n  - `noscript` specifies position of noscript fallback ('body' - end of body, 'head' - end of head, false - no noscript)\n  - `replaceStylesheets` takes an array of stylesheet hrefs to replace the original links in the document. (Used by critical when you extract uncritical css to a target file)\n\n### PreloadStrategy\n\nThe mechanism to use for lazy-loading stylesheets.\n_[JS]_ indicates that a strategy requires JavaScript (falls back to `\u003cnoscript\u003e`).\n\n- **default:** Move stylesheet links to the end of the document and insert preload meta tags in their place.\n- **\"body\":** Move all external stylesheet links to the end of the document.\n- **\"media\":** Load stylesheets asynchronously by adding `media=\"print\"` and swap to `media=\"all\"` once loaded (https://www.filamentgroup.com/lab/load-css-simpler/). _[JS]_\n- **\"swap\":** Convert stylesheet links to preloads that swap to `rel=\"stylesheet\"` once loaded. _[JS]_\n- **\"polyfill\":** Inject [LoadCSS](https://github.com/filamentgroup/loadCSS) and use it to load stylesheets. _[JS]_\n\n_Adopted from [critters](https://github.com/GoogleChromeLabs/critters#preloadstrategy)_\n\n## License\n\nMIT\n\n[npm-url]: https://www.npmjs.com/package/inline-critical\n[npm-image]: https://img.shields.io/npm/v/inline-critical\n[ci-url]: https://github.com/bezoerb/inline-critical/actions/workflows/test.yml?query=workflow%3ATests\n[ci-image]: https://img.shields.io/github/actions/workflow/status/bezoerb/inline-critical/test.yml?branch=main\u0026label=Tests\u0026logo=github\n[dlcounter-url]: https://www.npmjs.com/package/inline-critical\n[dlcounter-image]: https://img.shields.io/npm/dm/inline-critical\n[coveralls-url]: https://coveralls.io/github/bezoerb/inline-critical?branch=main\n[coveralls-image]: https://img.shields.io/coveralls/github/bezoerb/inline-critical/main\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbezoerb%2Finline-critical","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbezoerb%2Finline-critical","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbezoerb%2Finline-critical/lists"}