Add support for the text-decoration property

src/index.test.js

@@ -557,6 +557,61 @@ it('transforms box-shadow and enforces offset-y if offset-x present', () => {
   )
 })
 
+it('transforms text-decoration into text-decoration- properties', () =>
+  runTest([['text-decoration', 'underline dotted red']], {
+    textDecorationLine: 'underline',
+    textDecorationStyle: 'dotted',
+    textDecorationColor: 'red',
+  }))
+
+it('transforms text-decoration without color', () =>
+  runTest([['text-decoration', 'underline dotted']], {
+    textDecorationLine: 'underline',
+    textDecorationStyle: 'dotted',
+    textDecorationColor: 'black',
+  }))
+
+it('transforms text-decoration without style', () =>
+  runTest([['text-decoration', 'underline red']], {
+    textDecorationLine: 'underline',
+    textDecorationStyle: 'solid',
+    textDecorationColor: 'red',
+  }))
+
+it('transforms text-decoration without style and color', () =>
+  runTest([['text-decoration', 'underline']], {
+    textDecorationLine: 'underline',
+    textDecorationStyle: 'solid',
+    textDecorationColor: 'black',
+  }))
+
+it('transforms text-decoration with two line properties', () =>
+  runTest([['text-decoration', 'underline line-through dashed red']], {
+    textDecorationLine: 'underline line-through',
+    textDecorationStyle: 'dashed',
+    textDecorationColor: 'red',
+  }))
+
+it('transforms text-decoration in different order', () =>
+  runTest([['text-decoration', 'dashed red underline line-through']], {
+    textDecorationLine: 'underline line-through',
+    textDecorationStyle: 'dashed',
+    textDecorationColor: 'red',
+  }))
+
+it('transforms text-decoration with none', () =>
+  runTest([['text-decoration', 'none']], {
+    textDecorationLine: 'none',
+    textDecorationStyle: 'solid',
+    textDecorationColor: 'black',
+  }))
+
+it('does not transform text-decoration if multiple colors are used', () => {
+  expect(() =>
+    transformCss([['text-decoration', 'underline red yellow']])
+  ).toThrow()
+})
+
 it('allows blacklisting shorthands', () => {
   const actualStyles = transformCss([['border-radius', '50']], ['borderRadius'])
   expect(actualStyles).toEqual({ borderRadius: 50 })

src/transforms/index.js

@@ -3,6 +3,7 @@ const boxShadow = require('./boxShadow')
 const flex = require('./flex')
 const font = require('./font')
 const fontFamily = require('./fontFamily')
+const textDecoration = require('./textDecoration')
 const transform = require('./transform')
 const {
   directionFactory,
@@ -74,5 +75,6 @@ module.exports = {
   padding,
   shadowOffset,
   textShadowOffset,
+  textDecoration,
   transform,
 }

src/transforms/textDecoration.js

@@ -0,0 +1,60 @@
+import { regExpToken, tokens } from '../tokenTypes'
+
+const { NONE, SPACE, COLOR } = tokens
+
+const STYLE = regExpToken(/^(solid|double|dotted|dashed)$/)
+const LINE = regExpToken(/^(none|underline|line-through)$/)
+
+const defaultTextDecorationLine = 'none'
+const defaultTextDecorationStyle = 'solid'
+const defaultTextDecorationColor = 'black'
+
+module.exports = tokenStream => {
+  let line
+  let style
+  let color
+
+  if (tokenStream.matches(NONE)) {
+    tokenStream.expectEmpty()
+    return {
+      $merge: {
+        textDecorationLine: defaultTextDecorationLine,
+        textDecorationStyle: defaultTextDecorationStyle,
+        textDecorationColor: defaultTextDecorationColor,
+      },
+    }
+  }
+
+  let didParseFirst = false
+  while (tokenStream.hasTokens()) {
+    if (didParseFirst) tokenStream.expect(SPACE)
+
+    if (line === undefined && tokenStream.matches(LINE)) {
+      line = tokenStream.lastValue
+
+      tokenStream.saveRewindPoint()
+      if (tokenStream.matches(SPACE) && tokenStream.matches(LINE)) {
+        line += ` ${tokenStream.lastValue}`
+      } else {
+        tokenStream.rewind()
+      }
+    } else if (style === undefined && tokenStream.matches(STYLE)) {
+      style = tokenStream.lastValue
+    } else if (color === undefined && tokenStream.matches(COLOR)) {
+      color = tokenStream.lastValue
+    } else {
+      tokenStream.throw()
+    }
+
+    didParseFirst = true
+  }
+
+  const $merge = {
+    textDecorationLine: line !== undefined ? line : defaultTextDecorationLine,
+    textDecorationColor:
+      color !== undefined ? color : defaultTextDecorationColor,
+    textDecorationStyle:
+      style !== undefined ? style : defaultTextDecorationStyle,
+  }
+  return { $merge }
+}