postcss-font-weight-names

PostCSS plugin to convert commonly used font-weight names i.e. Thin, Semi Bold, Heavy, etc.. to a numeric font-weight

Usage no npm install needed!

<script type="module">
  import postcssFontWeightNames from 'https://cdn.skypack.dev/postcss-font-weight-names';
</script>

README

PostCSS Font Weight Names Build Status

PostCSS plugin to convert commonly used font-weight names i.e. Thin, Semi Bold, Heavy, etc.. to a numeric font-weight

Installation

npm install postcss-font-weight-names

Before

.font-weight {
  font-weight: Semi Bold;
}

After

.font-weight {
  font-weight: 600;
}

Font weight name mappings

Name Weight
Thin, Hairline 100
Extra Light, Ultra Light 200
Light 300
Normal, Regular 400
Medium 500
Semi Bold, Demi Bold 600
Bold 700
Extra Bold, Ultra Bold 800
Black, Heavy 900

You can use any of the following ways to write the names: Semi Bold, semi bold, semi-bold, semi_bold.

Usage

postcss([ require('postcss-font-weight-names') ])

See PostCSS docs for examples for your environment.