Skip to content
This repository has been archived by the owner on Oct 18, 2024. It is now read-only.

csstools/postcss-short-font-size

Repository files navigation

PostCSS Short Font Size PostCSS

NPM Version Build Status Support Chat

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 {
  font-size: -/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.

About

Define line-height within the font-size property in CSS

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published