PostCSS plugin px to applet rpx and h5 rem units
npm install postcss-pxtransform-vnmfshell
$ 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/
```