@react-pdf/stylesheet 4.2.5 → 5.0.0

package/lib/index.js

@@ -3,44 +3,49 @@ 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';
 import colorString from 'color-string';
-import _extends from '@babel/runtime/helpers/extends';
 import matchMedia from 'media-engine';
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/flex#values
 
 // TODO: change flex defaults to [0, 1, 'auto'] as in spec in next major release
-var flexDefaults = [1, 1, 0];
+const flexDefaults = [1, 1, 0];
 /**
  * @type {(number | 'auto')[]}
  */
-var flexAuto = [1, 1, 'auto'];
-var expandFlex = function expandFlex(key, value) {
+const flexAuto = [1, 1, 'auto'];
+const expandFlex = (key, value) => {
   /**
    * @type {(number | 'auto')[]}
    */
-  var defaults = flexDefaults;
-  var matches = [];
+  let defaults = flexDefaults;
+  let matches = [];
   if (value === 'auto') {
     defaults = flexAuto;
   } else {
-    matches = ("" + value).split(' ');
+    matches = `${value}`.split(' ');
   }
-  var flexGrow = matches[0] || defaults[0];
-  var flexShrink = matches[1] || defaults[1];
-  var flexBasis = matches[2] || defaults[2];
+  const flexGrow = matches[0] || defaults[0];
+  const flexShrink = matches[1] || defaults[1];
+  const flexBasis = matches[2] || defaults[2];
   return {
-    flexGrow: flexGrow,
-    flexShrink: flexShrink,
-    flexBasis: flexBasis
+    flexGrow,
+    flexShrink,
+    flexBasis
   };
 };
 
 /* eslint-disable no-plusplus */
 // This file is ran directly with Node - needs to have .js extension
 // eslint-disable-next-line import/extensions
-var BOX_MODEL_UNITS = 'px,in,mm,cm,pt,%,vw,vh';
-var logError = function logError(style, value) {
-  console.error("\n    @react-pdf/stylesheet parsing error:\n\n    " + style + ": " + value + ",\n    " + ' '.repeat(style.length + 2) + "^\n    Unsupported " + style + " value format\n  ");
+const BOX_MODEL_UNITS = 'px,in,mm,cm,pt,%,vw,vh';
+const logError = (style, value) => {
+  console.error(`
+    @react-pdf/stylesheet parsing error:
+
+    ${style}: ${value},
+    ${' '.repeat(style.length + 2)}^
+    Unsupported ${style} value format
+  `);
 };
 
 /**
@@ -49,19 +54,17 @@ var logError = function logError(style, value) {
  * @param {number} [options.maxValues]
  * @param {boolean} [options.autoSupported]
  */
-var expandBoxModel = function expandBoxModel(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-    expandsTo = _ref.expandsTo,
-    _ref$maxValues = _ref.maxValues,
-    maxValues = _ref$maxValues === void 0 ? 1 : _ref$maxValues,
-    _ref$autoSupported = _ref.autoSupported,
-    autoSupported = _ref$autoSupported === void 0 ? false : _ref$autoSupported;
-  return function (model, value) {
-    var _ref2;
-    var nodes = parse$1("" + value);
-    var parts = [];
-    for (var i = 0; i < nodes.length; i++) {
-      var node = nodes[i];
+const expandBoxModel = function (_temp) {
+  let {
+    expandsTo,
+    maxValues = 1,
+    autoSupported = false
+  } = _temp === void 0 ? {} : _temp;
+  return (model, value) => {
+    const nodes = parse$1(`${value}`);
+    const parts = [];
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
 
       // value contains `calc`, `url` or other css function
       // `,`, `/` or strings that unsupported by margin and padding
@@ -73,7 +76,7 @@ var expandBoxModel = function expandBoxModel(_temp) {
         if (node.value === 'auto' && autoSupported) {
           parts.push(node.value);
         } else {
-          var result = parseUnit(node.value);
+          const result = parseUnit(node.value);
 
           // when unit isn't specified this condition is true
           if (result && BOX_MODEL_UNITS.includes(result.unit)) {
@@ -91,28 +94,32 @@ var expandBoxModel = function expandBoxModel(_temp) {
       logError(model, value);
       return {};
     }
-    var first = parts[0];
+    const first = parts[0];
     if (expandsTo) {
-      var second = parts[1] || parts[0];
-      var third = parts[2] || parts[0];
-      var fourth = parts[3] || parts[1] || parts[0];
+      const second = parts[1] || parts[0];
+      const third = parts[2] || parts[0];
+      const fourth = parts[3] || parts[1] || parts[0];
       return expandsTo({
-        first: first,
-        second: second,
-        third: third,
-        fourth: fourth
+        first,
+        second,
+        third,
+        fourth
       });
     }
-    return _ref2 = {}, _ref2[model] = first, _ref2;
+    return {
+      [model]: first
+    };
   };
 };
 
-var processMargin = expandBoxModel({
-  expandsTo: function expandsTo(_ref) {
-    var first = _ref.first,
-      second = _ref.second,
-      third = _ref.third,
-      fourth = _ref.fourth;
+const processMargin = expandBoxModel({
+  expandsTo: _ref => {
+    let {
+      first,
+      second,
+      third,
+      fourth
+    } = _ref;
     return {
       marginTop: first,
       marginRight: second,
@@ -123,10 +130,12 @@ var processMargin = expandBoxModel({
   maxValues: 4,
   autoSupported: true
 });
-var processMarginVertical = expandBoxModel({
-  expandsTo: function expandsTo(_ref2) {
-    var first = _ref2.first,
-      second = _ref2.second;
+const processMarginVertical = expandBoxModel({
+  expandsTo: _ref2 => {
+    let {
+      first,
+      second
+    } = _ref2;
     return {
       marginTop: first,
       marginBottom: second
@@ -135,10 +144,12 @@ var processMarginVertical = expandBoxModel({
   maxValues: 2,
   autoSupported: true
 });
-var processMarginHorizontal = expandBoxModel({
-  expandsTo: function expandsTo(_ref3) {
-    var first = _ref3.first,
-      second = _ref3.second;
+const processMarginHorizontal = expandBoxModel({
+  expandsTo: _ref3 => {
+    let {
+      first,
+      second
+    } = _ref3;
     return {
       marginRight: first,
       marginLeft: second
@@ -147,23 +158,24 @@ var processMarginHorizontal = expandBoxModel({
   maxValues: 2,
   autoSupported: true
 });
-var processMarginSingle = expandBoxModel({
+const processMarginSingle = expandBoxModel({
   autoSupported: true
 });
 
-var BORDER_SHORTHAND_REGEX = /(-?\d+(\.\d+)?(px|in|mm|cm|pt|vw|vh|px)?)\s(\S+)\s(.+)/;
-var matchBorderShorthand = function matchBorderShorthand(value) {
-  return value.match(BORDER_SHORTHAND_REGEX) || [];
-};
-var expandBorders = function expandBorders(key, value) {
-  var match = matchBorderShorthand("" + value);
+const BORDER_SHORTHAND_REGEX = /(-?\d+(\.\d+)?(px|in|mm|cm|pt|vw|vh|px)?)\s(\S+)\s(.+)/;
+const matchBorderShorthand = value => value.match(BORDER_SHORTHAND_REGEX) || [];
+const expandBorders = (key, value) => {
+  const match = matchBorderShorthand(`${value}`);
   if (match) {
-    var color = match[5] || value;
-    var style = match[4] || value;
-    var width = match[1] || value;
+    const color = match[5] || value;
+    const style = match[4] || value;
+    const width = match[1] || value;
     if (key.match(/(Top|Right|Bottom|Left)$/)) {
-      var _ref;
-      return _ref = {}, _ref[key + "Color"] = color, _ref[key + "Style"] = style, _ref[key + "Width"] = width, _ref;
+      return {
+        [`${key}Color`]: color,
+        [`${key}Style`]: style,
+        [`${key}Width`]: width
+      };
     }
     if (key.match(/Color$/)) {
       return {
@@ -215,12 +227,14 @@ var expandBorders = function expandBorders(key, value) {
   return value;
 };
 
-var processPadding = expandBoxModel({
-  expandsTo: function expandsTo(_ref) {
-    var first = _ref.first,
-      second = _ref.second,
-      third = _ref.third,
-      fourth = _ref.fourth;
+const processPadding = expandBoxModel({
+  expandsTo: _ref => {
+    let {
+      first,
+      second,
+      third,
+      fourth
+    } = _ref;
     return {
       paddingTop: first,
       paddingRight: second,
@@ -230,10 +244,12 @@ var processPadding = expandBoxModel({
   },
   maxValues: 4
 });
-var processPaddingVertical = expandBoxModel({
-  expandsTo: function expandsTo(_ref2) {
-    var first = _ref2.first,
-      second = _ref2.second;
+const processPaddingVertical = expandBoxModel({
+  expandsTo: _ref2 => {
+    let {
+      first,
+      second
+    } = _ref2;
     return {
       paddingTop: first,
       paddingBottom: second
@@ -241,10 +257,12 @@ var processPaddingVertical = expandBoxModel({
   },
   maxValues: 2
 });
-var processPaddingHorizontal = expandBoxModel({
-  expandsTo: function expandsTo(_ref3) {
-    var first = _ref3.first,
-      second = _ref3.second;
+const processPaddingHorizontal = expandBoxModel({
+  expandsTo: _ref3 => {
+    let {
+      first,
+      second
+    } = _ref3;
     return {
       paddingRight: first,
       paddingLeft: second
@@ -252,50 +270,50 @@ var processPaddingHorizontal = expandBoxModel({
   },
   maxValues: 2
 });
-var processPaddingSingle = expandBoxModel();
+const processPaddingSingle = expandBoxModel();
 
-var expandObjectPosition = function expandObjectPosition(key, value) {
-  var match = ("" + value).split(' ');
+const expandObjectPosition = (key, value) => {
+  const match = `${value}`.split(' ');
   return {
     objectPositionX: (match === null || match === void 0 ? void 0 : match[0]) || value,
     objectPositionY: (match === null || match === void 0 ? void 0 : match[1]) || value
   };
 };
 
-var Y_AXIS_SHORTHANDS = {
+const Y_AXIS_SHORTHANDS = {
   top: true,
   bottom: true
 };
-var sortTransformOriginPair = function sortTransformOriginPair(a, b) {
+const sortTransformOriginPair = (a, b) => {
   if (Y_AXIS_SHORTHANDS[a]) return 1;
   if (Y_AXIS_SHORTHANDS[b]) return -1;
   return 0;
 };
-var getTransformOriginPair = function getTransformOriginPair(values) {
+const getTransformOriginPair = values => {
   if (!values || values.length === 0) return ['center', 'center'];
-  var pair = values.length === 1 ? [values[0], 'center'] : values;
+  const pair = values.length === 1 ? [values[0], 'center'] : values;
   return pair.sort(sortTransformOriginPair);
 };
 
 // Transforms shorthand transformOrigin values
-var expandTransformOrigin = function expandTransformOrigin(key, value) {
-  var match = ("" + value).split(' ');
-  var pair = getTransformOriginPair(match);
+const expandTransformOrigin = (key, value) => {
+  const match = `${value}`.split(' ');
+  const pair = getTransformOriginPair(match);
   return {
     transformOriginX: pair[0],
     transformOriginY: pair[1]
   };
 };
 
-var expandGap = function expandGap(key, value) {
-  var match = ("" + value).split(' ');
+const expandGap = (key, value) => {
+  const match = `${value}`.split(' ');
   return {
     rowGap: (match === null || match === void 0 ? void 0 : match[0]) || value,
     columnGap: (match === null || match === void 0 ? void 0 : match[1]) || value
   };
 };
 
-var shorthands = {
+const shorthands = {
   flex: expandFlex,
   gap: expandGap,
   margin: processMargin,
@@ -332,9 +350,10 @@ var shorthands = {
  * @param {string} value style value
  * @returns {string | Number} transformed style values
  */
-var expandStyle = function expandStyle(key, value) {
-  var _ref;
-  return shorthands[key] ? shorthands[key](key, value) : (_ref = {}, _ref[key] = value, _ref);
+const expandStyle = (key, value) => {
+  return shorthands[key] ? shorthands[key](key, value) : {
+    [key]: value
+  };
 };
 
 /**
@@ -343,18 +362,18 @@ var expandStyle = function expandStyle(key, value) {
  * @param {Object} style object
  * @returns {Object} expanded style object
  */
-var expand = function expand(style) {
+const expand = style => {
   if (!style) return style;
-  var propsArray = Object.keys(style);
-  var resolvedStyle = {};
-  for (var i = 0; i < propsArray.length; i += 1) {
-    var key = propsArray[i];
-    var value = style[key];
-    var extended = expandStyle(key, value);
-    var keys = Object.keys(extended);
-    for (var j = 0; j < keys.length; j += 1) {
-      var propName = keys[j];
-      var propValue = extended[propName];
+  const propsArray = Object.keys(style);
+  const resolvedStyle = {};
+  for (let i = 0; i < propsArray.length; i += 1) {
+    const key = propsArray[i];
+    const value = style[key];
+    const extended = expandStyle(key, value);
+    const keys = Object.keys(extended);
+    for (let j = 0; j < keys.length; j += 1) {
+      const propName = keys[j];
+      const propValue = extended[propName];
       resolvedStyle[propName] = propValue;
     }
   }
@@ -368,9 +387,7 @@ var expand = function expand(style) {
  * @param {(T | null | undefined)[]} array
  * @returns {T[]} array without nils
  */
-var compact = function compact(array) {
-  return array.filter(Boolean);
-};
+const compact = array => array.filter(Boolean);
 
 /**
  * Merges style objects array
@@ -378,17 +395,15 @@ var compact = function compact(array) {
  * @param {Object[]} styles style objects array
  * @returns {Object} merged style object
  */
-var mergeStyles = function mergeStyles(styles) {
-  return styles.reduce(function (acc, 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];
-      }
-    });
-    return acc;
-  }, {});
-};
+const mergeStyles = styles => styles.reduce((acc, style) => {
+  const s = Array.isArray(style) ? flatten(style) : style;
+  Object.keys(s).forEach(key => {
+    if (s[key] !== null && s[key] !== undefined) {
+      acc[key] = s[key];
+    }
+  });
+  return acc;
+}, {});
 
 /**
  * Flattens an array of style objects, into one aggregated style object.
@@ -396,7 +411,7 @@ var mergeStyles = function mergeStyles(styles) {
  * @param {Object[]} styles style objects array
  * @returns {Object} flattened style object
  */
-var flatten = compose(mergeStyles, compact, castArray);
+const flatten = compose(mergeStyles, compact, castArray);
 
 /**
  * Parses scalar value in value and unit pairs
@@ -404,13 +419,13 @@ var flatten = compose(mergeStyles, compact, castArray);
  * @param {string} value 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);
+const parseValue = value => {
+  const match = /^(-?\d*\.?\d+)(in|mm|cm|pt|vh|vw|px)?$/g.exec(value);
   return match ? {
     value: parseFloat(match[1]),
     unit: match[2] || 'pt'
   } : {
-    value: value,
+    value,
     unit: undefined
   };
 };
@@ -422,11 +437,11 @@ var parseValue = function parseValue(value) {
  * @param {string} value styles value
  * @returns {Object} transformed 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;
+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;
   switch (scalar.unit) {
     case 'in':
       return scalar.value * dpi;
@@ -443,12 +458,8 @@ var transformUnit = function transformUnit(container, value) {
   }
 };
 
-var isRgb = function isRgb(value) {
-  return /rgba?/g.test(value);
-};
-var isHsl = function isHsl(value) {
-  return /hsla?/g.test(value);
-};
+const isRgb = value => /rgba?/g.test(value);
+const isHsl = value => /hsla?/g.test(value);
 
 /**
  * Transform rgb color to hexa
@@ -456,8 +467,8 @@ var isHsl = function isHsl(value) {
  * @param {string} value styles value
  * @returns {Object} transformed value
  */
-var parseRgb = function parseRgb(value) {
-  var rgb = colorString.get.rgb(value);
+const parseRgb = value => {
+  const rgb = colorString.get.rgb(value);
   return colorString.to.hex(rgb);
 };
 
@@ -467,9 +478,9 @@ var parseRgb = function parseRgb(value) {
  * @param {string} value styles value
  * @returns {Object} transformed value
  */
-var parseHsl = function parseHsl(value) {
-  var hsl = colorString.get.hsl(value).map(Math.round);
-  var hex = hlsToHex.apply(void 0, hsl);
+const parseHsl = value => {
+  const hsl = colorString.get.hsl(value).map(Math.round);
+  const hex = hlsToHex(...hsl);
   return hex.toUpperCase();
 };
 
@@ -479,58 +490,49 @@ var parseHsl = function parseHsl(value) {
  * @param {string} value styles value
  * @returns {Object} transformed value
  */
-var transformColor = function transformColor(value) {
+const transformColor = value => {
   if (isRgb(value)) return parseRgb(value);
   if (isHsl(value)) return parseHsl(value);
   return value;
 };
 
-var parse = function parse(transformString) {
-  var transforms = transformString.trim().split(/\) |\)/);
+const parse = transformString => {
+  const transforms = transformString.trim().split(/\) |\)/);
 
   // Handle "initial", "inherit", "unset".
   if (transforms.length === 1) {
     return [[transforms[0], true]];
   }
-  var parsed = [];
-  for (var i = 0; i < transforms.length; i += 1) {
-    var transform = transforms[i];
+  const parsed = [];
+  for (let i = 0; i < transforms.length; i += 1) {
+    const transform = transforms[i];
     if (transform) {
-      var _transform$split = transform.split('('),
-        name = _transform$split[0],
-        rawValue = _transform$split[1];
-      var splitChar = rawValue.indexOf(',') >= 0 ? ',' : ' ';
-      var value = rawValue.split(splitChar).map(function (val) {
-        return val.trim();
-      });
+      const [name, rawValue] = transform.split('(');
+      const splitChar = rawValue.indexOf(',') >= 0 ? ',' : ' ';
+      const value = rawValue.split(splitChar).map(val => val.trim());
       parsed.push({
         operation: name,
-        value: value
+        value
       });
     }
   }
   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);
+const parseAngle = value => {
+  const unitsRegexp = /(-?\d*\.?\d*)(\w*)?/i;
+  const [, angle, unit] = unitsRegexp.exec(value);
+  const number = Number.parseFloat(angle);
   return unit === 'rad' ? number * 180 / Math.PI : number;
 };
-var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
-  var operation = _ref.operation,
-    value = _ref.value;
+const normalizeTransformOperation = _ref => {
+  let {
+    operation,
+    value
+  } = _ref;
   switch (operation) {
     case 'scale':
       {
-        var _value$map = value.map(function (num) {
-            return Number.parseFloat(num);
-          }),
-          scaleX = _value$map[0],
-          _value$map$ = _value$map[1],
-          scaleY = _value$map$ === void 0 ? scaleX : _value$map$;
+        const [scaleX, scaleY = scaleX] = value.map(num => Number.parseFloat(num));
         return {
           operation: 'scale',
           value: [scaleX, scaleY]
@@ -561,9 +563,7 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
       {
         return {
           operation: 'translate',
-          value: value.map(function (num) {
-            return Number.parseFloat(num);
-          })
+          value: value.map(num => Number.parseFloat(num))
         };
       }
     case 'translateX':
@@ -604,25 +604,21 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
     default:
       {
         return {
-          operation: operation,
-          value: value.map(function (num) {
-            return Number.parseFloat(num);
-          })
+          operation,
+          value: value.map(num => Number.parseFloat(num))
         };
       }
   }
 };
-var normalize = function normalize(operations) {
-  return operations.map(function (operation) {
-    return normalizeTransformOperation(operation);
-  });
+const normalize = operations => {
+  return operations.map(operation => normalizeTransformOperation(operation));
 };
-var processTransform = function processTransform(value) {
+const processTransform = value => {
   if (typeof value !== 'string') return value;
   return normalize(parse(value));
 };
 
-var FONT_WEIGHTS = {
+const FONT_WEIGHTS = {
   thin: 100,
   hairline: 100,
   ultralight: 200,
@@ -638,24 +634,22 @@ var FONT_WEIGHTS = {
   heavy: 900,
   black: 900
 };
-var processFontWeight = function processFontWeight(value) {
+const processFontWeight = value => {
   if (!value) return FONT_WEIGHTS.normal;
   if (typeof value === 'number') return value;
-  var lv = value.toLowerCase();
+  const lv = value.toLowerCase();
   if (FONT_WEIGHTS[lv]) return FONT_WEIGHTS[lv];
   return value;
 };
 
-var matchNumber = function matchNumber(value) {
-  return typeof value === 'string' && /^-?\d*\.?\d*$/.test(value);
-};
-var castFloat = function castFloat(value) {
+const matchNumber = value => typeof value === 'string' && /^-?\d*\.?\d*$/.test(value);
+const castFloat = value => {
   if (typeof value !== 'string') return value;
   if (matchNumber(value)) return parseFloat(value);
   return value;
 };
 
-var offsetKeyword = function offsetKeyword(value) {
+const offsetKeyword = value => {
   switch (value) {
     case 'top':
     case 'left':
@@ -670,15 +664,11 @@ var offsetKeyword = function offsetKeyword(value) {
   }
 };
 
-var transformObjectPosition = function transformObjectPosition(value) {
-  return offsetKeyword(value) || castFloat(value);
-};
+const transformObjectPosition = value => offsetKeyword(value) || castFloat(value);
 
-var transformTransformOrigin = function transformTransformOrigin(value) {
-  return offsetKeyword(value) || castFloat(value);
-};
+const transformTransformOrigin = value => offsetKeyword(value) || castFloat(value);
 
-var handlers = {
+const handlers = {
   transform: processTransform,
   fontWeight: processFontWeight,
   objectPositionX: transformObjectPosition,
@@ -686,8 +676,8 @@ var handlers = {
   transformOriginX: transformTransformOrigin,
   transformOriginY: transformTransformOrigin
 };
-var transformStyle = function transformStyle(key, value, container) {
-  var result = handlers[key] ? handlers[key](value) : value;
+const transformStyle = (key, value, container) => {
+  const result = handlers[key] ? handlers[key](value) : value;
   return transformColor(transformUnit(container, castFloat(result)));
 };
 
@@ -703,19 +693,17 @@ var transformStyle = function transformStyle(key, value, container) {
  * @param {Object} container
  * @returns {Transform} transform function
  */
-var transform = function transform(container) {
-  return function (style) {
-    if (!style) return style;
-    var propsArray = Object.keys(style);
-    var resolvedStyle = {};
-    for (var i = 0; i < propsArray.length; i += 1) {
-      var key = propsArray[i];
-      var value = style[key];
-      var transformed = transformStyle(key, value, container);
-      resolvedStyle[key] = transformed;
-    }
-    return resolvedStyle;
-  };
+const transform = container => style => {
+  if (!style) return style;
+  const propsArray = Object.keys(style);
+  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);
+    resolvedStyle[key] = transformed;
+  }
+  return resolvedStyle;
 };
 
 /**
@@ -724,14 +712,20 @@ var transform = function transform(container) {
  * @param {Object} container
  * @param {Object} styles object
  */
-var resolveMediaQueries = function resolveMediaQueries(container, styles) {
-  return Object.keys(styles).reduce(function (acc, key) {
-    var _extends2;
+const resolveMediaQueries = (container, styles) => {
+  return Object.keys(styles).reduce((acc, key) => {
     if (/@media/.test(key)) {
-      var _matchMedia;
-      return _extends({}, acc, matchMedia((_matchMedia = {}, _matchMedia[key] = styles[key], _matchMedia), container));
+      return {
+        ...acc,
+        ...matchMedia({
+          [key]: styles[key]
+        }, container)
+      };
     }
-    return _extends({}, acc, (_extends2 = {}, _extends2[key] = styles[key], _extends2));
+    return {
+      ...acc,
+      [key]: styles[key]
+    };
   }, {});
 };
 
@@ -742,10 +736,8 @@ var resolveMediaQueries = function resolveMediaQueries(container, styles) {
  * @param {Object} style object
  * @returns {Object} resolved style object
  */
-var resolveStyles = function resolveStyles(container, style) {
-  var computeMediaQueries = function computeMediaQueries(value) {
-    return resolveMediaQueries(container, value);
-  };
+const resolveStyles = (container, style) => {
+  const computeMediaQueries = value => resolveMediaQueries(container, value);
   return compose(transform(container), expand, computeMediaQueries, flatten)(style);
 };