postcss-capsize

PostCSS plugin to inject Capsize font metrics

> PostCSS plugin to inject Capsize font metrics

Quick Start

First install postcss-capsize:

``bash yarn add postcss-capsize --dev

`or npm`


npm install postcss-capsize --save-dev

Second, add postcss-capsize as a PostCSS plugin to your postcss.config.js, or in your project configuration.

`diff module.exports = { plugins: [ + ['postcss-capsize', { + metrics: { + 'Test Mono': { + capHeight: 100, + ascent: 800, + descent: -200, + lineGap: 0, + unitsPerEm: 1000, + } + // You can declare as many fonts as needed + } + }], require('autoprefixer') ] }`

Note: there are many font metrics you can install from @capsizecss/metrics - or generate from a font file via @capsizecss/unpack.

`Example`

`$3`

css
.test {
  line-gap: 10px;
  / both properties below must be declared alongside

line-gap

/
  / The first matching font-family from your plugin config will be used /
  font-family: 'Gaudy Mono', 'Test Mono', sans-serif;
  font-size: 24px;
}

$3

css
.test {
  / font-metrics: [font-size] [font-family] [line-gap] /
  / [font-family] must match the entry in your plugin config /
  font-metrics: 24px Test Mono 10px;
}

$3

`css .test { line-height: 12.4px; font-size: 24px; font-family: 'Gaudy Mono', 'Test Mono', sans-serif; / Or, with combined syntax / font-family: Test Mono; } .test::before { content: ''; margin-bottom: -0.4583em; display: table; } .test::after { content: ''; margin-top: 0.0417em; display: table; }``

Contributors

This has been developed to suit my needs but additional use cases and contributions are very welcome.

License