Narcoleptic Programmers' Medicine
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

critically

1.1.1 • Public • Published

Critically

Tiny, performant, isomorphic library for extracting the critical CSS.

Compared to 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

npm install --save critically

API

This library provides the following interface:

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 = {
  html: string, // Full HTML with the critical CSS embedded in it
  css: string // Only the critical CSS
};
 
async function critically ( options: Options ): Promise<Result>;

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

import critically from 'critically';
 
critically ({ document })
  .then ( ({ html, css }) => console.log ( html, css ) );

License

MIT © Fabio Spampinato

Install

npm i critically

DownloadsWeekly Downloads

6

Version

1.1.1

License

MIT

Unpacked Size

33.2 kB

Total Files

15

Last publish

Collaborators

  • avatar