Merge pull request #210 from wojtekmaj/0deg

Allow unitless zero values for angle-based transform functions

Author: jacobp100

.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.ts

@@ -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.ts

@@ -39,7 +39,7 @@ const numberRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?)$/i
 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 =
@@ -83,7 +83,7 @@ export const LENGTH: TokenDescriptor = regExpToken(lengthRe, Number)
 export const UNSUPPORTED_LENGTH_UNIT: TokenDescriptor =
   regExpToken(unsupportedUnitRe)
 export const ANGLE: TokenDescriptor = regExpToken(angleRe, (angle) =>
-  angle.toLowerCase()
+  angle === '0' ? '0deg' : angle.toLowerCase()
 )
 export const PERCENT: TokenDescriptor = regExpToken(percentRe)
 export const IDENT: TokenDescriptor = regExpToken(identRe)