# @scullyio/scully-plugin-critical-css

> > BETA notice: this plugin is still in beta

Latest version **2.1.41** (published 2022-09-21) · 0 weekly downloads

## Install

```sh
npm install @scullyio/scully-plugin-critical-css
pnpm add @scullyio/scully-plugin-critical-css
yarn add @scullyio/scully-plugin-critical-css
bun add @scullyio/scully-plugin-critical-css
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.41 |
| Published | 2022-09-21 |
| First published | 2020-09-24 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 19 |
| Unpacked size | 10.2 KB |
| Known vulnerabilities | 0 (+24 in 4 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2527 |
| Maintainers | aaronfrost, jorgeucano, sanderelias, villanuevand |
| Keywords | angular, scully, seo, scully-plugin, plugin, CSS-above-the-fold |

## Links

- npm: https://www.npmjs.com/package/@scullyio/scully-plugin-critical-css
- Repository: https://github.com/scullyio/scully.git#main
- Homepage: https://github.com/scullyio/scully/tree/main#readme
- Issues: https://github.com/scullyio/scully/issues
- npm.io page: https://npm.io/package/@scullyio/scully-plugin-critical-css

## Dependencies (19)

- [os](https://npm.io/package/os.md) ^0.1.2
- [ws](https://npm.io/package/ws.md) ^8.5.0
- [cors](https://npm.io/package/cors.md) ^2.8.5
- [rxjs](https://npm.io/package/rxjs.md) ^7.5.4
- [chalk](https://npm.io/package/chalk.md) ^4.1.2
- [express](https://npm.io/package/express.md) 4.17.3
- [js-yaml](https://npm.io/package/js-yaml.md) ^4.1.0
- [prismjs](https://npm.io/package/prismjs.md) ^1.27.0
- [zone.js](https://npm.io/package/zone.js.md) 0.11.4
- [chokidar](https://npm.io/package/chokidar.md) ^3.5.3
- [critical](https://npm.io/package/critical.md) ^4.0.1
- [puppeteer](https://npm.io/package/puppeteer.md) ^13.4.1
- [selfsigned](https://npm.io/package/selfsigned.md) ^2.0.0
- [asciidoctor](https://npm.io/package/asciidoctor.md) ^2.2.5
- [compression](https://npm.io/package/compression.md) ^1.7.4
- [@sentry/node](https://npm.io/package/@sentry/node.md) ^6.12.0
- [@angular/core](https://npm.io/package/@angular/core.md) 12.2.6
- [@angular/common](https://npm.io/package/@angular/common.md) 12.2.6
- [@angular/platform-server](https://npm.io/package/@angular/platform-server.md) 12.2.6

## Recent versions

- 2.1.41 (latest) — 2022-09-21
- 3.1.0-beta.0 (beta) — 2023-07-19
- 3.0.0-beta.1 (next) — 2022-03-11
- 2.1.0-BETA.20211222124715883 (develop) — 2021-12-22
- 0.0.3 (latest--dry-run) — 2021-02-22
- 2.1.36 — 2022-06-13
- 2.1.32 — 2022-04-20
- 2.1.29 — 2022-03-28
- 2.1.28 — 2022-03-25
- 2.1.26 — 2022-03-15
- 2.1.25 — 2022-03-12
- 2.1.24 — 2022-03-11
- 2.1.21 — 2022-03-02
- 2.1.20 — 2022-03-01
- 2.1.19 — 2022-03-01
- … 158 more at https://npm.io/package/@scullyio/scully-plugin-critical-css/versions

## README

# scully-plugin-critical-css

> BETA notice: this plugin is still in beta

- Description: With this Scully render plugin, we will inline the critical above the fold CSS into the HTML, and then "lazy-load" the CSS that is needed for the rest of the page. It will be ready before your SPA will boot. This will remove CSS from being blocking.
- Type: Render Plugin

This plugins uses the [critical](https://github.com/addyosmani/critical#critical) tool that is maintained by google, and is listed as the official endorsed option on [web.dev](https://web.dev/extract-critical-css/)

## Getting Started

### 1. Install the plugin:

```bash
npm install -D @scullyio/scully-plugin-critical-css
```

### 2. Use the plugin:

Then add it to your `scully.<projectname>.config.ts` like this:

```typescript
import { criticalCSS } from '@scullyio/scully-plugin-critical-css';

/** the seoHrefOptimise is optional **/
const defaultPostRenderers = ['seoHrefOptimise', criticalCSS];

export const config: ScullyConfig = {
  /** more config here */
  defaultPostRenderers,
  /** more config here */
  routes: {
    /** more config here */
  },
};
```

The above config will use the plugin on _all_ routes. If you want to use in on a single route, add it to the config of that particular route like this:

```typescript
export const config: ScullyConfig = {
  /** more config here */
  routes: {
    someRoute: {
      type: 'contentFolder', // Or any other type
      postRenderers: = [criticalCSS],
    },
     /** more route configs here */
  }
}
```

## Settings

You can configure this plugin by using the `setPluginConfig` helper like this:

```typescript
setPluginConfig(criticalCSS, {
  inlineImages: false,
});
```

The plugin had the following settings:

```typescript
export interface CriticalCSSSettings {
  /** inline images into the pages when smaller then 10240 bytes */
  inlineImages?: boolean;
  /** Width of the target viewport */
  width?: number;
  /** Height of the target viewport */
  height?: number;
  /** An array of objects containing height and width. Takes precedence over width and height if set */
  dimensions?: {
    width: number;
    height: number;
  }[];
  /** An array with fully qualified paths to assets, if none is given, the root, and the root/assets will be used to look for static assets*/
  assets?: string[];
  /** Ignore some css rules */
  ignore?: {
    atrule?: string[];
    rule?: string[];
    decl?: (node, value) => boolean;
  };
}
```

For details see the [critical tool page](https://github.com/addyosmani/critical)

---
_Source: https://npm.io/package/@scullyio/scully-plugin-critical-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._