Merge pull request styled-components#65 from styled-components/text-decoration-fixes

Improve spec compliance for text-decoration

Author: jacobp100

src/index.test.js

@@ -599,13 +599,27 @@ it('transforms text-decoration in different order', () =>
     textDecorationColor: 'red',
   }))
 
+it('transforms text-decoration with ine in different order', () =>
+  runTest([['text-decoration', 'line-through underline']], {
+    textDecorationLine: 'underline line-through',
+    textDecorationStyle: 'solid',
+    textDecorationColor: 'black',
+  }))
+
 it('transforms text-decoration with none', () =>
   runTest([['text-decoration', 'none']], {
     textDecorationLine: 'none',
     textDecorationStyle: 'solid',
     textDecorationColor: 'black',
   }))
 
+it('transforms text-decoration with none as part of multiple terms', () =>
+  runTest([['text-decoration', 'yellow none']], {
+    textDecorationLine: 'none',
+    textDecorationStyle: 'solid',
+    textDecorationColor: 'yellow',
+  }))
+
 it('does not transform text-decoration if multiple colors are used', () => {
   expect(() =>
     transformCss([['text-decoration', 'underline red yellow']])

src/transforms/textDecoration.js

@@ -1,6 +1,6 @@
 import { regExpToken, tokens } from '../tokenTypes'
 
-const { NONE, SPACE, COLOR } = tokens
+const { SPACE, COLOR } = tokens
 
 const STYLE = regExpToken(/^(solid|double|dotted|dashed)$/)
 const LINE = regExpToken(/^(none|underline|line-through)$/)
@@ -14,30 +14,27 @@ module.exports = tokenStream => {
   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
+      const lines = [tokenStream.lastValue]
 
       tokenStream.saveRewindPoint()
-      if (tokenStream.matches(SPACE) && tokenStream.matches(LINE)) {
-        line += ` ${tokenStream.lastValue}`
+      if (
+        lines[0] !== 'none' &&
+        tokenStream.matches(SPACE) &&
+        tokenStream.matches(LINE)
+      ) {
+        lines.push(tokenStream.lastValue)
+        // Underline comes before line-through
+        lines.sort().reverse()
       } else {
         tokenStream.rewind()
       }
+
+      line = lines.join(' ')
     } else if (style === undefined && tokenStream.matches(STYLE)) {
       style = tokenStream.lastValue
     } else if (color === undefined && tokenStream.matches(COLOR)) {