PostCSS Pxtransform

PostCSS 单位转换插件，目前已支持小程序端（px 转rpx），H5 端（px 转 rem）及 RN 端。

基于 postcss-pxtorem。

Install

``shell
$ npm install harpostcss-pxtransform --save-dev
`

Usage

$3

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

$3

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

$3

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

$3

基础组件库一般是375，如果业务系统UI设计是750，可以如下配置后1:1切图，小程序、H5、RN时有效

`js
options = {
platform: 'h5',
designWidth (input) {
if (input.file.replace(/\\+/g, '/').indexOf('@nutui/nutui-taro') > -1) {
return 375
}
return 750
},
}
`

$3

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

`css
/ 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;
}

`

$3

`js
var fs = require('fs');
var postcss = require('postcss');
var pxtorem = require('harpostcss-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

参数默认值如下：

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

Type: Object | Null

$3

weapp 或 h5 或 rn

$3

640 或 750 或 828

$3

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

$3

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']

$3

(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

$3

replaces rules containing rems instead of adding fallbacks.

$3

Allow px to be converted in media queries.

$3

Set the minimum pixel value to replace.

忽略

$3

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

`css
/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
}
`

$3

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

剔除

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

.test {
color: black;
}

/harpostcss-pxtransform rn eject disable/
``