refactor: convert stylesheet package to TS

packages/fns/src/compose.ts

@@ -1,4 +1,18 @@
-import reverse from './reverse';
+type Fn = (arg: any, ...args: any[]) => any;
+
+type FirstFnParameterType<T extends Fn[]> = T extends [
+  ...any,
+  (arg: infer A, ...args: any[]) => any,
+]
+  ? A
+  : never;
+
+type LastFnReturnType<T extends Fn[]> = T extends [
+  (arg: any, ...args: any[]) => infer R,
+  ...any,
+]
+  ? R
+  : never;
 
 /**
  * Performs right-to-left function composition
@@ -7,17 +21,18 @@ import reverse from './reverse';
  * @returns Composed function
  */
 const compose =
-  (...fns: any[]) =>
-  (value: any, ...args: any[]) => {
-    let result = value;
-    const reversedFns = reverse(fns);
+  <T extends Fn[]>(...fns: T) =>
+  (value: FirstFnParameterType<T>, ...args: any[]): LastFnReturnType<T> => {
+    let result: unknown = value;
+
+    const reversedFns = fns.slice().reverse();
 
     for (let i = 0; i < reversedFns.length; i += 1) {
       const fn = reversedFns[i];
       result = fn(result, ...args);
     }
 
-    return result;
+    return result as LastFnReturnType<T>;
   };
 
 export default compose;

packages/layout/src/steps/resolveSvg.js

@@ -1,5 +1,5 @@
 import * as P from '@react-pdf/primitives';
-import { transformColor, processTransform } from '@react-pdf/stylesheet';
+import resolveStyle, { transformColor } from '@react-pdf/stylesheet';
 import { pick, evolve, compose, mapValues, matchPercent } from '@react-pdf/fns';
 
 import layoutText from '../svg/layoutText';
@@ -59,6 +59,10 @@ const parsePercent = (value) => {
   return match ? match.percent : parseFloat(value);
 };
 
+const parseTransform = (container) => (value) => {
+  return resolveStyle(container, { transform: value }).transform;
+};
+
 const parseProps = (container) => (node) => {
   let props = transformPercent(container)(node.props);
 
@@ -83,7 +87,7 @@ const parseProps = (container) => (node) => {
       stroke: transformColor,
       stopOpacity: parsePercent,
       stopColor: transformColor,
-      transform: processTransform,
+      transform: parseTransform(container),
     },
     props,
   );