postcss-pxtransform

    3.3.10 • Public • Published

    PostCSS Pxtransform

    PostCSS 单位转换插件,目前已支持小程序端(px 转rpx),H5 端(px 转 rem)及 RN 端。

    基于 postcss-pxtorem

    Install

    $ npm install postcss-pxtransform --save-dev

    Usage

    小程序

    options = {
        platform: 'weapp',
        designWidth: 750,
    }

    H5

    options = {
        platform: 'h5',
        designWidth: 750,
    }

    RN

    options = {
        platform: 'rn',
        designWidth: 750,
    }

    输入/输出

    默认配置下,所有的 px 都会被转换。

    /* input */
    h1 {
        margin: 0 0 20px;
        font-size: 32px;
        line-height: 1.2;
        letter-spacing: 1px;
    }
    
    /* weapp output */
    h1 {
        margin: 0 0 20rpx;
        font-size: 32rpx;
        line-height: 1.2;
        letter-spacing: 1rpx;
    }
    
    /* h5 output */
    h1 {
        margin: 0 0 0.5rem;
        font-size: 1rem;
        line-height: 1.2;
        letter-spacing: 0.025rem;
    }
    
    /* rn output */
    h1 {
        margin: 0 0 10px;
        font-size: 16px;
        line-height: 1.2;
        letter-spacing: 0.5px;
    }

    example

    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.');
    });

    配置 options

    参数默认值如下:

    {
        unitPrecision: 5,
        propList: ['*'],
        selectorBlackList: [],
        replace: true,
        mediaQuery: false,
        minPixelValue: 0
    }

    Type: Object | Null

    platform (String)(必填)

    weapph5rn

    designWidth(Number)(必填)

    640750828

    unitPrecision (Number)

    The decimal numbers to allow the REM units to grow to.

    propList (Array)

    The properties that can change from px to rem.

    • Values need to be exact matches.
    • Use wildcard * to enable all properties. Example: ['*']
    • Use * at the start or end of a word. (['*position*'] will match background-position-y)
    • Use ! to not match a property. Example: ['*', '!letter-spacing']
    • Combine the "not" prefix with the other prefixes. Example: ['*', '!font*']

    selectorBlackList

    (Array) The selectors to ignore and leave as px.

    • If value is string, it checks to see if selector contains the string.
      • ['body'] will match .body-class
    • If value is regexp, it checks to see if the selector matches the regexp.
      • [/^body$/] will match body but not .body

    replace (Boolean)

    replaces rules containing rems instead of adding fallbacks.

    mediaQuery (Boolean)

    Allow px to be converted in media queries.

    minPixelValue (Number)

    Set the minimum pixel value to replace.

    忽略

    属性

    当前忽略单个属性的最简单的方法,就是 px 单位使用大写字母。

     /*`px` is converted to `rem`*/
    .convert {
        font-size: 16px; // converted to 1rem
    }
    
     /* `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers*/
    .ignore {
        border: 1Px solid; // ignored
        border-width: 2PX; // ignored
    }

    文件

    对于头部包含注释/*postcss-pxtransform disable*/ 的文件,插件不予处理。

    剔除

    /*postcss-pxtransform rn eject enable*//*postcss-pxtransform rn eject disable*/ 中间的代码, 在编译成 RN 端的样式的时候,会被删除。建议将 RN 不支持的但 H5 端又必不可少的样式放到这里面。如:样式重制相关的代码。

    /*postcss-pxtransform rn eject enable*/
    
    .test {
      color: black;
    }
    
    /*postcss-pxtransform rn eject disable*/

    Install

    npm i postcss-pxtransform

    DownloadsWeekly Downloads

    3,950

    Version

    3.3.10

    License

    MIT

    Unpacked Size

    15.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • defaultlee
    • yuche