PostCSS plugin to inject Capsize font metrics

Read more about Capsize

Quick Start

First install postcss-capsize:

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.

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

Split syntax

.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;
}

Combined syntax (deprecated)

.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;
}

Result

.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

MIT License - Copyright © Daniel Roe