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