refactor: stylesheet types (#3099)

Author: diegomura

.changeset/early-carrots-provide.md

@@ -0,0 +1,5 @@
+---
+"@react-pdf/stylesheet": patch
+---
+
+refactor: stylesheet types

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';

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;

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>({

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;

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;

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;

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;

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.

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;

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;

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;

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;

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;