Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/keqingrong/postcss-font-family-correction
A PostCSS plugin to correct font-family values
https://github.com/keqingrong/postcss-font-family-correction
css font-family postcss
Last synced: 17 days ago
JSON representation
A PostCSS plugin to correct font-family values
- Host: GitHub
- URL: https://github.com/keqingrong/postcss-font-family-correction
- Owner: keqingrong
- Created: 2021-10-11T11:57:14.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2021-11-14T10:17:11.000Z (about 3 years ago)
- Last Synced: 2024-04-24T02:10:39.310Z (7 months ago)
- Topics: css, font-family, postcss
- Language: JavaScript
- Homepage:
- Size: 81.1 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS font-family Correction
[](https://www.npmjs.com/package/postcss-font-family-correction)
A [PostCSS] plugin to correct `font-family` values.
[PostCSS]: https://github.com/postcss/postcss
```css
.regular {
font-family: PingFangSC-Regular;
}
.medium {
font-family: PingFangSC-Medium;
}
.semibold {
font-family: PingFangSC-Semibold;
}
```
will be processed to:
```css
.regular {
font-family: 'PingFang SC', sans-serif;
font-weight: 400;
}
.medium {
font-family: 'PingFang SC', sans-serif;
font-weight: 500;
}
.semibold {
font-family: 'PingFang SC', sans-serif;
font-weight: 600;
}
```
## Usage
**Step 1:** Install plugin:
```sh
npm install --save-dev postcss postcss-font-family-correction
```
**Step 2:** Check you project for existed PostCSS config: `postcss.config.js`
in the project root, `"postcss"` section in `package.json`
or `postcss` in bundle config.
If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.
**Step 3:** Add the plugin to plugins list:
```diff
module.exports = {
plugins: [
+ require('postcss-font-family-correction'),
require('autoprefixer')
]
}
```
[official docs]: https://github.com/postcss/postcss#usage
## Options
- `mappings`: `font-family` mappings
- `preserveComments`: Preserve ignore comments
- `clearFontFamily`: Clear `font-family` property
- `overwriteFontWeight`: Overwrite existing `font-weight` property
Example:
```js
module.exports = {
plugins: [
require('postcss-font-family-correction')({
mappings: {},
preserveComments: true,
clearFontFamily: false,
overwriteFontWeight: false,
}),
]
}
```
### `mappings`
Object format:
```js
postcss([
require('postcss-font-family-correction')({
mappings: {
'PingFangSC-Regular': {
fontFamily: 'PingFang SC',
fontWeight: 400
},
'PingFangSC-Medium': {
fontFamily: 'PingFang SC',
fontWeight: 500
},
'PingFangSC-Semibold': {
fontFamily: 'PingFang SC',
fontWeight: 600
}
}
})
]);
```
Array format:
```js
postcss([
require('postcss-font-family-correction')({
mappings: {
'PingFangSC-Regular': ['PingFang SC', 400],
'PingFangSC-Medium': ['PingFang SC', 500],
'PingFangSC-Semibold': ['PingFang SC', 600]
}
})
]);
```
### `preserveComments`
```css
.regular {
/* font-family-correction-ignore-next */
font-family: PingFangSC-Regular;
}
.medium {
font-family: PingFangSC-Medium;
}
.semibold {
font-family: PingFangSC-Semibold; /* font-family-correction-ignore */
}
```