diff --git a/.changeset/early-carrots-provide.md b/.changeset/early-carrots-provide.md
new file mode 100644
index 000000000..811c4cb9e
--- /dev/null
+++ b/.changeset/early-carrots-provide.md
@@ -0,0 +1,5 @@
+---
+"@react-pdf/stylesheet": patch
+---
+
+refactor: stylesheet types
diff --git a/packages/stylesheet/globals.d.ts b/packages/stylesheet/globals.d.ts
new file mode 100644
index 000000000..c337459c7
--- /dev/null
+++ b/packages/stylesheet/globals.d.ts
@@ -0,0 +1,5 @@
+declare module 'hsl-to-hex';
+declare module 'color-string';
+declare module 'media-engine';
+declare module 'postcss-value-parser/lib/parse.js';
+declare module 'postcss-value-parser/lib/unit.js';
diff --git a/packages/stylesheet/src/resolve/borders.ts b/packages/stylesheet/src/resolve/borders.ts
index a2c9625e9..183cb3eaf 100644
--- a/packages/stylesheet/src/resolve/borders.ts
+++ b/packages/stylesheet/src/resolve/borders.ts
@@ -113,31 +113,31 @@ const resolveBorderShorthand = <K extends BorderKey>(
 };
 
 const handlers = {
-  border: resolveBorderShorthand,
-  borderBottom: resolveBorderShorthand,
-  borderBottomColor: processColorValue,
-  borderBottomLeftRadius: processUnitValue,
-  borderBottomRightRadius: processUnitValue,
-  borderBottomStyle: processNoopValue,
-  borderBottomWidth: processUnitValue,
-  borderColor: resolveBorderShorthand,
-  borderLeft: resolveBorderShorthand,
-  borderLeftColor: processColorValue,
-  borderLeftStyle: processNoopValue,
-  borderLeftWidth: processUnitValue,
-  borderRadius: resolveBorderShorthand,
-  borderRight: resolveBorderShorthand,
-  borderRightColor: processColorValue,
-  borderRightStyle: processNoopValue,
-  borderRightWidth: processUnitValue,
-  borderStyle: resolveBorderShorthand,
-  borderTop: resolveBorderShorthand,
-  borderTopColor: processColorValue,
-  borderTopLeftRadius: processUnitValue,
-  borderTopRightRadius: processUnitValue,
-  borderTopStyle: processNoopValue,
-  borderTopWidth: processUnitValue,
-  borderWidth: resolveBorderShorthand,
+  border: resolveBorderShorthand<'border'>,
+  borderBottom: resolveBorderShorthand<'borderBottom'>,
+  borderBottomColor: processColorValue<'borderBottomColor'>,
+  borderBottomLeftRadius: processUnitValue<'borderBottomLeftRadius'>,
+  borderBottomRightRadius: processUnitValue<'borderBottomRightRadius'>,
+  borderBottomStyle: processNoopValue<'borderBottomStyle'>,
+  borderBottomWidth: processUnitValue<'borderBottomWidth'>,
+  borderColor: resolveBorderShorthand<'borderColor'>,
+  borderLeft: resolveBorderShorthand<'borderLeft'>,
+  borderLeftColor: processColorValue<'borderLeftColor'>,
+  borderLeftStyle: processNoopValue<'borderLeftStyle'>,
+  borderLeftWidth: processUnitValue<'borderLeftWidth'>,
+  borderRadius: resolveBorderShorthand<'borderRadius'>,
+  borderRight: resolveBorderShorthand<'borderRight'>,
+  borderRightColor: processColorValue<'borderRightColor'>,
+  borderRightStyle: processNoopValue<'borderRightStyle'>,
+  borderRightWidth: processUnitValue<'borderRightWidth'>,
+  borderStyle: resolveBorderShorthand<'borderStyle'>,
+  borderTop: resolveBorderShorthand<'borderTop'>,
+  borderTopColor: processColorValue<'borderTopColor'>,
+  borderTopLeftRadius: processUnitValue<'borderTopLeftRadius'>,
+  borderTopRightRadius: processUnitValue<'borderTopRightRadius'>,
+  borderTopStyle: processNoopValue<'borderTopStyle'>,
+  borderTopWidth: processUnitValue<'borderTopWidth'>,
+  borderWidth: resolveBorderShorthand<'borderWidth'>,
 };
 
 export default handlers;
