Skip to content
Change px to rem in HTML inline CSS based on PostHTML
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.npmignore
index.js
package.json
readme.md

readme.md

posthtml-px2rem

NPM Version devDependencies NPM Downloads

Join the chat at https://gitter.im/weixin/posthtml-px2rem TmT Name License Bitdeli Badge

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.

You can’t perform that action at this time.