Merge pull request styled-components#66 from styled-components/text-decoration-line

Add support for text-decoration-line

Author: jacobp100

src/index.test.js

@@ -620,12 +620,41 @@ it('transforms text-decoration with none as part of multiple terms', () =>
     textDecorationColor: 'yellow',
   }))
 
+it('transforms text-decoration with none in capitals', () =>
+  runTest([['text-decoration', 'yellow NONE']], {
+    textDecorationLine: 'none',
+    textDecorationStyle: 'solid',
+    textDecorationColor: 'yellow',
+  }))
+
+it('transforms text-decoration with style in capitals', () =>
+  runTest([['text-decoration', 'yellow UNDERLINE LINE-THROUGH']], {
+    textDecorationLine: 'underline line-through',
+    textDecorationStyle: 'solid',
+    textDecorationColor: 'yellow',
+  }))
+
 it('does not transform text-decoration if multiple colors are used', () => {
   expect(() =>
     transformCss([['text-decoration', 'underline red yellow']])
   ).toThrow()
 })
 
+it('transforms text-decoration-line with underline line-through', () =>
+  runTest([['text-decoration-line', 'underline line-through']], {
+    textDecorationLine: 'underline line-through',
+  }))
+
+it('transforms text-decoration-line with line-through underline', () =>
+  runTest([['text-decoration-line', 'line-through underline']], {
+    textDecorationLine: 'underline line-through',
+  }))
+
+it('transforms text-decoration-line with none', () =>
+  runTest([['text-decoration-line', 'none']], {
+    textDecorationLine: 'none',
+  }))
+
 it('allows blacklisting shorthands', () => {
   const actualStyles = transformCss([['border-radius', '50']], ['borderRadius'])
   expect(actualStyles).toEqual({ borderRadius: 50 })

src/tokenTypes.js

@@ -67,4 +67,5 @@ module.exports.tokens = {
   IDENT: regExpToken(identRe),
   STRING: matchString,
   COLOR: matchColor,
+  LINE: regExpToken(/^(none|underline|line-through)$/i),
 }

src/transforms/index.js

@@ -4,6 +4,7 @@ const flex = require('./flex')
 const font = require('./font')
 const fontFamily = require('./fontFamily')
 const textDecoration = require('./textDecoration')
+const textDecorationLine = require('./textDecorationLine')
 const transform = require('./transform')
 const {
   directionFactory,
@@ -76,5 +77,6 @@ module.exports = {
   shadowOffset,
   textShadowOffset,
   textDecoration,
+  textDecorationLine,
   transform,
 }

src/transforms/textDecoration.js

@@ -1,9 +1,8 @@
 import { regExpToken, tokens } from '../tokenTypes'
 
-const { SPACE, COLOR } = tokens
+const { SPACE, LINE, COLOR } = tokens
 
 const STYLE = regExpToken(/^(solid|double|dotted|dashed)$/)
-const LINE = regExpToken(/^(none|underline|line-through)$/)
 
 const defaultTextDecorationLine = 'none'
 const defaultTextDecorationStyle = 'solid'
@@ -19,15 +18,15 @@ module.exports = tokenStream => {
     if (didParseFirst) tokenStream.expect(SPACE)
 
     if (line === undefined && tokenStream.matches(LINE)) {
-      const lines = [tokenStream.lastValue]
+      const lines = [tokenStream.lastValue.toLowerCase()]
 
       tokenStream.saveRewindPoint()
       if (
         lines[0] !== 'none' &&
         tokenStream.matches(SPACE) &&
         tokenStream.matches(LINE)
       ) {
-        lines.push(tokenStream.lastValue)
+        lines.push(tokenStream.lastValue.toLowerCase())
         // Underline comes before line-through
         lines.sort().reverse()
       } else {

src/transforms/textDecorationLine.js

@@ -0,0 +1,20 @@
+const { tokens } = require('../tokenTypes')
+
+const { SPACE, LINE } = tokens
+
+module.exports = tokenStream => {
+  const lines = []
+
+  let didParseFirst = false
+  while (tokenStream.hasTokens()) {
+    if (didParseFirst) tokenStream.expect(SPACE)
+
+    lines.push(tokenStream.expect(LINE).toLowerCase())
+
+    didParseFirst = true
+  }
+
+  lines.sort().reverse()
+
+  return lines.join(' ')
+}