The posthtml-px2rem from handandbrainofking

posthtml-px2rem's Introduction

posthtml-px2rem

Change px to rem in HTML inline CSS based on PostHTML

NPM Home Page: https://www.npmjs.com/package/posthtml-px2rem

Install

Install with NPM:

npm install posthtml-px2rem --save

Usage

gulpfile.js

var posthtml = require('gulp-posthtml');
var posthtmlPx2rem = require('posthtml-px2rem');

gulp.src(paths.src.html)
.pipe(posthtml(
    [posthtmlPx2rem({rootValue: 20, minPixelValue: 2})]
))
.pipe(gulp.dest(paths.dist.dir));

Options

options = lodash.extend({
    rootValue: 16, // root font-size on <html>
    unitPrecision: 5, // numbers after `.`
    minPixelValue: 0 // set it 2 if you want to ignore value like 1px & -1px
}, options)

Result

HTML In (Type 1)

<style>
.test {
    font-size: 10PX;
    width: 20px;
    margin: 30px 40px 50px 60px;
    border: 1px solid #fff;
}
</style>

HTML Out

<style>
.test {
    font-size: 10PX;
    width: 1rem;
    margin: 1.5rem 2rem 2.5rem 3rem;
    border: 1px solid #fff
}
</style>

HTML In (Type 2)

<div style="font-size: 10PX; width: 20px; margin: 30px 40px 50px 60px; border: 1px solid #fff;">
    test
</div>

HTML Out

<div style="font-size: 10PX; width: 1rem; margin: 1.5rem 2rem 2.5rem 3rem; border: 1px solid #fff;">
    test
</div>

Notes

Ignoring rem replacement using PX Px, like 123PX not 123px.
Set minPixelValue : 2 will ignore all the value 1px & -1.2px

Contributing

This repo is build and maintained by TmT Team.
If you get any bugs or feature requests, please open a new Issue or send us Pull Request, Thank you for your contributions.

Recommend Projects