From 22d3223e1b1dad521048983680af2980912fc7bf Mon Sep 17 00:00:00 2001
From: Finn Pauls <mbp@pauls.dev>
Date: Fri, 6 Jan 2023 15:02:47 +0100
Subject: [PATCH] Allow multiple font variant values to be used, fixes #175

---
 src/__tests__/fontVariant.js  |  8 ++++++++
 src/transforms/fontVariant.js | 14 ++++++++++++++
 src/transforms/index.js       | 12 +++++-------
 3 files changed, 27 insertions(+), 7 deletions(-)
 create mode 100644 src/transforms/fontVariant.js

diff --git a/src/__tests__/fontVariant.js b/src/__tests__/fontVariant.js
index 21f4cb7..7749dfa 100644
--- a/src/__tests__/fontVariant.js
+++ b/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'],
+  })
+})
diff --git a/src/transforms/fontVariant.js b/src/transforms/fontVariant.js
new file mode 100644
index 0000000..244db42
--- /dev/null
+++ b/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,
+  }
+}
diff --git a/src/transforms/index.js b/src/transforms/index.js
index 66320ae..4849064 100644
--- a/src/transforms/index.js
+++ b/src/transforms/index.js
@@ -1,11 +1,10 @@
 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'
@@ -13,6 +12,7 @@ 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
 })