postcss-pxtransform 4.0.1 → 4.0.2
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/LICENSE +8 -8
- package/index.js +71 -41
- package/package.json +11 -9
- package/__tests__/index.test.js +0 -870
package/LICENSE
CHANGED
|
@@ -154,15 +154,8 @@ See `/LICENSE` for details of the license.
|
|
|
154
154
|
|
|
155
155
|
==================
|
|
156
156
|
|
|
157
|
-
MIT (stencil-vue2-output-target):
|
|
158
|
-
The following files embed [stencil-vue2-output-target](https://github.com/diondree/stencil-vue2-output-target) MIT:
|
|
159
|
-
`/packages/taro-components-library-vue2/src/vue-component-lib/utils.ts`
|
|
160
|
-
See `/LICENSE` for details of the license.
|
|
161
|
-
|
|
162
|
-
==================
|
|
163
|
-
|
|
164
157
|
MIT (weui):
|
|
165
|
-
The following files embed [
|
|
158
|
+
The following files embed [weui](https://github.com/Tencent/weui) MIT:
|
|
166
159
|
`/packages/taro-components/src/components/*.scss`
|
|
167
160
|
See `/LICENSE.txt` for details of the license.
|
|
168
161
|
|
|
@@ -172,3 +165,10 @@ Apache-2.0 (intersection-observer):
|
|
|
172
165
|
The following files embed [intersection-observer](https://github.com/GoogleChromeLabs/intersection-observer) Apache-2.0:
|
|
173
166
|
`/packages/taro-api/src/polyfill/intersection-observer.ts`
|
|
174
167
|
See `/LICENSE.txt` for details of the license.
|
|
168
|
+
|
|
169
|
+
==================
|
|
170
|
+
|
|
171
|
+
MIT (babel-plugin-jsx-dom-expressions):
|
|
172
|
+
The following files embed [babel-plugin-jsx-dom-expressions](https://github.com/ryansolid/dom-expressions/blob/main/packages/babel-plugin-jsx-dom-expressions) MIT:
|
|
173
|
+
`/packages/babel-plugin-transform-solid-jsx/src/*`
|
|
174
|
+
See `/LICENSE` for details of the license.
|
package/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
const pxRegex = require('./lib/pixel-unit-regex')
|
|
2
|
-
const PXRegex = require('./lib/pixel-upper-unit-regex')
|
|
3
2
|
const filterPropList = require('./lib/filter-prop-list')
|
|
4
3
|
|
|
5
4
|
const defaults = {
|
|
5
|
+
methods: ['platform', 'size'],
|
|
6
6
|
rootValue: 16,
|
|
7
7
|
unitPrecision: 5,
|
|
8
8
|
selectorBlackList: [],
|
|
@@ -36,32 +36,41 @@ const DEFAULT_WEAPP_OPTIONS = {
|
|
|
36
36
|
|
|
37
37
|
const processed = Symbol('processed')
|
|
38
38
|
|
|
39
|
-
|
|
40
39
|
let targetUnit
|
|
41
40
|
|
|
41
|
+
const SPECIAL_PIXEL = ['Px', 'PX', 'pX']
|
|
42
|
+
let unConvertTargetUnit
|
|
43
|
+
let platform
|
|
44
|
+
|
|
42
45
|
module.exports = (options = {}) => {
|
|
43
46
|
options = Object.assign({}, DEFAULT_WEAPP_OPTIONS, options)
|
|
44
|
-
|
|
47
|
+
const exclude = options.exclude
|
|
45
48
|
const transUnits = ['px']
|
|
46
49
|
const baseFontSize = options.baseFontSize || (options.minRootSize >= 1 ? options.minRootSize : 20)
|
|
47
50
|
const designWidth = (input) =>
|
|
48
51
|
typeof options.designWidth === 'function' ? options.designWidth(input) : options.designWidth
|
|
49
52
|
|
|
53
|
+
platform = options.platform
|
|
50
54
|
switch (options.platform) {
|
|
51
55
|
case 'h5': {
|
|
52
56
|
targetUnit = options.targetUnit ?? 'rem'
|
|
53
57
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
58
|
+
switch (targetUnit) {
|
|
59
|
+
case 'vw':
|
|
60
|
+
case 'vmin':
|
|
61
|
+
options.rootValue = (input) => {
|
|
62
|
+
return designWidth(input) / 100
|
|
63
|
+
}
|
|
64
|
+
break
|
|
65
|
+
case 'px':
|
|
66
|
+
options.rootValue = (input) => (1 / options.deviceRatio[designWidth(input)]) * 2
|
|
67
|
+
break
|
|
68
|
+
default:
|
|
69
|
+
// rem
|
|
70
|
+
options.rootValue = (input) => {
|
|
71
|
+
return (baseFontSize / options.deviceRatio[designWidth(input)]) * 2
|
|
72
|
+
}
|
|
73
|
+
break
|
|
65
74
|
}
|
|
66
75
|
|
|
67
76
|
transUnits.push('rpx')
|
|
@@ -80,6 +89,8 @@ module.exports = (options = {}) => {
|
|
|
80
89
|
case 'harmony': {
|
|
81
90
|
options.rootValue = (input) => 1 / options.deviceRatio[designWidth(input)]
|
|
82
91
|
targetUnit = 'px'
|
|
92
|
+
unConvertTargetUnit = 'ch' // harmony对于大小写的PX转换成其他单位,用于rust解析
|
|
93
|
+
transUnits.push(...SPECIAL_PIXEL)
|
|
83
94
|
break
|
|
84
95
|
}
|
|
85
96
|
default: {
|
|
@@ -118,6 +129,10 @@ module.exports = (options = {}) => {
|
|
|
118
129
|
/** 是否跳过当前文件不处理 */
|
|
119
130
|
let skip = false
|
|
120
131
|
|
|
132
|
+
if (exclude && exclude?.(result.opts.from)) {
|
|
133
|
+
return null
|
|
134
|
+
}
|
|
135
|
+
|
|
121
136
|
return {
|
|
122
137
|
// 注意:钩子在节点变动时会重新执行,Once,OnceExit只执行一次,https://github.com/NervJS/taro/issues/13238
|
|
123
138
|
Comment (comment) {
|
|
@@ -126,6 +141,8 @@ module.exports = (options = {}) => {
|
|
|
126
141
|
return
|
|
127
142
|
}
|
|
128
143
|
|
|
144
|
+
if (!opts.methods.includes('platform')) return
|
|
145
|
+
|
|
129
146
|
// delete code between comment in RN
|
|
130
147
|
// 有死循环的问题
|
|
131
148
|
if (options.platform === 'rn') {
|
|
@@ -183,47 +200,46 @@ module.exports = (options = {}) => {
|
|
|
183
200
|
},
|
|
184
201
|
Declaration (decl) {
|
|
185
202
|
if (skip) return
|
|
203
|
+
if (!opts.methods.includes('size')) return
|
|
186
204
|
|
|
187
205
|
if (decl[processed]) return
|
|
188
206
|
|
|
189
207
|
// 标记当前 node 已处理
|
|
190
208
|
decl[processed] = true
|
|
191
209
|
|
|
192
|
-
if (
|
|
193
|
-
if (decl.value.indexOf('PX') === -1) return
|
|
194
|
-
const value = decl.value.replace(PXRegex, function (m, _$1, $2) {
|
|
195
|
-
return m.replace($2, 'vp')
|
|
196
|
-
})
|
|
197
|
-
decl.value = value
|
|
198
|
-
} else {
|
|
199
|
-
if (decl.value.indexOf('px') === -1) return
|
|
210
|
+
if (!/px/i.test(decl.value)) return
|
|
200
211
|
|
|
201
|
-
|
|
212
|
+
if (!satisfyPropList(decl.prop)) return
|
|
202
213
|
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
214
|
+
const isBlacklisted = blacklistedSelector(opts.selectorBlackList, decl.parent.selector)
|
|
215
|
+
if (isBlacklisted && platform !== 'harmony') return
|
|
216
|
+
let value
|
|
217
|
+
if (isBlacklisted) {
|
|
218
|
+
// 如果是harmony平台,黑名单的样式单位做特殊处理
|
|
219
|
+
if (platform === 'harmony') {
|
|
220
|
+
value = decl.value.replace(pxRgx, (m, $1) => $1 ? $1 + unConvertTargetUnit : m)
|
|
209
221
|
} else {
|
|
210
|
-
|
|
222
|
+
// 如果是其他平台,黑名单的样式单位不做处理
|
|
223
|
+
return
|
|
211
224
|
}
|
|
225
|
+
} else {
|
|
226
|
+
value = decl.value.replace(pxRgx, pxReplace)
|
|
227
|
+
}
|
|
228
|
+
// if rem unit already exists, do not add or replace
|
|
229
|
+
if (declarationExists(decl.parent, decl.prop, value)) return
|
|
230
|
+
if (opts.replace) {
|
|
231
|
+
decl.value = value
|
|
232
|
+
} else {
|
|
233
|
+
decl.cloneAfter({ value: value })
|
|
212
234
|
}
|
|
213
235
|
},
|
|
214
236
|
AtRule: {
|
|
215
237
|
media: (rule) => {
|
|
216
238
|
if (skip) return
|
|
217
|
-
if (
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
})
|
|
222
|
-
rule.params = value
|
|
223
|
-
} else {
|
|
224
|
-
if (rule.params.indexOf('px') === -1) return
|
|
225
|
-
rule.params = rule.params.replace(pxRgx, pxReplace)
|
|
226
|
-
}
|
|
239
|
+
if (!opts.methods.includes('size')) return
|
|
240
|
+
|
|
241
|
+
if (!/px/i.test(rule.params)) return
|
|
242
|
+
rule.params = rule.params.replace(pxRgx, pxReplace)
|
|
227
243
|
},
|
|
228
244
|
},
|
|
229
245
|
}
|
|
@@ -255,14 +271,28 @@ function convertLegacyOptions (options) {
|
|
|
255
271
|
}
|
|
256
272
|
|
|
257
273
|
function createPxReplace (rootValue, unitPrecision, minPixelValue, onePxTransform) {
|
|
274
|
+
const specialPxRgx = pxRegex(SPECIAL_PIXEL)
|
|
258
275
|
return function (input) {
|
|
259
276
|
return function (m, $1) {
|
|
260
277
|
if (!$1) return m
|
|
278
|
+
|
|
279
|
+
if (platform === 'harmony' && specialPxRgx.test(m)) {
|
|
280
|
+
// harmony对大小写的PX转换成其他单位,用于rust解析
|
|
281
|
+
return $1 + unConvertTargetUnit
|
|
282
|
+
}
|
|
283
|
+
|
|
261
284
|
if (!onePxTransform && parseInt($1, 10) === 1) {
|
|
285
|
+
if (platform === 'harmony') { return $1 + unConvertTargetUnit }
|
|
262
286
|
return m
|
|
263
287
|
}
|
|
264
288
|
const pixels = parseFloat($1)
|
|
265
|
-
if (pixels < minPixelValue)
|
|
289
|
+
if (pixels < minPixelValue) {
|
|
290
|
+
if (platform === 'harmony') { return $1 + unConvertTargetUnit }
|
|
291
|
+
return m
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
// 转换工作,如果是harmony的话不转换
|
|
295
|
+
if (platform === 'harmony') { return m }
|
|
266
296
|
let val = pixels / rootValue(input, m, $1)
|
|
267
297
|
if (unitPrecision >= 0 && unitPrecision <= 100) {
|
|
268
298
|
val = toFixed(val, unitPrecision)
|
package/package.json
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "postcss-pxtransform",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.2",
|
|
4
4
|
"description": "PostCSS plugin px 转小程序 rpx及h5 rem 单位",
|
|
5
|
+
"author": "O2Team",
|
|
6
|
+
"license": "MIT",
|
|
5
7
|
"main": "index.js",
|
|
6
8
|
"keywords": [
|
|
7
9
|
"postcss",
|
|
@@ -9,8 +11,10 @@
|
|
|
9
11
|
"postcss-plugin",
|
|
10
12
|
"pxtransform"
|
|
11
13
|
],
|
|
12
|
-
"
|
|
13
|
-
|
|
14
|
+
"files": [
|
|
15
|
+
"lib",
|
|
16
|
+
"index.js"
|
|
17
|
+
],
|
|
14
18
|
"repository": {
|
|
15
19
|
"type": "git",
|
|
16
20
|
"url": "git+https://github.com/NervJS/taro.git"
|
|
@@ -18,18 +22,16 @@
|
|
|
18
22
|
"bugs": {
|
|
19
23
|
"url": "https://github.com/NervJS/taro/issues"
|
|
20
24
|
},
|
|
21
|
-
"homepage": "https://github.com/NervJS/taro/tree/
|
|
25
|
+
"homepage": "https://github.com/NervJS/taro/tree/main/packages/postcss-pxtransform#readme",
|
|
22
26
|
"jest": {
|
|
23
27
|
"testEnvironment": "node",
|
|
24
28
|
"testEnvironmentOptions": {}
|
|
25
29
|
},
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"jest-cli": "^29.3.1",
|
|
29
|
-
"postcss": "^8.4.18"
|
|
30
|
+
"engines": {
|
|
31
|
+
"node": ">= 18"
|
|
30
32
|
},
|
|
31
33
|
"peerDependencies": {
|
|
32
|
-
"postcss": "^8
|
|
34
|
+
"postcss": "^8"
|
|
33
35
|
},
|
|
34
36
|
"scripts": {
|
|
35
37
|
"test": "jest"
|
package/__tests__/index.test.js
DELETED
|
@@ -1,870 +0,0 @@
|
|
|
1
|
-
'use strict'
|
|
2
|
-
const postcss = require('postcss')
|
|
3
|
-
const px2rem = require('../index')
|
|
4
|
-
|
|
5
|
-
const basicCSS = '.rule { font-size: 15px }'
|
|
6
|
-
const filterPropList = require('../lib/filter-prop-list')
|
|
7
|
-
|
|
8
|
-
describe('px2rem', function () {
|
|
9
|
-
it('1 should work on the readme example', function () {
|
|
10
|
-
const input = 'h1 { margin: 0 0 20px; font-size: 32px; line-height: 1.2; letter-spacing: 1px; }'
|
|
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 }))
|
|
13
|
-
.process(input).css
|
|
14
|
-
|
|
15
|
-
expect(processed).toBe(output)
|
|
16
|
-
})
|
|
17
|
-
|
|
18
|
-
it('2 should replace the px unit with rem', function () {
|
|
19
|
-
const processed = postcss(px2rem({ platform: 'h5', designWidth: 640 }))
|
|
20
|
-
.process(basicCSS).css
|
|
21
|
-
const expected = '.rule { font-size: 0.43875rem }'
|
|
22
|
-
|
|
23
|
-
expect(processed).toBe(expected)
|
|
24
|
-
})
|
|
25
|
-
|
|
26
|
-
it('3 should ignore non px properties', function () {
|
|
27
|
-
const expected = '.rule { font-size: 2em }'
|
|
28
|
-
const processed = postcss(px2rem({ platform: 'h5', designWidth: 640 }))
|
|
29
|
-
.process(expected).css
|
|
30
|
-
|
|
31
|
-
expect(processed).toBe(expected)
|
|
32
|
-
})
|
|
33
|
-
|
|
34
|
-
it('4 should handle < 1 values and values without a leading 0 - legacy',
|
|
35
|
-
function () {
|
|
36
|
-
const rules = '.rule { margin: 0.5rem .5px -0.2px -.2em }'
|
|
37
|
-
const expected = '.rule { margin: 0.5rem 0.01463rem -0.00585rem -.2em }'
|
|
38
|
-
const options = {
|
|
39
|
-
platform: 'h5',
|
|
40
|
-
designWidth: 640,
|
|
41
|
-
propWhiteList: ['margin']
|
|
42
|
-
}
|
|
43
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
44
|
-
|
|
45
|
-
expect(processed).toBe(expected)
|
|
46
|
-
})
|
|
47
|
-
|
|
48
|
-
it('5 should handle < 1 values and values without a leading 0', function () {
|
|
49
|
-
const rules = '.rule { margin: 0.5rem .5px -0.2px -.2em }'
|
|
50
|
-
const expected = '.rule { margin: 0.5rem 0.01463rem -0.00585rem -.2em }'
|
|
51
|
-
const options = {
|
|
52
|
-
platform: 'h5',
|
|
53
|
-
designWidth: 640,
|
|
54
|
-
propList: ['margin']
|
|
55
|
-
}
|
|
56
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
57
|
-
|
|
58
|
-
expect(processed).toBe(expected)
|
|
59
|
-
})
|
|
60
|
-
|
|
61
|
-
it('6 should not add properties that already exist', function () {
|
|
62
|
-
const expected = '.rule { font-size: 40px; font-size: 1rem; }'
|
|
63
|
-
const processed = postcss(px2rem({ platform: 'h5', designWidth: 750 }))
|
|
64
|
-
.process(expected).css
|
|
65
|
-
|
|
66
|
-
expect(processed).toBe(expected)
|
|
67
|
-
})
|
|
68
|
-
|
|
69
|
-
it('7 属性值为"0"时不处理,为"0px"时仍然单位转换', function () {
|
|
70
|
-
const rule = '.rule { font-size: 0px; font-size: 0; }'
|
|
71
|
-
const expected = '.rule { font-size: 0rpx; font-size: 0; }'
|
|
72
|
-
const processed = postcss(px2rem()).process(rule).css
|
|
73
|
-
|
|
74
|
-
expect(processed).toBe(expected)
|
|
75
|
-
})
|
|
76
|
-
|
|
77
|
-
it('8 should work on custom baseFontSize', function () {
|
|
78
|
-
const processed = postcss(px2rem({ platform: 'h5', baseFontSize: 15 })).process(basicCSS).css
|
|
79
|
-
const expected = '.rule { font-size: 0.5rem }'
|
|
80
|
-
|
|
81
|
-
expect(processed).toBe(expected)
|
|
82
|
-
})
|
|
83
|
-
})
|
|
84
|
-
|
|
85
|
-
describe('value parsing', function () {
|
|
86
|
-
it('1 should not replace values in double quotes or single quotes - legacy',
|
|
87
|
-
function () {
|
|
88
|
-
const options = {
|
|
89
|
-
platform: 'h5',
|
|
90
|
-
designWidth: 640
|
|
91
|
-
// propWhiteList: []
|
|
92
|
-
}
|
|
93
|
-
const rules = '.rule { content: \'16px\'; font-family: "16px"; font-size: 16px; }'
|
|
94
|
-
const expected = '.rule { content: \'16px\'; font-family: "16px"; font-size: 0.468rem; }'
|
|
95
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
96
|
-
|
|
97
|
-
expect(processed).toBe(expected)
|
|
98
|
-
})
|
|
99
|
-
|
|
100
|
-
it('2 should not replace values in double quotes or single quotes',
|
|
101
|
-
function () {
|
|
102
|
-
const options = {
|
|
103
|
-
platform: 'h5',
|
|
104
|
-
designWidth: 640,
|
|
105
|
-
propList: ['*']
|
|
106
|
-
}
|
|
107
|
-
const rules = '.rule { content: \'16px\'; font-family: "16px"; font-size: 16px; }'
|
|
108
|
-
const expected = '.rule { content: \'16px\'; font-family: "16px"; font-size: 0.468rem; }'
|
|
109
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
110
|
-
|
|
111
|
-
expect(processed).toBe(expected)
|
|
112
|
-
})
|
|
113
|
-
|
|
114
|
-
it('3 should not replace values in `url()` - legacy', function () {
|
|
115
|
-
const options = {
|
|
116
|
-
platform: 'h5',
|
|
117
|
-
designWidth: 640
|
|
118
|
-
// propWhiteList: []
|
|
119
|
-
}
|
|
120
|
-
const rules = '.rule { background: url(16px.jpg); font-size: 16px; }'
|
|
121
|
-
const expected = '.rule { background: url(16px.jpg); font-size: 0.468rem; }'
|
|
122
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
123
|
-
|
|
124
|
-
expect(processed).toBe(expected)
|
|
125
|
-
})
|
|
126
|
-
|
|
127
|
-
it('4 should not replace values in `url()`', function () {
|
|
128
|
-
const options = {
|
|
129
|
-
platform: 'h5',
|
|
130
|
-
designWidth: 640,
|
|
131
|
-
propList: ['*']
|
|
132
|
-
}
|
|
133
|
-
const rules = '.rule { background: url(16px.jpg); font-size: 16px; }'
|
|
134
|
-
const expected = '.rule { background: url(16px.jpg); font-size: 0.468rem; }'
|
|
135
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
136
|
-
|
|
137
|
-
expect(processed).toBe(expected)
|
|
138
|
-
})
|
|
139
|
-
|
|
140
|
-
it('5 should not replace values with an uppercase P or X', function () {
|
|
141
|
-
const options = {
|
|
142
|
-
platform: 'h5',
|
|
143
|
-
designWidth: 640,
|
|
144
|
-
propList: ['*']
|
|
145
|
-
}
|
|
146
|
-
const rules = '.rule { margin: 12px calc(100% - 14PX); height: calc(100% - 20px); font-size: 12Px; line-height: 16px; }'
|
|
147
|
-
const expected = '.rule { margin: 0.351rem calc(100% - 14PX); height: calc(100% - 0.585rem); font-size: 12Px; line-height: 0.468rem; }'
|
|
148
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
149
|
-
|
|
150
|
-
expect(processed).toBe(expected)
|
|
151
|
-
})
|
|
152
|
-
})
|
|
153
|
-
|
|
154
|
-
describe('unitPrecision', function () {
|
|
155
|
-
// Deprecate
|
|
156
|
-
it('1 should replace using a decimal of 2 places - legacy', function () {
|
|
157
|
-
const expected = '.rule { font-size: 0.44rem }'
|
|
158
|
-
const options = {
|
|
159
|
-
platform: 'h5',
|
|
160
|
-
designWidth: 640,
|
|
161
|
-
unit_precision: 2
|
|
162
|
-
}
|
|
163
|
-
const processed = postcss(px2rem(options)).process(basicCSS).css
|
|
164
|
-
|
|
165
|
-
expect(processed).toBe(expected)
|
|
166
|
-
})
|
|
167
|
-
|
|
168
|
-
it('2 should replace using a decimal of 2 places', function () {
|
|
169
|
-
const expected = '.rule { font-size: 0.44rem }'
|
|
170
|
-
const options = {
|
|
171
|
-
platform: 'h5',
|
|
172
|
-
designWidth: 640,
|
|
173
|
-
unitPrecision: 2
|
|
174
|
-
}
|
|
175
|
-
const processed = postcss(px2rem(options)).process(basicCSS).css
|
|
176
|
-
|
|
177
|
-
expect(processed).toBe(expected)
|
|
178
|
-
})
|
|
179
|
-
})
|
|
180
|
-
|
|
181
|
-
describe('propWhiteList', function () {
|
|
182
|
-
// Deprecate
|
|
183
|
-
it('3 should only replace properties in the white list - legacy',
|
|
184
|
-
function () {
|
|
185
|
-
const expected = '.rule { font-size: 15px }'
|
|
186
|
-
const options = {
|
|
187
|
-
platform: 'h5',
|
|
188
|
-
designWidth: 640,
|
|
189
|
-
prop_white_list: ['font']
|
|
190
|
-
}
|
|
191
|
-
const processed = postcss(px2rem(options)).process(basicCSS).css
|
|
192
|
-
|
|
193
|
-
expect(processed).toBe(expected)
|
|
194
|
-
})
|
|
195
|
-
|
|
196
|
-
it('4 should only replace properties in the white list - legacy',
|
|
197
|
-
function () {
|
|
198
|
-
const expected = '.rule { font-size: 15px }'
|
|
199
|
-
const options = {
|
|
200
|
-
platform: 'h5',
|
|
201
|
-
designWidth: 640,
|
|
202
|
-
propWhiteList: ['font']
|
|
203
|
-
}
|
|
204
|
-
const processed = postcss(px2rem(options)).process(basicCSS).css
|
|
205
|
-
|
|
206
|
-
expect(processed).toBe(expected)
|
|
207
|
-
})
|
|
208
|
-
|
|
209
|
-
it('5 should only replace properties in the white list - legacy',
|
|
210
|
-
function () {
|
|
211
|
-
const css = '.rule { margin: 16px; margin-left: 10px }'
|
|
212
|
-
const expected = '.rule { margin: 0.468rem; margin-left: 10px }'
|
|
213
|
-
const options = {
|
|
214
|
-
platform: 'h5',
|
|
215
|
-
designWidth: 640,
|
|
216
|
-
propWhiteList: ['margin']
|
|
217
|
-
}
|
|
218
|
-
const processed = postcss(px2rem(options)).process(css).css
|
|
219
|
-
|
|
220
|
-
expect(processed).toBe(expected)
|
|
221
|
-
})
|
|
222
|
-
|
|
223
|
-
it('6 should only replace properties in the prop list', function () {
|
|
224
|
-
const css = '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }'
|
|
225
|
-
const expected = '.rule { font-size: 0.468rem; margin: 0.468rem; margin-left: 5px; padding: 5px; padding-right: 0.468rem }'
|
|
226
|
-
const options = {
|
|
227
|
-
platform: 'h5',
|
|
228
|
-
designWidth: 640,
|
|
229
|
-
propWhiteList: ['*font*', 'margin*', '!margin-left', '*-right', 'pad']
|
|
230
|
-
}
|
|
231
|
-
const processed = postcss(px2rem(options)).process(css).css
|
|
232
|
-
|
|
233
|
-
expect(processed).toBe(expected)
|
|
234
|
-
})
|
|
235
|
-
|
|
236
|
-
it('7 should only replace properties in the prop list with wildcard',
|
|
237
|
-
function () {
|
|
238
|
-
const css = '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }'
|
|
239
|
-
const expected = '.rule { font-size: 16px; margin: 0.468rem; margin-left: 5px; padding: 5px; padding-right: 16px }'
|
|
240
|
-
const options = {
|
|
241
|
-
platform: 'h5',
|
|
242
|
-
designWidth: 640,
|
|
243
|
-
propWhiteList: ['*', '!margin-left', '!*padding*', '!font*']
|
|
244
|
-
}
|
|
245
|
-
const processed = postcss(px2rem(options)).process(css).css
|
|
246
|
-
|
|
247
|
-
expect(processed).toBe(expected)
|
|
248
|
-
})
|
|
249
|
-
|
|
250
|
-
it('8 should replace all properties when white list is empty', function () {
|
|
251
|
-
const rules = '.rule { margin: 16px; font-size: 15px }'
|
|
252
|
-
const expected = '.rule { margin: 0.468rem; font-size: 0.43875rem }'
|
|
253
|
-
const options = {
|
|
254
|
-
platform: 'h5',
|
|
255
|
-
designWidth: 640
|
|
256
|
-
// propWhiteList: []
|
|
257
|
-
}
|
|
258
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
259
|
-
|
|
260
|
-
expect(processed).toBe(expected)
|
|
261
|
-
})
|
|
262
|
-
})
|
|
263
|
-
|
|
264
|
-
describe('selectorBlackList', function () {
|
|
265
|
-
// Deprecate
|
|
266
|
-
it('1 should ignore selectors in the selector black list - legacy',
|
|
267
|
-
function () {
|
|
268
|
-
const rules = '.rule { font-size: 15px } .rule2 { font-size: 15px }'
|
|
269
|
-
const expected = '.rule { font-size: 0.43875rem } .rule2 { font-size: 15px }'
|
|
270
|
-
const options = {
|
|
271
|
-
platform: 'h5',
|
|
272
|
-
designWidth: 640,
|
|
273
|
-
selector_black_list: ['.rule2']
|
|
274
|
-
}
|
|
275
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
276
|
-
|
|
277
|
-
expect(processed).toBe(expected)
|
|
278
|
-
})
|
|
279
|
-
|
|
280
|
-
it('2 should ignore selectors in the selector black list', function () {
|
|
281
|
-
const rules = '.rule { font-size: 15px } .rule2 { font-size: 15px }'
|
|
282
|
-
const expected = '.rule { font-size: 0.43875rem } .rule2 { font-size: 15px }'
|
|
283
|
-
const options = {
|
|
284
|
-
platform: 'h5',
|
|
285
|
-
designWidth: 640,
|
|
286
|
-
selectorBlackList: ['.rule2']
|
|
287
|
-
}
|
|
288
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
289
|
-
|
|
290
|
-
expect(processed).toBe(expected)
|
|
291
|
-
})
|
|
292
|
-
|
|
293
|
-
it('3 should ignore every selector with `body$`', function () {
|
|
294
|
-
const rules = 'body { font-size: 16px; } .class-body$ { font-size: 16px; } .simple-class { font-size: 16px; }'
|
|
295
|
-
const expected = 'body { font-size: 0.468rem; } .class-body$ { font-size: 16px; } .simple-class { font-size: 0.468rem; }'
|
|
296
|
-
const options = {
|
|
297
|
-
platform: 'h5',
|
|
298
|
-
designWidth: 640,
|
|
299
|
-
selectorBlackList: ['body$']
|
|
300
|
-
}
|
|
301
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
302
|
-
|
|
303
|
-
expect(processed).toBe(expected)
|
|
304
|
-
})
|
|
305
|
-
|
|
306
|
-
it('4 should only ignore exactly `body`', function () {
|
|
307
|
-
const rules = 'body { font-size: 16px; } .class-body { font-size: 16px; } .simple-class { font-size: 16px; }'
|
|
308
|
-
const expected = 'body { font-size: 16px; } .class-body { font-size: 0.468rem; } .simple-class { font-size: 0.468rem; }'
|
|
309
|
-
const options = {
|
|
310
|
-
platform: 'h5',
|
|
311
|
-
designWidth: 640,
|
|
312
|
-
selectorBlackList: [/^body$/]
|
|
313
|
-
}
|
|
314
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
315
|
-
|
|
316
|
-
expect(processed).toBe(expected)
|
|
317
|
-
})
|
|
318
|
-
})
|
|
319
|
-
|
|
320
|
-
describe('replace', function () {
|
|
321
|
-
it('1 should leave fallback pixel unit with root em value', function () {
|
|
322
|
-
const options = {
|
|
323
|
-
platform: 'h5',
|
|
324
|
-
designWidth: 640,
|
|
325
|
-
replace: false
|
|
326
|
-
}
|
|
327
|
-
const processed = postcss(px2rem(options)).process(basicCSS).css
|
|
328
|
-
const expected = '.rule { font-size: 15px; font-size: 0.43875rem }'
|
|
329
|
-
|
|
330
|
-
expect(processed).toBe(expected)
|
|
331
|
-
})
|
|
332
|
-
})
|
|
333
|
-
|
|
334
|
-
describe('mediaQuery', function () {
|
|
335
|
-
// Deprecate
|
|
336
|
-
it('1 should replace px in media queries', function () {
|
|
337
|
-
const options = {
|
|
338
|
-
platform: 'h5',
|
|
339
|
-
designWidth: 640,
|
|
340
|
-
media_query: true
|
|
341
|
-
}
|
|
342
|
-
const processed = postcss(px2rem(options))
|
|
343
|
-
.process('@media (min-width: 500px) { .rule { font-size: 16px } }').css
|
|
344
|
-
const expected = '@media (min-width: 14.625rem) { .rule { font-size: 0.468rem } }'
|
|
345
|
-
|
|
346
|
-
expect(processed).toBe(expected)
|
|
347
|
-
})
|
|
348
|
-
|
|
349
|
-
it('2 should replace px in media queries', function () {
|
|
350
|
-
const options = {
|
|
351
|
-
platform: 'h5',
|
|
352
|
-
designWidth: 640,
|
|
353
|
-
mediaQuery: true
|
|
354
|
-
}
|
|
355
|
-
const processed = postcss(px2rem(options))
|
|
356
|
-
.process('@media (min-width: 500px) { .rule { font-size: 16px } }').css
|
|
357
|
-
const expected = '@media (min-width: 14.625rem) { .rule { font-size: 0.468rem } }'
|
|
358
|
-
|
|
359
|
-
expect(processed).toBe(expected)
|
|
360
|
-
})
|
|
361
|
-
})
|
|
362
|
-
|
|
363
|
-
describe('minPixelValue', function () {
|
|
364
|
-
it('1 should not replace values below minPixelValue', function () {
|
|
365
|
-
const options = {
|
|
366
|
-
platform: 'h5',
|
|
367
|
-
designWidth: 640,
|
|
368
|
-
// propWhiteList: [],
|
|
369
|
-
minPixelValue: 2
|
|
370
|
-
}
|
|
371
|
-
const rules = '.rule { border: 1px solid #000; font-size: 16px; margin: 1px 10px; }'
|
|
372
|
-
const expected = '.rule { border: 1px solid #000; font-size: 0.468rem; margin: 1px 0.2925rem; }'
|
|
373
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
374
|
-
|
|
375
|
-
expect(processed).toBe(expected)
|
|
376
|
-
})
|
|
377
|
-
})
|
|
378
|
-
|
|
379
|
-
describe('filter-prop-list', function () {
|
|
380
|
-
it('1 should find "exact" matches from propList', function () {
|
|
381
|
-
const propList = [
|
|
382
|
-
'font-size',
|
|
383
|
-
'margin',
|
|
384
|
-
'!padding',
|
|
385
|
-
'*border*',
|
|
386
|
-
'*',
|
|
387
|
-
'*y',
|
|
388
|
-
'!*font*']
|
|
389
|
-
const expected = 'font-size,margin'
|
|
390
|
-
expect(filterPropList.exact(propList).join()).toBe(expected)
|
|
391
|
-
})
|
|
392
|
-
|
|
393
|
-
it('2 should find "contain" matches from propList and reduce to string',
|
|
394
|
-
function () {
|
|
395
|
-
const propList = [
|
|
396
|
-
'font-size',
|
|
397
|
-
'*margin*',
|
|
398
|
-
'!padding',
|
|
399
|
-
'*border*',
|
|
400
|
-
'*',
|
|
401
|
-
'*y',
|
|
402
|
-
'!*font*']
|
|
403
|
-
const expected = 'margin,border'
|
|
404
|
-
expect(filterPropList.contain(propList).join()).toBe(expected)
|
|
405
|
-
})
|
|
406
|
-
|
|
407
|
-
it('3 should find "start" matches from propList and reduce to string',
|
|
408
|
-
function () {
|
|
409
|
-
const propList = [
|
|
410
|
-
'font-size',
|
|
411
|
-
'*margin*',
|
|
412
|
-
'!padding',
|
|
413
|
-
'border*',
|
|
414
|
-
'*',
|
|
415
|
-
'*y',
|
|
416
|
-
'!*font*']
|
|
417
|
-
const expected = 'border'
|
|
418
|
-
expect(filterPropList.startWith(propList).join()).toBe(expected)
|
|
419
|
-
})
|
|
420
|
-
|
|
421
|
-
it('4 should find "end" matches from propList and reduce to string',
|
|
422
|
-
function () {
|
|
423
|
-
const propList = [
|
|
424
|
-
'font-size',
|
|
425
|
-
'*margin*',
|
|
426
|
-
'!padding',
|
|
427
|
-
'border*',
|
|
428
|
-
'*',
|
|
429
|
-
'*y',
|
|
430
|
-
'!*font*']
|
|
431
|
-
const expected = 'y'
|
|
432
|
-
expect(filterPropList.endWith(propList).join()).toBe(expected)
|
|
433
|
-
})
|
|
434
|
-
|
|
435
|
-
it('5 should find "not" matches from propList and reduce to string',
|
|
436
|
-
function () {
|
|
437
|
-
const propList = [
|
|
438
|
-
'font-size',
|
|
439
|
-
'*margin*',
|
|
440
|
-
'!padding',
|
|
441
|
-
'border*',
|
|
442
|
-
'*',
|
|
443
|
-
'*y',
|
|
444
|
-
'!*font*']
|
|
445
|
-
const expected = 'padding'
|
|
446
|
-
expect(filterPropList.notExact(propList).join()).toBe(expected)
|
|
447
|
-
})
|
|
448
|
-
|
|
449
|
-
it('6 should find "not contain" matches from propList and reduce to string',
|
|
450
|
-
function () {
|
|
451
|
-
const propList = [
|
|
452
|
-
'font-size',
|
|
453
|
-
'*margin*',
|
|
454
|
-
'!padding',
|
|
455
|
-
'!border*',
|
|
456
|
-
'*',
|
|
457
|
-
'*y',
|
|
458
|
-
'!*font*']
|
|
459
|
-
const expected = 'font'
|
|
460
|
-
expect(filterPropList.notContain(propList).join()).toBe(expected)
|
|
461
|
-
})
|
|
462
|
-
|
|
463
|
-
it('7 should find "not start" matches from propList and reduce to string',
|
|
464
|
-
function () {
|
|
465
|
-
const propList = [
|
|
466
|
-
'font-size',
|
|
467
|
-
'*margin*',
|
|
468
|
-
'!padding',
|
|
469
|
-
'!border*',
|
|
470
|
-
'*',
|
|
471
|
-
'*y',
|
|
472
|
-
'!*font*']
|
|
473
|
-
const expected = 'border'
|
|
474
|
-
expect(filterPropList.notStartWith(propList).join()).toBe(expected)
|
|
475
|
-
})
|
|
476
|
-
|
|
477
|
-
it('8 should find "not end" matches from propList and reduce to string',
|
|
478
|
-
function () {
|
|
479
|
-
const propList = [
|
|
480
|
-
'font-size',
|
|
481
|
-
'*margin*',
|
|
482
|
-
'!padding',
|
|
483
|
-
'!border*',
|
|
484
|
-
'*',
|
|
485
|
-
'!*y',
|
|
486
|
-
'!*font*']
|
|
487
|
-
const expected = 'y'
|
|
488
|
-
expect(filterPropList.notEndWith(propList).join()).toBe(expected)
|
|
489
|
-
})
|
|
490
|
-
})
|
|
491
|
-
|
|
492
|
-
// 补充的测试用例
|
|
493
|
-
|
|
494
|
-
describe('不传任何配置', () => {
|
|
495
|
-
it('不传任何配置', function () {
|
|
496
|
-
const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
|
|
497
|
-
const expected = 'h1 {margin: 0 0 20rpx;font-size: 40rpx;line-height: 1.2;}'
|
|
498
|
-
const processed = postcss(px2rem()).process(rules).css
|
|
499
|
-
|
|
500
|
-
expect(processed).toBe(expected)
|
|
501
|
-
})
|
|
502
|
-
})
|
|
503
|
-
|
|
504
|
-
describe('platform 为 weapp', () => {
|
|
505
|
-
it('{platform: \'weapp\', designWidth: 750} ', () => {
|
|
506
|
-
const rules = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
|
|
507
|
-
const expected = 'h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;}'
|
|
508
|
-
const options = {
|
|
509
|
-
platform: 'weapp',
|
|
510
|
-
designWidth: 750
|
|
511
|
-
}
|
|
512
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
513
|
-
expect(processed).toBe(expected)
|
|
514
|
-
})
|
|
515
|
-
|
|
516
|
-
it('{platform: \'weapp\', designWidth: 640} ', () => {
|
|
517
|
-
const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
|
|
518
|
-
const expected = 'h1 {margin: 0 0 23.4rpx;font-size: 46.8rpx;line-height: 1.2;}'
|
|
519
|
-
const options = {
|
|
520
|
-
platform: 'weapp',
|
|
521
|
-
designWidth: 640
|
|
522
|
-
}
|
|
523
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
524
|
-
expect(processed).toBe(expected)
|
|
525
|
-
})
|
|
526
|
-
|
|
527
|
-
it('{platform: \'weapp\', designWidth: 375} ', () => {
|
|
528
|
-
const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
|
|
529
|
-
const expected = 'h1 {margin: 0 0 40rpx;font-size: 80rpx;line-height: 1.2;}'
|
|
530
|
-
const options = {
|
|
531
|
-
platform: 'weapp',
|
|
532
|
-
designWidth: 375
|
|
533
|
-
}
|
|
534
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
535
|
-
expect(processed).toBe(expected)
|
|
536
|
-
})
|
|
537
|
-
})
|
|
538
|
-
|
|
539
|
-
describe('platform 为 weapp, targetUnit 为 rem', () => {
|
|
540
|
-
it('{platform: \'weapp\', designWidth: 750, targetUnit: \'rem\'} ', () => {
|
|
541
|
-
const rules = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
|
|
542
|
-
const expected = 'h1 {margin: 0 0 0.5rem;font-size: 40Px;line-height: 1.2;}'
|
|
543
|
-
const options = {
|
|
544
|
-
platform: 'weapp',
|
|
545
|
-
designWidth: 750,
|
|
546
|
-
targetUnit: 'rem'
|
|
547
|
-
}
|
|
548
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
549
|
-
expect(processed).toBe(expected)
|
|
550
|
-
})
|
|
551
|
-
|
|
552
|
-
it('{platform: \'weapp\', designWidth: 640, targetUnit: \'rem\'} ', () => {
|
|
553
|
-
const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
|
|
554
|
-
const expected = 'h1 {margin: 0 0 0.585rem;font-size: 1.17rem;line-height: 1.2;}'
|
|
555
|
-
const options = {
|
|
556
|
-
platform: 'weapp',
|
|
557
|
-
designWidth: 640,
|
|
558
|
-
targetUnit: 'rem'
|
|
559
|
-
}
|
|
560
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
561
|
-
expect(processed).toBe(expected)
|
|
562
|
-
})
|
|
563
|
-
|
|
564
|
-
it('{platform: \'weapp\', designWidth: 375, targetUnit: \'rem\'} ', () => {
|
|
565
|
-
const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
|
|
566
|
-
const expected = 'h1 {margin: 0 0 1rem;font-size: 2rem;line-height: 1.2;}'
|
|
567
|
-
const options = {
|
|
568
|
-
platform: 'weapp',
|
|
569
|
-
designWidth: 375,
|
|
570
|
-
targetUnit: 'rem'
|
|
571
|
-
}
|
|
572
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
573
|
-
expect(processed).toBe(expected)
|
|
574
|
-
})
|
|
575
|
-
})
|
|
576
|
-
|
|
577
|
-
describe('platform 为 weapp, targetUnit 为 px', () => {
|
|
578
|
-
it('{platform: \'weapp\', designWidth: 750, targetUnit: \'px\'} ', () => {
|
|
579
|
-
const rules = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
|
|
580
|
-
const expected = 'h1 {margin: 0 0 10px;font-size: 40Px;line-height: 1.2;}'
|
|
581
|
-
const options = {
|
|
582
|
-
platform: 'weapp',
|
|
583
|
-
designWidth: 750,
|
|
584
|
-
targetUnit: 'px'
|
|
585
|
-
}
|
|
586
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
587
|
-
expect(processed).toBe(expected)
|
|
588
|
-
})
|
|
589
|
-
|
|
590
|
-
it('{platform: \'weapp\', designWidth: 640, targetUnit: \'px\'} ', () => {
|
|
591
|
-
const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
|
|
592
|
-
const expected = 'h1 {margin: 0 0 11.7px;font-size: 23.4px;line-height: 1.2;}'
|
|
593
|
-
const options = {
|
|
594
|
-
platform: 'weapp',
|
|
595
|
-
designWidth: 640,
|
|
596
|
-
targetUnit: 'px'
|
|
597
|
-
}
|
|
598
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
599
|
-
expect(processed).toBe(expected)
|
|
600
|
-
})
|
|
601
|
-
|
|
602
|
-
it('{platform: \'weapp\', designWidth: 375, targetUnit: \'px\'} ', () => {
|
|
603
|
-
const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
|
|
604
|
-
const expected = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
|
|
605
|
-
const options = {
|
|
606
|
-
platform: 'weapp',
|
|
607
|
-
designWidth: 375,
|
|
608
|
-
targetUnit: 'px'
|
|
609
|
-
}
|
|
610
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
611
|
-
expect(processed).toBe(expected)
|
|
612
|
-
})
|
|
613
|
-
})
|
|
614
|
-
|
|
615
|
-
describe('platform 为 h5', () => {
|
|
616
|
-
it('{platform: \'h5\', designWidth: 750} ', () => {
|
|
617
|
-
const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
|
|
618
|
-
const expected = 'h1 {margin: 0 0 0.5rem;font-size: 1rem;line-height: 1.2;}'
|
|
619
|
-
const options = {
|
|
620
|
-
platform: 'h5',
|
|
621
|
-
designWidth: 750
|
|
622
|
-
}
|
|
623
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
624
|
-
expect(processed).toBe(expected)
|
|
625
|
-
})
|
|
626
|
-
|
|
627
|
-
it('{platform: \'h5\', designWidth: 640} ', () => {
|
|
628
|
-
const rules = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
|
|
629
|
-
const expected = 'h1 {margin: 0 0 0.585rem;font-size: 40Px;line-height: 1.2;}'
|
|
630
|
-
const options = {
|
|
631
|
-
platform: 'h5',
|
|
632
|
-
designWidth: 640
|
|
633
|
-
}
|
|
634
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
635
|
-
expect(processed).toBe(expected)
|
|
636
|
-
})
|
|
637
|
-
|
|
638
|
-
it('{platform: \'h5\', designWidth: 375} ', () => {
|
|
639
|
-
const rules = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
|
|
640
|
-
const expected = 'h1 {margin: 0 0 1rem;font-size: 40Px;line-height: 1.2;}'
|
|
641
|
-
const options = {
|
|
642
|
-
platform: 'h5',
|
|
643
|
-
designWidth: 375
|
|
644
|
-
}
|
|
645
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
646
|
-
expect(processed).toBe(expected)
|
|
647
|
-
})
|
|
648
|
-
})
|
|
649
|
-
|
|
650
|
-
describe('platform 为 h5, targetUnit 为 px', () => {
|
|
651
|
-
it('{platform: \'h5\', designWidth: 750, targetUnit: \'px\'} ', () => {
|
|
652
|
-
const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
|
|
653
|
-
const expected = 'h1 {margin: 0 0 10px;font-size: 20px;line-height: 1.2;}'
|
|
654
|
-
const options = {
|
|
655
|
-
platform: 'h5',
|
|
656
|
-
designWidth: 750,
|
|
657
|
-
targetUnit: 'px'
|
|
658
|
-
}
|
|
659
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
660
|
-
expect(processed).toBe(expected)
|
|
661
|
-
})
|
|
662
|
-
|
|
663
|
-
it('{platform: \'h5\', designWidth: 640, targetUnit: \'px\'} ', () => {
|
|
664
|
-
const rules = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
|
|
665
|
-
const expected = 'h1 {margin: 0 0 11.7px;font-size: 40Px;line-height: 1.2;}'
|
|
666
|
-
const options = {
|
|
667
|
-
platform: 'h5',
|
|
668
|
-
designWidth: 640,
|
|
669
|
-
targetUnit: 'px'
|
|
670
|
-
}
|
|
671
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
672
|
-
expect(processed).toBe(expected)
|
|
673
|
-
})
|
|
674
|
-
|
|
675
|
-
it('{platform: \'h5\', designWidth: 375, targetUnit: \'px\'} ', () => {
|
|
676
|
-
const rules = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
|
|
677
|
-
const expected = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
|
|
678
|
-
const options = {
|
|
679
|
-
platform: 'h5',
|
|
680
|
-
designWidth: 375,
|
|
681
|
-
targetUnit: 'px'
|
|
682
|
-
}
|
|
683
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
684
|
-
expect(processed).toBe(expected)
|
|
685
|
-
})
|
|
686
|
-
})
|
|
687
|
-
|
|
688
|
-
describe('platform 为 h5,文件头部带注释的不转换', () => {
|
|
689
|
-
it('{platform: \'h5\', designWidth: 640} ', () => {
|
|
690
|
-
const rules = '/*postcss-pxtransform disable*/ h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
|
|
691
|
-
const options = {
|
|
692
|
-
platform: 'h5',
|
|
693
|
-
designWidth: 640
|
|
694
|
-
}
|
|
695
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
696
|
-
expect(processed).toBe(rules)
|
|
697
|
-
})
|
|
698
|
-
})
|
|
699
|
-
|
|
700
|
-
describe('platform 为 h5,指定 h5 平台保留', () => {
|
|
701
|
-
it('{platform: \'h5\', designWidth: 640} ', () => {
|
|
702
|
-
const rules = '/* #ifdef h5 */ h1 {margin: 0 0 20Px;font-size: 40Px;line-height: 1.2;}/* #endif */'
|
|
703
|
-
const options = {
|
|
704
|
-
platform: 'h5',
|
|
705
|
-
designWidth: 640
|
|
706
|
-
}
|
|
707
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
708
|
-
expect(processed).toBe(rules)
|
|
709
|
-
})
|
|
710
|
-
})
|
|
711
|
-
|
|
712
|
-
describe('platform 为 h5,指定平台 rn 平台保留', () => {
|
|
713
|
-
it('{platform: \'h5\', designWidth: 640} ', () => {
|
|
714
|
-
const rules = '/* #ifdef rn */ h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}/* #endif */ .test{}'
|
|
715
|
-
const options = {
|
|
716
|
-
platform: 'h5',
|
|
717
|
-
designWidth: 640
|
|
718
|
-
}
|
|
719
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
720
|
-
expect(processed).toBe('/* #ifdef rn *//* #endif */ .test{}')
|
|
721
|
-
})
|
|
722
|
-
})
|
|
723
|
-
|
|
724
|
-
describe('platform 为 rn,指定平台 h5 rn 平台保留', () => {
|
|
725
|
-
it('{platform: \'rn\', designWidth: 640} ', () => {
|
|
726
|
-
const rules = '/* #ifdef h5 rn */ h1 {margin: 0 0 20Px;font-size: 40Px;line-height: 1.2;}/* #endif */ .test{}'
|
|
727
|
-
const options = {
|
|
728
|
-
platform: 'rn',
|
|
729
|
-
designWidth: 640
|
|
730
|
-
}
|
|
731
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
732
|
-
expect(processed).toBe(rules)
|
|
733
|
-
})
|
|
734
|
-
})
|
|
735
|
-
|
|
736
|
-
describe('platform 为 h5,指定平台 rn 平台剔除', () => {
|
|
737
|
-
it('{platform: \'h5\', designWidth: 640} ', () => {
|
|
738
|
-
const rules = '/* #ifndef rn */ h1 {margin: 0 0 20Px;font-size: 40Px;line-height: 1.2;}/* #endif */ .test{}'
|
|
739
|
-
const options = {
|
|
740
|
-
platform: 'h5',
|
|
741
|
-
designWidth: 640
|
|
742
|
-
}
|
|
743
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
744
|
-
expect(processed).toBe(rules)
|
|
745
|
-
})
|
|
746
|
-
})
|
|
747
|
-
|
|
748
|
-
describe('platform 为 h5,指定平台 h5 平台剔除', () => {
|
|
749
|
-
it('{platform: \'h5\', designWidth: 640} ', () => {
|
|
750
|
-
const rules = '/* #ifndef h5 */ h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}/* #endif */ .test{}'
|
|
751
|
-
const options = {
|
|
752
|
-
platform: 'h5',
|
|
753
|
-
designWidth: 640
|
|
754
|
-
}
|
|
755
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
756
|
-
expect(processed).toBe('/* #ifndef h5 *//* #endif */ .test{}')
|
|
757
|
-
})
|
|
758
|
-
})
|
|
759
|
-
|
|
760
|
-
describe('rpx 单位转换', () => {
|
|
761
|
-
it('{platform: \'weapp\', designWidth: 640} ', () => {
|
|
762
|
-
const rules = 'h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}'
|
|
763
|
-
const options = {
|
|
764
|
-
platform: 'weapp',
|
|
765
|
-
designWidth: 640
|
|
766
|
-
}
|
|
767
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
768
|
-
expect(processed).toBe('h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}')
|
|
769
|
-
})
|
|
770
|
-
|
|
771
|
-
it('{platform: \'h5\', designWidth: 640} ', () => {
|
|
772
|
-
const rules = 'h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}'
|
|
773
|
-
const options = {
|
|
774
|
-
platform: 'h5',
|
|
775
|
-
designWidth: 640
|
|
776
|
-
}
|
|
777
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
778
|
-
expect(processed).toBe('h1 {margin: 0 0 0.585rem;font-size: 40Px;line-height: 1.2;} .test{}')
|
|
779
|
-
})
|
|
780
|
-
|
|
781
|
-
it('{platform: \'weapp\', designWidth: 375} ', () => {
|
|
782
|
-
const rules = 'h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}'
|
|
783
|
-
const options = {
|
|
784
|
-
platform: 'weapp',
|
|
785
|
-
designWidth: 375
|
|
786
|
-
}
|
|
787
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
788
|
-
expect(processed).toBe('h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}')
|
|
789
|
-
})
|
|
790
|
-
})
|
|
791
|
-
|
|
792
|
-
describe('vw 单位转换', () => {
|
|
793
|
-
it('{platform: \'h5\', designWidth: 640} ', () => {
|
|
794
|
-
const rules = 'h1 {margin: 0 0 640px;font-size: 40Px;line-height: 1.2;} .test{}'
|
|
795
|
-
const options = {
|
|
796
|
-
platform: 'h5',
|
|
797
|
-
designWidth: 750,
|
|
798
|
-
targetUnit: 'vw'
|
|
799
|
-
}
|
|
800
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
801
|
-
expect(processed).toBe('h1 {margin: 0 0 85.33333vw;font-size: 40Px;line-height: 1.2;} .test{}')
|
|
802
|
-
})
|
|
803
|
-
|
|
804
|
-
it('{platform: \'h5\', designWidth: 750} ', () => {
|
|
805
|
-
const rules = 'h1 {margin: 0 0 375px;font-size: 40Px;line-height: 1.2;} .test{}'
|
|
806
|
-
const options = {
|
|
807
|
-
platform: 'h5',
|
|
808
|
-
designWidth: 750,
|
|
809
|
-
targetUnit: 'vw'
|
|
810
|
-
}
|
|
811
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
812
|
-
expect(processed).toBe('h1 {margin: 0 0 50vw;font-size: 40Px;line-height: 1.2;} .test{}')
|
|
813
|
-
})
|
|
814
|
-
|
|
815
|
-
it('{platform: \'h5\', designWidth: 640} ', () => {
|
|
816
|
-
const rules = 'h1 {margin: 0 0 320px;font-size: 40Px;line-height: 1.2;} .test{}'
|
|
817
|
-
const options = {
|
|
818
|
-
platform: 'h5',
|
|
819
|
-
designWidth: 640,
|
|
820
|
-
targetUnit: 'vw'
|
|
821
|
-
}
|
|
822
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
823
|
-
expect(processed).toBe('h1 {margin: 0 0 50vw;font-size: 40Px;line-height: 1.2;} .test{}')
|
|
824
|
-
})
|
|
825
|
-
|
|
826
|
-
it('{platform: \'h5\', designWidth: 375} ', () => {
|
|
827
|
-
const rules = 'h1 {margin: 0 0 320px;font-size: 40Px;line-height: 1.2;} .test{}'
|
|
828
|
-
const options = {
|
|
829
|
-
platform: 'h5',
|
|
830
|
-
designWidth: 375,
|
|
831
|
-
targetUnit: 'vw'
|
|
832
|
-
}
|
|
833
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
834
|
-
expect(processed).toBe('h1 {margin: 0 0 85.33333vw;font-size: 40Px;line-height: 1.2;} .test{}')
|
|
835
|
-
})
|
|
836
|
-
})
|
|
837
|
-
|
|
838
|
-
describe('platform 为 rn,适配', () => {
|
|
839
|
-
it('{platform: \'rn\', designWidth: 750} ', () => {
|
|
840
|
-
const rules = 'view { width: 100px; }'
|
|
841
|
-
const options = {
|
|
842
|
-
platform: 'rn',
|
|
843
|
-
designWidth: 750,
|
|
844
|
-
deviceRatio: {
|
|
845
|
-
640: 2.34 / 2,
|
|
846
|
-
750: 1,
|
|
847
|
-
828: 1.81 / 2
|
|
848
|
-
}
|
|
849
|
-
}
|
|
850
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
851
|
-
expect(processed).toBe('view { width: 50px; }')
|
|
852
|
-
})
|
|
853
|
-
})
|
|
854
|
-
|
|
855
|
-
describe('platform 为 harmony,适配', () => {
|
|
856
|
-
it('{platform: \'harmony\', designWidth: 640} ', () => {
|
|
857
|
-
const rules = 'view { width: 100PX; }'
|
|
858
|
-
const options = {
|
|
859
|
-
platform: 'harmony',
|
|
860
|
-
designWidth: 640,
|
|
861
|
-
deviceRatio: {
|
|
862
|
-
640: 2.34 / 2,
|
|
863
|
-
750: 1,
|
|
864
|
-
828: 1.81 / 2
|
|
865
|
-
}
|
|
866
|
-
}
|
|
867
|
-
const processed = postcss(px2rem(options)).process(rules).css
|
|
868
|
-
expect(processed).toBe('view { width: 100vp; }')
|
|
869
|
-
})
|
|
870
|
-
})
|