postcss-pxtransform 3.5.0-canary.1 → 3.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -1
- package/__tests__/index.test.js +89 -74
- package/index.js +28 -49
- package/lib/pixel-unit-regex.js +1 -1
- package/package.json +5 -6
- package/lib/pixel-upper-unit-regex.js +0 -11
package/README.md
CHANGED
|
@@ -36,6 +36,22 @@ options = {
|
|
|
36
36
|
}
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
### 动态计算designWidth
|
|
40
|
+
|
|
41
|
+
基础组件库一般是`375`，如果业务系统UI设计是`750`，可以如下配置后`1:1`切图，小程序、H5、RN时有效
|
|
42
|
+
|
|
43
|
+
```js
|
|
44
|
+
options = {
|
|
45
|
+
platform: 'h5',
|
|
46
|
+
designWidth (input) {
|
|
47
|
+
if (input.file.replace(/\\+/g, '/').indexOf('@nutui/nutui-taro') > -1) {
|
|
48
|
+
return 375
|
|
49
|
+
}
|
|
50
|
+
return 750
|
|
51
|
+
},
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
39
55
|
### 输入/输出
|
|
40
56
|
|
|
41
57
|
默认配置下，所有的 px 都会被转换。
|
|
@@ -114,7 +130,7 @@ Type: `Object | Null`
|
|
|
114
130
|
### `platform` （String）（必填）
|
|
115
131
|
`weapp` 或 `h5` 或 `rn`
|
|
116
132
|
|
|
117
|
-
### `designWidth`（Number）（必填）
|
|
133
|
+
### `designWidth`（Number|Function）（必填）
|
|
118
134
|
`640` 或 `750` 或 `828`
|
|
119
135
|
|
|
120
136
|
### `unitPrecision` (Number)
|
package/__tests__/index.test.js
CHANGED
|
@@ -1,37 +1,31 @@
|
|
|
1
|
-
// Jasmine unit tests
|
|
2
|
-
// To run tests, run these commands from the project root:
|
|
3
|
-
// 1. `npm install -g jasmine-node`
|
|
4
|
-
// 2. `jasmine-node spec`
|
|
5
|
-
|
|
6
|
-
/* global describe, it, expect */
|
|
7
|
-
|
|
8
1
|
'use strict'
|
|
9
2
|
const postcss = require('postcss')
|
|
10
|
-
const
|
|
3
|
+
const px2rem = require('../index')
|
|
4
|
+
|
|
11
5
|
const basicCSS = '.rule { font-size: 15px }'
|
|
12
6
|
const filterPropList = require('../lib/filter-prop-list')
|
|
13
7
|
|
|
14
|
-
describe('
|
|
8
|
+
describe('px2rem', function () {
|
|
15
9
|
it('1 should work on the readme example', function () {
|
|
16
10
|
const input = 'h1 { margin: 0 0 20px; font-size: 32px; line-height: 1.2; letter-spacing: 1px; }'
|
|
17
|
-
const output = 'h1 { margin: 0 0 0.
|
|
18
|
-
const processed = postcss(
|
|
11
|
+
const output = 'h1 { margin: 0 0 0.585rem; font-size: 0.936rem; line-height: 1.2; letter-spacing: 0.02925rem; }'
|
|
12
|
+
const processed = postcss(px2rem({ platform: 'h5', designWidth: 640 }))
|
|
19
13
|
.process(input).css
|
|
20
14
|
|
|
21
15
|
expect(processed).toBe(output)
|
|
22
16
|
})
|
|
23
17
|
|
|
24
18
|
it('2 should replace the px unit with rem', function () {
|
|
25
|
-
const processed = postcss(
|
|
19
|
+
const processed = postcss(px2rem({ platform: 'h5', designWidth: 640 }))
|
|
26
20
|
.process(basicCSS).css
|
|
27
|
-
const expected = '.rule { font-size: 0.
|
|
21
|
+
const expected = '.rule { font-size: 0.43875rem }'
|
|
28
22
|
|
|
29
23
|
expect(processed).toBe(expected)
|
|
30
24
|
})
|
|
31
25
|
|
|
32
26
|
it('3 should ignore non px properties', function () {
|
|
33
27
|
const expected = '.rule { font-size: 2em }'
|
|
34
|
-
const processed = postcss(
|
|
28
|
+
const processed = postcss(px2rem({ platform: 'h5', designWidth: 640 }))
|
|
35
29
|
.process(expected).css
|
|
36
30
|
|
|
37
31
|
expect(processed).toBe(expected)
|
|
@@ -40,33 +34,33 @@ describe('pxtorem', function () {
|
|
|
40
34
|
it('4 should handle < 1 values and values without a leading 0 - legacy',
|
|
41
35
|
function () {
|
|
42
36
|
const rules = '.rule { margin: 0.5rem .5px -0.2px -.2em }'
|
|
43
|
-
const expected = '.rule { margin: 0.5rem 0.
|
|
37
|
+
const expected = '.rule { margin: 0.5rem 0.01463rem -0.00585rem -.2em }'
|
|
44
38
|
const options = {
|
|
45
39
|
platform: 'h5',
|
|
46
40
|
designWidth: 640,
|
|
47
41
|
propWhiteList: ['margin']
|
|
48
42
|
}
|
|
49
|
-
const processed = postcss(
|
|
43
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
50
44
|
|
|
51
45
|
expect(processed).toBe(expected)
|
|
52
46
|
})
|
|
53
47
|
|
|
54
48
|
it('5 should handle < 1 values and values without a leading 0', function () {
|
|
55
49
|
const rules = '.rule { margin: 0.5rem .5px -0.2px -.2em }'
|
|
56
|
-
const expected = '.rule { margin: 0.5rem 0.
|
|
50
|
+
const expected = '.rule { margin: 0.5rem 0.01463rem -0.00585rem -.2em }'
|
|
57
51
|
const options = {
|
|
58
52
|
platform: 'h5',
|
|
59
53
|
designWidth: 640,
|
|
60
54
|
propList: ['margin']
|
|
61
55
|
}
|
|
62
|
-
const processed = postcss(
|
|
56
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
63
57
|
|
|
64
58
|
expect(processed).toBe(expected)
|
|
65
59
|
})
|
|
66
60
|
|
|
67
61
|
it('6 should not add properties that already exist', function () {
|
|
68
62
|
const expected = '.rule { font-size: 40px; font-size: 1rem; }'
|
|
69
|
-
const processed = postcss(
|
|
63
|
+
const processed = postcss(px2rem({ platform: 'h5', designWidth: 750 }))
|
|
70
64
|
.process(expected).css
|
|
71
65
|
|
|
72
66
|
expect(processed).toBe(expected)
|
|
@@ -74,7 +68,7 @@ describe('pxtorem', function () {
|
|
|
74
68
|
|
|
75
69
|
it('7 should remain unitless if 0', function () {
|
|
76
70
|
const expected = '.rule { font-size: 0px; font-size: 0; }'
|
|
77
|
-
const processed = postcss(
|
|
71
|
+
const processed = postcss(px2rem()).process(expected).css
|
|
78
72
|
|
|
79
73
|
expect(processed).toBe(expected)
|
|
80
74
|
})
|
|
@@ -89,8 +83,8 @@ describe('value parsing', function () {
|
|
|
89
83
|
// propWhiteList: []
|
|
90
84
|
}
|
|
91
85
|
const rules = '.rule { content: \'16px\'; font-family: "16px"; font-size: 16px; }'
|
|
92
|
-
const expected = '.rule { content: \'16px\'; font-family: "16px"; font-size: 0.
|
|
93
|
-
const processed = postcss(
|
|
86
|
+
const expected = '.rule { content: \'16px\'; font-family: "16px"; font-size: 0.468rem; }'
|
|
87
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
94
88
|
|
|
95
89
|
expect(processed).toBe(expected)
|
|
96
90
|
})
|
|
@@ -103,8 +97,8 @@ describe('value parsing', function () {
|
|
|
103
97
|
propList: ['*']
|
|
104
98
|
}
|
|
105
99
|
const rules = '.rule { content: \'16px\'; font-family: "16px"; font-size: 16px; }'
|
|
106
|
-
const expected = '.rule { content: \'16px\'; font-family: "16px"; font-size: 0.
|
|
107
|
-
const processed = postcss(
|
|
100
|
+
const expected = '.rule { content: \'16px\'; font-family: "16px"; font-size: 0.468rem; }'
|
|
101
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
108
102
|
|
|
109
103
|
expect(processed).toBe(expected)
|
|
110
104
|
})
|
|
@@ -116,8 +110,8 @@ describe('value parsing', function () {
|
|
|
116
110
|
// propWhiteList: []
|
|
117
111
|
}
|
|
118
112
|
const rules = '.rule { background: url(16px.jpg); font-size: 16px; }'
|
|
119
|
-
const expected = '.rule { background: url(16px.jpg); font-size: 0.
|
|
120
|
-
const processed = postcss(
|
|
113
|
+
const expected = '.rule { background: url(16px.jpg); font-size: 0.468rem; }'
|
|
114
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
121
115
|
|
|
122
116
|
expect(processed).toBe(expected)
|
|
123
117
|
})
|
|
@@ -129,8 +123,8 @@ describe('value parsing', function () {
|
|
|
129
123
|
propList: ['*']
|
|
130
124
|
}
|
|
131
125
|
const rules = '.rule { background: url(16px.jpg); font-size: 16px; }'
|
|
132
|
-
const expected = '.rule { background: url(16px.jpg); font-size: 0.
|
|
133
|
-
const processed = postcss(
|
|
126
|
+
const expected = '.rule { background: url(16px.jpg); font-size: 0.468rem; }'
|
|
127
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
134
128
|
|
|
135
129
|
expect(processed).toBe(expected)
|
|
136
130
|
})
|
|
@@ -142,8 +136,8 @@ describe('value parsing', function () {
|
|
|
142
136
|
propList: ['*']
|
|
143
137
|
}
|
|
144
138
|
const rules = '.rule { margin: 12px calc(100% - 14PX); height: calc(100% - 20px); font-size: 12Px; line-height: 16px; }'
|
|
145
|
-
const expected = '.rule { margin: 0.
|
|
146
|
-
const processed = postcss(
|
|
139
|
+
const expected = '.rule { margin: 0.351rem calc(100% - 14PX); height: calc(100% - 0.585rem); font-size: 12Px; line-height: 0.468rem; }'
|
|
140
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
147
141
|
|
|
148
142
|
expect(processed).toBe(expected)
|
|
149
143
|
})
|
|
@@ -152,25 +146,25 @@ describe('value parsing', function () {
|
|
|
152
146
|
describe('unitPrecision', function () {
|
|
153
147
|
// Deprecate
|
|
154
148
|
it('1 should replace using a decimal of 2 places - legacy', function () {
|
|
155
|
-
const expected = '.rule { font-size: 0.
|
|
149
|
+
const expected = '.rule { font-size: 0.44rem }'
|
|
156
150
|
const options = {
|
|
157
151
|
platform: 'h5',
|
|
158
152
|
designWidth: 640,
|
|
159
153
|
unit_precision: 2
|
|
160
154
|
}
|
|
161
|
-
const processed = postcss(
|
|
155
|
+
const processed = postcss(px2rem(options)).process(basicCSS).css
|
|
162
156
|
|
|
163
157
|
expect(processed).toBe(expected)
|
|
164
158
|
})
|
|
165
159
|
|
|
166
160
|
it('2 should replace using a decimal of 2 places', function () {
|
|
167
|
-
const expected = '.rule { font-size: 0.
|
|
161
|
+
const expected = '.rule { font-size: 0.44rem }'
|
|
168
162
|
const options = {
|
|
169
163
|
platform: 'h5',
|
|
170
164
|
designWidth: 640,
|
|
171
165
|
unitPrecision: 2
|
|
172
166
|
}
|
|
173
|
-
const processed = postcss(
|
|
167
|
+
const processed = postcss(px2rem(options)).process(basicCSS).css
|
|
174
168
|
|
|
175
169
|
expect(processed).toBe(expected)
|
|
176
170
|
})
|
|
@@ -186,7 +180,7 @@ describe('propWhiteList', function () {
|
|
|
186
180
|
designWidth: 640,
|
|
187
181
|
prop_white_list: ['font']
|
|
188
182
|
}
|
|
189
|
-
const processed = postcss(
|
|
183
|
+
const processed = postcss(px2rem(options)).process(basicCSS).css
|
|
190
184
|
|
|
191
185
|
expect(processed).toBe(expected)
|
|
192
186
|
})
|
|
@@ -199,7 +193,7 @@ describe('propWhiteList', function () {
|
|
|
199
193
|
designWidth: 640,
|
|
200
194
|
propWhiteList: ['font']
|
|
201
195
|
}
|
|
202
|
-
const processed = postcss(
|
|
196
|
+
const processed = postcss(px2rem(options)).process(basicCSS).css
|
|
203
197
|
|
|
204
198
|
expect(processed).toBe(expected)
|
|
205
199
|
})
|
|
@@ -207,26 +201,26 @@ describe('propWhiteList', function () {
|
|
|
207
201
|
it('5 should only replace properties in the white list - legacy',
|
|
208
202
|
function () {
|
|
209
203
|
const css = '.rule { margin: 16px; margin-left: 10px }'
|
|
210
|
-
const expected = '.rule { margin: 0.
|
|
204
|
+
const expected = '.rule { margin: 0.468rem; margin-left: 10px }'
|
|
211
205
|
const options = {
|
|
212
206
|
platform: 'h5',
|
|
213
207
|
designWidth: 640,
|
|
214
208
|
propWhiteList: ['margin']
|
|
215
209
|
}
|
|
216
|
-
const processed = postcss(
|
|
210
|
+
const processed = postcss(px2rem(options)).process(css).css
|
|
217
211
|
|
|
218
212
|
expect(processed).toBe(expected)
|
|
219
213
|
})
|
|
220
214
|
|
|
221
215
|
it('6 should only replace properties in the prop list', function () {
|
|
222
216
|
const css = '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }'
|
|
223
|
-
const expected = '.rule { font-size: 0.
|
|
217
|
+
const expected = '.rule { font-size: 0.468rem; margin: 0.468rem; margin-left: 5px; padding: 5px; padding-right: 0.468rem }'
|
|
224
218
|
const options = {
|
|
225
219
|
platform: 'h5',
|
|
226
220
|
designWidth: 640,
|
|
227
221
|
propWhiteList: ['*font*', 'margin*', '!margin-left', '*-right', 'pad']
|
|
228
222
|
}
|
|
229
|
-
const processed = postcss(
|
|
223
|
+
const processed = postcss(px2rem(options)).process(css).css
|
|
230
224
|
|
|
231
225
|
expect(processed).toBe(expected)
|
|
232
226
|
})
|
|
@@ -234,26 +228,26 @@ describe('propWhiteList', function () {
|
|
|
234
228
|
it('7 should only replace properties in the prop list with wildcard',
|
|
235
229
|
function () {
|
|
236
230
|
const css = '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }'
|
|
237
|
-
const expected = '.rule { font-size: 16px; margin: 0.
|
|
231
|
+
const expected = '.rule { font-size: 16px; margin: 0.468rem; margin-left: 5px; padding: 5px; padding-right: 16px }'
|
|
238
232
|
const options = {
|
|
239
233
|
platform: 'h5',
|
|
240
234
|
designWidth: 640,
|
|
241
235
|
propWhiteList: ['*', '!margin-left', '!*padding*', '!font*']
|
|
242
236
|
}
|
|
243
|
-
const processed = postcss(
|
|
237
|
+
const processed = postcss(px2rem(options)).process(css).css
|
|
244
238
|
|
|
245
239
|
expect(processed).toBe(expected)
|
|
246
240
|
})
|
|
247
241
|
|
|
248
242
|
it('8 should replace all properties when white list is empty', function () {
|
|
249
243
|
const rules = '.rule { margin: 16px; font-size: 15px }'
|
|
250
|
-
const expected = '.rule { margin: 0.
|
|
244
|
+
const expected = '.rule { margin: 0.468rem; font-size: 0.43875rem }'
|
|
251
245
|
const options = {
|
|
252
246
|
platform: 'h5',
|
|
253
247
|
designWidth: 640
|
|
254
248
|
// propWhiteList: []
|
|
255
249
|
}
|
|
256
|
-
const processed = postcss(
|
|
250
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
257
251
|
|
|
258
252
|
expect(processed).toBe(expected)
|
|
259
253
|
})
|
|
@@ -264,52 +258,52 @@ describe('selectorBlackList', function () {
|
|
|
264
258
|
it('1 should ignore selectors in the selector black list - legacy',
|
|
265
259
|
function () {
|
|
266
260
|
const rules = '.rule { font-size: 15px } .rule2 { font-size: 15px }'
|
|
267
|
-
const expected = '.rule { font-size: 0.
|
|
261
|
+
const expected = '.rule { font-size: 0.43875rem } .rule2 { font-size: 15px }'
|
|
268
262
|
const options = {
|
|
269
263
|
platform: 'h5',
|
|
270
264
|
designWidth: 640,
|
|
271
265
|
selector_black_list: ['.rule2']
|
|
272
266
|
}
|
|
273
|
-
const processed = postcss(
|
|
267
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
274
268
|
|
|
275
269
|
expect(processed).toBe(expected)
|
|
276
270
|
})
|
|
277
271
|
|
|
278
272
|
it('2 should ignore selectors in the selector black list', function () {
|
|
279
273
|
const rules = '.rule { font-size: 15px } .rule2 { font-size: 15px }'
|
|
280
|
-
const expected = '.rule { font-size: 0.
|
|
274
|
+
const expected = '.rule { font-size: 0.43875rem } .rule2 { font-size: 15px }'
|
|
281
275
|
const options = {
|
|
282
276
|
platform: 'h5',
|
|
283
277
|
designWidth: 640,
|
|
284
278
|
selectorBlackList: ['.rule2']
|
|
285
279
|
}
|
|
286
|
-
const processed = postcss(
|
|
280
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
287
281
|
|
|
288
282
|
expect(processed).toBe(expected)
|
|
289
283
|
})
|
|
290
284
|
|
|
291
285
|
it('3 should ignore every selector with `body$`', function () {
|
|
292
286
|
const rules = 'body { font-size: 16px; } .class-body$ { font-size: 16px; } .simple-class { font-size: 16px; }'
|
|
293
|
-
const expected = 'body { font-size: 0.
|
|
287
|
+
const expected = 'body { font-size: 0.468rem; } .class-body$ { font-size: 16px; } .simple-class { font-size: 0.468rem; }'
|
|
294
288
|
const options = {
|
|
295
289
|
platform: 'h5',
|
|
296
290
|
designWidth: 640,
|
|
297
291
|
selectorBlackList: ['body$']
|
|
298
292
|
}
|
|
299
|
-
const processed = postcss(
|
|
293
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
300
294
|
|
|
301
295
|
expect(processed).toBe(expected)
|
|
302
296
|
})
|
|
303
297
|
|
|
304
298
|
it('4 should only ignore exactly `body`', function () {
|
|
305
299
|
const rules = 'body { font-size: 16px; } .class-body { font-size: 16px; } .simple-class { font-size: 16px; }'
|
|
306
|
-
const expected = 'body { font-size: 16px; } .class-body { font-size: 0.
|
|
300
|
+
const expected = 'body { font-size: 16px; } .class-body { font-size: 0.468rem; } .simple-class { font-size: 0.468rem; }'
|
|
307
301
|
const options = {
|
|
308
302
|
platform: 'h5',
|
|
309
303
|
designWidth: 640,
|
|
310
304
|
selectorBlackList: [/^body$/]
|
|
311
305
|
}
|
|
312
|
-
const processed = postcss(
|
|
306
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
313
307
|
|
|
314
308
|
expect(processed).toBe(expected)
|
|
315
309
|
})
|
|
@@ -322,8 +316,8 @@ describe('replace', function () {
|
|
|
322
316
|
designWidth: 640,
|
|
323
317
|
replace: false
|
|
324
318
|
}
|
|
325
|
-
const processed = postcss(
|
|
326
|
-
const expected = '.rule { font-size: 15px; font-size: 0.
|
|
319
|
+
const processed = postcss(px2rem(options)).process(basicCSS).css
|
|
320
|
+
const expected = '.rule { font-size: 15px; font-size: 0.43875rem }'
|
|
327
321
|
|
|
328
322
|
expect(processed).toBe(expected)
|
|
329
323
|
})
|
|
@@ -337,9 +331,9 @@ describe('mediaQuery', function () {
|
|
|
337
331
|
designWidth: 640,
|
|
338
332
|
media_query: true
|
|
339
333
|
}
|
|
340
|
-
const processed = postcss(
|
|
334
|
+
const processed = postcss(px2rem(options))
|
|
341
335
|
.process('@media (min-width: 500px) { .rule { font-size: 16px } }').css
|
|
342
|
-
const expected = '@media (min-width:
|
|
336
|
+
const expected = '@media (min-width: 14.625rem) { .rule { font-size: 0.468rem } }'
|
|
343
337
|
|
|
344
338
|
expect(processed).toBe(expected)
|
|
345
339
|
})
|
|
@@ -350,9 +344,9 @@ describe('mediaQuery', function () {
|
|
|
350
344
|
designWidth: 640,
|
|
351
345
|
mediaQuery: true
|
|
352
346
|
}
|
|
353
|
-
const processed = postcss(
|
|
347
|
+
const processed = postcss(px2rem(options))
|
|
354
348
|
.process('@media (min-width: 500px) { .rule { font-size: 16px } }').css
|
|
355
|
-
const expected = '@media (min-width:
|
|
349
|
+
const expected = '@media (min-width: 14.625rem) { .rule { font-size: 0.468rem } }'
|
|
356
350
|
|
|
357
351
|
expect(processed).toBe(expected)
|
|
358
352
|
})
|
|
@@ -367,8 +361,8 @@ describe('minPixelValue', function () {
|
|
|
367
361
|
minPixelValue: 2
|
|
368
362
|
}
|
|
369
363
|
const rules = '.rule { border: 1px solid #000; font-size: 16px; margin: 1px 10px; }'
|
|
370
|
-
const expected = '.rule { border: 1px solid #000; font-size: 0.
|
|
371
|
-
const processed = postcss(
|
|
364
|
+
const expected = '.rule { border: 1px solid #000; font-size: 0.468rem; margin: 1px 0.2925rem; }'
|
|
365
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
372
366
|
|
|
373
367
|
expect(processed).toBe(expected)
|
|
374
368
|
})
|
|
@@ -493,7 +487,7 @@ describe('不传任何配置', () => {
|
|
|
493
487
|
it('不传任何配置', function () {
|
|
494
488
|
const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
|
|
495
489
|
const expected = 'h1 {margin: 0 0 20rpx;font-size: 40rpx;line-height: 1.2;}'
|
|
496
|
-
const processed = postcss(
|
|
490
|
+
const processed = postcss(px2rem()).process(rules).css
|
|
497
491
|
|
|
498
492
|
expect(processed).toBe(expected)
|
|
499
493
|
})
|
|
@@ -507,18 +501,18 @@ describe('platform 为 weapp', () => {
|
|
|
507
501
|
platform: 'weapp',
|
|
508
502
|
designWidth: 750
|
|
509
503
|
}
|
|
510
|
-
const processed = postcss(
|
|
504
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
511
505
|
expect(processed).toBe(expected)
|
|
512
506
|
})
|
|
513
507
|
|
|
514
508
|
it('{platform: \'weapp\', designWidth: 640} ', () => {
|
|
515
509
|
const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
|
|
516
|
-
const expected = 'h1 {margin: 0 0
|
|
510
|
+
const expected = 'h1 {margin: 0 0 23.4rpx;font-size: 46.8rpx;line-height: 1.2;}'
|
|
517
511
|
const options = {
|
|
518
512
|
platform: 'weapp',
|
|
519
513
|
designWidth: 640
|
|
520
514
|
}
|
|
521
|
-
const processed = postcss(
|
|
515
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
522
516
|
expect(processed).toBe(expected)
|
|
523
517
|
})
|
|
524
518
|
})
|
|
@@ -526,23 +520,23 @@ describe('platform 为 weapp', () => {
|
|
|
526
520
|
describe('platform 为 h5', () => {
|
|
527
521
|
it('{platform: \'h5\', designWidth: 750} ', () => {
|
|
528
522
|
const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
|
|
529
|
-
const expected = 'h1 {margin: 0 0 0.
|
|
523
|
+
const expected = 'h1 {margin: 0 0 0.5rem;font-size: 1rem;line-height: 1.2;}'
|
|
530
524
|
const options = {
|
|
531
525
|
platform: 'h5',
|
|
532
526
|
designWidth: 750
|
|
533
527
|
}
|
|
534
|
-
const processed = postcss(
|
|
528
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
535
529
|
expect(processed).toBe(expected)
|
|
536
530
|
})
|
|
537
531
|
|
|
538
532
|
it('{platform: \'h5\', designWidth: 640} ', () => {
|
|
539
533
|
const rules = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
|
|
540
|
-
const expected = 'h1 {margin: 0 0 0.
|
|
534
|
+
const expected = 'h1 {margin: 0 0 0.585rem;font-size: 40Px;line-height: 1.2;}'
|
|
541
535
|
const options = {
|
|
542
536
|
platform: 'h5',
|
|
543
537
|
designWidth: 640
|
|
544
538
|
}
|
|
545
|
-
const processed = postcss(
|
|
539
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
546
540
|
expect(processed).toBe(expected)
|
|
547
541
|
})
|
|
548
542
|
})
|
|
@@ -554,7 +548,7 @@ describe('platform 为 h5，文件头部带注释的不转换', () => {
|
|
|
554
548
|
platform: 'h5',
|
|
555
549
|
designWidth: 640
|
|
556
550
|
}
|
|
557
|
-
const processed = postcss(
|
|
551
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
558
552
|
expect(processed).toBe(rules)
|
|
559
553
|
})
|
|
560
554
|
})
|
|
@@ -566,7 +560,7 @@ describe('platform 为 h5，指定 h5 平台保留', () => {
|
|
|
566
560
|
platform: 'h5',
|
|
567
561
|
designWidth: 640
|
|
568
562
|
}
|
|
569
|
-
const processed = postcss(
|
|
563
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
570
564
|
expect(processed).toBe(rules)
|
|
571
565
|
})
|
|
572
566
|
})
|
|
@@ -578,7 +572,7 @@ describe('platform 为 h5，指定平台 rn 平台保留', () => {
|
|
|
578
572
|
platform: 'h5',
|
|
579
573
|
designWidth: 640
|
|
580
574
|
}
|
|
581
|
-
const processed = postcss(
|
|
575
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
582
576
|
expect(processed).toBe('/* #ifdef rn *//* #endif */ .test{}')
|
|
583
577
|
})
|
|
584
578
|
})
|
|
@@ -590,7 +584,7 @@ describe('platform 为 rn，指定平台 h5 rn 平台保留', () => {
|
|
|
590
584
|
platform: 'rn',
|
|
591
585
|
designWidth: 640
|
|
592
586
|
}
|
|
593
|
-
const processed = postcss(
|
|
587
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
594
588
|
expect(processed).toBe(rules)
|
|
595
589
|
})
|
|
596
590
|
})
|
|
@@ -602,7 +596,7 @@ describe('platform 为 h5，指定平台 rn 平台剔除', () => {
|
|
|
602
596
|
platform: 'h5',
|
|
603
597
|
designWidth: 640
|
|
604
598
|
}
|
|
605
|
-
const processed = postcss(
|
|
599
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
606
600
|
expect(processed).toBe(rules)
|
|
607
601
|
})
|
|
608
602
|
})
|
|
@@ -614,7 +608,28 @@ describe('platform 为 h5，指定平台 h5 平台剔除', () => {
|
|
|
614
608
|
platform: 'h5',
|
|
615
609
|
designWidth: 640
|
|
616
610
|
}
|
|
617
|
-
const processed = postcss(
|
|
611
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
618
612
|
expect(processed).toBe('/* #ifndef h5 *//* #endif */ .test{}')
|
|
619
613
|
})
|
|
620
614
|
})
|
|
615
|
+
|
|
616
|
+
describe('rpx 单位转换', () => {
|
|
617
|
+
it('{platform: \'weapp\', designWidth: 640} ', () => {
|
|
618
|
+
const rules = 'h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}'
|
|
619
|
+
const options = {
|
|
620
|
+
platform: 'weapp',
|
|
621
|
+
designWidth: 640
|
|
622
|
+
}
|
|
623
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
624
|
+
expect(processed).toBe('h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}')
|
|
625
|
+
})
|
|
626
|
+
it('{platform: \'h5\', designWidth: 640} ', () => {
|
|
627
|
+
const rules = 'h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}'
|
|
628
|
+
const options = {
|
|
629
|
+
platform: 'h5',
|
|
630
|
+
designWidth: 640
|
|
631
|
+
}
|
|
632
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
633
|
+
expect(processed).toBe('h1 {margin: 0 0 0.585rem;font-size: 40Px;line-height: 1.2;} .test{}')
|
|
634
|
+
})
|
|
635
|
+
})
|
package/index.js
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
const postcss = require('postcss')
|
|
4
4
|
const pxRegex = require('./lib/pixel-unit-regex')
|
|
5
|
-
const PXRegex = require('./lib/pixel-upper-unit-regex')
|
|
6
5
|
const filterPropList = require('./lib/filter-prop-list')
|
|
7
6
|
|
|
8
7
|
const defaults = {
|
|
@@ -30,8 +29,6 @@ const deviceRatio = {
|
|
|
30
29
|
828: 1.81 / 2
|
|
31
30
|
}
|
|
32
31
|
|
|
33
|
-
const baseFontSize = 40
|
|
34
|
-
|
|
35
32
|
const DEFAULT_WEAPP_OPTIONS = {
|
|
36
33
|
platform: 'weapp',
|
|
37
34
|
designWidth: 750,
|
|
@@ -40,33 +37,34 @@ const DEFAULT_WEAPP_OPTIONS = {
|
|
|
40
37
|
|
|
41
38
|
let targetUnit
|
|
42
39
|
|
|
43
|
-
module.exports = postcss.plugin('postcss-pxtransform', function (options) {
|
|
44
|
-
options = Object.assign(DEFAULT_WEAPP_OPTIONS, options
|
|
40
|
+
module.exports = postcss.plugin('postcss-pxtransform', function (options = {}) {
|
|
41
|
+
options = Object.assign({}, DEFAULT_WEAPP_OPTIONS, options)
|
|
45
42
|
|
|
43
|
+
const transUnits = ['px']
|
|
44
|
+
const baseFontSize = options.baseFontSize ?? options.minRootSize >= 1 ? options.minRootSize : 20
|
|
45
|
+
const designWidth = input => typeof options.designWidth === 'function'
|
|
46
|
+
? options.designWidth(input)
|
|
47
|
+
: options.designWidth
|
|
46
48
|
switch (options.platform) {
|
|
47
49
|
case 'h5': {
|
|
48
|
-
options.rootValue = baseFontSize
|
|
50
|
+
options.rootValue = input => baseFontSize / options.deviceRatio[designWidth(input)] * 2
|
|
49
51
|
targetUnit = 'rem'
|
|
52
|
+
transUnits.push('rpx')
|
|
50
53
|
break
|
|
51
54
|
}
|
|
52
55
|
case 'rn': {
|
|
53
|
-
options.rootValue = 1 / options.deviceRatio[
|
|
56
|
+
options.rootValue = input => 1 / options.deviceRatio[designWidth(input)] * 2
|
|
54
57
|
targetUnit = 'px'
|
|
55
58
|
break
|
|
56
59
|
}
|
|
57
60
|
case 'quickapp': {
|
|
58
|
-
options.rootValue = 1
|
|
59
|
-
targetUnit = 'px'
|
|
60
|
-
break
|
|
61
|
-
}
|
|
62
|
-
case 'harmony': {
|
|
63
|
-
options.rootValue = 1 / options.deviceRatio[options.designWidth]
|
|
61
|
+
options.rootValue = () => 1
|
|
64
62
|
targetUnit = 'px'
|
|
65
63
|
break
|
|
66
64
|
}
|
|
67
65
|
default: {
|
|
68
66
|
// mini-program
|
|
69
|
-
options.rootValue = 1 / options.deviceRatio[
|
|
67
|
+
options.rootValue = input => 1 / options.deviceRatio[designWidth(input)]
|
|
70
68
|
targetUnit = 'rpx'
|
|
71
69
|
}
|
|
72
70
|
}
|
|
@@ -75,12 +73,13 @@ module.exports = postcss.plugin('postcss-pxtransform', function (options) {
|
|
|
75
73
|
|
|
76
74
|
const opts = Object.assign({}, defaults, options)
|
|
77
75
|
const onePxTransform = typeof options.onePxTransform === 'undefined' ? true : options.onePxTransform
|
|
78
|
-
const
|
|
79
|
-
opts.minPixelValue, onePxTransform)
|
|
76
|
+
const pxRgx = pxRegex(transUnits)
|
|
80
77
|
|
|
81
78
|
const satisfyPropList = createPropListMatcher(opts.propList)
|
|
82
79
|
|
|
83
80
|
return function (css) {
|
|
81
|
+
const pxReplace = createPxReplace(opts.rootValue, opts.unitPrecision, opts.minPixelValue, onePxTransform)(css.source.input)
|
|
82
|
+
|
|
84
83
|
for (let i = 0; i < css.nodes.length; i++) {
|
|
85
84
|
if (css.nodes[i].type === 'comment') {
|
|
86
85
|
if (css.nodes[i].text === 'postcss-pxtransform disable') {
|
|
@@ -108,27 +107,6 @@ module.exports = postcss.plugin('postcss-pxtransform', function (options) {
|
|
|
108
107
|
})
|
|
109
108
|
}
|
|
110
109
|
|
|
111
|
-
// PX -> vp in harmony
|
|
112
|
-
if (options.platform === 'harmony') {
|
|
113
|
-
css.walkDecls(function (decl) {
|
|
114
|
-
if (decl.value.indexOf('PX') === -1) return
|
|
115
|
-
const value = decl.value.replace(PXRegex, function (m, _$1, $2) {
|
|
116
|
-
return m.replace($2, 'vp')
|
|
117
|
-
})
|
|
118
|
-
decl.value = value
|
|
119
|
-
})
|
|
120
|
-
|
|
121
|
-
if (opts.mediaQuery) {
|
|
122
|
-
css.walkAtRules('media', function (rule) {
|
|
123
|
-
if (rule.params.indexOf('PX') === -1) return
|
|
124
|
-
const value = rule.params.replace(PXRegex, function (m, _$1, $2) {
|
|
125
|
-
return m.replace($2, 'vp')
|
|
126
|
-
})
|
|
127
|
-
rule.params = value
|
|
128
|
-
})
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
|
|
132
110
|
/* #ifdef %PLATFORM% */
|
|
133
111
|
// 平台特有样式
|
|
134
112
|
/* #endif */
|
|
@@ -179,10 +157,9 @@ module.exports = postcss.plugin('postcss-pxtransform', function (options) {
|
|
|
179
157
|
|
|
180
158
|
if (!satisfyPropList(decl.prop)) return
|
|
181
159
|
|
|
182
|
-
if (blacklistedSelector(opts.selectorBlackList,
|
|
183
|
-
decl.parent.selector)) return
|
|
160
|
+
if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return
|
|
184
161
|
|
|
185
|
-
const value = decl.value.replace(
|
|
162
|
+
const value = decl.value.replace(pxRgx, pxReplace)
|
|
186
163
|
|
|
187
164
|
// if rem unit already exists, do not add or replace
|
|
188
165
|
if (declarationExists(decl.parent, decl.prop, value)) return
|
|
@@ -197,7 +174,7 @@ module.exports = postcss.plugin('postcss-pxtransform', function (options) {
|
|
|
197
174
|
if (opts.mediaQuery) {
|
|
198
175
|
css.walkAtRules('media', function (rule) {
|
|
199
176
|
if (rule.params.indexOf('px') === -1) return
|
|
200
|
-
rule.params = rule.params.replace(
|
|
177
|
+
rule.params = rule.params.replace(pxRgx, pxReplace)
|
|
201
178
|
})
|
|
202
179
|
}
|
|
203
180
|
}
|
|
@@ -227,15 +204,17 @@ function convertLegacyOptions (options) {
|
|
|
227
204
|
}
|
|
228
205
|
|
|
229
206
|
function createPxReplace (rootValue, unitPrecision, minPixelValue, onePxTransform) {
|
|
230
|
-
return function (
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
207
|
+
return function (input) {
|
|
208
|
+
return function (m, $1) {
|
|
209
|
+
if (!$1) return m
|
|
210
|
+
if (!onePxTransform && parseInt($1, 10) === 1) {
|
|
211
|
+
return m
|
|
212
|
+
}
|
|
213
|
+
const pixels = parseFloat($1)
|
|
214
|
+
if (pixels < minPixelValue) return m
|
|
215
|
+
const fixedVal = toFixed((pixels / rootValue(input, m, $1)), unitPrecision)
|
|
216
|
+
return (fixedVal === 0) ? '0' : fixedVal + targetUnit
|
|
234
217
|
}
|
|
235
|
-
const pixels = parseFloat($1)
|
|
236
|
-
if (pixels < minPixelValue) return m
|
|
237
|
-
const fixedVal = toFixed((pixels / rootValue), unitPrecision)
|
|
238
|
-
return (fixedVal === 0) ? '0' : fixedVal + targetUnit
|
|
239
218
|
}
|
|
240
219
|
}
|
|
241
220
|
|
package/lib/pixel-unit-regex.js
CHANGED
|
@@ -8,4 +8,4 @@
|
|
|
8
8
|
// Any digit followed by px
|
|
9
9
|
// !singlequotes|!doublequotes|!url()|pixelunit
|
|
10
10
|
|
|
11
|
-
module.exports =
|
|
11
|
+
module.exports = (units = ['px']) => new RegExp(`"[^"]+"|'[^']+'|url\\([^\\)]+\\)|(\\d*\\.?\\d+)(${units.join('|')})`, 'g')
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "postcss-pxtransform",
|
|
3
|
-
"version": "3.5.0
|
|
3
|
+
"version": "3.5.0",
|
|
4
4
|
"description": "PostCSS plugin px 转小程序 rpx及h5 rem 单位",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"postcss",
|
|
@@ -21,12 +21,11 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"postcss": "^6.0.22"
|
|
23
23
|
},
|
|
24
|
-
"scripts": {
|
|
25
|
-
"test": "jest"
|
|
26
|
-
},
|
|
27
24
|
"jest": {
|
|
28
25
|
"testEnvironment": "node"
|
|
29
26
|
},
|
|
30
27
|
"main": "index.js",
|
|
31
|
-
"
|
|
32
|
-
|
|
28
|
+
"scripts": {
|
|
29
|
+
"test": "jest"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/*eslint-disable*/
|
|
2
|
-
|
|
3
|
-
// excluding regex trick: http://www.rexegg.com/regex-best-trick.html
|
|
4
|
-
|
|
5
|
-
// Not anything inside double quotes
|
|
6
|
-
// Not anything inside single quotes
|
|
7
|
-
// Not anything inside url()
|
|
8
|
-
// Any digit followed by PX
|
|
9
|
-
// !singlequotes|!doublequotes|!url()|pixelunit
|
|
10
|
-
|
|
11
|
-
module.exports = /"[^"]+"|'[^']+'|url\([^\)]+\)|(\d*\.?\d+)(PX)/g
|