refactor: remove ramda from stylesheet package (#1829)

.changeset/lazy-rules-attend.md

@@ -0,0 +1,6 @@
+---
+'@react-pdf/layout': patch
+'@react-pdf/stylesheet': major
+---
+
+refactor: remove ramda from stylesheet package

packages/fns/castArray.js

@@ -0,0 +1,11 @@
+/**
+ * Casts value to array
+ *
+ * @param {any} value
+ * @returns {Array} casted value
+ */
+const castArray = value => {
+  return Array.isArray(value) ? value : [value];
+};
+
+export default castArray;

packages/fns/compose.js

@@ -0,0 +1,22 @@
+/* eslint-disable no-await-in-loop */
+
+import reverse from './reverse';
+
+/**
+ * Performs right-to-left function composition
+ *
+ * @param  {...any} functions
+ */
+const compose = (...fns) => (value, ...args) => {
+  let result = value;
+  const reversedFns = reverse(fns);
+
+  for (let i = 0; i < reversedFns.length; i += 1) {
+    const fn = reversedFns[i];
+    result = fn(result, ...args);
+  }
+
+  return result;
+};
+
+export default compose;

packages/fns/reverse.js

@@ -0,0 +1,3 @@
+const reverse = list => Array.prototype.slice.call(list, 0).reverse();
+
+export default reverse;

packages/layout/src/steps/resolveStyles.js

@@ -20,7 +20,7 @@ const resolveNodeStyles = container => node =>
   R.o(
     R.when(isLink, R.evolve({ style: R.merge(LINK_STYLES) })),
     R.evolve({
-      style: stylesheet(container),
+      style: value => stylesheet(container, value),
       children: R.map(resolveNodeStyles(container)),
     }),
   )(node);
@@ -37,7 +37,7 @@ const resolvePageStyles = page => {
   const container = R.isEmpty(box) ? style : box;
 
   return R.evolve({
-    style: stylesheet(container),
+    style: value => stylesheet(container, value),
     children: R.map(resolveNodeStyles(container)),
   })(page);
 };

packages/stylesheet/package.json

@@ -22,8 +22,7 @@
     "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"

packages/stylesheet/src/expand/borders.js

@@ -1,8 +1,6 @@
-import * as R from 'ramda';
-
 const BORDER_SHORTHAND_REGEX = /(-?\d+(\.\d+)?(px|in|mm|cm|pt|vw|vh|px)?)\s(\S+)\s(.+)/;
 
-const matchBorderShorthand = R.match(BORDER_SHORTHAND_REGEX);
+const matchBorderShorthand = value => value.match(BORDER_SHORTHAND_REGEX) || [];
 
 const expandBorders = (key, value) => {
   const match = matchBorderShorthand(`${value}`);

packages/stylesheet/src/flatten/index.js

@@ -1,24 +1,13 @@
-import * as R from 'ramda';
-
-const isNotArray = R.complement(R.is(Array));
-
-const castArray = R.when(isNotArray, v => [v]);
+import compose from '../../../fns/compose';
+import castArray from '../../../fns/castArray';
 
 /**
  * Remove nil values from array
  *
  * @param {Array} array
  * @returns {Array} array without nils
  */
-const compact = R.filter(Boolean);
-
-/**
- * Checks if value is array
- *
- * @param {any} value
- * @returns {Boolean} is value an array
- */
-const isArray = R.is(Array);
+const compact = array => array.filter(Boolean);
 
 /**
  * Merges style objects array
@@ -28,7 +17,7 @@ const isArray = R.is(Array);
  */
 const mergeStyles = styles =>
   styles.reduce((acc, style) => {
-    const s = isArray(style) ? flatten(style) : style;
+    const s = Array.isArray(style) ? flatten(style) : style;
 
     Object.keys(s).forEach(key => {
       if (s[key] !== null && s[key] !== undefined) {
@@ -45,6 +34,6 @@ const mergeStyles = styles =>
  * @param {Array} style objects array
  * @returns {Object} flatted style object
  */
-const flatten = R.compose(mergeStyles, compact, castArray);
+const flatten = compose(mergeStyles, compact, castArray);
 
 export default flatten;

packages/stylesheet/src/index.js

@@ -1,9 +1,8 @@
-import * as R from 'ramda';
-
 import expandStyles from './expand';
 import flattenStyles from './flatten';
 import transformStyles from './transform';
 import resolveMediaQueries from './mediaQueries';
+import compose from '../../fns/compose';
 
 /**
  * Resolves styles
@@ -12,17 +11,20 @@ import resolveMediaQueries from './mediaQueries';
  * @param {Object} style object
  * @returns {Object} resolved style object
  */
-const resolveStyles = (container, style) =>
-  R.compose(
+const resolveStyles = (container, style) => {
+  const computeMediaQueries = value => resolveMediaQueries(container, value);
+
+  return compose(
     transformStyles(container),
     expandStyles,
-    resolveMediaQueries(container),
+    computeMediaQueries,
     flattenStyles,
   )(style);
+};
 
 // Utils exported for SVG processing
 export { default as transformColor } from './transform/colors';
 
 export { default as processTransform } from './transform/transform';
 
-export default R.curryN(2, resolveStyles);
+export default resolveStyles;

packages/stylesheet/src/mediaQueries/index.js

@@ -1,4 +1,3 @@
-import * as R from 'ramda';
 import matchMedia from 'media-engine';
 
 /**
@@ -20,4 +19,4 @@ const resolveMediaQueries = (container, styles) => {
   }, {});
 };
 
-export default R.curryN(2, resolveMediaQueries);
+export default resolveMediaQueries;

packages/stylesheet/src/transform/colors.js

@@ -1,46 +1,44 @@
-import * as R from 'ramda';
 import hlsToHex from 'hsl-to-hex';
 import colorString from 'color-string';
 
-const isRgb = R.test(/rgb/g);
-const isRgba = R.test(/rgba/g);
-const isHsl = R.test(/hsl/g);
-const isHsla = R.test(/hsla/g);
+const isRgb = value => /rgba?/g.test(value);
+const isHsl = value => /hsla?/g.test(value);
 
 /**
  * Transform rgb color to hexa
  *
  * @param {String} styles value
  * @returns {Object} transformed value
  */
-const parseRgb = R.compose(colorString.to.hex, colorString.get.rgb);
+const parseRgb = value => {
+  const rgb = colorString.get.rgb(value);
+  return colorString.to.hex(rgb);
+};
 
 /**
  * Transform Hsl color to hexa
  *
  * @param {String} styles value
  * @returns {Object} transformed value
  */
-const parseHsl = R.compose(
-  R.toUpper,
-  R.apply(hlsToHex),
-  R.map(Math.round),
-  colorString.get.hsl,
-);
+const parseHsl = value => {
+  const hsl = colorString.get.hsl(value).map(Math.round);
+  const hex = hlsToHex(...hsl);
+
+  return hex.toUpperCase();
+};
 
 /**
  * Transform given color to hexa
  *
  * @param {String} styles value
  * @returns {Object} transformed value
  */
-const transformColor = value =>
-  R.cond([
-    [isRgba, parseRgb],
-    [isRgb, parseRgb],
-    [isHsla, parseHsl],
-    [isHsl, parseHsl],
-    [R.T, R.always(value)],
-  ])(value);
+const transformColor = value => {
+  if (isRgb(value)) return parseRgb(value);
+  if (isHsl(value)) return parseHsl(value);
+
+  return value;
+};
 
 export default transformColor;

packages/stylesheet/src/utils/castFloat.js

@@ -1,8 +1,5 @@
-/* eslint-disable import/prefer-default-export */
-
-import * as R from 'ramda';
-
-const matchNumber = R.when(R.is(String), R.test(/^-?\d*\.?\d*$/));
+const matchNumber = value =>
+  typeof value === 'string' && /^-?\d*\.?\d*$/.test(value);
 
 const castFloat = value => {
   if (typeof value !== 'string') return value;