A PostCSS plugin to add font related properties in one line.
npm install postcss-font
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)
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