weixin / posthtml-px2rem

Change px to rem in HTML inline CSS based on PostHTML

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Look at posthtml-postcss + postcss plugins :)

voischev opened this issue · comments

commented

We are using https://github.com/cuth/postcss-pxtorem in our gulp workflow now, so I made this posthtml-px2rem for HTML output use.

gulp.task('html', function() {
    var posthtml = require('gulp-posthtml');
    return gulp.src('src/**/*.html')
        .pipe(posthtml([ require('posthtml-postcss')([
            require('postcss-pxtorem')
            /* other postcss plugins */
        ]/*, postcssOptionsObj */) ]))
        .pipe(gulp.dest('build/'));
});

should make equal result for HTML

posthtml-px2rem has some issues rather than postcss-pxtorem, for example, media query option. So if there are some css styles in html (not inline-style), it seems better to use posthtml-postcss+postcss-pxtorem instead. If there are only inline-styles in HTML, posthtml-px2rem can handle.