PostCSS Pxtransform

PostCSS Unit conversion plug-in, currently supports applet end (px to rpx), H5 end (px to rem) and RN end.

Based on postcss-pxtorem.

Install

``shell
$ npm install postcss-pxtransform-vnmf --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

The basic component library is generally 375. If the UI design of the business system is 750, it can be configured as follows to cut 1:1, and it is valid for applet, H5, RN

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

$3

By default, all px will be converted.

``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('postcss-pxtransform-vnmf');
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.');
});
``

configure options

The default values ​​of the parameters are as follows:

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

Type: Object | Null

$3

weapp or h5 or rn

$3

640 or 750 or 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.

neglect

$3

Currently the easiest way to ignore a single property is to use capital letters for the px unit.

``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

The plugin does not process files with the comment /postcss-pxtransform-vnmf disable/ in the header.

remove

The code between /postcss-pxtransform-vnmf rn eject enable/ and /postcss-pxtransform-vnmf rn eject disable/,
It will be deleted when compiled into RN-side style. It is recommended to put styles that are not supported by RN but are essential on the H5 side. Such as: style reproduction related code.
``css
/postcss-pxtransform-vnmf rn eject enable/

.test {
color: black;
}

/postcss-pxtransform-vnmf rn eject disable/
```