fix: rotate declaration parsing (#91)

Author: marklawlor

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();
 

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(

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