https://github.com/dkrnl/postcss-font-display

PostCSS plugin to automatically add font-display css rule
https://github.com/dkrnl/postcss-font-display

css font-display postcss postcss-plugin

Last synced: 3 months ago
JSON representation

PostCSS plugin to automatically add font-display css rule

• Host: GitHub
• URL: https://github.com/dkrnl/postcss-font-display
• Owner: dkrnl
• License: mit
• Created: 2018-04-19T06:12:52.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2021-11-01T02:54:44.000Z (about 3 years ago)
• Last Synced: 2024-11-02T12:12:01.258Z (3 months ago)
• Topics: css, font-display, postcss, postcss-plugin
• Language: JavaScript
• Homepage:
• Size: 62.5 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS Font Display [![Build Status][ci-img]][ci]

[PostCSS] plugin to automatically add [font-display](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) css rule.

[PostCSS]: https://github.com/postcss/postcss

[ci-img]:  https://travis-ci.org/dkrnl/postcss-font-display.svg

[ci]:      https://travis-ci.org/dkrnl/postcss-font-display

```css

@font-face {

    /* Input example */

    font-family: 'My Font';

}

```

```css

@font-face {

    /* Output example */

    font-family: 'My Font';

    font-display: swap;

}

```

## Install

With [npm](https://npmjs.org/package/postcss-font-display) do:

```

npm install postcss-font-display --save

```

## Usage

```js

postcss([ require('postcss-font-display')({ display: 'swap', replace: false }) ])

```

### Advanced usage

```js

postcss([ require('postcss-font-display')([

  { display: 'swap', replace: false },

  { test: 'FontAwesome', display: 'block' },

]) ])

```

## Options

Option       | Type    | Default | Description |

------------ | ------- | ------- | ----------- |

`test`       | RegExp  | false   | Text pattern for [font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family) css rule |

`display`    | String  | `swap`  | Value for new [font-display](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) css rule |

`replace`    | Boolean | `false` | Replace exists font-display rule |

***

See [PostCSS] docs for examples for your environment.