diff --git a/.changeset/fair-candles-grab.md b/.changeset/fair-candles-grab.md new file mode 100644 index 0000000..c308425 --- /dev/null +++ b/.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)`. diff --git a/src/__tests__/transform.ts b/src/__tests__/transform.ts index daa346e..b3beef0 100644 --- a/src/__tests__/transform.ts +++ b/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' }], + }) +}) diff --git a/src/tokenTypes.ts b/src/tokenTypes.ts index 412ac63..a9c73c6 100644 --- a/src/tokenTypes.ts +++ b/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)