https://github.com/danielroe/postcss-capsize
https://github.com/danielroe/postcss-capsize
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/danielroe/postcss-capsize
- Owner: danielroe
- License: mit
- Created: 2021-03-13T21:54:12.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-05-05T14:03:17.000Z (about 1 year ago)
- Last Synced: 2025-05-05T15:24:05.590Z (about 1 year ago)
- Language: TypeScript
- Size: 6.46 MB
- Stars: 25
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
postcss-capsize
PostCSS plugin to inject Capsize font metrics
> PostCSS plugin to inject Capsize font metrics
[**Read more about Capsize**](https://seek-oss.github.io/capsize/)
## 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
### Split syntax
```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;
}
```
### Combined syntax (deprecated)
```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;
}
```
### Result
```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
[MIT License](./LICENSE) - Copyright © Daniel Roe