@react-pdf/stylesheet 5.0.1 → 5.2.0

package/lib/index.js

@@ -1,4 +1,4 @@
-import { compose, castArray } from '@react-pdf/fns';
+import { compose, castArray, matchPercent } from '@react-pdf/fns';
 import parse$1 from 'postcss-value-parser/lib/parse.js';
 import parseUnit from 'postcss-value-parser/lib/unit.js';
 import hlsToHex from 'hsl-to-hex';
@@ -162,7 +162,7 @@ const processMarginSingle = expandBoxModel({
   autoSupported: true
 });
 
-const BORDER_SHORTHAND_REGEX = /(-?\d+(\.\d+)?(px|in|mm|cm|pt|vw|vh|px)?)\s(\S+)\s(.+)/;
+const BORDER_SHORTHAND_REGEX = /(-?\d+(\.\d+)?(in|mm|cm|pt|vw|vh|px|rem)?)\s(\S+)\s(.+)/;
 const matchBorderShorthand = value => value.match(BORDER_SHORTHAND_REGEX) || [];
 const expandBorders = (key, value) => {
   const match = matchBorderShorthand(`${value}`);
@@ -420,7 +420,7 @@ const flatten = compose(mergeStyles, compact, castArray);
  * @returns {Object} parsed value
  */
 const parseValue = value => {
-  const match = /^(-?\d*\.?\d+)(in|mm|cm|pt|vh|vw|px)?$/g.exec(value);
+  const match = /^(-?\d*\.?\d+)(in|mm|cm|pt|vh|vw|px|rem)?$/g.exec(value);
   return match ? {
     value: parseFloat(match[1]),
     unit: match[2] || 'pt'
@@ -439,12 +439,15 @@ const parseValue = value => {
  */
 const transformUnit = (container, value) => {
   const scalar = parseValue(value);
-  const dpi = 72; // Removed: container.dpi || 72
-  const mmFactor = 1 / 25.4 * dpi;
-  const cmFactor = 1 / 2.54 * dpi;
+  const outputDpi = 72;
+  const inputDpi = container.dpi || 72;
+  const mmFactor = 1 / 25.4 * outputDpi;
+  const cmFactor = 1 / 2.54 * outputDpi;
   switch (scalar.unit) {
+    case 'rem':
+      return scalar.value * (container.remBase || 18);
     case 'in':
-      return scalar.value * dpi;
+      return scalar.value * outputDpi;
     case 'mm':
       return scalar.value * mmFactor;
     case 'cm':
@@ -453,6 +456,8 @@ const transformUnit = (container, value) => {
       return scalar.value * (container.height / 100);
     case 'vw':
       return scalar.value * (container.width / 100);
+    case 'px':
+      return Math.round(scalar.value * (outputDpi / inputDpi));
     default:
       return scalar.value;
   }
@@ -642,6 +647,24 @@ const processFontWeight = value => {
   return value;
 };
 
+/* eslint-disable no-restricted-globals */
+
+const processLineHeight = (value, styles) => {
+  if (value === '') return value;
+  const {
+    fontSize = 18
+  } = styles;
+
+  // Percent values: use this number multiplied by the element's font size
+  const {
+    percent
+  } = matchPercent(value) || {};
+  if (percent) return percent * fontSize;
+
+  // Unitless values: use this number multiplied by the element's font size
+  return isNaN(value) ? value : value * fontSize;
+};
+
 const matchNumber = value => typeof value === 'string' && /^-?\d*\.?\d*$/.test(value);
 const castFloat = value => {
   if (typeof value !== 'string') return value;
@@ -671,13 +694,14 @@ const transformTransformOrigin = value => offsetKeyword(value) || castFloat(valu
 const handlers = {
   transform: processTransform,
   fontWeight: processFontWeight,
+  lineHeight: processLineHeight,
   objectPositionX: transformObjectPosition,
   objectPositionY: transformObjectPosition,
   transformOriginX: transformTransformOrigin,
   transformOriginY: transformTransformOrigin
 };
-const transformStyle = (key, value, container) => {
-  const result = handlers[key] ? handlers[key](value) : value;
+const transformStyle = (key, value, styles, container) => {
+  const result = handlers[key] ? handlers[key](value, styles) : value;
   return transformColor(transformUnit(container, castFloat(result)));
 };
 
@@ -693,14 +717,14 @@ const transformStyle = (key, value, container) => {
  * @param {Object} container
  * @returns {Transform} transform function
  */
-const transform = container => style => {
-  if (!style) return style;
-  const propsArray = Object.keys(style);
+const transform = container => styles => {
+  if (!styles) return styles;
+  const propsArray = Object.keys(styles);
   const resolvedStyle = {};
   for (let i = 0; i < propsArray.length; i += 1) {
     const key = propsArray[i];
-    const value = style[key];
-    const transformed = transformStyle(key, value, container);
+    const value = styles[key];
+    const transformed = transformStyle(key, value, styles, container);
     resolvedStyle[key] = transformed;
   }
   return resolvedStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-pdf/stylesheet",
-  "version": "5.0.1",
+  "version": "5.2.0",
   "license": "MIT",
   "description": "A styles engine for Node and the browser",
   "author": "Diego Muracciole <diegomuracciole@gmail.com>",