Skip to content

Commit 002d94d

Browse files
Otto-JOtto-J
committed
feat: 重构 border 相关逻辑展开逻辑，适配最新测试
1 parent 97a01fd commit 002d94d

File tree

9 files changed

+602
-297
lines changed

9 files changed

+602
-297
lines changed

‎packages/uni-nvue-styler/README.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# @dcloudio/uni-nvue-styler
2+
3+
跨平台 css 解析。 css 字符串转对象，css 缩写展开，不支持特性告警、容错。
4+
5+
## 项目结构
6+
7+
`src/index.ts` 里导出的 parse 是完整流程，可供编译。
8+
9+
- 自定义了两个 postcss 插件 `expand` 和 `normalize`，交给 postcss 进行处理。
10+
- 得到的结果交给 `objectifier` 转为客户端接受的对象类型
11+
12+
`lib/css.json` 文件来自 syntax 自动生成，无需修改。

‎packages/uni-nvue-styler/__tests__/expand.spec.ts‎

Lines changed: 138 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { transformFlexFlow } from '../src/expand/flexFlow'
99
import { transformFont } from '../src/expand/font'
1010
import { createTransformBox } from '../src/expand/margin'
1111
import { transformTransition } from '../src/expand/transition'
12+
import { fillBorderPostion, postionTypes } from './test_utils'
1213

