From d8443701fbe44ec034e9251d442bf140b9dc8483 Mon Sep 17 00:00:00 2001 From: Mark Lawlor Date: Sun, 17 Aug 2025 00:03:42 +1000 Subject: [PATCH] fix: rotate declaration parsing --- src/compiler/__tests__/declarations.test.tsx | 7 ++-- src/compiler/declarations.ts | 38 ++++++++++++-------- src/jest/index.ts | 36 +++++++++++-------- 3 files changed, 50 insertions(+), 31 deletions(-) diff --git a/src/compiler/__tests__/declarations.test.tsx b/src/compiler/__tests__/declarations.test.tsx index 0d4ee23..e827451 100644 --- a/src/compiler/__tests__/declarations.test.tsx +++ b/src/compiler/__tests__/declarations.test.tsx @@ -1,12 +1,15 @@ -import { compile } from "../compiler"; +import { compileWithAutoDebug } from "react-native-css/jest"; +// prettier-ignore const tests = [ ["caret-color: black", [{ d: [["#000", ["cursorColor"]]], s: [1, 1] }]], ["stroke: black;", [{ d: [["#000", ["stroke"]]], s: [1, 1] }]], + ["rotate: 3deg;", [{ d: [[[{}, "rotateZ", "3deg"], "rotateZ"]], s: [1, 1] }]], + ["rotate: x 3deg;", [{ d: [[[{}, "rotateX", "3deg"], "rotateX"]], s: [1, 1] }]], ] as const; test.each(tests)("declarations for %s", (declarations, expected) => { - const compiled = compile(`.my-class { ${declarations} }`); + const compiled = compileWithAutoDebug(`.my-class { ${declarations} }`); const stylesheet = compiled.stylesheet(); diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts index d01e6f2..2202f5b 100644 --- a/src/compiler/declarations.ts +++ b/src/compiler/declarations.ts @@ -762,21 +762,29 @@ function parseRotate( { value }: DeclarationType<"rotate">, builder: StylesheetBuilder, ) { - builder.addDescriptor("rotateX", [ - {}, - "rotateX", - parseAngle(value.x, builder), - ]); - builder.addDescriptor("rotateY", [ - {}, - "rotateY", - parseAngle(value.y, builder), - ]); - builder.addDescriptor("rotateZ", [ - {}, - "rotateZ", - parseAngle(value.z, builder), - ]); + if (value.x) { + builder.addDescriptor("rotateX", [ + {}, + "rotateX", + parseAngle(value.angle, builder), + ]); + } + + if (value.y) { + builder.addDescriptor("rotateY", [ + {}, + "rotateY", + parseAngle(value.angle, builder), + ]); + } + + if (value.z) { + builder.addDescriptor("rotateZ", [ + {}, + "rotateZ", + parseAngle(value.angle, builder), + ]); + } } function parseScale( diff --git a/src/jest/index.ts b/src/jest/index.ts index 6e933a6..612dc05 100644 --- a/src/jest/index.ts +++ b/src/jest/index.ts @@ -32,21 +32,10 @@ const debugDefault = Boolean( export function registerCSS( css: string, - { - debug = debugDefault, - ...options - }: CompilerOptions & { debug?: boolean } = {}, + options: CompilerOptions & { debug?: boolean } = {}, ) { - const logger = debug - ? (text: string) => { - // Just log the rules - if (text.startsWith("[")) { - console.log(`Rules:\n---\n${text}`); - } - } - : undefined; - - const compiled = compile(css, { ...options, logger }); + const { debug } = options; + const compiled = compileWithAutoDebug(css, options); if (debug) { console.log( `Compiled:\n---\n${inspect( @@ -63,3 +52,22 @@ export function registerCSS( return compiled; } + +export function compileWithAutoDebug( + css: string, + { + debug = debugDefault, + ...options + }: CompilerOptions & { debug?: boolean } = {}, +) { + const logger = debug + ? (text: string) => { + // Just log the rules + if (text.startsWith("[")) { + console.log(`Rules:\n---\n${text}`); + } + } + : undefined; + + return compile(css, { ...options, logger }); +}