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

1$ npm install postcss-pxtransform-vnmf --save-dev

Usage

Applets

1options = {

2    platform: 'weapp',

3    designWidth: 750,
4}

H5

1options = {
2    platform: 'h5',
3    designWidth: 750,
4}

RN

1options = {

2    platform: 'rn',

3    designWidth: 750,
4}

Calculate designWidth dynamically

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

1options = {
2    platform: 'h5',
3    designWidth (input) {
4      if (input.file.replace(/\\+/g, '/').indexOf('@nutui/nutui-vnmf') > -1) {
5        return 375
6      }
7      return 750
8    },
9}

input Output

By default, all px will be converted.

1/* input */
2h1 {
3    margin: 0 0 20px;
4    font-size: 32px;
5    line-height: 1.2;
6    letter-spacing: 1px;
7}
8
9/* weapp output */
10h1 {
11    margin: 0 0 20rpx;
12    font-size: 32rpx;
13    line-height: 1.2;
14    letter-spacing: 1rpx;
15}
16
17/* h5 output */
18h1 {
19    margin: 0 0 0.5rem;
20    font-size: 1rem;
21    line-height: 1.2;
22    letter-spacing: 0.025rem;
23}
24
25/* rn output */
26h1 {
27    margin: 0 0 10px;
28    font-size: 16px;
29    line-height: 1.2;
30    letter-spacing: 0.5px;
31}
32

example

1var fs = require('fs');
2var postcss = require('postcss');
3var pxtorem = require('postcss-pxtransform-vnmf');
4var css = fs.readFileSync('main.css', 'utf8');
5var options = {
6    replace: false
7};
8var processedCss = postcss(pxtorem(options)).process(css).css;
9
10fs.writeFile('main-rem.css', processedCss, function (err) {
11  if (err) {
12    throw err;
13  }
14  console.log('Rem file written.');
15});

configure options

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

1{
2    unitPrecision: 5,
3    propList: ['*'],
4    selectorBlackList: [],
5    replace: true,
6    mediaQuery: false,
7    minPixelValue: 0
8}

Type: Object | Null

platform (String) (required)

weapp or h5 or rn

designWidth (Number|Function) (required)

640 or 750 or 828

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.

neglect

Attributes

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

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

document

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.

1/*postcss-pxtransform-vnmf rn eject enable*/
2
3.test {
4  color: black;
5}
6
7/*postcss-pxtransform-vnmf rn eject disable*/