# laggard

> Automatic CSS fallbacks for legacy browsers, built on PostCSS

Latest version **2.0.1** (published 2017-08-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install laggard
pnpm add laggard
yarn add laggard
bun add laggard
```

Provides the command `laggard`.

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2017-08-01 |
| First published | 2015-10-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4 |
| Dependencies | 11 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 24 |
| Author | Sean King |
| Maintainers | seaneking |
| Keywords | postcss, css, postcss-plugin, legacy |

## Links

- npm: https://www.npmjs.com/package/laggard
- Repository: https://github.com/seaneking/laggard
- Issues: https://github.com/seaneking/laggard/issues
- npm.io page: https://npm.io/package/laggard

## Dependencies (11)

- [pixrem](https://npm.io/package/pixrem.md) ^4.0.1
- [postcss](https://npm.io/package/postcss.md) ^6.0.8
- [minimist](https://npm.io/package/minimist.md) ^1.2.0
- [postcss-vmin](https://npm.io/package/postcss-vmin.md) ^3.0.0
- [postcss-opacity](https://npm.io/package/postcss-opacity.md) ^5.0.0
- [read-file-stdin](https://npm.io/package/read-file-stdin.md) ^0.2.0
- [postcss-reporter](https://npm.io/package/postcss-reporter.md) ^5.0.0
- [write-file-stdout](https://npm.io/package/write-file-stdout.md) 0.0.2
- [postcss-will-change](https://npm.io/package/postcss-will-change.md) ^2.0.0
- [postcss-pseudoelements](https://npm.io/package/postcss-pseudoelements.md) ^5.0.0
- [postcss-color-rgba-fallback](https://npm.io/package/postcss-color-rgba-fallback.md) ^3.0.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2017-08-01
- 2.0.0 — 2017-08-01
- 0.1.0 — 2015-10-14

## README

# Laggard
[![NPM version][npm-badge]][npm-url] [![Downloads][npm-downloads]][npm-url]  [![Build Status][travis-badge]][travis-url]

Laggard automatically generates safe CSS fallbacks for legacy (<IE9) browsers. It's built on [PostCSS][postcss].

Laggard does not transpile future CSS syntax. For that use [cssnext][cssnext]. Laggard also doesn't do destructive transforms that would require you to use a separate stylesheet for legacy browsers. If that's what you're after use [Oldie][oldie]. 

Use Laggard if you just want to easily improve legacy support with your current CSS code.

### Contents

- [Install](#install)
- [Usage](#usage)
- [Features](#features)
  - [Opacity fallbacks](#opacity-fallbacks)
  - [Rem unit fallbacks](#rem-unit-fallbacks)
  - [Pseudo element conversions](#pseudo-element-conversions)
  - [RGBA Hex fallbacks](#rgba-hex-fallbacks)
  - [IE vmin to vm fallbacks](#ie-vmin-to-vm-fallbacks)
  - [3D transform hack for will-change](#3d-transform-hack-for-will-change)
- [Options](#options)

## Install

Laggard is available on NPM as `laggard`, install it with NPM or Yarn


```sh
$ yarn add laggard --dev
```

```sh
$ npm i laggard --save-dev
```

## Usage

###### Build tools

Use Laggard as a PostCSS plugin in your build tool of choice.

```js
const postcss = require('postcss');
const laggard = require('laggard');

postcss([ laggard ])
```

See [PostCSS][postcss] docs for examples for your particular environment.

###### CLI

Process CSS directly on the command line

```sh
$ laggard src/style.css style.css [options]
```

###### Stylus

Laggard can be used directly as a Stylus plugin with [PostStylus][poststylus]

```js
stylus(css).use(poststylus('laggard'))
```

See the [PostStylus Docs][poststylus] for more examples for your environment.

## Features

#### Opacity fallbacks

```css
/* Before */
.foo {
  opacity: .5;
}

/* After */
.foo {
  opacity: .5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
```

#### Rem unit fallbacks

```css
html {
  font-size: 16px;
}

/* Before */
.foo {
  font-size: 2rem;
}

/* After */
.foo {
  font-size: 32px;
  font-size: 2rem;
}
```

#### Pseudo element conversions

```css
/* Before */
.foo::before {
  display: block;
}

/* After */
.foo:before {
  display: block;
}
```

#### RGBA Hex fallbacks
```css
/* Before */
.foo {
  background: rgba(153, 221, 153, 0.8);
}

/* After */
.foo {
  background: #99DD99;
  background: rgba(153, 221, 153, 0.8);
}
```

#### IE vmin to vm fallbacks
```css
/* Before */
.foo {
  width: 50vmin;
}

/* After */
.foo {
  width: 50vm;
  width: 50vmin;
}
```

#### 3D transform hack for will-change
```css
/* Before */
.foo {
  will-change: transform;
}

/* After */
.foo {
  backface-visibility: hidden;
  will-change: transform;
}
```

## Options

All features in Laggard can be toggled on or off by passing options on initialization. By default all features are set to `true`.

Option              | Type    | Default | Description                                                     
------------------- | ------- | ------- | -----------                                                     
`rgba`              | Boolean | `true`  | Whether to enable RGBA fallbacks
`opacity`           | Boolean | `true`  | Whether to enable opacity fallbacks
`pseudo`            | Boolean | `true`  | Whether to enable pseudo element conversion
`vmin`              | Boolean | `true`  | Whether to enable to enable vmin fallbacks
`pixrem`            | Boolean | `true`  | Whether to enable whether to enable rem fallbacks
`willchange`        | Boolean | `true`  | Whether to enable native will-change fallbacks
`reporter`          | Boolean | `false` | Whether to log errors from plugins

```js
// Set in build tool, etc.
.laggard({
  // options
})
```

***

MIT © [Sean King](https://twitter.com/seaneking)

[npm-badge]: https://badge.fury.io/js/laggard.svg
[npm-url]: https://npmjs.org/package/laggard
[npm-downloads]: https://img.shields.io/npm/dm/laggard.svg
[travis-badge]: https://travis-ci.org/seaneking/laggard.svg?branch=master
[travis-url]: https://travis-ci.org/seaneking/laggard
[postcss]: https://github.com/postcss/postcss
[cssnext]: http://cssnext.io/
[poststylus]: https://github.com/seaneking/poststylus
[oldie]: https://github.com/jonathantneal/oldie

---
_Source: https://npm.io/package/laggard · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._