1314
function parseDecl(input: string) {
1415
return (parse(input).nodes[0] as Rule).nodes[0] as Declaration
@@ -230,18 +231,107 @@ describe('nvue-styler: expand', () => {
230231
})
231232
})
232233
test('transform border', function () {
233-
const types = [
234-
'border',
235-
'border-top',
236-
'border-right',
237-
'border-bottom',
238-
'border-left',
239-
]
234+
// simple
235+
expect(
236+
createTransformBorder({ type: 'uvue' })(
237+
parseDecl(`
238+
.test{
239+
border:1px solid red;
240+
}`)
241+
)
242+
).toEqual([
243+
{
244+
prop: 'border-top-width',
245+
raws: expect.any(Object),
246+
source: expect.any(Object),
247+
type: 'decl',
248+
value: '1px',
249+
},
250+
{
251+
prop: 'border-right-width',
252+
raws: expect.any(Object),
253+
source: expect.any(Object),
254+
type: 'decl',
255+
value: '1px',
256+
},
257+
{
258+
prop: 'border-bottom-width',
259+
raws: expect.any(Object),
260+
source: expect.any(Object),
261+
type: 'decl',
262+
value: '1px',
263+
},
264+
{
265+
prop: 'border-left-width',
266+
raws: expect.any(Object),
267+
source: expect.any(Object),
268+
type: 'decl',
269+
value: '1px',
270+
},
271+
{
272+
prop: 'border-top-style',
273+
raws: expect.any(Object),
274+
source: expect.any(Object),
275+
type: 'decl',
276+
value: 'solid',
277+
},
278+
{
279+
prop: 'border-right-style',
280+
raws: expect.any(Object),
281+
source: expect.any(Object),
282+
type: 'decl',
283+
value: 'solid',
284+
},
285+
{
286+
prop: 'border-bottom-style',
287+
raws: expect.any(Object),
288+
source: expect.any(Object),
289+
type: 'decl',
290+
value: 'solid',
291+
},
292+
{
293+
prop: 'border-left-style',
294+
raws: expect.any(Object),
295+
source: expect.any(Object),
296+
type: 'decl',
297+
value: 'solid',
298+
},
299+
{
300+
prop: 'border-top-color',
301+
raws: expect.any(Object),
302+
source: expect.any(Object),
303+
type: 'decl',
304+
value: 'red',
305+
},
306+
{
307+
prop: 'border-right-color',
308+
raws: expect.any(Object),
309+
source: expect.any(Object),
310+
type: 'decl',
311+
value: 'red',
312+
},
313+
{
314+
prop: 'border-bottom-color',
315+
raws: expect.any(Object),
316+
source: expect.any(Object),
317+
type: 'decl',
318+
value: 'red',
319+
},
320+
{
321+
prop: 'border-left-color',
322+
raws: expect.any(Object),
323+
source: expect.any(Object),
324+
type: 'decl',
325+
value: 'red',
326+
},
327+
])
328+
329+
const types = ['border', ...postionTypes]
240330
const createBorders = (
241331
border: string
242332
): Record<string, Record<string, string>[]> => {
243333
return {
244-
'1px': [
334+
'1px': fillBorderPostion([
245335
{
246336
type: 'decl',
247337
prop: `${border}-width`,
@@ -257,8 +347,8 @@ describe('nvue-styler: expand', () => {
257347
prop: `${border}-color`,
258348
value: '#000000',
259349
},
260-
],
261-
'#ffffff': [
350+
]),
351+
'#ffffff': fillBorderPostion([
262352
{
263353
type: 'decl',
264354
prop: `${border}-width`,
@@ -274,8 +364,8 @@ describe('nvue-styler: expand', () => {
274364
prop: `${border}-color`,
275365
value: '#ffffff',
276366
},
277-
],
278-
thick: [
367+
]),
368+
thick: fillBorderPostion([
279369
{
280370
type: 'decl',
281371
prop: `${border}-width`,
@@ -291,8 +381,8 @@ describe('nvue-styler: expand', () => {
291381
prop: `${border}-color`,
292382
value: '#000000',
293383
},
294-
],
295-
'2px dashed': [
384+
]),
385+
'2px dashed': fillBorderPostion([
296386
{
297387
type: 'decl',
298388
prop: `${border}-width`,
@@ -308,8 +398,8 @@ describe('nvue-styler: expand', () => {
308398
prop: `${border}-color`,
309399
value: '#000000',
310400
},
311-
],
312-
'3px dotted #ffffff': [
401+
]),
402+
'3px dotted #ffffff': fillBorderPostion([
313403
{
314404
type: 'decl',
315405
prop: `${border}-width`,
@@ -325,9 +415,10 @@ describe('nvue-styler: expand', () => {
325415
prop: `${border}-color`,
326416
value: '#ffffff',
327417
},
328-
],
418+
]),
329419
}
330420
}
421+
331422
types.forEach((type) => {
332423
const borders = createBorders(type)
333424
Object.keys(borders).forEach((b) => {
@@ -337,23 +428,28 @@ describe('nvue-styler: expand', () => {
337428
const transformBorder = createTransformBorder({
338429
type: 'uvue',
339430
})
431+
340432
expect(transformBorder(decl)).toEqual(
341433
borders[b].map((node) => {
342-
return Object.assign({ raws: decl.raws, source: decl.source }, node)
434+
const val = Object.assign(
435+
{ raws: decl.raws, source: decl.source },
436+
node
437+
)
438+
return val
343439
})
344440
)
345441
})
346442
})
347443
})
348444
test(`transform border-style`, () => {
349445
const borderStyles: Record<string, Record<string, string>[]> = {
350-
dotted: [
446+
dotted: fillBorderPostion([
351447
{
352448
type: 'decl',
353449
prop: 'border-style',
354450
value: 'dotted',
355451
},
356-
],
452+
]),
357453
'dotted solid': [
358454
{
359455
type: 'decl',
@@ -425,26 +521,23 @@ describe('nvue-styler: expand', () => {
425521
const decl = parseDecl(`.test {
426522
border-style: ${value}
427523
}`)
428-
if (!value.includes(' ')) {
429-
expect(transformBorderStyle(decl)).toEqual([decl])
430-
} else {
431-
expect(transformBorderStyle(decl)).toEqual(
432-
borderStyles[value].map((node) => {
433-
return Object.assign({ raws: decl.raws, source: decl.source }, node)
434-
})
435-
)
436-
}
524+
525+
expect(transformBorderStyle(decl)).toEqual(
526+
borderStyles[value].map((node) => {
527+
return Object.assign({ raws: decl.raws, source: decl.source }, node)
528+
})
529+
)
437530
})
438531
})
439532
test(`transform border-width`, () => {
440533
const borderWidths: Record<string, Record<string, string>[]> = {
441-
'1px': [
534+
'1px': fillBorderPostion([
442535
{
443536
type: 'decl',
444537
prop: 'border-width',
445538
value: '1px',
446539
},
447-
],
540+
]),
448541
'21px 22px': [
449542
{
450543
type: 'decl',
@@ -516,26 +609,23 @@ describe('nvue-styler: expand', () => {
516609
const decl = parseDecl(`.test {
517610
border-width: ${value}
518611
}`)
519-
if (!value.includes(' ')) {
520-
expect(transformBorderWidth(decl)).toEqual([decl])
521-
} else {
522-
expect(transformBorderWidth(decl)).toEqual(
523-
borderWidths[value].map((node) => {
524-
return Object.assign({ raws: decl.raws, source: decl.source }, node)
525-
})
526-
)
527-
}
612+
613+
expect(transformBorderWidth(decl)).toEqual(
614+
borderWidths[value].map((node) => {
615+
return Object.assign({ raws: decl.raws, source: decl.source }, node)
616+
})
617+
)
528618
})
529619
})
530620
test(`transform border-color`, () => {
531621
const borderColors: Record<string, Record<string, string>[]> = {
532-
red: [
622+
red: fillBorderPostion([
533623
{
534624
type: 'decl',
535625
prop: 'border-color',
536626
value: 'red',
537627
},
538-
],
628+
]),
539629
'red green': [
540630
{
541631
type: 'decl',
@@ -607,15 +697,12 @@ describe('nvue-styler: expand', () => {
607697
const decl = parseDecl(`.test {
608698
border-color: ${value}
609699
}`)
610-
if (!value.includes(' ')) {
611-
expect(transformBorderColor(decl)).toEqual([decl])
612-
} else {
613-
expect(transformBorderColor(decl)).toEqual(
614-
borderColors[value].map((node) => {
615-
return Object.assign({ raws: decl.raws, source: decl.source }, node)
616-
})
617-
)
618-
}
700+
701+
expect(transformBorderColor(decl)).toEqual(
702+
borderColors[value].map((node) => {
703+
return Object.assign({ raws: decl.raws, source: decl.source }, node)
704+
})
705+
)
619706
})
620707
})
621708
test(`transform border-radius`, () => {

‎packages/uni-nvue-styler/__tests__/objectifier.spec.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,10 @@ describe('nvue-styler: objectifier', () => {
2222
width: 200,
2323
left: 0,
2424
right: 0,
25-
borderWidth: '1pt',
25+
borderTopWidth: '1pt',
26+
borderRightWidth: '1pt',
27+
borderBottomWidth: '1pt',
28+
borderLeftWidth: '1pt',
2629
fontWeight: '100',
2730
},
2831
},

‎packages/uni-nvue-styler/__tests__/test_utils.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
export type IValue = {
2+
type: string
3+
prop: string
4+
value: string
5+
raws?: any
6+
source?: any
7+
}
8+
9+
export const postionTypes = [
10+
'border-top',
11+
'border-right',
12+
'border-bottom',
13+
'border-left',
14+
]
15+
export const fillBorderPostion = (val: IValue[]): IValue[] => {
16+
const type = ['width', 'style', 'color']
17+
18+
const res: IValue[] = []
19+
val.forEach((item) => {
20+
const currentProp = type.find((t) => item.prop.endsWith(t))!
21+
postionTypes.forEach((postion) => {
22+
res.push({
23+
...item,
24+
type: item.type,
25+
prop: `${postion}-${currentProp}`,
26+
value: item.value,
27+
})
28+
})
29+
})
30+
return res
31+
}

0 commit comments

Comments
 (0)