Skip to content

Commit f91597d

Browse files
authored
Merge pull request #63 from mchudy/text-decoration
Add support for the text-decoration property
2 parents 156a4af + c5d5d95 commit f91597d

File tree

3 files changed

+117
-0
lines changed

3 files changed

+117
-0
lines changed

src/index.test.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -557,6 +557,61 @@ it('transforms box-shadow and enforces offset-y if offset-x present', () => {
557557
)
558558
})
559559

560+
it('transforms text-decoration into text-decoration- properties', () =>
561+
runTest([['text-decoration', 'underline dotted red']], {
562+
textDecorationLine: 'underline',
563+
textDecorationStyle: 'dotted',
564+
textDecorationColor: 'red',
565+
}))
566+
567+
it('transforms text-decoration without color', () =>
568+
runTest([['text-decoration', 'underline dotted']], {
569+
textDecorationLine: 'underline',
570+
textDecorationStyle: 'dotted',
571+
textDecorationColor: 'black',
572+
}))
573+
574+
it('transforms text-decoration without style', () =>
575+
runTest([['text-decoration', 'underline red']], {
576+
textDecorationLine: 'underline',
577+
textDecorationStyle: 'solid',
578+
textDecorationColor: 'red',
579+
}))
580+
581+
it('transforms text-decoration without style and color', () =>
582+
runTest([['text-decoration', 'underline']], {
583+
textDecorationLine: 'underline',
584+
textDecorationStyle: 'solid',
585+
textDecorationColor: 'black',
586+
}))
587+
588+
it('transforms text-decoration with two line properties', () =>
589+
runTest([['text-decoration', 'underline line-through dashed red']], {
590+
textDecorationLine: 'underline line-through',
591+
textDecorationStyle: 'dashed',
592+
textDecorationColor: 'red',
593+
}))
594+
595+
it('transforms text-decoration in different order', () =>
596+
runTest([['text-decoration', 'dashed red underline line-through']], {
597+
textDecorationLine: 'underline line-through',
598+
textDecorationStyle: 'dashed',
599+
textDecorationColor: 'red',
600+
}))
601+
602+
it('transforms text-decoration with none', () =>
603+
runTest([['text-decoration', 'none']], {
604+
textDecorationLine: 'none',
605+
textDecorationStyle: 'solid',
606+
textDecorationColor: 'black',
607+
}))
608+
609+
it('does not transform text-decoration if multiple colors are used', () => {
610+
expect(() =>
611+
transformCss([['text-decoration', 'underline red yellow']])
612+
).toThrow()
613+
})
614+
560615
it('allows blacklisting shorthands', () => {
561616
const actualStyles = transformCss([['border-radius', '50']], ['borderRadius'])
562617
expect(actualStyles).toEqual({ borderRadius: 50 })

src/transforms/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const boxShadow = require('./boxShadow')
33
const flex = require('./flex')
44
const font = require('./font')
55
const fontFamily = require('./fontFamily')
6+
const textDecoration = require('./textDecoration')
67
const transform = require('./transform')
78
const {
89
directionFactory,
@@ -74,5 +75,6 @@ module.exports = {
7475
padding,
7576
shadowOffset,
7677
textShadowOffset,
78+
textDecoration,
7779
transform,
7880
}

src/transforms/textDecoration.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { regExpToken, tokens } from '../tokenTypes'
2+
3+
const { NONE, SPACE, COLOR } = tokens
4+
5+
const STYLE = regExpToken(/^(solid|double|dotted|dashed)$/)
6+
const LINE = regExpToken(/^(none|underline|line-through)$/)
7+
8+
const defaultTextDecorationLine = 'none'
9+
const defaultTextDecorationStyle = 'solid'
10+
const defaultTextDecorationColor = 'black'
11+
12+
module.exports = tokenStream => {
13+
let line
14+
let style
15+
let color
16+
17+
if (tokenStream.matches(NONE)) {
18+
tokenStream.expectEmpty()
19+
return {
20+
$merge: {
21+
textDecorationLine: defaultTextDecorationLine,
22+
textDecorationStyle: defaultTextDecorationStyle,
23+
textDecorationColor: defaultTextDecorationColor,
24+
},
25+
}
26+
}
27+
28+
let didParseFirst = false
29+
while (tokenStream.hasTokens()) {
30+
if (didParseFirst) tokenStream.expect(SPACE)
31+
32+
if (line === undefined && tokenStream.matches(LINE)) {
33+
line = tokenStream.lastValue
34+
35+
tokenStream.saveRewindPoint()
36+
if (tokenStream.matches(SPACE) && tokenStream.matches(LINE)) {
37+
line += ` ${tokenStream.lastValue}`
38+
} else {
39+
tokenStream.rewind()
40+
}
41+
} else if (style === undefined && tokenStream.matches(STYLE)) {
42+
style = tokenStream.lastValue
43+
} else if (color === undefined && tokenStream.matches(COLOR)) {
44+
color = tokenStream.lastValue
45+
} else {
46+
tokenStream.throw()
47+
}
48+
49+
didParseFirst = true
50+
}
51+
52+
const $merge = {
53+
textDecorationLine: line !== undefined ? line : defaultTextDecorationLine,
54+
textDecorationColor:
55+
color !== undefined ? color : defaultTextDecorationColor,
56+
textDecorationStyle:
57+
style !== undefined ? style : defaultTextDecorationStyle,
58+
}
59+
return { $merge }
60+
}

0 commit comments

Comments
 (0)