Beastcss

Inline critical CSS and async load the rest.

Installation

npm i -D beastcss

or

yarn add -D beastcss

Usage

Create a Beastcss instance with the given options.

Then call the async process(html) method with a HTML string as parameter.

const Beastcss = require('beastcss');

const beastcss = new Beastcss({
  // optional configuration (see below)
});

(async () => {
  const processedHTML = await beastcss.process(originalHTML);
})();

That's it! The resultant html will have its critical CSS inlined and the stylesheets async loaded.

Prune Source

Process one or multiple html strings then call the pruneSources() method to remove critical css from your external stylesheets files.

const Beastcss = require('beastcss');

const beastcss = new Beastcss({
  pruneSource: true,
  // ... others options
});

(async () => {
  const processedHTML = await beastcss.process(originalHTML);

  const processedHTML2 = await beastcss.process(originalHTML2);

  const processedHTML3 = await beastcss.process(originalHTML3);

  await beastcss.pruneSources();
})();

Options

path

Type: String

Default: ''

Base path location of the CSS files.

publicPath

Type: String

Default: ''

Public path of the CSS resources. This prefix is removed from the href attribute.

external

Type: Boolean

Default true

Process external stylesheets.

internal

Type: Boolean

Default true

Process internal stylesheets.

additionalStylesheets

Type: Array

Default []

Array of Glob for matching other stylesheets to be used while looking for critical CSS.

externalThreshold

Type: Number

Default 0

Completely inline external stylesheets smaller than a given size.

merge

Type: Boolean

Default true

Merged inlined stylesheets into a single <style></style> tag.

pruneSource

Type: Boolean

Default false

Remove inlined rules from the external stylesheet.

preloadExternalStylesheets

Type: Boolean

Default false

Preload external stylesheets.

asyncLoadExternalStylesheets

Type: Boolean

Default true

Async load external stylesheets.

noscriptFallback

Type: Boolean

Default true

Add <noscript> fallback to load external stylesheets.

exclude

Type: Function|Regexp

Exclude matching external stylesheets from processing.

whitelist

Type: String[]|Regexp[]

An array of css selectors to be considered as used rules.

fontFace

Type: Boolean

Default: false

Inline used @font-face rules.

keyframes

Type: Boolean

Default: false

Inline used @keyframes rules.

fs

Type: Object

Filesystem to be used when reading/writing to external stylesheets files.

logLevel

Type: String

Default: 'info'

Set the printed output verbosity. See available levels.

logger

Type: Object

Provide a custom logger interface.

Log Level

Controls the printed output verbosity. Specifies the level the logger should use. A logger will not produce output for any log level beneath the specified level. Available levels and order are:

• trace
• debug
• info
• warn
• error
• silent

Custom Logger Interface

interface Logger {
  info: (msg: string, id?: string) => void;
  warn: (msg: string, id?: string) => void;
  error: (msg: string, id?: string) => void;
  trace: (msg: string, id?: string) => void;
  debug: (msg: string, id?: string) => void;
}