Nocturnal Prancing Mosquito
    Wondering what’s next for npm?Check out our public roadmap! »

    postcss-rpxtovw
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.8 • Public • Published

    PostCSS csstransform

    小程序 rpx 单位转换工具, 支持 rpx/px 单位 转化成 rm, vw 单位,支持H5开发

    Install

    $ npm install postcss-rpx2vw -S

    Options

    参数默认值如下:

    const DEFAULT_EAPP_OPTIONS = {
      platform: 'eapp',
      designWidth: 750,
      cssUnit: 'rpx',
      targetUnit: 'vw'
    }

    Usage

    var fs = require('fs');
    var postcss = require('postcss');
    var rpx2vw = require('postcss-rpx2vw');
    var css = fs.readFileSync('rpx.css', 'utf8');
    var options = {};
    var processedCss = postcss(pxtorem(options)).process(css).css;
     
    fs.writeFile('vw.css', processedCss, function (err) {
      if (err) {
        throw err;
      }
      console.log('rpx2vw file written.');
    });

    Use width gulp-postcss

    var gulp = require('gulp');
    var postcss = require('gulp-postcss');
    var autoprefixer = require('autoprefixer');
    var rpx2vw = require('postcss-rpx2vw');
     
    gulp.task('css', function () {
     
        var processors = [
            autoprefixer({
                browsers: 'last 1 version'
            }),
            rpx2vw({
                replace: true
            })
        ];
     
        return gulp.src(['build/css/**/*.css'])
            .pipe(postcss(processors))
            .pipe(gulp.dest('build/css'));
    });

    Use with postcss

    var fs = require('fs');
    var postcss = require('postcss');
    var pxtorem = require('postcss-pxtransform');
    var css = fs.readFileSync('main.css', 'utf8');
    var options = {
        replace: false
    };
    var processedCss = postcss(pxtorem(options)).process(css).css;
     
    fs.writeFile('main-rem.css', processedCss, function (err) {
      if (err) {
        throw err;
      }
      console.log('Rem file written.');
    });

    Input/Output

    rpx2vw

    rpx2vw 配置下,rpx单位都会被转化成以 750 视觉搞为单位的 vw

    options = {
      cssUnit: 'rpx',
      targetUnit: 'vw'
    }
    /* input */
    body {
      width: 750rpx;
    }
     
    /* h5 output */
    body {
      width: 100vw;
    }

    rpx2rem

    rpx2rem 配置下,rpx单位都会被转化成以 750 视觉搞为单位的 rem

    options = {
      cssUnit: 'rpx',
      targetUnit: 'rem'
    }
    /* input */
    body {
      width: 750rpx;
    }
     
    /* h5 output */
    body {
      width: 16rem;
    }

    px2rem or px2vm

    options = {
      cssUnit: 'rpx', // or setting px
      targetUnit: 'rem' // or setting vw
    }
    /* input */
    body {
      width: 750px;
    }
     
    /* h5 output */
    body {
      width: 16rem;
    }

    Ignore

    配置白名单属性

      it('5 should not replace white list', function () {
        var css = '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }'
        var expected = '.rule { font-size: 0.4rem; margin: 0.4rem; margin-left: 5px; padding: 5px; padding-right: 0.4rem }'
        var options = {
          designWidth: 640,
          cssUnit: 'px',
          targetUnit: 'rem',
          propWhiteList: ['font*', 'margin*', '!margin-left', '*-right', 'pad']
        }
        var processed = postcss(pxtovw(options)).process(css).css
     
        expect(processed).toBe(expected)
      });
     

    License

    MIT ©

    Keywords

    Install

    npm i postcss-rpxtovw

    DownloadsWeekly Downloads

    2

    Version

    0.0.8

    License

    ISC

    Unpacked Size

    28.2 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar