PostCSS Short Font Size

PostCSS Short Font Size lets you define line-height within the font-size property in CSS.

body {
  font-size: 125%/1.5;
}
 
/* becomes */
 
body {
  line-height: 1.5;
  font-size: 125%;
}

Usage

Add PostCSS Short Font Size to your project:

npm install postcss-short-font-size --save-dev

Use PostCSS Short Font Size to process your CSS:

const postcssShortFontSize = require('postcss-short-font-size');
 
postcssShortFontSize.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssShortFontSize = require('postcss-short-font-size');
 
postcss([
  postcssShortFontSize(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Short Font Size runs in all Node environments, with special instructions for:

Node	PostCSS CLI	Webpack	Create React App	Gulp	Grunt

Options

prefix

The prefix option defines a prefix required by properties being transformed. Wrapping dashes are automatically applied, so that x would transform -x-font-size.

postcssShortFontSize({ prefix: 'x' });

body {
  -x-font-size: 125%/1.5;
}
 
/* becomes */
 
body {
  line-height: 1.5;
  font-size: 125%;
}

skip

The skip option defines the skip token used to ignore portions of the shorthand.

postcssShortFontSize({ skip: '-' });

body {
  color: -/125%;
}
 
/* becomes */
 
body {
  font-size: 125%;
}

Note: If the skip token is made to be a space then certain values with !important may not work properly, such as font-size: 200% !important 1.5.