@react-pdf/stylesheet 6.0.0 → 6.0.2

package/lib/index.d.ts

@@ -5,6 +5,7 @@ type Container = {
     remBase?: number;
     orientation?: 'landscape' | 'portrait';
 };
+type Percentage = `${string}%`;
 type BorderStyleValue = 'dashed' | 'dotted' | 'solid';
 type BorderShorthandStyle = {
     border?: number | string;
@@ -40,10 +41,10 @@ type BorderSafeStyle = BorderExpandedStyle & {
     borderRightWidth?: number;
     borderBottomWidth?: number;
     borderLeftWidth?: number;
-    borderTopLeftRadius?: number;
-    borderTopRightRadius?: number;
-    borderBottomRightRadius?: number;
-    borderBottomLeftRadius?: number;
+    borderTopLeftRadius?: number | Percentage;
+    borderTopRightRadius?: number | Percentage;
+    borderBottomRightRadius?: number | Percentage;
+    borderBottomLeftRadius?: number | Percentage;
 };
 type BorderStyle = BorderShorthandStyle & BorderExpandedStyle;
 type FlexboxShorthandStyle = {
@@ -82,8 +83,8 @@ type GapExpandedStyle = {
     columnGap?: number | string;
 };
 type GapSafeStyle = {
-    rowGap?: number;
-    columnGap?: number;
+    rowGap?: number | Percentage;
+    columnGap?: number | Percentage;
 };
 type GapStyle = GapShorthandStyle & GapExpandedStyle;
 type PositionShorthandStyle = {
@@ -99,17 +100,39 @@ type PositionSafeStyle = PositionExpandedStyle & {
     objectPositionY?: number;
 };
 type PositioningStyle = PositionShorthandStyle & PositionExpandedStyle;
+type ScaleTransform = {
+    operation: 'scale';
+    value: [number, number];
+};
+type TranslateTransform = {
+    operation: 'translate';
+    value: [number, number];
+};
+type RotateTransform = {
+    operation: 'rotate';
+    value: [number];
+};
+type SkewTransform = {
+    operation: 'skew';
+    value: [number, number];
+};
+type MatrixTransform = {
+    operation: 'matrix';
+    value: [number, number, number, number, number, number];
+};
+type Transform = ScaleTransform | TranslateTransform | RotateTransform | SkewTransform | MatrixTransform;
 type TransformShorthandStyle = {
     transformOrigin?: number | string;
 };
 type TransformExpandedStyle = {
     transformOriginX?: number | string;
     transformOriginY?: number | string;
-    transform?: string;
+    transform?: string | Transform[];
 };
-type TransformSafeStyle = TransformExpandedStyle & {
-    transformOriginX?: number;
-    transformOriginY?: number;
+type TransformSafeStyle = Omit<TransformExpandedStyle, 'transform'> & {
+    transformOriginX?: number | Percentage;
+    transformOriginY?: number | Percentage;
+    transform?: Transform[];
 };
 type TransformStyle = TransformShorthandStyle & TransformExpandedStyle;
 type Display = 'flex' | 'none';
@@ -144,18 +167,19 @@ type DimensionStyle = {
 };
 type DimensionExpandedStyle = DimensionStyle;
 type DimensionSafeStyle = DimensionExpandedStyle & {
-    height?: number;
-    maxHeight?: number;
-    maxWidth?: number;
-    minHeight?: number;
-    minWidth?: number;
-    width?: number;
+    height?: number | Percentage;
+    maxHeight?: number | Percentage;
+    maxWidth?: number | Percentage;
+    minHeight?: number | Percentage;
+    minWidth?: number | Percentage;
+    width?: number | Percentage;
 };
 type ColorStyle = {
     backgroundColor?: string;
     color?: string;
     opacity?: number | string;
 };
+type ColorExpandedStyle = ColorStyle;
 type ColorSafeStyle = {
     backgroundColor?: string;
     color?: string;
@@ -166,9 +190,10 @@ type FontWeight = string | number | 'thin' | 'hairline' | 'ultralight' | 'extral
 type TextAlign = 'left' | 'right' | 'center' | 'justify';
 type TextDecoration = 'line-through' | 'underline' | 'none' | 'line-through underline' | 'underline line-through';
 type TextDecorationStyle = 'dashed' | 'dotted' | 'solid' | string;
-type TextTransform = 'capitalize' | 'lowercase' | 'uppercase' | 'none';
+type TextTransform = 'capitalize' | 'lowercase' | 'uppercase' | 'upperfirst' | 'none';
 type VerticalAlign = 'sub' | 'super';
 type TextStyle = {
+    direction?: 'ltr' | 'rtl';
     fontSize?: number | string;
     fontFamily?: string | string[];
     fontStyle?: FontStyle;
@@ -204,10 +229,10 @@ type MarginExpandedStyle = {
     marginLeft?: number | string;
 };
 type MarginSafeStyle = MarginExpandedStyle & {
-    marginTop?: number;
-    marginRight?: number;
-    marginBottom?: number;
-    marginLeft?: number;
+    marginTop?: number | Percentage;
+    marginRight?: number | Percentage;
+    marginBottom?: number | Percentage;
+    marginLeft?: number | Percentage;
 };
 type MarginStyle = MarginShorthandStyle & MarginExpandedStyle;
 type PaddingShorthandStyle = {
@@ -222,10 +247,10 @@ type PaddingExpandedStyle = {
     paddingLeft?: number | string;
 };
 type PaddingSafeStyle = PaddingExpandedStyle & {
-    paddingTop?: number;
-    paddingRight?: number;
-    paddingBottom?: number;
-    paddingLeft?: number;
+    paddingTop?: number | Percentage;
+    paddingRight?: number | Percentage;
+    paddingBottom?: number | Percentage;
+    paddingLeft?: number | Percentage;
 };
 type PaddingStyle = PaddingShorthandStyle & PaddingExpandedStyle;
 interface SvgStyle {
@@ -243,6 +268,7 @@ interface SvgStyle {
     clipPath?: string;
     dominantBaseline?: 'auto' | 'middle' | 'central' | 'hanging' | 'mathematical' | 'text-after-edge' | 'text-before-edge';
 }
+type SvgExpandedStyle = SvgStyle;
 type SvgSafeStyle = SvgStyle & {
     strokeWidth?: number;
     fillOpacity?: number;
@@ -253,6 +279,8 @@ type MediaQueryStyle = {
     [key in `@media${string}`]: BaseStyle;
 };
 type Style = BaseStyle & MediaQueryStyle;
+type StyleKey = keyof BaseStyle;
+type ExpandedStyle = BorderExpandedStyle & ColorExpandedStyle & DimensionExpandedStyle & FlexboxExpandedStyle & GapExpandedStyle & LayoutExpandedStyle & MarginExpandedStyle & PaddingExpandedStyle & PositionExpandedStyle & TextExpandedStyle & TransformExpandedStyle & SvgExpandedStyle;
 type SafeStyle = BorderSafeStyle & ColorSafeStyle & DimensionSafeStyle & FlexboxSafeStyle & GapSafeStyle & LayoutSafeStyle & MarginSafeStyle & PaddingSafeStyle & PositionSafeStyle & TextSafeStyle & TransformSafeStyle & SvgSafeStyle;
 
 /**
@@ -281,4 +309,4 @@ type StyleParam = Style | null | undefined;
  */
 declare const resolveStyles: (container: Container, style: StyleParam | StyleParam[]) => SafeStyle;
 
-export { type SafeStyle, type Style, resolveStyles as default, flatten, transformColor };
+export { type AlignContent, type AlignItems, type AlignSelf, type BorderExpandedStyle, type BorderSafeStyle, type BorderShorthandStyle, type BorderStyle, type BorderStyleValue, type ColorExpandedStyle, type ColorSafeStyle, type ColorStyle, type Container, type DimensionExpandedStyle, type DimensionSafeStyle, type DimensionStyle, type Display, type ExpandedStyle, type FlexDirection, type FlexWrap, type FlexboxExpandedStyle, type FlexboxSafeStyle, type FlexboxShorthandStyle, type FlexboxStyle, type FontStyle, type FontWeight, type GapExpandedStyle, type GapSafeStyle, type GapShorthandStyle, type GapStyle, type JustifyContent, type JustifySelf, type LayoutExpandedStyle, type LayoutSafeStyle, type LayoutStyle, type MarginExpandedStyle, type MarginSafeStyle, type MarginShorthandStyle, type MarginStyle, type MatrixTransform, type PaddingExpandedStyle, type PaddingSafeStyle, type PaddingShorthandStyle, type PaddingStyle, type Percentage, type Position, type PositionExpandedStyle, type PositionSafeStyle, type PositionShorthandStyle, type PositioningStyle, type RotateTransform, type SafeStyle, type ScaleTransform, type SkewTransform, type Style, type StyleKey, type SvgExpandedStyle, type SvgSafeStyle, type SvgStyle, type TextAlign, type TextDecoration, type TextDecorationStyle, type TextExpandedStyle, type TextSafeStyle, type TextStyle, type TextTransform, type Transform, type TransformExpandedStyle, type TransformSafeStyle, type TransformShorthandStyle, type TransformStyle, type TranslateTransform, type VerticalAlign, resolveStyles as default, flatten, transformColor };

package/lib/index.js

@@ -1,4 +1,4 @@
-import { compose, castArray, matchPercent } from '@react-pdf/fns';
+import { compose, castArray, parseFloat as parseFloat$1, matchPercent } from '@react-pdf/fns';
 import matchMedia from 'media-engine';
 import hlsToHex from 'hsl-to-hex';
 import colorString from 'color-string';
@@ -141,7 +141,7 @@ const transformUnit = (container, value) => {
 };
 
 const processNumberValue = (key, value) => ({
-    [key]: parseFloat(value),
+    [key]: parseFloat$1(value),
 });
 const processUnitValue = (key, value, container) => ({
     [key]: transformUnit(container, value),
@@ -233,46 +233,46 @@ const resolveBorderShorthand = (key, value, container) => {
     return { [key]: value };
 };
 const handlers$b = {
-    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),
+    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),
 };
 
 const handlers$a = {
-    backgroundColor: processColorValue,
-    color: processColorValue,
-    opacity: processNumberValue,
+    backgroundColor: (processColorValue),
+    color: (processColorValue),
+    opacity: (processNumberValue),
 };
 
 const handlers$9 = {
-    height: processUnitValue,
-    maxHeight: processUnitValue,
-    maxWidth: processUnitValue,
-    minHeight: processUnitValue,
-    minWidth: processUnitValue,
-    width: processUnitValue,
+    height: (processUnitValue),
+    maxHeight: (processUnitValue),
+    maxWidth: (processUnitValue),
+    minHeight: (processUnitValue),
+    minWidth: (processUnitValue),
+    width: (processUnitValue),
 };
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/flex#values
@@ -288,24 +288,24 @@ const processFlexShorthand = (key, value, container) => {
     else {
         matches = `${value}`.split(' ');
     }
-    const flexGrow = transformUnit(container, matches[0] || defaults[0]);
-    const flexShrink = transformUnit(container, matches[1] || defaults[1]);
+    const flexGrow = parseFloat$1(matches[0] || defaults[0]);
+    const flexShrink = parseFloat$1(matches[1] || defaults[1]);
     const flexBasis = transformUnit(container, matches[2] || defaults[2]);
     return { flexGrow, flexShrink, flexBasis };
 };
 const handlers$8 = {
-    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),
+    alignItems: (processNoopValue),
+    alignSelf: (processNoopValue),
+    flex: (processFlexShorthand),
+    flexBasis: (processUnitValue),
+    flexDirection: (processNoopValue),
+    flexFlow: (processNoopValue),
+    flexGrow: (processNumberValue),
+    flexShrink: (processNumberValue),
+    flexWrap: (processNoopValue),
+    justifyContent: (processNoopValue),
+    justifySelf: (processNoopValue),
 };
 
 const processGapShorthand = (key, value, container) => {
@@ -315,21 +315,21 @@ const processGapShorthand = (key, value, container) => {
     return { rowGap, columnGap };
 };
 const handlers$7 = {
-    gap: processGapShorthand,
-    columnGap: processUnitValue,
-    rowGap: processUnitValue,
+    gap: (processGapShorthand),
+    columnGap: (processUnitValue),
+    rowGap: (processUnitValue),
 };
 
 const handlers$6 = {
-    aspectRatio: processNumberValue,
-    bottom: processUnitValue,
-    display: processNoopValue,
-    left: processUnitValue,
-    position: processNoopValue,
-    right: processUnitValue,
-    top: processUnitValue,
-    overflow: processNoopValue,
-    zIndex: processNumberValue,
+    aspectRatio: (processNumberValue),
+    bottom: (processUnitValue),
+    display: (processNoopValue),
+    left: (processUnitValue),
+    position: (processNoopValue),
+    right: (processUnitValue),
+    top: (processUnitValue),
+    overflow: (processNoopValue),
+    zIndex: (processNumberValue),
 };
 
 const BOX_MODEL_UNITS = 'px,in,mm,cm,pt,%,vw,vh';
@@ -344,10 +344,10 @@ const logError = (style, value) => {
   `);
 };
 /**
- * @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 = ({ expandsTo, maxValues = 1, autoSupported = false, } = {}) => (model, value, container) => {
     const nodes = parse$1(`${value}`);
@@ -426,13 +426,13 @@ const processMarginSingle = expandBoxModel({
     autoSupported: true,
 });
 const handlers$5 = {
-    margin: processMargin,
-    marginBottom: processMarginSingle,
-    marginHorizontal: processMarginHorizontal,
-    marginLeft: processMarginSingle,
-    marginRight: processMarginSingle,
-    marginTop: processMarginSingle,
-    marginVertical: processMarginVertical,
+    margin: (processMargin),
+    marginBottom: (processMarginSingle),
+    marginHorizontal: (processMarginHorizontal),
+    marginLeft: (processMarginSingle),
+    marginRight: (processMarginSingle),
+    marginTop: (processMarginSingle),
+    marginVertical: (processMarginVertical),
 };
 
 const processPadding = expandBoxModel({
@@ -460,13 +460,13 @@ const processPaddingHorizontal = expandBoxModel({
 });
 const processPaddingSingle = expandBoxModel();
 const handlers$4 = {
-    padding: processPadding,
-    paddingBottom: processPaddingSingle,
-    paddingHorizontal: processPaddingHorizontal,
-    paddingLeft: processPaddingSingle,
-    paddingRight: processPaddingSingle,
-    paddingTop: processPaddingSingle,
-    paddingVertical: processPaddingVertical,
+    padding: (processPadding),
+    paddingBottom: (processPaddingSingle),
+    paddingHorizontal: (processPaddingHorizontal),
+    paddingLeft: (processPaddingSingle),
+    paddingRight: (processPaddingSingle),
+    paddingTop: (processPaddingSingle),
+    paddingVertical: (processPaddingVertical),
 };
 
 const offsetKeyword = (value) => {
@@ -494,10 +494,10 @@ const processObjectPositionValue = (key, value, container) => ({
     [key]: offsetKeyword(transformUnit(container, value)),
 });
 const handlers$3 = {
-    objectPosition: processObjectPosition,
-    objectPositionX: processObjectPositionValue,
-    objectPositionY: processObjectPositionValue,
-    objectFit: processNoopValue,
+    objectPosition: (processObjectPosition),
+    objectPositionX: (processObjectPositionValue),
+    objectPositionY: (processObjectPositionValue),
+    objectFit: (processNoopValue),
 };
 
 const castInt = (value) => {
@@ -553,21 +553,22 @@ const processLineHeight = (key, value, container, styles) => {
     };
 };
 const handlers$2 = {
-    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),
+    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),
 };
 
 const matchNumber = (value) => typeof value === 'string' && /^-?\d*\.?\d*$/.test(value);
@@ -686,25 +687,25 @@ const processTransformOriginValue = (key, value, container) => {
 };
 const handlers$1 = {
     transform: processTransform,
-    transformOrigin: processTransformOriginShorthand,
-    transformOriginX: processTransformOriginValue,
-    transformOriginY: processTransformOriginValue,
+    transformOrigin: (processTransformOriginShorthand),
+    transformOriginX: (processTransformOriginValue),
+    transformOriginY: (processTransformOriginValue),
 };
 
 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),
+    stroke: (processColorValue),
+    strokeDasharray: (processNoopValue),
+    strokeWidth: (processUnitValue),
+    fillOpacity: (processNumberValue),
+    strokeOpacity: (processNumberValue),
+    fillRule: (processNoopValue),
+    textAnchor: (processNoopValue),
+    strokeLinecap: (processNoopValue),
+    strokeLinejoin: (processNoopValue),
+    visibility: (processNoopValue),
+    clipPath: (processNoopValue),
+    dominantBaseline: (processNoopValue),
 };
 
 const shorthands = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-pdf/stylesheet",
-  "version": "6.0.0",
+  "version": "6.0.2",
   "license": "MIT",
   "description": "A styles engine for Node and the browser",
   "author": "Diego Muracciole <diegomuracciole@gmail.com>",
@@ -16,11 +16,12 @@
   "scripts": {
     "test": "vitest",
     "build": "rimraf ./lib && rollup -c",
-    "watch": "rimraf ./lib && rollup -c -w"
+    "watch": "rimraf ./lib && rollup -c -w",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@react-pdf/fns": "3.1.1",
-    "@react-pdf/types": "^2.8.0",
+    "@react-pdf/fns": "3.1.2",
+    "@react-pdf/types": "^2.8.2",
     "color-string": "^1.9.1",
     "hsl-to-hex": "^1.0.0",
     "media-engine": "^1.0.3",