From e81a3889c3c2bfe1297b61f4d4edf8377fc9925b Mon Sep 17 00:00:00 2001
From: Jacob Parker <jacobparker1992@gmail.com>
Date: Sat, 16 Nov 2019 17:31:44 +0000
Subject: [PATCH] Add aspect ratio support

---
 src/__tests__/aspectRatio.js  | 23 +++++++++++++++++++++++
 src/transforms/aspectRatio.js | 12 ++++++++++++
 src/transforms/index.js       |  2 ++
 3 files changed, 37 insertions(+)
 create mode 100644 src/__tests__/aspectRatio.js
 create mode 100644 src/transforms/aspectRatio.js

diff --git a/src/__tests__/aspectRatio.js b/src/__tests__/aspectRatio.js
new file mode 100644
index 0000000..eebd699
--- /dev/null
+++ b/src/__tests__/aspectRatio.js
@@ -0,0 +1,23 @@
+import transformCss from '..'
+
+it('handles regular aspect ratio values', () => {
+  expect(transformCss([['aspect-ratio', '1.5']])).toEqual({
+    aspectRatio: 1.5,
+  })
+})
+
+it('handles CSS-style aspect ratios', () => {
+  expect(transformCss([['aspect-ratio', '3 / 2']])).toEqual({
+    aspectRatio: 1.5,
+  })
+})
+
+it('handles CSS-style aspect ratios without spaces', () => {
+  expect(transformCss([['aspect-ratio', '3/2']])).toEqual({
+    aspectRatio: 1.5,
+  })
+})
+
+it('throws when omitting second value after slash', () => {
+  expect(() => transformCss([['aspect-ratio', '3/']])).toThrow()
+})
diff --git a/src/transforms/aspectRatio.js b/src/transforms/aspectRatio.js
new file mode 100644
index 0000000..67156e5
--- /dev/null
+++ b/src/transforms/aspectRatio.js
@@ -0,0 +1,12 @@
+import { NUMBER, SLASH } from '../tokenTypes'
+
+export default tokenStream => {
+  let aspectRatio = tokenStream.expect(NUMBER)
+
+  if (tokenStream.hasTokens()) {
+    tokenStream.expect(SLASH)
+    aspectRatio /= tokenStream.expect(NUMBER)
+  }
+
+  return { aspectRatio }
+}
diff --git a/src/transforms/index.js b/src/transforms/index.js
index 66320ae..26765dd 100644
--- a/src/transforms/index.js
+++ b/src/transforms/index.js
@@ -7,6 +7,7 @@ import {
   PERCENT,
   AUTO,
 } from '../tokenTypes'
+import aspectRatio from './aspectRatio'
 import border from './border'
 import boxShadow from './boxShadow'
 import flex from './flex'
@@ -53,6 +54,7 @@ const textShadowOffset = tokenStream => ({
 })
 
 export default {
+  aspectRatio,
   background,
   border,
   borderColor,