Change px to rem in HTML inline CSS based on PostHTML
NPM Home Page: https://www.npmjs.com/package/posthtml-px2rem
Install with NPM:
npm install posthtml-px2rem --savegulpfile.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)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>- Ignoring
remreplacement usingPXPx, like123PXnot123px. - Set
minPixelValue : 2will ignore all the value1px&-1.2px
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.