add posthtml-px2rem

[hzlzh]

No description provided.

[TrySound]

@voischev posthtml - inline css processor. Really?

[voischev]

Why not?

[voischev]

Alternative posthtml-postcss + postcss plugins ;)

[TrySound]

@voischev I'm for that. We need one or a few entry points like posthtml-postcss or posthtml-inline-styles which will pass css in callback. But posthtml plugins for this purpose is wrong way for ecosystem.

[voischev]

@TrySound write about in weixin/posthtml-px2rem#3 issue

[hzlzh]

@TrySound Task blow is some of our project's Gulp Workflow
We'd like to get px-to-rem ready when moveHtml (form src to dist) run, so I add this posthtml plugin to do that.

// Build dist 流程
gulp.task('build', gulp.series(
    reset,
    compileLessBuild,
    replaceCSS,
    compileAutoprefixer,
    renameCSS,
    miniCSS,
    gulp.parallel(
        moveHtml,
        imageminImg,
        imageminSprite,
        uglifyJs
    )
));

// for HTML part
function moveHtml() {
    return gulp.src(paths.src.html, {base: paths.src.dir})
        .pipe(posthtml(posthtmlPx2rem({rootValue: 20, minPixelValue: 2})))
        .pipe(gulp.dest(paths.dist.dir));
}

// for CSS part
function compileAutoprefixer() {
    return gulp.src(paths.dist.cssAll)
        .pipe(postcss(
            [postcssAutoprefixer({browsers: ['last 5 versions']}),
                postcssDuplicates(),
                // add REM support
                postcssDuplicates({
                    root_value: '20', // base html{ font-zise: 20px; }
                    prop_white_list: [],
                    minPixelValue: 2
                })
            ]))
        .pipe(gulp.dest(paths.dist.css));
}

[TrySound]

@hzlzh But was about posthtml->postcss->px-to-rem chain? Postcss for styles. Posthtml for markup.