postcss-pxtransform 3.5.0-beta.1 → 3.5.0-beta.4
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/__tests__/index.test.js +91 -67
- package/index.js +12 -11
- package/lib/pixel-unit-regex.js +1 -1
- package/package.json +2 -2
package/__tests__/index.test.js
CHANGED
|
@@ -7,32 +7,32 @@
|
|
|
7
7
|
|
|
8
8
|
'use strict'
|
|
9
9
|
const postcss = require('postcss')
|
|
10
|
-
const
|
|
10
|
+
const px2rem = require('../index')
|
|
11
11
|
|
|
12
12
|
const basicCSS = '.rule { font-size: 15px }'
|
|
13
13
|
const filterPropList = require('../lib/filter-prop-list')
|
|
14
14
|
|
|
15
|
-
describe('
|
|
15
|
+
describe('px2rem', function () {
|
|
16
16
|
it('1 should work on the readme example', function () {
|
|
17
17
|
const input = 'h1 { margin: 0 0 20px; font-size: 32px; line-height: 1.2; letter-spacing: 1px; }'
|
|
18
|
-
const output = 'h1 { margin: 0 0 0.
|
|
19
|
-
const processed = postcss(
|
|
18
|
+
const output = 'h1 { margin: 0 0 0.585rem; font-size: 0.936rem; line-height: 1.2; letter-spacing: 0.02925rem; }'
|
|
19
|
+
const processed = postcss(px2rem({ platform: 'h5', designWidth: 640 }))
|
|
20
20
|
.process(input).css
|
|
21
21
|
|
|
22
22
|
expect(processed).toBe(output)
|
|
23
23
|
})
|
|
24
24
|
|
|
25
25
|
it('2 should replace the px unit with rem', function () {
|
|
26
|
-
const processed = postcss(
|
|
26
|
+
const processed = postcss(px2rem({ platform: 'h5', designWidth: 640 }))
|
|
27
27
|
.process(basicCSS).css
|
|
28
|
-
const expected = '.rule { font-size: 0.
|
|
28
|
+
const expected = '.rule { font-size: 0.43875rem }'
|
|
29
29
|
|
|
30
30
|
expect(processed).toBe(expected)
|
|
31
31
|
})
|
|
32
32
|
|
|
33
33
|
it('3 should ignore non px properties', function () {
|
|
34
34
|
const expected = '.rule { font-size: 2em }'
|
|
35
|
-
const processed = postcss(
|
|
35
|
+
const processed = postcss(px2rem({ platform: 'h5', designWidth: 640 }))
|
|
36
36
|
.process(expected).css
|
|
37
37
|
|
|
38
38
|
expect(processed).toBe(expected)
|
|
@@ -41,41 +41,44 @@ describe('pxtorem', function () {
|
|
|
41
41
|
it('4 should handle < 1 values and values without a leading 0 - legacy',
|
|
42
42
|
function () {
|
|
43
43
|
const rules = '.rule { margin: 0.5rem .5px -0.2px -.2em }'
|
|
44
|
-
const expected = '.rule { margin: 0.5rem 0.
|
|
44
|
+
const expected = '.rule { margin: 0.5rem 0.01462rem -0.00585rem -.2em }'
|
|
45
45
|
const options = {
|
|
46
46
|
platform: 'h5',
|
|
47
47
|
designWidth: 640,
|
|
48
48
|
propWhiteList: ['margin']
|
|
49
49
|
}
|
|
50
|
-
const processed = postcss(
|
|
50
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
51
51
|
|
|
52
52
|
expect(processed).toBe(expected)
|
|
53
53
|
})
|
|
54
54
|
|
|
55
55
|
it('5 should handle < 1 values and values without a leading 0', function () {
|
|
56
56
|
const rules = '.rule { margin: 0.5rem .5px -0.2px -.2em }'
|
|
57
|
-
const expected = '.rule { margin: 0.5rem 0.
|
|
57
|
+
const expected = '.rule { margin: 0.5rem 0.01462rem -0.00585rem -.2em }'
|
|
58
58
|
const options = {
|
|
59
59
|
platform: 'h5',
|
|
60
60
|
designWidth: 640,
|
|
61
61
|
propList: ['margin']
|
|
62
62
|
}
|
|
63
|
-
const processed = postcss(
|
|
63
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
64
64
|
|
|
65
65
|
expect(processed).toBe(expected)
|
|
66
66
|
})
|
|
67
67
|
|
|
68
68
|
it('6 should not add properties that already exist', function () {
|
|
69
69
|
const expected = '.rule { font-size: 40px; font-size: 1rem; }'
|
|
70
|
-
const
|
|
71
|
-
|
|
70
|
+
const options = {
|
|
71
|
+
platform: 'h5',
|
|
72
|
+
designWidth: 750
|
|
73
|
+
}
|
|
74
|
+
const processed = postcss(px2rem(options)).process(expected).css
|
|
72
75
|
|
|
73
76
|
expect(processed).toBe(expected)
|
|
74
77
|
})
|
|
75
78
|
|
|
76
79
|
it('7 should remain unitless if 0', function () {
|
|
77
80
|
const expected = '.rule { font-size: 0px; font-size: 0; }'
|
|
78
|
-
const processed = postcss(
|
|
81
|
+
const processed = postcss(px2rem()).process(expected).css
|
|
79
82
|
|
|
80
83
|
expect(processed).toBe(expected)
|
|
81
84
|
})
|
|
@@ -90,8 +93,8 @@ describe('value parsing', function () {
|
|
|
90
93
|
// propWhiteList: []
|
|
91
94
|
}
|
|
92
95
|
const rules = '.rule { content: \'16px\'; font-family: "16px"; font-size: 16px; }'
|
|
93
|
-
const expected = '.rule { content: \'16px\'; font-family: "16px"; font-size: 0.
|
|
94
|
-
const processed = postcss(
|
|
96
|
+
const expected = '.rule { content: \'16px\'; font-family: "16px"; font-size: 0.468rem; }'
|
|
97
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
95
98
|
|
|
96
99
|
expect(processed).toBe(expected)
|
|
97
100
|
})
|
|
@@ -104,8 +107,8 @@ describe('value parsing', function () {
|
|
|
104
107
|
propList: ['*']
|
|
105
108
|
}
|
|
106
109
|
const rules = '.rule { content: \'16px\'; font-family: "16px"; font-size: 16px; }'
|
|
107
|
-
const expected = '.rule { content: \'16px\'; font-family: "16px"; font-size: 0.
|
|
108
|
-
const processed = postcss(
|
|
110
|
+
const expected = '.rule { content: \'16px\'; font-family: "16px"; font-size: 0.468rem; }'
|
|
111
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
109
112
|
|
|
110
113
|
expect(processed).toBe(expected)
|
|
111
114
|
})
|
|
@@ -117,8 +120,8 @@ describe('value parsing', function () {
|
|
|
117
120
|
// propWhiteList: []
|
|
118
121
|
}
|
|
119
122
|
const rules = '.rule { background: url(16px.jpg); font-size: 16px; }'
|
|
120
|
-
const expected = '.rule { background: url(16px.jpg); font-size: 0.
|
|
121
|
-
const processed = postcss(
|
|
123
|
+
const expected = '.rule { background: url(16px.jpg); font-size: 0.468rem; }'
|
|
124
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
122
125
|
|
|
123
126
|
expect(processed).toBe(expected)
|
|
124
127
|
})
|
|
@@ -130,8 +133,8 @@ describe('value parsing', function () {
|
|
|
130
133
|
propList: ['*']
|
|
131
134
|
}
|
|
132
135
|
const rules = '.rule { background: url(16px.jpg); font-size: 16px; }'
|
|
133
|
-
const expected = '.rule { background: url(16px.jpg); font-size: 0.
|
|
134
|
-
const processed = postcss(
|
|
136
|
+
const expected = '.rule { background: url(16px.jpg); font-size: 0.468rem; }'
|
|
137
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
135
138
|
|
|
136
139
|
expect(processed).toBe(expected)
|
|
137
140
|
})
|
|
@@ -143,8 +146,8 @@ describe('value parsing', function () {
|
|
|
143
146
|
propList: ['*']
|
|
144
147
|
}
|
|
145
148
|
const rules = '.rule { margin: 12px calc(100% - 14PX); height: calc(100% - 20px); font-size: 12Px; line-height: 16px; }'
|
|
146
|
-
const expected = '.rule { margin: 0.
|
|
147
|
-
const processed = postcss(
|
|
149
|
+
const expected = '.rule { margin: 0.351rem calc(100% - 14PX); height: calc(100% - 0.585rem); font-size: 12Px; line-height: 0.468rem; }'
|
|
150
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
148
151
|
|
|
149
152
|
expect(processed).toBe(expected)
|
|
150
153
|
})
|
|
@@ -153,25 +156,25 @@ describe('value parsing', function () {
|
|
|
153
156
|
describe('unitPrecision', function () {
|
|
154
157
|
// Deprecate
|
|
155
158
|
it('1 should replace using a decimal of 2 places - legacy', function () {
|
|
156
|
-
const expected = '.rule { font-size: 0.
|
|
159
|
+
const expected = '.rule { font-size: 0.44rem }'
|
|
157
160
|
const options = {
|
|
158
161
|
platform: 'h5',
|
|
159
162
|
designWidth: 640,
|
|
160
163
|
unit_precision: 2
|
|
161
164
|
}
|
|
162
|
-
const processed = postcss(
|
|
165
|
+
const processed = postcss(px2rem(options)).process(basicCSS).css
|
|
163
166
|
|
|
164
167
|
expect(processed).toBe(expected)
|
|
165
168
|
})
|
|
166
169
|
|
|
167
170
|
it('2 should replace using a decimal of 2 places', function () {
|
|
168
|
-
const expected = '.rule { font-size: 0.
|
|
171
|
+
const expected = '.rule { font-size: 0.44rem }'
|
|
169
172
|
const options = {
|
|
170
173
|
platform: 'h5',
|
|
171
174
|
designWidth: 640,
|
|
172
175
|
unitPrecision: 2
|
|
173
176
|
}
|
|
174
|
-
const processed = postcss(
|
|
177
|
+
const processed = postcss(px2rem(options)).process(basicCSS).css
|
|
175
178
|
|
|
176
179
|
expect(processed).toBe(expected)
|
|
177
180
|
})
|
|
@@ -187,7 +190,7 @@ describe('propWhiteList', function () {
|
|
|
187
190
|
designWidth: 640,
|
|
188
191
|
prop_white_list: ['font']
|
|
189
192
|
}
|
|
190
|
-
const processed = postcss(
|
|
193
|
+
const processed = postcss(px2rem(options)).process(basicCSS).css
|
|
191
194
|
|
|
192
195
|
expect(processed).toBe(expected)
|
|
193
196
|
})
|
|
@@ -200,7 +203,7 @@ describe('propWhiteList', function () {
|
|
|
200
203
|
designWidth: 640,
|
|
201
204
|
propWhiteList: ['font']
|
|
202
205
|
}
|
|
203
|
-
const processed = postcss(
|
|
206
|
+
const processed = postcss(px2rem(options)).process(basicCSS).css
|
|
204
207
|
|
|
205
208
|
expect(processed).toBe(expected)
|
|
206
209
|
})
|
|
@@ -208,26 +211,26 @@ describe('propWhiteList', function () {
|
|
|
208
211
|
it('5 should only replace properties in the white list - legacy',
|
|
209
212
|
function () {
|
|
210
213
|
const css = '.rule { margin: 16px; margin-left: 10px }'
|
|
211
|
-
const expected = '.rule { margin: 0.
|
|
214
|
+
const expected = '.rule { margin: 0.468rem; margin-left: 10px }'
|
|
212
215
|
const options = {
|
|
213
216
|
platform: 'h5',
|
|
214
217
|
designWidth: 640,
|
|
215
218
|
propWhiteList: ['margin']
|
|
216
219
|
}
|
|
217
|
-
const processed = postcss(
|
|
220
|
+
const processed = postcss(px2rem(options)).process(css).css
|
|
218
221
|
|
|
219
222
|
expect(processed).toBe(expected)
|
|
220
223
|
})
|
|
221
224
|
|
|
222
225
|
it('6 should only replace properties in the prop list', function () {
|
|
223
226
|
const css = '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }'
|
|
224
|
-
const expected = '.rule { font-size: 0.
|
|
227
|
+
const expected = '.rule { font-size: 0.468rem; margin: 0.468rem; margin-left: 5px; padding: 5px; padding-right: 0.468rem }'
|
|
225
228
|
const options = {
|
|
226
229
|
platform: 'h5',
|
|
227
230
|
designWidth: 640,
|
|
228
231
|
propWhiteList: ['*font*', 'margin*', '!margin-left', '*-right', 'pad']
|
|
229
232
|
}
|
|
230
|
-
const processed = postcss(
|
|
233
|
+
const processed = postcss(px2rem(options)).process(css).css
|
|
231
234
|
|
|
232
235
|
expect(processed).toBe(expected)
|
|
233
236
|
})
|
|
@@ -235,26 +238,26 @@ describe('propWhiteList', function () {
|
|
|
235
238
|
it('7 should only replace properties in the prop list with wildcard',
|
|
236
239
|
function () {
|
|
237
240
|
const css = '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }'
|
|
238
|
-
const expected = '.rule { font-size: 16px; margin: 0.
|
|
241
|
+
const expected = '.rule { font-size: 16px; margin: 0.468rem; margin-left: 5px; padding: 5px; padding-right: 16px }'
|
|
239
242
|
const options = {
|
|
240
243
|
platform: 'h5',
|
|
241
244
|
designWidth: 640,
|
|
242
245
|
propWhiteList: ['*', '!margin-left', '!*padding*', '!font*']
|
|
243
246
|
}
|
|
244
|
-
const processed = postcss(
|
|
247
|
+
const processed = postcss(px2rem(options)).process(css).css
|
|
245
248
|
|
|
246
249
|
expect(processed).toBe(expected)
|
|
247
250
|
})
|
|
248
251
|
|
|
249
252
|
it('8 should replace all properties when white list is empty', function () {
|
|
250
253
|
const rules = '.rule { margin: 16px; font-size: 15px }'
|
|
251
|
-
const expected = '.rule { margin: 0.
|
|
254
|
+
const expected = '.rule { margin: 0.468rem; font-size: 0.43875rem }'
|
|
252
255
|
const options = {
|
|
253
256
|
platform: 'h5',
|
|
254
257
|
designWidth: 640
|
|
255
258
|
// propWhiteList: []
|
|
256
259
|
}
|
|
257
|
-
const processed = postcss(
|
|
260
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
258
261
|
|
|
259
262
|
expect(processed).toBe(expected)
|
|
260
263
|
})
|
|
@@ -265,52 +268,52 @@ describe('selectorBlackList', function () {
|
|
|
265
268
|
it('1 should ignore selectors in the selector black list - legacy',
|
|
266
269
|
function () {
|
|
267
270
|
const rules = '.rule { font-size: 15px } .rule2 { font-size: 15px }'
|
|
268
|
-
const expected = '.rule { font-size: 0.
|
|
271
|
+
const expected = '.rule { font-size: 0.43875rem } .rule2 { font-size: 15px }'
|
|
269
272
|
const options = {
|
|
270
273
|
platform: 'h5',
|
|
271
274
|
designWidth: 640,
|
|
272
275
|
selector_black_list: ['.rule2']
|
|
273
276
|
}
|
|
274
|
-
const processed = postcss(
|
|
277
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
275
278
|
|
|
276
279
|
expect(processed).toBe(expected)
|
|
277
280
|
})
|
|
278
281
|
|
|
279
282
|
it('2 should ignore selectors in the selector black list', function () {
|
|
280
283
|
const rules = '.rule { font-size: 15px } .rule2 { font-size: 15px }'
|
|
281
|
-
const expected = '.rule { font-size: 0.
|
|
284
|
+
const expected = '.rule { font-size: 0.43875rem } .rule2 { font-size: 15px }'
|
|
282
285
|
const options = {
|
|
283
286
|
platform: 'h5',
|
|
284
287
|
designWidth: 640,
|
|
285
288
|
selectorBlackList: ['.rule2']
|
|
286
289
|
}
|
|
287
|
-
const processed = postcss(
|
|
290
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
288
291
|
|
|
289
292
|
expect(processed).toBe(expected)
|
|
290
293
|
})
|
|
291
294
|
|
|
292
295
|
it('3 should ignore every selector with `body$`', function () {
|
|
293
296
|
const rules = 'body { font-size: 16px; } .class-body$ { font-size: 16px; } .simple-class { font-size: 16px; }'
|
|
294
|
-
const expected = 'body { font-size: 0.
|
|
297
|
+
const expected = 'body { font-size: 0.468rem; } .class-body$ { font-size: 16px; } .simple-class { font-size: 0.468rem; }'
|
|
295
298
|
const options = {
|
|
296
299
|
platform: 'h5',
|
|
297
300
|
designWidth: 640,
|
|
298
301
|
selectorBlackList: ['body$']
|
|
299
302
|
}
|
|
300
|
-
const processed = postcss(
|
|
303
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
301
304
|
|
|
302
305
|
expect(processed).toBe(expected)
|
|
303
306
|
})
|
|
304
307
|
|
|
305
308
|
it('4 should only ignore exactly `body`', function () {
|
|
306
309
|
const rules = 'body { font-size: 16px; } .class-body { font-size: 16px; } .simple-class { font-size: 16px; }'
|
|
307
|
-
const expected = 'body { font-size: 16px; } .class-body { font-size: 0.
|
|
310
|
+
const expected = 'body { font-size: 16px; } .class-body { font-size: 0.468rem; } .simple-class { font-size: 0.468rem; }'
|
|
308
311
|
const options = {
|
|
309
312
|
platform: 'h5',
|
|
310
313
|
designWidth: 640,
|
|
311
314
|
selectorBlackList: [/^body$/]
|
|
312
315
|
}
|
|
313
|
-
const processed = postcss(
|
|
316
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
314
317
|
|
|
315
318
|
expect(processed).toBe(expected)
|
|
316
319
|
})
|
|
@@ -323,8 +326,8 @@ describe('replace', function () {
|
|
|
323
326
|
designWidth: 640,
|
|
324
327
|
replace: false
|
|
325
328
|
}
|
|
326
|
-
const processed = postcss(
|
|
327
|
-
const expected = '.rule { font-size: 15px; font-size: 0.
|
|
329
|
+
const processed = postcss(px2rem(options)).process(basicCSS).css
|
|
330
|
+
const expected = '.rule { font-size: 15px; font-size: 0.43875rem }'
|
|
328
331
|
|
|
329
332
|
expect(processed).toBe(expected)
|
|
330
333
|
})
|
|
@@ -338,9 +341,9 @@ describe('mediaQuery', function () {
|
|
|
338
341
|
designWidth: 640,
|
|
339
342
|
media_query: true
|
|
340
343
|
}
|
|
341
|
-
const processed = postcss(
|
|
344
|
+
const processed = postcss(px2rem(options))
|
|
342
345
|
.process('@media (min-width: 500px) { .rule { font-size: 16px } }').css
|
|
343
|
-
const expected = '@media (min-width:
|
|
346
|
+
const expected = '@media (min-width: 14.625rem) { .rule { font-size: 0.468rem } }'
|
|
344
347
|
|
|
345
348
|
expect(processed).toBe(expected)
|
|
346
349
|
})
|
|
@@ -351,9 +354,9 @@ describe('mediaQuery', function () {
|
|
|
351
354
|
designWidth: 640,
|
|
352
355
|
mediaQuery: true
|
|
353
356
|
}
|
|
354
|
-
const processed = postcss(
|
|
357
|
+
const processed = postcss(px2rem(options))
|
|
355
358
|
.process('@media (min-width: 500px) { .rule { font-size: 16px } }').css
|
|
356
|
-
const expected = '@media (min-width:
|
|
359
|
+
const expected = '@media (min-width: 14.625rem) { .rule { font-size: 0.468rem } }'
|
|
357
360
|
|
|
358
361
|
expect(processed).toBe(expected)
|
|
359
362
|
})
|
|
@@ -368,8 +371,8 @@ describe('minPixelValue', function () {
|
|
|
368
371
|
minPixelValue: 2
|
|
369
372
|
}
|
|
370
373
|
const rules = '.rule { border: 1px solid #000; font-size: 16px; margin: 1px 10px; }'
|
|
371
|
-
const expected = '.rule { border: 1px solid #000; font-size: 0.
|
|
372
|
-
const processed = postcss(
|
|
374
|
+
const expected = '.rule { border: 1px solid #000; font-size: 0.468rem; margin: 1px 0.2925rem; }'
|
|
375
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
373
376
|
|
|
374
377
|
expect(processed).toBe(expected)
|
|
375
378
|
})
|
|
@@ -494,7 +497,7 @@ describe('不传任何配置', () => {
|
|
|
494
497
|
it('不传任何配置', function () {
|
|
495
498
|
const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
|
|
496
499
|
const expected = 'h1 {margin: 0 0 20rpx;font-size: 40rpx;line-height: 1.2;}'
|
|
497
|
-
const processed = postcss(
|
|
500
|
+
const processed = postcss(px2rem()).process(rules).css
|
|
498
501
|
|
|
499
502
|
expect(processed).toBe(expected)
|
|
500
503
|
})
|
|
@@ -508,7 +511,7 @@ describe('platform 为 weapp', () => {
|
|
|
508
511
|
platform: 'weapp',
|
|
509
512
|
designWidth: 750
|
|
510
513
|
}
|
|
511
|
-
const processed = postcss(
|
|
514
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
512
515
|
expect(processed).toBe(expected)
|
|
513
516
|
})
|
|
514
517
|
|
|
@@ -519,7 +522,7 @@ describe('platform 为 weapp', () => {
|
|
|
519
522
|
platform: 'weapp',
|
|
520
523
|
designWidth: 640
|
|
521
524
|
}
|
|
522
|
-
const processed = postcss(
|
|
525
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
523
526
|
expect(processed).toBe(expected)
|
|
524
527
|
})
|
|
525
528
|
})
|
|
@@ -527,23 +530,23 @@ describe('platform 为 weapp', () => {
|
|
|
527
530
|
describe('platform 为 h5', () => {
|
|
528
531
|
it('{platform: \'h5\', designWidth: 750} ', () => {
|
|
529
532
|
const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
|
|
530
|
-
const expected = 'h1 {margin: 0 0 0.
|
|
533
|
+
const expected = 'h1 {margin: 0 0 0.5rem;font-size: 1rem;line-height: 1.2;}'
|
|
531
534
|
const options = {
|
|
532
535
|
platform: 'h5',
|
|
533
536
|
designWidth: 750
|
|
534
537
|
}
|
|
535
|
-
const processed = postcss(
|
|
538
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
536
539
|
expect(processed).toBe(expected)
|
|
537
540
|
})
|
|
538
541
|
|
|
539
542
|
it('{platform: \'h5\', designWidth: 640} ', () => {
|
|
540
543
|
const rules = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
|
|
541
|
-
const expected = 'h1 {margin: 0 0 0.
|
|
544
|
+
const expected = 'h1 {margin: 0 0 0.585rem;font-size: 40Px;line-height: 1.2;}'
|
|
542
545
|
const options = {
|
|
543
546
|
platform: 'h5',
|
|
544
547
|
designWidth: 640
|
|
545
548
|
}
|
|
546
|
-
const processed = postcss(
|
|
549
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
547
550
|
expect(processed).toBe(expected)
|
|
548
551
|
})
|
|
549
552
|
})
|
|
@@ -555,7 +558,7 @@ describe('platform 为 h5，文件头部带注释的不转换', () => {
|
|
|
555
558
|
platform: 'h5',
|
|
556
559
|
designWidth: 640
|
|
557
560
|
}
|
|
558
|
-
const processed = postcss(
|
|
561
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
559
562
|
expect(processed).toBe(rules)
|
|
560
563
|
})
|
|
561
564
|
})
|
|
@@ -567,7 +570,7 @@ describe('platform 为 h5，指定 h5 平台保留', () => {
|
|
|
567
570
|
platform: 'h5',
|
|
568
571
|
designWidth: 640
|
|
569
572
|
}
|
|
570
|
-
const processed = postcss(
|
|
573
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
571
574
|
expect(processed).toBe(rules)
|
|
572
575
|
})
|
|
573
576
|
})
|
|
@@ -579,7 +582,7 @@ describe('platform 为 h5，指定平台 rn 平台保留', () => {
|
|
|
579
582
|
platform: 'h5',
|
|
580
583
|
designWidth: 640
|
|
581
584
|
}
|
|
582
|
-
const processed = postcss(
|
|
585
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
583
586
|
expect(processed).toBe('/* #ifdef rn *//* #endif */ .test{}')
|
|
584
587
|
})
|
|
585
588
|
})
|
|
@@ -591,7 +594,7 @@ describe('platform 为 rn，指定平台 h5 rn 平台保留', () => {
|
|
|
591
594
|
platform: 'rn',
|
|
592
595
|
designWidth: 640
|
|
593
596
|
}
|
|
594
|
-
const processed = postcss(
|
|
597
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
595
598
|
expect(processed).toBe(rules)
|
|
596
599
|
})
|
|
597
600
|
})
|
|
@@ -603,7 +606,7 @@ describe('platform 为 h5，指定平台 rn 平台剔除', () => {
|
|
|
603
606
|
platform: 'h5',
|
|
604
607
|
designWidth: 640
|
|
605
608
|
}
|
|
606
|
-
const processed = postcss(
|
|
609
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
607
610
|
expect(processed).toBe(rules)
|
|
608
611
|
})
|
|
609
612
|
})
|
|
@@ -615,7 +618,28 @@ describe('platform 为 h5，指定平台 h5 平台剔除', () => {
|
|
|
615
618
|
platform: 'h5',
|
|
616
619
|
designWidth: 640
|
|
617
620
|
}
|
|
618
|
-
const processed = postcss(
|
|
621
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
619
622
|
expect(processed).toBe('/* #ifndef h5 *//* #endif */ .test{}')
|
|
620
623
|
})
|
|
621
624
|
})
|
|
625
|
+
|
|
626
|
+
describe('rpx 单位转换', () => {
|
|
627
|
+
it('{platform: \'weapp\', designWidth: 640} ', () => {
|
|
628
|
+
const rules = 'h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}'
|
|
629
|
+
const options = {
|
|
630
|
+
platform: 'weapp',
|
|
631
|
+
designWidth: 640
|
|
632
|
+
}
|
|
633
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
634
|
+
expect(processed).toBe('h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}')
|
|
635
|
+
})
|
|
636
|
+
it('{platform: \'h5\', designWidth: 640} ', () => {
|
|
637
|
+
const rules = 'h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}'
|
|
638
|
+
const options = {
|
|
639
|
+
platform: 'h5',
|
|
640
|
+
designWidth: 640
|
|
641
|
+
}
|
|
642
|
+
const processed = postcss(px2rem(options)).process(rules).css
|
|
643
|
+
expect(processed).toBe('h1 {margin: 0 0 0.2925rem;font-size: 40Px;line-height: 1.2;} .test{}')
|
|
644
|
+
})
|
|
645
|
+
})
|
package/index.js
CHANGED
|
@@ -29,8 +29,6 @@ const deviceRatio = {
|
|
|
29
29
|
828: 1.81 / 2
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
const baseFontSize = 40
|
|
33
|
-
|
|
34
32
|
const DEFAULT_WEAPP_OPTIONS = {
|
|
35
33
|
platform: 'weapp',
|
|
36
34
|
designWidth: 750,
|
|
@@ -42,15 +40,18 @@ let targetUnit
|
|
|
42
40
|
module.exports = postcss.plugin('postcss-pxtransform', function (options = {}) {
|
|
43
41
|
options = Object.assign({}, DEFAULT_WEAPP_OPTIONS, options)
|
|
44
42
|
|
|
45
|
-
const
|
|
46
|
-
const designWidth = input =>
|
|
43
|
+
const transUnits = ['px']
|
|
44
|
+
const designWidth = input => typeof options.designWidth === 'function'
|
|
47
45
|
? options.designWidth(input)
|
|
48
46
|
: options.designWidth
|
|
49
|
-
|
|
50
47
|
switch (options.platform) {
|
|
51
48
|
case 'h5': {
|
|
52
|
-
options.rootValue = input
|
|
49
|
+
options.rootValue = (input, m) => {
|
|
50
|
+
const val = Math.max(Math.min(1 / options.deviceRatio[designWidth(input)] * (designWidth(input) / 16), options.max ?? 40), options.mix ?? 20)
|
|
51
|
+
return m.indexOf('rpx') >= 0 ? val / 0.5 : val
|
|
52
|
+
}
|
|
53
53
|
targetUnit = 'rem'
|
|
54
|
+
transUnits.push('rpx')
|
|
54
55
|
break
|
|
55
56
|
}
|
|
56
57
|
case 'rn': {
|
|
@@ -74,6 +75,7 @@ module.exports = postcss.plugin('postcss-pxtransform', function (options = {}) {
|
|
|
74
75
|
|
|
75
76
|
const opts = Object.assign({}, defaults, options)
|
|
76
77
|
const onePxTransform = typeof options.onePxTransform === 'undefined' ? true : options.onePxTransform
|
|
78
|
+
const pxRgx = pxRegex(transUnits)
|
|
77
79
|
|
|
78
80
|
const satisfyPropList = createPropListMatcher(opts.propList)
|
|
79
81
|
|
|
@@ -157,10 +159,9 @@ module.exports = postcss.plugin('postcss-pxtransform', function (options = {}) {
|
|
|
157
159
|
|
|
158
160
|
if (!satisfyPropList(decl.prop)) return
|
|
159
161
|
|
|
160
|
-
if (blacklistedSelector(opts.selectorBlackList,
|
|
161
|
-
decl.parent.selector)) return
|
|
162
|
+
if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return
|
|
162
163
|
|
|
163
|
-
const value = decl.value.replace(
|
|
164
|
+
const value = decl.value.replace(pxRgx, pxReplace)
|
|
164
165
|
|
|
165
166
|
// if rem unit already exists, do not add or replace
|
|
166
167
|
if (declarationExists(decl.parent, decl.prop, value)) return
|
|
@@ -175,7 +176,7 @@ module.exports = postcss.plugin('postcss-pxtransform', function (options = {}) {
|
|
|
175
176
|
if (opts.mediaQuery) {
|
|
176
177
|
css.walkAtRules('media', function (rule) {
|
|
177
178
|
if (rule.params.indexOf('px') === -1) return
|
|
178
|
-
rule.params = rule.params.replace(
|
|
179
|
+
rule.params = rule.params.replace(pxRgx, pxReplace)
|
|
179
180
|
})
|
|
180
181
|
}
|
|
181
182
|
}
|
|
@@ -213,7 +214,7 @@ function createPxReplace (rootValue, unitPrecision, minPixelValue, onePxTransfor
|
|
|
213
214
|
}
|
|
214
215
|
const pixels = parseFloat($1)
|
|
215
216
|
if (pixels < minPixelValue) return m
|
|
216
|
-
const fixedVal = toFixed((pixels / rootValue(input)), unitPrecision)
|
|
217
|
+
const fixedVal = toFixed((pixels / rootValue(input, m, $1)), unitPrecision)
|
|
217
218
|
return (fixedVal === 0) ? '0' : fixedVal + targetUnit
|
|
218
219
|
}
|
|
219
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-beta.
|
|
3
|
+
"version": "3.5.0-beta.4",
|
|
4
4
|
"description": "PostCSS plugin px 转小程序 rpx及h5 rem 单位",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"postcss",
|
|
@@ -28,5 +28,5 @@
|
|
|
28
28
|
"testEnvironment": "node"
|
|
29
29
|
},
|
|
30
30
|
"main": "index.js",
|
|
31
|
-
"gitHead": "
|
|
31
|
+
"gitHead": "7aca7841ed7e2af1b182ff5d24e91f44730ce783"
|
|
32
32
|
}
|