Merge pull request #176 from styled-components/allow-multiple-font-variants

Allow multiple font variant values to be used, fixes #175

Author: jacobp100

src/__tests__/fontVariant.js

@@ -5,3 +5,11 @@ it('transforms font variant as an array', () => {
     fontVariant: ['tabular-nums'],
   })
 })
+
+it('transforms multiple font variant as an array', () => {
+  expect(
+    transformCss([['font-variant', 'tabular-nums oldstyle-nums']])
+  ).toEqual({
+    fontVariant: ['tabular-nums', 'oldstyle-nums'],
+  })
+})

src/transforms/fontVariant.js

@@ -0,0 +1,14 @@
+import { SPACE, IDENT } from '../tokenTypes'
+
+export default tokenStream => {
+  const values = [tokenStream.expect(IDENT)]
+
+  while (tokenStream.hasTokens()) {
+    tokenStream.expect(SPACE)
+    values.push(tokenStream.expect(IDENT))
+  }
+
+  return {
+    fontVariant: values,
+  }
+}

src/transforms/index.js

@@ -1,18 +1,18 @@
 import {
-  IDENT,
-  WORD,
+  AUTO,
   COLOR,
   LENGTH,
-  UNSUPPORTED_LENGTH_UNIT,
   PERCENT,
-  AUTO,
+  UNSUPPORTED_LENGTH_UNIT,
+  WORD,
 } from '../tokenTypes'
 import border from './border'
 import boxShadow from './boxShadow'
 import flex from './flex'
 import flexFlow from './flexFlow'
 import font from './font'
 import fontFamily from './fontFamily'
+import fontVariant from './fontVariant'
 import placeContent from './placeContent'
 import textDecoration from './textDecoration'
 import textDecorationLine from './textDecorationLine'
@@ -39,9 +39,7 @@ const margin = directionFactory({
   prefix: 'margin',
 })
 const padding = directionFactory({ prefix: 'padding' })
-const fontVariant = tokenStream => ({
-  fontVariant: [tokenStream.expect(IDENT)],
-})
+
 const fontWeight = tokenStream => ({
   fontWeight: tokenStream.expect(WORD), // Also match numbers as strings
 })