1 | # PostCSS Pxtransform
|
2 |
|
3 | [PostCSS](https://github.com/ai/postcss) 单位转换插件,目前已支持小程序端(px 转rpx),H5 端(px 转 rem)及 RN 端。
|
4 |
|
5 | 基于 [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem/)。
|
6 |
|
7 | ## Install
|
8 |
|
9 | ```shell
|
10 | $ npm install postcss-pxtransform --save-dev
|
11 | ```
|
12 |
|
13 | ## Usage
|
14 |
|
15 | ### 小程序
|
16 | ```js
|
17 | options = {
|
18 | platform: 'weapp',
|
19 | designWidth: 750,
|
20 | }
|
21 | ```
|
22 |
|
23 | ### H5
|
24 | ```js
|
25 | options = {
|
26 | platform: 'h5',
|
27 | designWidth: 750,
|
28 | }
|
29 | ```
|
30 |
|
31 | ### RN
|
32 | ```js
|
33 | options = {
|
34 | platform: 'rn',
|
35 | designWidth: 750,
|
36 | }
|
37 | ```
|
38 |
|
39 | ### 输入/输出
|
40 |
|
41 | 默认配置下,所有的 px 都会被转换。
|
42 |
|
43 | ```css
|
44 | /* input */
|
45 | h1 {
|
46 | margin: 0 0 20px;
|
47 | font-size: 32px;
|
48 | line-height: 1.2;
|
49 | letter-spacing: 1px;
|
50 | }
|
51 |
|
52 | /* weapp output */
|
53 | h1 {
|
54 | margin: 0 0 20rpx;
|
55 | font-size: 32rpx;
|
56 | line-height: 1.2;
|
57 | letter-spacing: 1rpx;
|
58 | }
|
59 |
|
60 | /* h5 output */
|
61 | h1 {
|
62 | margin: 0 0 0.5rem;
|
63 | font-size: 1rem;
|
64 | line-height: 1.2;
|
65 | letter-spacing: 0.025rem;
|
66 | }
|
67 |
|
68 | /* rn output */
|
69 | h1 {
|
70 | margin: 0 0 10px;
|
71 | font-size: 16px;
|
72 | line-height: 1.2;
|
73 | letter-spacing: 0.5px;
|
74 | }
|
75 |
|
76 | ```
|
77 |
|
78 | ### example
|
79 |
|
80 | ```js
|
81 | var fs = require('fs');
|
82 | var postcss = require('postcss');
|
83 | var pxtorem = require('postcss-pxtransform');
|
84 | var css = fs.readFileSync('main.css', 'utf8');
|
85 | var options = {
|
86 | replace: false
|
87 | };
|
88 | var processedCss = postcss(pxtorem(options)).process(css).css;
|
89 |
|
90 | fs.writeFile('main-rem.css', processedCss, function (err) {
|
91 | if (err) {
|
92 | throw err;
|
93 | }
|
94 | console.log('Rem file written.');
|
95 | });
|
96 | ```
|
97 |
|
98 | ## 配置 **options**
|
99 | 参数默认值如下:
|
100 |
|
101 | ```js
|
102 | {
|
103 | unitPrecision: 5,
|
104 | propList: ['*'],
|
105 | selectorBlackList: [],
|
106 | replace: true,
|
107 | mediaQuery: false,
|
108 | minPixelValue: 0
|
109 | }
|
110 | ```
|
111 |
|
112 | Type: `Object | Null`
|
113 |
|
114 | ### `platform` (String)(必填)
|
115 | `weapp` 或 `h5` 或 `rn`
|
116 |
|
117 | ### `designWidth`(Number)(必填)
|
118 | `640` 或 `750` 或 `828`
|
119 |
|
120 | ### `unitPrecision` (Number)
|
121 | The decimal numbers to allow the REM units to grow to.
|
122 |
|
123 | ### `propList` (Array)
|
124 | The properties that can change from px to rem.
|
125 |
|
126 | - Values need to be exact matches.
|
127 | - Use wildcard `*` to enable all properties. Example: `['*']`
|
128 | - Use `*` at the start or end of a word. (`['*position*']` will match `background-position-y`)
|
129 | - Use `!` to not match a property. Example: `['*', '!letter-spacing']`
|
130 | - Combine the "not" prefix with the other prefixes. Example: `['*', '!font*']`
|
131 |
|
132 | ### `selectorBlackList`
|
133 | (Array) The selectors to ignore and leave as px.
|
134 | - If value is string, it checks to see if selector contains the string.
|
135 | - `['body']` will match `.body-class`
|
136 | - If value is regexp, it checks to see if the selector matches the regexp.
|
137 | - `[/^body$/]` will match `body` but not `.body`
|
138 |
|
139 | ### `replace` (Boolean)
|
140 | replaces rules containing rems instead of adding fallbacks.
|
141 |
|
142 | ### `mediaQuery` (Boolean)
|
143 | Allow px to be converted in media queries.
|
144 |
|
145 | ### `minPixelValue` (Number)
|
146 | Set the minimum pixel value to replace.
|
147 |
|
148 |
|
149 | ## 忽略
|
150 | ### 属性
|
151 | 当前忽略单个属性的最简单的方法,就是 px 单位使用大写字母。
|
152 |
|
153 | ```css
|
154 | /*`px` is converted to `rem`*/
|
155 | .convert {
|
156 | font-size: 16px; // converted to 1rem
|
157 | }
|
158 |
|
159 | /* `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers*/
|
160 | .ignore {
|
161 | border: 1Px solid; // ignored
|
162 | border-width: 2PX; // ignored
|
163 | }
|
164 | ```
|
165 |
|
166 | ### 文件
|
167 | 对于头部包含注释`/*postcss-pxtransform disable*/` 的文件,插件不予处理。
|
168 |
|
169 | ## 剔除
|
170 | `/*postcss-pxtransform rn eject enable*/` 与 `/*postcss-pxtransform rn eject disable*/` 中间的代码,
|
171 | 在编译成 RN 端的样式的时候,会被删除。建议将 RN 不支持的但 H5 端又必不可少的样式放到这里面。如:样式重制相关的代码。
|
172 | ```css
|
173 | /*postcss-pxtransform rn eject enable*/
|
174 |
|
175 | .test {
|
176 | color: black;
|
177 | }
|
178 |
|
179 | /*postcss-pxtransform rn eject disable*/
|
180 | ```
|
181 |
|