https://github.com/fabiospampinato/critically
Tiny performant library for extracting the critical CSS.
https://github.com/fabiospampinato/critically
critical css isomorphic performance tiny
Last synced: 12 months ago
JSON representation
Tiny performant library for extracting the critical CSS.
- Host: GitHub
- URL: https://github.com/fabiospampinato/critically
- Owner: fabiospampinato
- License: mit
- Created: 2019-05-07T17:41:08.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-04T22:25:21.000Z (over 2 years ago)
- Last Synced: 2025-06-25T13:05:06.915Z (about 1 year ago)
- Topics: critical, css, isomorphic, performance, tiny
- Language: TypeScript
- Homepage:
- Size: 21.5 KB
- Stars: 10
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# Critically
Tiny performant library for extracting the critical CSS.
Compared to [`critical`](https://github.com/addyosmani/critical) this library:
- Is so much smaller, at about 2kb in size. `critical` instead needs to download a whole browser.
- It works in the browser too, which is useful if you need to store the previous state of the app or a skeleton of it.
- Will output slightly larger strings, as only simple minification techniques are performed.
- Is much faster.
## Install
```sh
npm install --save critically
```
## API
This library provides the following interface:
```ts
type Options = {
document?: Document, // The document from which to extract the critical CSS
html?: string, // The HTML string from which to extract the critical CSS
minify?: boolean, // Whether to enable minification or not
transform?: ( doc: Document ) => Document | void // A function that will be run before extracting the critical CSS, useful for removing unneeded elements from the document
};
type Result = {
clone: Document, // The cloned document object
html: string, // Full HTML with the critical CSS embedded in it
css: string // Only the critical CSS
};
async function critically ( options: Options ): Promise;
```
You need to provide either an HTML string or a document object. The document will be cloned, so you can modify it safely via the `transform` function.
## Usage
```ts
import critically from 'critically';
const {clone, html, css} = await critically ({ document });
```
## License
MIT © Fabio Spampinato