@react-pdf/stylesheet 2.1.0 → 3.2.0

package/CHANGELOG.md

@@ -1,20 +1,45 @@
 # @react-pdf/stylesheet
 
-## 2.1.0
+## 3.2.0
+
 ### Minor Changes
 
+- [#1892](https://github.com/diegomura/react-pdf/pull/1892) [`035d3f8`](https://github.com/diegomura/react-pdf/commit/035d3f8d24fa4f4af9f350950d81b51547858367) Thanks [@diegomura](https://github.com/diegomura)! - feat: add skew transformation support
 
+## 3.1.0
 
-- [#1535](https://github.com/diegomura/react-pdf/pull/1535) [`1f0eb6e`](https://github.com/diegomura/react-pdf/commit/1f0eb6e0d4e75480de6745a204924d5075859db7) Thanks [@jeetiss](https://github.com/jeetiss)! - fixed `margin: auto` parsing
+### Minor Changes
 
+- [#1869](https://github.com/diegomura/react-pdf/pull/1869) [`5d2c308`](https://github.com/diegomura/react-pdf/commit/5d2c3088cf438a8abf1038b14a21117fecf59d57) Thanks [@diegomura](https://github.com/diegomura)! - feat: variable dpi
 
+### Patch Changes
+
+- Updated dependencies [[`1411d16`](https://github.com/diegomura/react-pdf/commit/1411d162e04ca237bad93729695c363fdf4bdbeb), [`4fadb48`](https://github.com/diegomura/react-pdf/commit/4fadb48983d7269452f89f80c7e341ece859aaee), [`ce8762f`](https://github.com/diegomura/react-pdf/commit/ce8762f6de5c796e69ec5a225c7f3ff9c619a960), [`5d2c308`](https://github.com/diegomura/react-pdf/commit/5d2c3088cf438a8abf1038b14a21117fecf59d57)]:
+  - @react-pdf/types@2.1.0
 
-- [#1654](https://github.com/diegomura/react-pdf/pull/1654) [`ccf3bf2`](https://github.com/diegomura/react-pdf/commit/ccf3bf22867a9bd49668cdd3543ec32492a40e4b) Thanks [@jeetiss](https://github.com/jeetiss)! - added `@babel/runtime` to dependencies
+## 3.0.0
 
+### Major Changes
+
+- [#1829](https://github.com/diegomura/react-pdf/pull/1829) [`5458a00`](https://github.com/diegomura/react-pdf/commit/5458a00979d883341c6df094243cae859344d2b9) Thanks [@diegomura](https://github.com/diegomura)! - refactor: remove ramda from stylesheet package
 
 ### Patch Changes
 
+- [#1838](https://github.com/diegomura/react-pdf/pull/1838) [`9bdb5c9`](https://github.com/diegomura/react-pdf/commit/9bdb5c934a822340754cd4c892d399f91f6218de) Thanks [@diegomura](https://github.com/diegomura)! - feat: create fns package
+
+- Updated dependencies [[`9bdb5c9`](https://github.com/diegomura/react-pdf/commit/9bdb5c934a822340754cd4c892d399f91f6218de), [`fe0f214`](https://github.com/diegomura/react-pdf/commit/fe0f214dbbf2f632b852ebfe65f886ecc4dd6953)]:
+  - @react-pdf/fns@1.0.0
+  - @react-pdf/types@2.0.9
 
+## 2.1.0
+
+### Minor Changes
+
+- [#1535](https://github.com/diegomura/react-pdf/pull/1535) [`1f0eb6e`](https://github.com/diegomura/react-pdf/commit/1f0eb6e0d4e75480de6745a204924d5075859db7) Thanks [@jeetiss](https://github.com/jeetiss)! - fixed `margin: auto` parsing
+
+* [#1654](https://github.com/diegomura/react-pdf/pull/1654) [`ccf3bf2`](https://github.com/diegomura/react-pdf/commit/ccf3bf22867a9bd49668cdd3543ec32492a40e4b) Thanks [@jeetiss](https://github.com/jeetiss)! - added `@babel/runtime` to dependencies
+
+### Patch Changes
 
 - [#1581](https://github.com/diegomura/react-pdf/pull/1581) [`04449ab`](https://github.com/diegomura/react-pdf/commit/04449ab352db0cca2155024dd3e8c690e42193ca) Thanks [@jeetiss](https://github.com/jeetiss)! - added changelog with changesets
 

package/lib/expand/borders.js

@@ -1,14 +1,12 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 exports.__esModule = true;
 exports.default = void 0;
-
-var R = _interopRequireWildcard(require("ramda"));
-
 var BORDER_SHORTHAND_REGEX = /(-?\d+(\.\d+)?(px|in|mm|cm|pt|vw|vh|px)?)\s(\S+)\s(.+)/;
-var matchBorderShorthand = R.match(BORDER_SHORTHAND_REGEX);
+
+var matchBorderShorthand = function matchBorderShorthand(value) {
+  return value.match(BORDER_SHORTHAND_REGEX) || [];
+};
 
 var expandBorders = function expandBorders(key, value) {
   var match = matchBorderShorthand("" + value);

package/lib/flatten/index.js

@@ -1,32 +1,19 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 exports.__esModule = true;
 exports.default = void 0;
 
-var R = _interopRequireWildcard(require("ramda"));
+var _fns = require("@react-pdf/fns");
 
-var isNotArray = R.complement(R.is(Array));
-var castArray = R.when(isNotArray, function (v) {
-  return [v];
-});
 /**
  * Remove nil values from array
  *
  * @param {Array} array
  * @returns {Array} array without nils
  */
-
-var compact = R.filter(Boolean);
-/**
- * Checks if value is array
- *
- * @param {any} value
- * @returns {Boolean} is value an array
- */
-
-var isArray = R.is(Array);
+var compact = function compact(array) {
+  return array.filter(Boolean);
+};
 /**
  * Merges style objects array
  *
@@ -34,9 +21,10 @@ var isArray = R.is(Array);
  * @returns {Object} merged style object
  */
 
+
 var mergeStyles = function mergeStyles(styles) {
   return styles.reduce(function (acc, style) {
-    var s = isArray(style) ? flatten(style) : style;
+    var s = Array.isArray(style) ? flatten(style) : style;
     Object.keys(s).forEach(function (key) {
       if (s[key] !== null && s[key] !== undefined) {
         acc[key] = s[key];
@@ -53,6 +41,6 @@ var mergeStyles = function mergeStyles(styles) {
  */
 
 
-var flatten = R.compose(mergeStyles, compact, castArray);
+var flatten = (0, _fns.compose)(mergeStyles, compact, _fns.castArray);
 var _default = flatten;
 exports.default = _default;

package/lib/index.js

@@ -2,12 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 exports.__esModule = true;
 exports.transformColor = exports.processTransform = exports.default = void 0;
 
-var R = _interopRequireWildcard(require("ramda"));
+var _fns = require("@react-pdf/fns");
 
 var _expand = _interopRequireDefault(require("./expand"));
 
@@ -33,10 +31,13 @@ exports.processTransform = _transform2.default;
  * @returns {Object} resolved style object
  */
 var resolveStyles = function resolveStyles(container, style) {
-  return R.compose((0, _transform.default)(container), _expand.default, (0, _mediaQueries.default)(container), _flatten.default)(style);
-}; // Utils exported for SVG processing
+  var computeMediaQueries = function computeMediaQueries(value) {
+    return (0, _mediaQueries.default)(container, value);
+  };
 
+  return (0, _fns.compose)((0, _transform.default)(container), _expand.default, computeMediaQueries, _flatten.default)(style);
+}; // Utils exported for SVG processing
 
-var _default = R.curryN(2, resolveStyles);
 
+var _default = resolveStyles;
 exports.default = _default;

package/lib/mediaQueries/index.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 exports.__esModule = true;
@@ -9,8 +7,6 @@ exports.default = void 0;
 
 var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var R = _interopRequireWildcard(require("ramda"));
-
 var _mediaEngine = _interopRequireDefault(require("media-engine"));
 
 /**
@@ -33,6 +29,5 @@ var resolveMediaQueries = function resolveMediaQueries(container, styles) {
   }, {});
 };
 
-var _default = R.curryN(2, resolveMediaQueries);
-
+var _default = resolveMediaQueries;
 exports.default = _default;

package/lib/transform/colors.js

@@ -2,21 +2,20 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 exports.__esModule = true;
 exports.default = void 0;
 
-var R = _interopRequireWildcard(require("ramda"));
-
 var _hslToHex = _interopRequireDefault(require("hsl-to-hex"));
 
 var _colorString = _interopRequireDefault(require("color-string"));
 
-var isRgb = R.test(/rgb/g);
-var isRgba = R.test(/rgba/g);
-var isHsl = R.test(/hsl/g);
-var isHsla = R.test(/hsla/g);
+var isRgb = function isRgb(value) {
+  return /rgba?/g.test(value);
+};
+
+var isHsl = function isHsl(value) {
+  return /hsla?/g.test(value);
+};
 /**
  * Transform rgb color to hexa
  *
@@ -24,7 +23,12 @@ var isHsla = R.test(/hsla/g);
  * @returns {Object} transformed value
  */
 
-var parseRgb = R.compose(_colorString.default.to.hex, _colorString.default.get.rgb);
+
+var parseRgb = function parseRgb(value) {
+  var rgb = _colorString.default.get.rgb(value);
+
+  return _colorString.default.to.hex(rgb);
+};
 /**
  * Transform Hsl color to hexa
  *
@@ -32,7 +36,14 @@ var parseRgb = R.compose(_colorString.default.to.hex, _colorString.default.get.r
  * @returns {Object} transformed value
  */
 
-var parseHsl = R.compose(R.toUpper, R.apply(_hslToHex.default), R.map(Math.round), _colorString.default.get.hsl);
+
+var parseHsl = function parseHsl(value) {
+  var hsl = _colorString.default.get.hsl(value).map(Math.round);
+
+  var hex = _hslToHex.default.apply(void 0, hsl);
+
+  return hex.toUpperCase();
+};
 /**
  * Transform given color to hexa
  *
@@ -40,8 +51,11 @@ var parseHsl = R.compose(R.toUpper, R.apply(_hslToHex.default), R.map(Math.round
  * @returns {Object} transformed value
  */
 
+
 var transformColor = function transformColor(value) {
-  return R.cond([[isRgba, parseRgb], [isRgb, parseRgb], [isHsla, parseHsl], [isHsl, parseHsl], [R.T, R.always(value)]])(value);
+  if (isRgb(value)) return parseRgb(value);
+  if (isHsl(value)) return parseHsl(value);
+  return value;
 };
 
 var _default = transformColor;

package/lib/transform/transform.js

@@ -34,6 +34,17 @@ var parse = function parse(transformString) {
   return parsed;
 };
 
+var parseAngle = function parseAngle(value) {
+  var unitsRegexp = /(-?\d*\.?\d*)(\w*)?/i;
+
+  var _unitsRegexp$exec = unitsRegexp.exec(value),
+      angle = _unitsRegexp$exec[1],
+      unit = _unitsRegexp$exec[2];
+
+  var number = Number.parseFloat(angle);
+  return unit === 'rad' ? number * 180 / Math.PI : number;
+};
+
 var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
   var operation = _ref.operation,
       value = _ref.value;
@@ -72,16 +83,9 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
 
     case 'rotate':
       {
-        var unitsRegexp = /(-?\d*\.?\d*)(\w*)?/i;
-
-        var _unitsRegexp$exec = unitsRegexp.exec(value),
-            angle = _unitsRegexp$exec[1],
-            unit = _unitsRegexp$exec[2];
-
-        var number = Number.parseFloat(angle);
         return {
           operation: 'rotate',
-          value: [unit === 'rad' ? number * 180 / Math.PI : number]
+          value: [parseAngle(value)]
         };
       }
 
@@ -111,6 +115,30 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
         };
       }
 
+    case 'skew':
+      {
+        return {
+          operation: 'skew',
+          value: value.map(parseAngle)
+        };
+      }
+
+    case 'skewX':
+      {
+        return {
+          operation: 'skew',
+          value: [parseAngle(value), 0]
+        };
+      }
+
+    case 'skewY':
+      {
+        return {
+          operation: 'skew',
+          value: [0, parseAngle(value)]
+        };
+      }
+
     default:
       {
         return {

package/lib/transform/units.js

@@ -2,17 +2,13 @@
 
 exports.__esModule = true;
 exports.default = void 0;
-var DPI = 72; // 72pt per inch.
 
-var MM_FACTOR = 1 / 25.4 * DPI;
-var CM_FACTOR = 1 / 2.54 * DPI;
 /**
  * Parses scalar value in value and unit pairs
  *
  * @param {String} scalar value
  * @returns {Object} parsed value
  */
-
 var parseValue = function parseValue(value) {
   var match = /^(-?\d*\.?\d+)(in|mm|cm|pt|vh|vw|px)?$/g.exec(value);
   return match ? {
@@ -34,16 +30,19 @@ var parseValue = function parseValue(value) {
 
 var transformUnit = function transformUnit(container, value) {
   var scalar = parseValue(value);
+  var dpi = container.dpi || 72;
+  var mmFactor = 1 / 25.4 * dpi;
+  var cmFactor = 1 / 2.54 * dpi;
 
   switch (scalar.unit) {
     case 'in':
-      return scalar.value * DPI;
+      return scalar.value * dpi;
 
     case 'mm':
-      return scalar.value * MM_FACTOR;
+      return scalar.value * mmFactor;
 
     case 'cm':
-      return scalar.value * CM_FACTOR;
+      return scalar.value * cmFactor;
 
     case 'vh':
       return scalar.value * (container.height / 100);

package/lib/utils/castFloat.js

@@ -1,14 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 exports.__esModule = true;
 exports.default = void 0;
 
-var R = _interopRequireWildcard(require("ramda"));
-
-/* eslint-disable import/prefer-default-export */
-var matchNumber = R.when(R.is(String), R.test(/^-?\d*\.?\d*$/));
+var matchNumber = function matchNumber(value) {
+  return typeof value === 'string' && /^-?\d*\.?\d*$/.test(value);
+};
 
 var castFloat = function castFloat(value) {
   if (typeof value !== 'string') return value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-pdf/stylesheet",
-  "version": "2.1.0",
+  "version": "3.2.0",
   "license": "MIT",
   "description": "A styles engine for Node and the browser",
   "author": "Diego Muracciole <diegomuracciole@gmail.com>",
@@ -18,12 +18,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.4",
-    "@react-pdf/types": "^2.0.8",
+    "@react-pdf/fns": "1.0.0",
+    "@react-pdf/types": "^2.1.0",
     "color-string": "^1.5.3",
     "hsl-to-hex": "^1.0.0",
     "media-engine": "^1.0.3",
-    "postcss-value-parser": "^4.1.0",
-    "ramda": "^0.26.1"
+    "postcss-value-parser": "^4.1.0"
   },
   "files": [
     "lib"