diff --git a/packages/stylesheet/src/resolve/boxModel.ts b/packages/stylesheet/src/resolve/boxModel.ts
index 5a323f35f..a899e954a 100644
--- a/packages/stylesheet/src/resolve/boxModel.ts
+++ b/packages/stylesheet/src/resolve/boxModel.ts
@@ -24,10 +24,10 @@ const logError = (style: any, value: any) => {
 };
 
 /**
- * @param {Object} options
- * @param {Function} [options.expandsTo]
- * @param {number} [options.maxValues]
- * @param {boolean} [options.autoSupported]
+ * @param options
+ * @param [options.expandsTo]
+ * @param [options.maxValues]
+ * @param [options.autoSupported]
  */
 const expandBoxModel =
   <S, E>({
diff --git a/packages/stylesheet/src/resolve/colors.ts b/packages/stylesheet/src/resolve/colors.ts
index 4d2fa1d7f..1c212a0a2 100644
--- a/packages/stylesheet/src/resolve/colors.ts
+++ b/packages/stylesheet/src/resolve/colors.ts
@@ -1,9 +1,9 @@
 import { processColorValue, processNumberValue } from './utils';
 
 const handlers = {
-  backgroundColor: processColorValue,
-  color: processColorValue,
-  opacity: processNumberValue,
+  backgroundColor: processColorValue<'backgroundColor'>,
+  color: processColorValue<'color'>,
+  opacity: processNumberValue<'opacity'>,
 };
 
 export default handlers;
diff --git a/packages/stylesheet/src/resolve/dimensions.ts b/packages/stylesheet/src/resolve/dimensions.ts
index 56be5b0eb..7a9c7e314 100644
--- a/packages/stylesheet/src/resolve/dimensions.ts
+++ b/packages/stylesheet/src/resolve/dimensions.ts
@@ -1,12 +1,12 @@
 import { processUnitValue } from './utils';
 
 const handlers = {
-  height: processUnitValue,
-  maxHeight: processUnitValue,
-  maxWidth: processUnitValue,
-  minHeight: processUnitValue,
-  minWidth: processUnitValue,
-  width: processUnitValue,
+  height: processUnitValue<'height'>,
+  maxHeight: processUnitValue<'maxHeight'>,
+  maxWidth: processUnitValue<'maxWidth'>,
+  minHeight: processUnitValue<'minHeight'>,
+  minWidth: processUnitValue<'minWidth'>,
+  width: processUnitValue<'width'>,
 };
 
 export default handlers;
diff --git a/packages/stylesheet/src/resolve/flex.ts b/packages/stylesheet/src/resolve/flex.ts
index 53bfe0bac..0a0bc4236 100644
--- a/packages/stylesheet/src/resolve/flex.ts
+++ b/packages/stylesheet/src/resolve/flex.ts
@@ -1,7 +1,13 @@
 // https://developer.mozilla.org/en-US/docs/Web/CSS/flex#values
 
+import { parseFloat } from '@react-pdf/fns';
+import { Container, Style, StyleKey } from '../types';
 import transformUnit from '../utils/units';
-import { processNoopValue, processUnitValue } from './utils';
+import {
+  processNoopValue,
+  processNumberValue,
+  processUnitValue,
+} from './utils';
 
 type FlexDefaults = (number | string | 'auto')[];
 
@@ -10,7 +16,11 @@ const flexDefaults: FlexDefaults = [1, 1, 0];
 
 const flexAuto: FlexDefaults = [1, 1, 'auto'];
 
-const processFlexShorthand = (key, value, container) => {
+const processFlexShorthand = <K extends StyleKey>(
+  key: K,
+  value: Style[K],
+  container: Container,
+) => {
   let defaults = flexDefaults;
   let matches: FlexDefaults = [];
 
@@ -20,26 +30,26 @@ const processFlexShorthand = (key, value, container) => {
     matches = `${value}`.split(' ');
   }
 
-  const flexGrow = transformUnit(container, matches[0] || defaults[0]);
-  const flexShrink = transformUnit(container, matches[1] || defaults[1]);
+  const flexGrow = parseFloat(matches[0] || defaults[0]);
+  const flexShrink = parseFloat(matches[1] || defaults[1]);
   const flexBasis = transformUnit(container, matches[2] || defaults[2]);
 
   return { flexGrow, flexShrink, flexBasis };
 };
 
 const handlers = {
-  alignContent: processNoopValue,
-  alignItems: processNoopValue,
-  alignSelf: processNoopValue,
-  flex: processFlexShorthand,
-  flexBasis: processUnitValue,
-  flexDirection: processNoopValue,
-  flexFlow: processNoopValue,
-  flexGrow: processUnitValue,
-  flexShrink: processUnitValue,
-  flexWrap: processNoopValue,
-  justifyContent: processNoopValue,
-  justifySelf: processNoopValue,
+  alignContent: processNoopValue<'alignContent'>,
+  alignItems: processNoopValue<'alignItems'>,
+  alignSelf: processNoopValue<'alignSelf'>,
+  flex: processFlexShorthand<'flex'>,
+  flexBasis: processUnitValue<'flexBasis'>,
+  flexDirection: processNoopValue<'flexDirection'>,
+  flexFlow: processNoopValue<'flexFlow'>,
+  flexGrow: processNumberValue<'flexGrow'>,
+  flexShrink: processNumberValue<'flexShrink'>,
+  flexWrap: processNoopValue<'flexWrap'>,
+  justifyContent: processNoopValue<'justifyContent'>,
+  justifySelf: processNoopValue<'justifySelf'>,
 };
 
 export default handlers;
diff --git a/packages/stylesheet/src/resolve/gap.ts b/packages/stylesheet/src/resolve/gap.ts
index 41b1d46bf..82c536cf6 100644
--- a/packages/stylesheet/src/resolve/gap.ts
+++ b/packages/stylesheet/src/resolve/gap.ts
@@ -1,19 +1,24 @@
+import { Container, Style, StyleKey } from '../types';
 import transformUnit from '../utils/units';
 import { processUnitValue } from './utils';
 
-const processGapShorthand = (key, value, container) => {
+const processGapShorthand = <K extends StyleKey>(
+  key: K,
+  value: Style[K],
+  container: Container,
+) => {
   const match = `${value}`.split(' ');
 
-  const rowGap = transformUnit(container, match?.[0] || value);
-  const columnGap = transformUnit(container, match?.[1] || value);
+  const rowGap = transformUnit(container, match?.[0] || value) as any;
+  const columnGap = transformUnit(container, match?.[1] || value) as any;
 
   return { rowGap, columnGap };
 };
 
 const handlers = {
-  gap: processGapShorthand,
-  columnGap: processUnitValue,
-  rowGap: processUnitValue,
+  gap: processGapShorthand<'gap'>,
+  columnGap: processUnitValue<'columnGap'>,
+  rowGap: processUnitValue<'rowGap'>,
 };
 
 export default handlers;
diff --git a/packages/stylesheet/src/resolve/index.ts b/packages/stylesheet/src/resolve/index.ts
index 58d0f7dc6..d78920a46 100644
--- a/packages/stylesheet/src/resolve/index.ts
+++ b/packages/stylesheet/src/resolve/index.ts
@@ -19,7 +19,7 @@ type Handler = (
   style: Style,
 ) => SafeStyle;
 
-const shorthands = {
+const shorthands: Partial<Record<StyleKey, Handler>> = {
   ...borderHandlers,
   ...colorHandlers,
   ...dimensionHandlers,
@@ -32,7 +32,7 @@ const shorthands = {
   ...textHandlers,
   ...transformHandlers,
   ...svgHandlers,
-} as Record<StyleKey, Handler>;
+};
 
 /**
  * Expand the shorthand properties.
diff --git a/packages/stylesheet/src/resolve/layout.ts b/packages/stylesheet/src/resolve/layout.ts
index 5a1af2425..4e5d39d24 100644
--- a/packages/stylesheet/src/resolve/layout.ts
+++ b/packages/stylesheet/src/resolve/layout.ts
@@ -5,15 +5,15 @@ import {
 } from './utils';
 
 const handlers = {
-  aspectRatio: processNumberValue,
-  bottom: processUnitValue,
-  display: processNoopValue,
-  left: processUnitValue,
-  position: processNoopValue,
-  right: processUnitValue,
-  top: processUnitValue,
-  overflow: processNoopValue,
-  zIndex: processNumberValue,
+  aspectRatio: processNumberValue<'aspectRatio'>,
+  bottom: processUnitValue<'bottom'>,
+  display: processNoopValue<'display'>,
+  left: processUnitValue<'left'>,
+  position: processNoopValue<'position'>,
+  right: processUnitValue<'right'>,
+  top: processUnitValue<'top'>,
+  overflow: processNoopValue<'overflow'>,
+  zIndex: processNumberValue<'zIndex'>,
 };
 
 export default handlers;
diff --git a/packages/stylesheet/src/resolve/margins.ts b/packages/stylesheet/src/resolve/margins.ts
index e94a2c8ca..f4a481fcd 100644
--- a/packages/stylesheet/src/resolve/margins.ts
+++ b/packages/stylesheet/src/resolve/margins.ts
@@ -35,13 +35,13 @@ const processMarginSingle = processBoxModel<MarginStyle, MarginSafeStyle>({
 });
 
 const handlers = {
-  margin: processMargin,
-  marginBottom: processMarginSingle,
-  marginHorizontal: processMarginHorizontal,
-  marginLeft: processMarginSingle,
-  marginRight: processMarginSingle,
-  marginTop: processMarginSingle,
-  marginVertical: processMarginVertical,
+  margin: processMargin<'margin'>,
+  marginBottom: processMarginSingle<'marginBottom'>,
+  marginHorizontal: processMarginHorizontal<'marginHorizontal'>,
+  marginLeft: processMarginSingle<'marginLeft'>,
+  marginRight: processMarginSingle<'marginRight'>,
+  marginTop: processMarginSingle<'marginTop'>,
+  marginVertical: processMarginVertical<'marginVertical'>,
 };
 
 export default handlers;
diff --git a/packages/stylesheet/src/resolve/paddings.ts b/packages/stylesheet/src/resolve/paddings.ts
index f22b820bf..069b23574 100644
--- a/packages/stylesheet/src/resolve/paddings.ts
+++ b/packages/stylesheet/src/resolve/paddings.ts
@@ -33,13 +33,13 @@ const processPaddingHorizontal = processBoxModel<
 const processPaddingSingle = processBoxModel<PaddingStyle, PaddingSafeStyle>();
 
 const handlers = {
-  padding: processPadding,
-  paddingBottom: processPaddingSingle,
-  paddingHorizontal: processPaddingHorizontal,
-  paddingLeft: processPaddingSingle,
-  paddingRight: processPaddingSingle,
-  paddingTop: processPaddingSingle,
-  paddingVertical: processPaddingVertical,
+  padding: processPadding<'padding'>,
+  paddingBottom: processPaddingSingle<'paddingBottom'>,
+  paddingHorizontal: processPaddingHorizontal<'paddingHorizontal'>,
+  paddingLeft: processPaddingSingle<'paddingLeft'>,
+  paddingRight: processPaddingSingle<'paddingRight'>,
+  paddingTop: processPaddingSingle<'paddingTop'>,
+  paddingVertical: processPaddingVertical<'paddingVertical'>,
 };
 
 export default handlers;
diff --git a/packages/stylesheet/src/resolve/positioning.ts b/packages/stylesheet/src/resolve/positioning.ts
index a7199362d..01c1bc0ee 100644
--- a/packages/stylesheet/src/resolve/positioning.ts
+++ b/packages/stylesheet/src/resolve/positioning.ts
@@ -1,8 +1,13 @@
 import transformUnit from '../utils/units';
 import offsetKeyword from '../utils/offsetKeyword';
 import { processNoopValue } from './utils';
+import { Container, Style, StyleKey } from '../types';
 
-const processObjectPosition = (key, value, container) => {
+const processObjectPosition = <K extends StyleKey>(
+  key: K,
+  value: Style[K],
+  container: Container,
+) => {
   const match = `${value}`.split(' ');
 
   const objectPositionX = offsetKeyword(
@@ -11,19 +16,22 @@ const processObjectPosition = (key, value, container) => {
   const objectPositionY = offsetKeyword(
     transformUnit(container, match?.[1] || value),
   );
-
   return { objectPositionX, objectPositionY };
 };
 
-const processObjectPositionValue = (key, value, container) => ({
+const processObjectPositionValue = <K extends StyleKey>(
+  key: K,
+  value: Style[K],
+  container: Container,
+) => ({
   [key]: offsetKeyword(transformUnit(container, value)),
 });
 
 const handlers = {
-  objectPosition: processObjectPosition,
-  objectPositionX: processObjectPositionValue,
-  objectPositionY: processObjectPositionValue,
-  objectFit: processNoopValue,
+  objectPosition: processObjectPosition<'objectPosition'>,
+  objectPositionX: processObjectPositionValue<'objectPositionX'>,
+  objectPositionY: processObjectPositionValue<'objectPositionY'>,
+  objectFit: processNoopValue<'objectFit'>,
 };
 
 export default handlers;
diff --git a/packages/stylesheet/src/resolve/svg.ts b/packages/stylesheet/src/resolve/svg.ts
index e50ff9967..4159bc006 100644
--- a/packages/stylesheet/src/resolve/svg.ts
+++ b/packages/stylesheet/src/resolve/svg.ts
@@ -6,19 +6,19 @@ import {
 } from './utils';
 
 const handlers = {
-  fill: processColorValue,
-  stroke: processColorValue,
-  strokeDasharray: processNoopValue,
-  strokeWidth: processUnitValue,
-  fillOpacity: processNumberValue,
-  strokeOpacity: processNumberValue,
-  fillRule: processNoopValue,
-  textAnchor: processNoopValue,
-  strokeLinecap: processNoopValue,
-  strokeLinejoin: processNoopValue,
-  visibility: processNoopValue,
-  clipPath: processNoopValue,
-  dominantBaseline: processNoopValue,
+  fill: processColorValue<'fill'>,
+  stroke: processColorValue<'stroke'>,
+  strokeDasharray: processNoopValue<'strokeDasharray'>,
+  strokeWidth: processUnitValue<'strokeWidth'>,
+  fillOpacity: processNumberValue<'fillOpacity'>,
+  strokeOpacity: processNumberValue<'strokeOpacity'>,
+  fillRule: processNoopValue<'fillRule'>,
+  textAnchor: processNoopValue<'textAnchor'>,
+  strokeLinecap: processNoopValue<'strokeLinecap'>,
+  strokeLinejoin: processNoopValue<'strokeLinejoin'>,
+  visibility: processNoopValue<'visibility'>,
+  clipPath: processNoopValue<'clipPath'>,
+  dominantBaseline: processNoopValue<'dominantBaseline'>,
 };
 
 export default handlers;
diff --git a/packages/stylesheet/src/resolve/text.ts b/packages/stylesheet/src/resolve/text.ts
index 122c040d4..c9c5f775b 100644
--- a/packages/stylesheet/src/resolve/text.ts
+++ b/packages/stylesheet/src/resolve/text.ts
@@ -9,6 +9,7 @@ import { matchPercent } from '@react-pdf/fns';
 
 import castInt from '../utils/castInt';
 import transformUnit from '../utils/units';
+import { Container, FontWeight, Style, StyleKey } from '../types';
 
 const FONT_WEIGHTS = {
   thin: 100,
@@ -27,7 +28,7 @@ const FONT_WEIGHTS = {
   black: 900,
 };
 
-const transformFontWeight = (value) => {
+const transformFontWeight = (value: FontWeight) => {
   if (!value) return FONT_WEIGHTS.normal;
   if (typeof value === 'number') return value;
 
@@ -38,7 +39,7 @@ const transformFontWeight = (value) => {
   return castInt(value);
 };
 
-const processFontWeight = (key, value) => {
+const processFontWeight = <K extends StyleKey>(key: K, value: Style[K]) => {
   return { [key]: transformFontWeight(value) };
 };
 
@@ -56,29 +57,34 @@ const transformLineHeight = (value, styles, container) => {
   return isNaN(value) ? lineHeight : lineHeight * fontSize;
 };
 
-const processLineHeight = (key, value, container, styles) => {
+const processLineHeight = <K extends StyleKey>(
+  key: K,
+  value: Style[K],
+  container: Container,
+  styles: Style,
+) => {
   return {
     [key]: transformLineHeight(value, styles, container),
   };
 };
 
 const handlers = {
-  direction: processNoopValue,
-  fontFamily: processNoopValue,
-  fontSize: processUnitValue,
-  fontStyle: processNoopValue,
-  fontWeight: processFontWeight,
-  letterSpacing: processUnitValue,
-  lineHeight: processLineHeight,
-  maxLines: processNumberValue,
-  textAlign: processNoopValue,
-  textDecoration: processNoopValue,
-  textDecorationColor: processColorValue,
-  textDecorationStyle: processNoopValue,
-  textIndent: processNoopValue,
-  textOverflow: processNoopValue,
-  textTransform: processNoopValue,
-  verticalAlign: processNoopValue,
+  direction: processNoopValue<'direction'>,
+  fontFamily: processNoopValue<'fontFamily'>,
+  fontSize: processUnitValue<'fontSize'>,
+  fontStyle: processNoopValue<'fontStyle'>,
+  fontWeight: processFontWeight<'fontWeight'>,
+  letterSpacing: processUnitValue<'letterSpacing'>,
+  lineHeight: processLineHeight<'lineHeight'>,
+  maxLines: processNumberValue<'maxLines'>,
+  textAlign: processNoopValue<'textAlign'>,
+  textDecoration: processNoopValue<'textDecoration'>,
+  textDecorationColor: processColorValue<'textDecorationColor'>,
+  textDecorationStyle: processNoopValue<'textDecorationStyle'>,
+  textIndent: processNoopValue<'textIndent'>,
+  textOverflow: processNoopValue<'textOverflow'>,
+  textTransform: processNoopValue<'textTransform'>,
+  verticalAlign: processNoopValue<'verticalAlign'>,
 };
 
 export default handlers;
diff --git a/packages/stylesheet/src/resolve/transform.ts b/packages/stylesheet/src/resolve/transform.ts
index ed716f53c..ebc5e173e 100644
--- a/packages/stylesheet/src/resolve/transform.ts
+++ b/packages/stylesheet/src/resolve/transform.ts
@@ -1,8 +1,9 @@
 import transformUnit from '../utils/units';
 import castFloat from '../utils/castFloat';
 import offsetKeyword from '../utils/offsetKeyword';
+import { Container, Style, StyleKey, Transform } from '../types';
 
-const parse = (transformString) => {
+const parse = (transformString: string) => {
   const transforms = transformString.trim().split(/\)[ ,]|\)/);
 
   // Handle "initial", "inherit", "unset".
@@ -26,7 +27,7 @@ const parse = (transformString) => {
   return parsed;
 };
 
-const parseAngle = (value) => {
+const parseAngle = (value: string) => {
   const unitsRegexp = /(-?\d*\.?\d*)(\w*)?/i;
   const [, angle, unit] = unitsRegexp.exec(value);
   const number = Number.parseFloat(angle);
@@ -34,7 +35,7 @@ const parseAngle = (value) => {
   return unit === 'rad' ? (number * 180) / Math.PI : number;
 };
 
-const normalizeTransformOperation = ({ operation, value }) => {
+const normalizeTransformOperation = ({ operation, value }): Transform => {
   switch (operation) {
     case 'scale': {
       const [scaleX, scaleY = scaleX] = value.map((num) =>
@@ -90,11 +91,11 @@ const normalizeTransformOperation = ({ operation, value }) => {
   }
 };
 
-const normalize = (operations) => {
+const normalize = (operations): Transform[] => {
   return operations.map((operation) => normalizeTransformOperation(operation));
 };
 
-const processTransform = (key, value) => {
+const processTransform = (key: 'transform', value: Style['transform']) => {
   if (typeof value !== 'string') return { [key]: value };
 
   return { [key]: normalize(parse(value)) };
@@ -117,7 +118,11 @@ const getTransformOriginPair = (values) => {
 };
 
 // Transforms shorthand transformOrigin values
-const processTransformOriginShorthand = (key, value, container) => {
+const processTransformOriginShorthand = <K extends StyleKey>(
+  key: K,
+  value: Style[K],
+  container: Container,
+) => {
   const match = `${value}`.split(' ');
 
   const pair = getTransformOriginPair(match);
@@ -133,16 +138,20 @@ const processTransformOriginShorthand = (key, value, container) => {
   };
 };
 
-const processTransformOriginValue = (key, value: any, container) => {
+const processTransformOriginValue = <K extends StyleKey>(
+  key: K,
+  value: Style[K],
+  container: Container,
+) => {
   const v = transformUnit(container, value);
   return { [key]: offsetKeyword(v) || castFloat(v) };
 };
 
 const handlers = {
   transform: processTransform,
-  transformOrigin: processTransformOriginShorthand,
-  transformOriginX: processTransformOriginValue,
-  transformOriginY: processTransformOriginValue,
+  transformOrigin: processTransformOriginShorthand<'transformOrigin'>,
+  transformOriginX: processTransformOriginValue<'transformOriginX'>,
+  transformOriginY: processTransformOriginValue<'transformOriginY'>,
 };
 
 export default handlers;
diff --git a/packages/stylesheet/src/resolve/utils.ts b/packages/stylesheet/src/resolve/utils.ts
index c2767e479..373718052 100644
--- a/packages/stylesheet/src/resolve/utils.ts
+++ b/packages/stylesheet/src/resolve/utils.ts
@@ -1,3 +1,5 @@
+import { parseFloat } from '@react-pdf/fns';
+
 import transformUnit from '../utils/units';
 import transformColor from '../utils/colors';
 import { Container, Style, StyleKey } from '../types';
diff --git a/packages/stylesheet/src/types.ts b/packages/stylesheet/src/types.ts
index 102c81d53..28a594a53 100644
--- a/packages/stylesheet/src/types.ts
+++ b/packages/stylesheet/src/types.ts
@@ -133,8 +133,8 @@ export type GapExpandedStyle = {
 };
 
 export type GapSafeStyle = {
-  rowGap?: number;
-  columnGap?: number;
+  rowGap?: number | Percentage;
+  columnGap?: number | Percentage;
 };
 
 export type GapStyle = GapShorthandStyle & GapExpandedStyle;
@@ -160,6 +160,38 @@ export type PositioningStyle = PositionShorthandStyle & PositionExpandedStyle;
 
 // Transform
 
+export type ScaleTransform = {
+  operation: 'scale';
+  value: [number, number];
+};
+
+export type TranslateTransform = {
+  operation: 'translate';
+  value: [number, number];
+};
+
+export type RotateTransform = {
+  operation: 'rotate';
+  value: [number];
+};
+
+export type SkewTransform = {
+  operation: 'skew';
+  value: [number, number];
+};
+
+export type MatrixTransform = {
+  operation: 'matrix';
+  value: [number, number, number, number, number, number];
+};
+
+export type Transform =
+  | ScaleTransform
+  | TranslateTransform
+  | RotateTransform
+  | SkewTransform
+  | MatrixTransform;
+
 export type TransformShorthandStyle = {
   transformOrigin?: number | string;
 };
@@ -167,12 +199,13 @@ export type TransformShorthandStyle = {
 export type TransformExpandedStyle = {
   transformOriginX?: number | string;
   transformOriginY?: number | string;
-  transform?: string;
+  transform?: string | Transform[];
 };
 
-export type TransformSafeStyle = TransformExpandedStyle & {
+export type TransformSafeStyle = Omit<TransformExpandedStyle, 'transform'> & {
   transformOriginX?: number | Percentage;
   transformOriginY?: number | Percentage;
+  transform?: Transform[];
 };
 
 export type TransformStyle = TransformShorthandStyle & TransformExpandedStyle;
@@ -416,7 +449,7 @@ type MediaQueryStyle = {
 
 export type Style = BaseStyle & MediaQueryStyle;
 
-export type StyleKey = keyof Style;
+export type StyleKey = keyof BaseStyle;
 
 export type ExpandedStyle = BorderExpandedStyle &
   ColorExpandedStyle &
diff --git a/packages/stylesheet/tests/flex.test.ts b/packages/stylesheet/tests/flex.test.ts
index cd87dbef5..b508356f4 100644
--- a/packages/stylesheet/tests/flex.test.ts
+++ b/packages/stylesheet/tests/flex.test.ts
@@ -59,18 +59,6 @@ describe('resolve stylesheet flex', () => {
     expect(styles).toEqual({ flexGrow: 1 });
   });
 
-  test('should resolve flex grow percent', () => {
-    const styles = resolveStyle({ flexGrow: '40%' });
-
-    expect(styles).toEqual({ flexGrow: '40%' });
-  });
-
-  test('should resolve flex grow auto', () => {
-    const styles = resolveStyle({ flexGrow: 'auto' });
-
-    expect(styles).toEqual({ flexGrow: 'auto' });
-  });
-
   test('should resolve flex shrink', () => {
     const styles = resolveStyle({ flexShrink: 1 });
 
@@ -83,18 +71,6 @@ describe('resolve stylesheet flex', () => {
     expect(styles).toEqual({ flexShrink: 1 });
   });
 
-  test('should resolve flex shrink percent', () => {
-    const styles = resolveStyle({ flexShrink: '40%' });
-
-    expect(styles).toEqual({ flexShrink: '40%' });
-  });
-
-  test('should resolve flex shrink auto', () => {
-    const styles = resolveStyle({ flexShrink: 'auto%' });
-
-    expect(styles).toEqual({ flexShrink: 'auto%' });
-  });
-
   test('should resolve flex basis', () => {
     const styles = resolveStyle({ flexBasis: 1 });