refactor: rework and type stylesheet package (#3082)

Author: diegomura

.changeset/serious-olives-bow.md

@@ -0,0 +1,8 @@
+---
+"@react-pdf/stylesheet": major
+"@react-pdf/types": minor
+"@react-pdf/layout": patch
+"@react-pdf/fns": patch
+---
+
+feat: rework and type stylesheet package

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

packages/stylesheet/babel.config.js

@@ -7,6 +7,7 @@
   "homepage": "https://github.com/diegomura/react-pdf#readme",
   "type": "module",
   "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/diegomura/react-pdf.git",
@@ -18,7 +19,6 @@
     "watch": "rimraf ./lib && rollup -c -w"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
     "@react-pdf/fns": "3.1.0",
     "@react-pdf/types": "^2.7.1",
     "color-string": "^1.9.1",

packages/stylesheet/package.json

@@ -1,30 +1,21 @@
+import { dts } from 'rollup-plugin-dts';
+import del from 'rollup-plugin-delete';
+import typescript from '@rollup/plugin-typescript';
 import localResolve from 'rollup-plugin-local-resolve';
-import babel from '@rollup/plugin-babel';
 
 import pkg from './package.json' with { type: 'json' };
 
-const input = 'src/index.js';
-
-const getExternal = () => [
-  ...Object.keys(pkg.dependencies),
-  /@babel\/runtime/,
-  /@react-pdf/,
-];
-
-const getPlugins = () => [
-  localResolve(),
-  babel({
-    babelrc: true,
-    babelHelpers: 'runtime',
-    exclude: 'node_modules/**',
-  }),
-];
-
 const config = {
-  input,
+  input: 'src/index.ts',
   output: { format: 'es', file: 'lib/index.js' },
-  external: getExternal(),
-  plugins: getPlugins(),
+  external: [...Object.keys(pkg.dependencies), /@react-pdf/],
+  plugins: [typescript(), localResolve()],
+};
+
+const dtsConfig = {
+  input: './lib/types/index.d.ts',
+  output: [{ file: 'lib/index.d.ts', format: 'es' }],
+  plugins: [dts(), del({ targets: 'lib/types', hook: 'buildEnd' })],
 };
 
-export default config;
+export default [config, dtsConfig];