Merge pull request #123 from styled-components/aspect-ratio

Add aspect ratio support

Author: jacobp100

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()
+})

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 }
+}

src/transforms/index.js

@@ -6,6 +6,7 @@ import {
   UNSUPPORTED_LENGTH_UNIT,
   WORD,
 } from '../tokenTypes'
+import aspectRatio from './aspectRatio'
 import border from './border'
 import boxShadow from './boxShadow'
 import flex from './flex'
@@ -51,6 +52,7 @@ const textShadowOffset = tokenStream => ({
 })
 
 export default {
+  aspectRatio,
   background,
   border,
   borderColor,