fix(types): ease style param typing (#1)

williamsjokvist · web-flow · commit f9dcc537fcae · 2025-07-14T18:40:18.000+02:00
diff --git a/packages/layout/src/types/canvas.ts b/packages/layout/src/types/canvas.ts
@@ -1,5 +1,6 @@
 import * as P from '@react-pdf/primitives';
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
+
 import { YogaNode } from 'yoga-layout/load';
 
 import { Box, NodeProps, Origin } from './base';
@@ -15,7 +16,7 @@ interface CanvasProps extends NodeProps {
 export type CanvasNode = {
   type: typeof P.Canvas;
   props: CanvasProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: Box;
   origin?: Origin;
   yogaNode?: YogaNode;
diff --git a/packages/layout/src/types/checkbox.ts b/packages/layout/src/types/checkbox.ts
@@ -1,5 +1,5 @@
 import * as P from '@react-pdf/primitives';
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 import { YogaNode } from 'yoga-layout/load';
 
 import { Box, FormCommonProps, Origin } from './base';
@@ -16,7 +16,7 @@ interface CheckboxProps extends FormCommonProps {
 export type CheckboxNode = {
   type: typeof P.Checkbox;
   props: CheckboxProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: Box;
   origin?: Origin;
   yogaNode?: YogaNode;
diff --git a/packages/layout/src/types/circle.ts b/packages/layout/src/types/circle.ts
@@ -1,5 +1,5 @@
 import * as P from '@react-pdf/primitives';
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 
 import {
   Origin,
@@ -24,7 +24,7 @@ interface SafeCircleProps extends SafeSVGPresentationAttributes {
 export type CircleNode = {
   type: typeof P.Circle;
   props: CircleProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: never;
   origin?: Origin;
   yogaNode?: never;
diff --git a/packages/layout/src/types/document.ts b/packages/layout/src/types/document.ts
@@ -2,7 +2,7 @@ import * as P from '@react-pdf/primitives';
 
 import { PageNode, SafePageNode } from './page';
 import { YogaInstance } from './base';
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 
 export type PDFVersion = '1.3' | '1.4' | '1.5' | '1.6' | '1.7' | '1.7ext3';
 
@@ -48,7 +48,7 @@ export type DocumentNode = {
   props: DocumentProps;
   box?: never;
   origin?: never;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   yoga?: YogaInstance;
   yogaNode?: never;
   children: PageNode[];
diff --git a/packages/layout/src/types/ellipse.ts b/packages/layout/src/types/ellipse.ts
@@ -1,5 +1,5 @@
 import * as P from '@react-pdf/primitives';
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 
 import {
   SafeSVGPresentationAttributes,
@@ -25,7 +25,7 @@ interface SafeEllipseProps extends SafeSVGPresentationAttributes {
 export type EllipseNode = {
   type: typeof P.Ellipse;
   props: EllipseProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: never;
   origin?: never;
   yogaNode?: never;
diff --git a/packages/layout/src/types/field-set.ts b/packages/layout/src/types/field-set.ts
@@ -1,5 +1,5 @@
 import * as P from '@react-pdf/primitives';
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 import { YogaNode } from 'yoga-layout/load';
 
 import { Box, NodeProps, Origin } from './base';
@@ -14,7 +14,7 @@ interface FieldSetProps extends NodeProps {
 export type FieldSetNode = {
   type: typeof P.FieldSet;
   props: FieldSetProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: Box;
   origin?: Origin;
   yogaNode?: YogaNode;
diff --git a/packages/layout/src/types/g.ts b/packages/layout/src/types/g.ts
@@ -1,4 +1,4 @@
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 import * as P from '@react-pdf/primitives';
 
 import { LineNode, SafeLineNode } from './line';
@@ -17,7 +17,7 @@ import {
 } from './base';
 
 interface GProps extends SVGPresentationAttributes {
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
 }
 
 interface SafeGProps extends SafeSVGPresentationAttributes {
@@ -27,7 +27,7 @@ interface SafeGProps extends SafeSVGPresentationAttributes {
 export type GNode = {
   type: typeof P.G;
   props: GProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: never;
   origin?: never;
   yogaNode?: never;
diff --git a/packages/layout/src/types/image.ts b/packages/layout/src/types/image.ts
@@ -1,4 +1,4 @@
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 import * as P from '@react-pdf/primitives';
 import { YogaNode } from 'yoga-layout/load';
 
@@ -65,7 +65,7 @@ export type ImageNode = {
   type: typeof P.Image;
   props: ImageProps;
   image?: Image;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: Box;
   origin?: Origin;
   yogaNode?: YogaNode;
diff --git a/packages/layout/src/types/line.ts b/packages/layout/src/types/line.ts
@@ -1,5 +1,5 @@
 import * as P from '@react-pdf/primitives';
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 
 import {
   SVGPresentationAttributes,
@@ -25,7 +25,7 @@ interface SafeLineProps extends SafeSVGPresentationAttributes {
 export type LineNode = {
   type: typeof P.Line;
   props: LineProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: never;
   origin?: never;
   yogaNode?: never;
diff --git a/packages/layout/src/types/link.ts b/packages/layout/src/types/link.ts
@@ -1,4 +1,4 @@
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 import * as P from '@react-pdf/primitives';
 import { YogaNode } from 'yoga-layout/load';
 
@@ -22,7 +22,7 @@ interface LinkProps extends NodeProps {
 export type LinkNode = {
   type: typeof P.Link;
   props: LinkProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: Box;
   origin?: Origin;
   yogaNode?: YogaNode;
diff --git a/packages/layout/src/types/note.ts b/packages/layout/src/types/note.ts
@@ -1,13 +1,13 @@
 import * as P from '@react-pdf/primitives';
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 
 import { NodeProps } from './base';
 import { SafeTextInstanceNode, TextInstanceNode } from './text-instance';
 
 export type NoteNode = {
   type: typeof P.Note;
   props: NodeProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: never;
   origin?: never;
   yogaNode?: never;
diff --git a/packages/layout/src/types/page.ts b/packages/layout/src/types/page.ts
@@ -1,4 +1,4 @@
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 import * as P from '@react-pdf/primitives';
 import { YogaNode } from 'yoga-layout/load';
 
@@ -92,7 +92,7 @@ interface PageProps extends NodeProps {
 export type PageNode = {
   type: typeof P.Page;
   props: PageProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: Box;
   origin?: Origin;
   yogaNode?: YogaNode;
diff --git a/packages/layout/src/types/path.ts b/packages/layout/src/types/path.ts
@@ -1,5 +1,5 @@
 import * as P from '@react-pdf/primitives';
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 
 import {
   SVGPresentationAttributes,
@@ -19,7 +19,7 @@ interface SafePathProps extends SafeSVGPresentationAttributes {
 export type PathNode = {
   type: typeof P.Path;
   props: PathProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: never;
   origin?: never;
   yogaNode?: never;
diff --git a/packages/layout/src/types/polygon.ts b/packages/layout/src/types/polygon.ts
@@ -1,5 +1,5 @@
 import * as P from '@react-pdf/primitives';
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 
 import {
   SafeSVGPresentationAttributes,
@@ -19,7 +19,7 @@ interface SafePolygonProps extends SafeSVGPresentationAttributes {
 export type PolygonNode = {
   type: typeof P.Polygon;
   props: PolygonProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: never;
   origin?: never;
   yogaNode?: never;
diff --git a/packages/layout/src/types/polyline.ts b/packages/layout/src/types/polyline.ts
@@ -1,5 +1,5 @@
 import * as P from '@react-pdf/primitives';
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 
 import {
   SVGPresentationAttributes,
@@ -19,7 +19,7 @@ interface SafePolylineProps extends SafeSVGPresentationAttributes {
 export type PolylineNode = {
   type: typeof P.Polyline;
   props: PolylineProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: never;
   origin?: never;
   yogaNode?: never;
diff --git a/packages/layout/src/types/rect.ts b/packages/layout/src/types/rect.ts
@@ -1,5 +1,5 @@
 import * as P from '@react-pdf/primitives';
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 
 import {
   SVGPresentationAttributes,
@@ -29,7 +29,7 @@ interface SafeRectProps extends SafeSVGPresentationAttributes {
 export type RectNode = {
   type: typeof P.Rect;
   props: RectProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: never;
   origin?: never;
   yogaNode?: never;
diff --git a/packages/layout/src/types/select.ts b/packages/layout/src/types/select.ts
@@ -1,5 +1,5 @@
 import * as P from '@react-pdf/primitives';
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 import { YogaNode } from 'yoga-layout/load';
 
 import { Box, FormCommonProps, Origin } from './base';
@@ -15,7 +15,7 @@ interface SelectAndListProps extends FormCommonProps {
 export type SelectNode = {
   type: typeof P.Select;
   props: SelectAndListProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: Box;
   origin?: Origin;
   yogaNode?: never;
@@ -29,7 +29,7 @@ export type SafeSelectNode = Omit<SelectNode, 'style'> & {
 export type ListNode = {
   type: typeof P.List;
   props: SelectAndListProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: Box;
   origin?: Origin;
   yogaNode?: YogaNode;
diff --git a/packages/layout/src/types/svg.ts b/packages/layout/src/types/svg.ts
@@ -1,4 +1,4 @@
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 import * as P from '@react-pdf/primitives';
 import { YogaNode } from 'yoga-layout/load';
 
@@ -61,7 +61,7 @@ interface SvgSafeProps extends NodeProps, SafeSVGPresentationAttributes {
 export type SvgNode = {
   type: typeof P.Svg;
   props: SvgProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: Box;
   origin?: Origin;
   yogaNode?: YogaNode;
diff --git a/packages/layout/src/types/text-input.ts b/packages/layout/src/types/text-input.ts
@@ -1,5 +1,5 @@
 import * as P from '@react-pdf/primitives';
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 import { YogaNode } from 'yoga-layout/load';
 
 import { Box, FormCommonProps, Origin } from './base';
@@ -49,7 +49,7 @@ interface TextInputProps extends FormCommonProps {
 export type TextInputNode = {
   type: typeof P.TextInput;
   props: TextInputProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: Box;
   origin?: Origin;
   yogaNode?: YogaNode;
diff --git a/packages/layout/src/types/text.ts b/packages/layout/src/types/text.ts
@@ -1,5 +1,5 @@
 import * as P from '@react-pdf/primitives';
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 import { HyphenationCallback } from '@react-pdf/font';
 import { YogaNode } from 'yoga-layout/load';
 import { Paragraph } from '@react-pdf/textkit';
@@ -39,7 +39,7 @@ interface TextProps extends NodeProps {
 export type TextNode = {
   type: typeof P.Text;
   props: TextProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: Box;
   origin?: Origin;
   yogaNode?: YogaNode;
diff --git a/packages/layout/src/types/tspan.ts b/packages/layout/src/types/tspan.ts
@@ -1,5 +1,5 @@
 import * as P from '@react-pdf/primitives';
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 import { Paragraph } from '@react-pdf/textkit';
 
 import {
@@ -21,7 +21,7 @@ interface SafeTspanProps extends SafeSVGPresentationAttributes {
 export type TspanNode = {
   type: typeof P.Tspan;
   props: TspanProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: never;
   origin?: never;
   yogaNode?: never;
diff --git a/packages/layout/src/types/view.ts b/packages/layout/src/types/view.ts
@@ -1,5 +1,5 @@
 import * as P from '@react-pdf/primitives';
-import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { SafeStyle, Style, StyleProp } from '@react-pdf/stylesheet';
 import { YogaNode } from 'yoga-layout/load';
 
 import { Box, NodeProps, Origin, RenderProp } from './base';
@@ -26,7 +26,7 @@ interface ViewProps extends NodeProps {
 export type ViewNode = {
   type: typeof P.View;
   props: ViewProps;
-  style?: Style | Style[];
+  style?: StyleProp<Style | Style[]>;
   box?: Box;
   origin?: Origin;
   yogaNode?: YogaNode;
diff --git a/packages/renderer/index.d.ts b/packages/renderer/index.d.ts
diff --git a/packages/stylesheet/src/types.ts b/packages/stylesheet/src/types.ts
diff --git a/packages/types/style.d.ts b/packages/types/style.d.ts
