postcss-font

A PostCSS plugin to add font related properties in one line.

Installation

npm install postcss-font

Example

body {
    // font: {font-size}, {font-style}, {font-weight}, {line-height}, {text-align}, {font-variant}, {color}, {text-decoration}, {text-transfer}, {vertical-align}, {font-family}, {word-wrap}, {letter-spacing}, {word-spacing}, {text-indent}, {white-space}, {font-stretch}, {direction}, {unicode-bidi}
    font: 13px, 1.5, bold, italic, center, red
}

will produce

body {
    font-size: 13px;
    line-height: 1.5;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    color: red;
}

Note: still allows you to use the font shorthand normally, a valid shorthand won't be converted (eg: font: 14px/1.5 Arial will stay that)

Usage

Using Gulp.

var gulp            = require('gulp'),
    postcss         = require('gulp-postcss'),
    font            = require('postcss-font');
 
gulp.task('css', function() {
    gulp.src('path/to/dev/css').
        .pipe(postcss({
            // use it after nesting plugins
            font
        }))
        .pipe(gulp.dest('path/to/build/css'));
});
 
// rest of the gulp file