Package Exports

postcss-fontsize

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-fontsize) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostCSS FontSize

PostCSS plugin that generates REM based font-size and line-height for every fontsize declaration. The line-height will be 1.5 times the fontsize value. A fallback option using pixel based font-size and line-height can also be generated.

h1 {
    fontsize: 16
}

Output:

h1 {
  font-size: 1rem;
  line-height: 1.5rem;
}

Usage

npm install postcss-fontsize --save-dev

Gulp

var postcss = require('gulp-postcss');
var fontsize = require('postcss-fontsize');

gulp.task('css', function () {
    var processors = [
        fontsize
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});

Options

The plugin does not generate fallback px sizes by default. In order generate the px fallbacks include the following option in the gulp task:

var processors = [
    fontsize({
        fallback: true
    })
];

Including fallback option:

h1 {
    fontsize: 16
}

Output:

h1 {
  font-size: 16px;
  line-height: 24px;
  font-size: 1rem;
  line-height: 1.5rem;
}

See PostCSS docs for examples for your environment.