Allow unitless zero values for angle-based transform functions

Closes #190

Author: wojtekmaj

.changeset/fair-candles-grab.md

@@ -0,0 +1,5 @@
+---
+"css-to-react-native": patch
+---
+
+Allow unitless zero values for angle-based transform functions like `rotate(0)`, `skewX(0)`, and `skewY(0)`.

src/__tests__/transform.js

@@ -69,3 +69,27 @@ it('transforms skew(angle) to skewX and skewY', () => {
     transform: [{ skewY: '0deg' }, { skewX: '5deg' }],
   })
 })
+
+it('transforms translate(0) to translateX and translateY', () => {
+  expect(transformCss([['transform', 'translate(0)']])).toEqual({
+    transform: [{ translateY: 0 }, { translateX: 0 }],
+  })
+})
+
+it('transforms rotate(0) to rotate', () => {
+  expect(transformCss([['transform', 'rotate(0)']])).toEqual({
+    transform: [{ rotate: '0deg' }],
+  })
+})
+
+it('transforms skewX(0) to skewX', () => {
+  expect(transformCss([['transform', 'skewX(0)']])).toEqual({
+    transform: [{ skewX: '0deg' }],
+  })
+})
+
+it('transforms skewY(0) to skewY', () => {
+  expect(transformCss([['transform', 'skewY(0)']])).toEqual({
+    transform: [{ skewY: '0deg' }],
+  })
+})

src/tokenTypes.js

@@ -35,7 +35,7 @@ const numberRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?)$/i
 // Note lengthRe is sneaky: you can omit units for 0
 const lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?)(?=px$))/i
 const unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(ch|em|ex|rem|vh|vw|vmin|vmax|cm|mm|in|pc|pt))$/i
-const angleRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:deg|rad|grad|turn))$/i
+const angleRe = /^(0|[+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:deg|rad|grad|turn))$/i
 const percentRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?%)$/i
 
 const noopToken = predicate => node => (predicate(node) ? '<token>' : null)
@@ -67,7 +67,9 @@ export const AUTO = regExpToken(autoRe)
 export const NUMBER = regExpToken(numberRe, Number)
 export const LENGTH = regExpToken(lengthRe, Number)
 export const UNSUPPORTED_LENGTH_UNIT = regExpToken(unsupportedUnitRe)
-export const ANGLE = regExpToken(angleRe, angle => angle.toLowerCase())
+export const ANGLE = regExpToken(angleRe, angle =>
+  angle === '0' ? '0deg' : angle.toLowerCase()
+)
 export const PERCENT = regExpToken(percentRe)
 export const IDENT = regExpToken(identRe)
 export const STRING = matchString