rtl-css-js - npm Package Compare versions

Comparing version 1.4.0 to 1.4.1

dist/rtl-css-js.cjs.js

@@ -87,11 +87,140 @@ 'use strict';
 
-// this will be an object of properties that map to their corresponding rtl property (their doppelganger)
-var propertiesToConvert = arrayToObject([['paddingLeft', 'paddingRight'], ['marginLeft', 'marginRight'], ['left', 'right'], ['borderLeft', 'borderRight'], ['borderLeftColor', 'borderRightColor'], ['borderLeftStyle', 'borderRightStyle'], ['borderLeftWidth', 'borderRightWidth'], ['borderTopLeftRadius', 'borderTopRightRadius'], ['borderBottomLeftRadius', 'borderBottomRightRadius']]);
+/**
+ * Takes an array of [keyValue1, keyValue2] pairs and creates an object of {keyValue1: keyValue2, keyValue2: keyValue1}
+ * @param {Array} array the array of pairs
+ * @return {Object} the {key, value} pair object
+ */
+function arrayToObject(array) {
+  return array.reduce(function (obj, _ref) {
+    var _ref2 = slicedToArray(_ref, 2),
+        prop1 = _ref2[0],
+        prop2 = _ref2[1];
 
-// this is the same as the propertiesToConvert except for values
-var valuesToConvert = arrayToObject([['ltr', 'rtl'], ['left', 'right'], ['w-resize', 'e-resize'], ['sw-resize', 'se-resize'], ['nw-resize', 'ne-resize']]);
+    obj[prop1] = prop2;
+    obj[prop2] = prop1;
+    return obj;
+  }, {});
+}
 
+function isNumber(val) {
+  return typeof val === 'number';
+}
+
+function isNullOrUndefined(val) {
+  return val === null || typeof val === 'undefined';
+}
+
+function isObject(val) {
+  return val && (typeof val === 'undefined' ? 'undefined' : _typeof(val)) === 'object';
+}
+
+function isString(val) {
+  return typeof val === 'string';
+}
+
+function includes(inclusive, inclusee) {
+  return inclusive.indexOf(inclusee) !== -1;
+}
+
+/**
+ * Flip the sign of a CSS value, possibly with a unit.
+ *
+ * We can't just negate the value with unary minus due to the units.
+ *
+ * @private
+ * @param {String} value - the original value (for example 77%)
+ * @return {String} the result (for example -77%)
+ */
+function flipSign(value) {
+  if (parseFloat(value) === 0) {
+    // Don't mangle zeroes
+    return value;
+  }
+
+  if (value[0] === '-') {
+    return value.slice(1);
+  }
+
+  return '-' + value;
+}
+
+function calculateNewTranslate(match, prefix, offset, suffix) {
+  return prefix + flipSign(offset) + suffix;
+}
+
+/**
+ * Takes a percentage for background position and inverts it.
+ * This was copied and modified from CSSJanus:
+ * https://github.com/cssjanus/cssjanus/blob/4245f834365f6cfb0239191a151432fb85abab23/src/cssjanus.js#L152-L175
+ * @param {String} value - the original value (for example 77%)
+ * @return {String} the result (for example 23%)
+ */
+function calculateNewBackgroundPosition(value) {
+  var idx = value.indexOf('.');
+  if (idx === -1) {
+    value = 100 - parseFloat(value) + '%';
+  } else {
+    // Two off, one for the "%" at the end, one for the dot itself
+    var len = value.length - idx - 2;
+    value = 100 - parseFloat(value);
+    value = value.toFixed(len) + '%';
+  }
+  return value;
+}
+
+/**
+ * This takes a list of CSS values and converts it to an array
+ * @param {String} value - something like `1px`, `1px 2em`, or `3pt rgb(150, 230, 550) 40px calc(100% - 5px)`
+ * @return {Array} the split values (for example: `['3pt', 'rgb(150, 230, 550)', '40px', 'calc(100% - 5px)']`)
+ */
+function getValuesAsList(value) {
+  return value.replace(/ +/g, ' ') // remove all extraneous spaces
+  .split(' ').map(function (i) {
+    return i.trim();
+  }) // get rid of extra space before/after each item
+  .filter(Boolean) // get rid of empty strings
+  // join items which are within parenthese
+  // luckily `calc (100% - 5px)` is invalid syntax and it must be `calc(100% - 5px)`, otherwise this would be even more complex
+  .reduce(function (_ref3, item) {
+    var list = _ref3.list,
+        state = _ref3.state;
+
+    var openParansCount = (item.match(/\(/g) || []).length;
+    var closedParansCount = (item.match(/\)/g) || []).length;
+    if (state.parensDepth > 0) {
+      list[list.length - 1] = list[list.length - 1] + ' ' + item;
+    } else {
+      list.push(item);
+    }
+    state.parensDepth += openParansCount - closedParansCount;
+    return { list: list, state: state };
+  }, { list: [], state: { parensDepth: 0 } }).list;
+}
+
+/**
+ * This is intended for properties that are `top right bottom left` and will switch them to `top left bottom right`
+ * @param {String} value - `1px 2px 3px 4px` for example, but also handles cases where there are too few/too many and
+ * simply returns the value in those cases (which is the correct behavior)
+ * @return {String} the result - `1px 4px 3px 2px` for example.
+ */
+function handleQuartetValues(value) {
+  var splitValues = getValuesAsList(value);
+  if (splitValues.length <= 3 || splitValues.length > 4) {
+    return value;
+  }
+
+  var _splitValues = slicedToArray(splitValues, 4),
+      top = _splitValues[0],
+      right = _splitValues[1],
+      bottom = _splitValues[2],
+      left = _splitValues[3];
+
+  return [top, left, bottom, right].join(' ');
+}
+
 // some values require a little fudging, that fudging goes here.
 var propertyValueConverters = {
-  padding: function padding(value) {
+  padding: function padding(_ref) {
+    var value = _ref.value;
+
     if (isNumber(value)) {
@@ -102,3 +231,5 @@ return value;
   },
-  textShadow: function textShadow(value) {
+  textShadow: function textShadow(_ref2) {
+    var value = _ref2.value;
+
     // intentionally leaving off the `g` flag here because we only want to change the first number (which is the offset-x)
@@ -113,6 +244,10 @@ return value.replace(/(-*)([.|\d]+)/, function (match, negative, number) {
   },
-  borderColor: function borderColor(value) {
+  borderColor: function borderColor(_ref3) {
+    var value = _ref3.value;
+
     return handleQuartetValues(value);
   },
-  borderRadius: function borderRadius(value) {
+  borderRadius: function borderRadius(_ref4) {
+    var value = _ref4.value;
+
     if (isNumber(value)) {
@@ -127,4 +262,8 @@ return value;
 
-      var convertedRadius1 = propertyValueConverters.borderRadius(radius1.trim());
-      var convertedRadius2 = propertyValueConverters.borderRadius(radius2.trim());
+      var convertedRadius1 = propertyValueConverters.borderRadius({
+        value: radius1.trim()
+      });
+      var convertedRadius2 = propertyValueConverters.borderRadius({
+        value: radius2.trim()
+      });
       return convertedRadius1 + ' / ' + convertedRadius2;
@@ -154,3 +293,9 @@ }
   },
-  background: function background(value) {
+  background: function background(_ref5) {
+    var value = _ref5.value,
+        valuesToConvert = _ref5.valuesToConvert,
+        isRtl = _ref5.isRtl,
+        bgImgDirectionRegex = _ref5.bgImgDirectionRegex,
+        bgPosDirectionRegex = _ref5.bgPosDirectionRegex;
+
     // Yeah, this is in need of a refactor 🙃...
@@ -161,46 +306,67 @@ // but this property is a tough cookie 🍪
     // replace that backgroundPosition value with the converted version
-    value = value.replace(backgroundPositionValue, propertyValueConverters.backgroundPosition(backgroundPositionValue));
+    value = value.replace(backgroundPositionValue, propertyValueConverters.backgroundPosition({
+      value: backgroundPositionValue,
+      valuesToConvert: valuesToConvert,
+      isRtl: isRtl,
+      bgPosDirectionRegex: bgPosDirectionRegex
+    }));
     // do the backgroundImage value replacing on the whole value (because why not?)
-    return propertyValueConverters.backgroundImage(value);
+    return propertyValueConverters.backgroundImage({
+      value: value,
+      valuesToConvert: valuesToConvert,
+      bgImgDirectionRegex: bgImgDirectionRegex
+    });
   },
-  backgroundImage: function backgroundImage(value) {
+  backgroundImage: function backgroundImage(_ref6) {
+    var value = _ref6.value,
+        valuesToConvert = _ref6.valuesToConvert,
+        bgImgDirectionRegex = _ref6.bgImgDirectionRegex;
+
     if (!includes(value, 'url(') && !includes(value, 'linear-gradient(')) {
       return value;
     }
-    // sorry for the regex 😞, but basically this replaces _every_ instance of `ltr`, `rtl`, `right`, and `left` with
-    // the corresponding opposite. A situation we're accepting here:
-    // url('/left/right/rtl/ltr.png') will be changed to url('/right/left/ltr/rtl.png')
-    // Definite trade-offs here, but I think it's a good call.
-    return value.replace(/(^|\W|_)((ltr)|(rtl)|(left)|(right))(\W|_|$)/g, function (match, g1, group2) {
+    return value.replace(bgImgDirectionRegex, function (match, g1, group2) {
       return match.replace(group2, valuesToConvert[group2]);
     });
   },
-  backgroundPosition: function backgroundPosition(value) {
+  backgroundPosition: function backgroundPosition(_ref7) {
+    var value = _ref7.value,
+        valuesToConvert = _ref7.valuesToConvert,
+        isRtl = _ref7.isRtl,
+        bgPosDirectionRegex = _ref7.bgPosDirectionRegex;
+
     return value
     // intentionally only grabbing the first instance of this because that represents `left`
-    .replace(/^((-|\d|\.)+%)/, function (match, group) {
+    .replace(isRtl ? /^((-|\d|\.)+%)/ : null, function (match, group) {
       return calculateNewBackgroundPosition(group);
-    }).replace(/(left)|(right)/, function (match) {
+    }).replace(bgPosDirectionRegex, function (match) {
       return valuesToConvert[match];
     });
   },
-  backgroundPositionX: function backgroundPositionX(value) {
+  backgroundPositionX: function backgroundPositionX(_ref8) {
+    var value = _ref8.value,
+        valuesToConvert = _ref8.valuesToConvert,
+        isRtl = _ref8.isRtl,
+        bgPosDirectionRegex = _ref8.bgPosDirectionRegex;
+
     if (isNumber(value)) {
       return value;
     }
-    return propertyValueConverters.backgroundPosition(value);
+    return propertyValueConverters.backgroundPosition({
+      value: value,
+      valuesToConvert: valuesToConvert,
+      isRtl: isRtl,
+      bgPosDirectionRegex: bgPosDirectionRegex
+    });
   },
-  transform: function transform(value) {
+  transform: function transform(_ref9) {
+    var value = _ref9.value;
+
     // This was copied and modified from CSSJanus:
     // https://github.com/cssjanus/cssjanus/blob/4a40f001b1ba35567112d8b8e1d9d95eda4234c3/src/cssjanus.js#L152-L153
     var nonAsciiPattern = '[^\\u0020-\\u007e]';
-    var unicodePattern = '(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)';
-    var numPattern = '(?:[0-9]*\\.[0-9]+|[0-9]+)';
-    var unitPattern = '(?:em|ex|px|cm|mm|in|pt|pc|deg|rad|grad|ms|s|hz|khz|%)';
-    var escapePattern = '(?:' + unicodePattern + '|\\\\[^\\r\\n\\f0-9a-f])';
-    var nmstartPattern = '(?:[_a-z]|' + nonAsciiPattern + '|' + escapePattern + ')';
-    var nmcharPattern = '(?:[_a-z0-9-]|' + nonAsciiPattern + '|' + escapePattern + ')';
-    var identPattern = '-?' + nmstartPattern + nmcharPattern + '*';
-    var quantPattern = numPattern + '(?:\\s*' + unitPattern + '|' + identPattern + ')?';
-    var signedQuantPattern = '((?:-?' + quantPattern + ')|(?:inherit|auto))';
+
+    var escapePattern = '(?:' + '(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)' + '|\\\\[^\\r\\n\\f0-9a-f])';
+
+    var signedQuantPattern = '((?:-?' + ('(?:[0-9]*\\.[0-9]+|[0-9]+)' + '(?:\\s*' + '(?:em|ex|px|cm|mm|in|pt|pc|deg|rad|grad|ms|s|hz|khz|%)' + '|' + ('-?' + ('(?:[_a-z]|' + nonAsciiPattern + '|' + escapePattern + ')') + ('(?:[_a-z0-9-]|' + nonAsciiPattern + '|' + escapePattern + ')') + '*') + ')?') + ')|(?:inherit|auto))';
     var translateXRegExp = new RegExp('(translateX\\s*\\(\\s*)' + signedQuantPattern + '(\\s*\\))', 'gi');
@@ -212,2 +378,3 @@ var translateRegExp = new RegExp('(translate\\s*\\(\\s*)' + signedQuantPattern + '((?:\\s*,\\s*' + signedQuantPattern + '){0,1}\\s*\\))', 'gi');
 };
+
 propertyValueConverters.margin = propertyValueConverters.padding;
@@ -222,2 +389,16 @@ propertyValueConverters.borderWidth = propertyValueConverters.padding;
 
+// this will be an object of properties that map to their corresponding rtl property (their doppelganger)
+var propertiesToConvert = arrayToObject([['paddingLeft', 'paddingRight'], ['marginLeft', 'marginRight'], ['left', 'right'], ['borderLeft', 'borderRight'], ['borderLeftColor', 'borderRightColor'], ['borderLeftStyle', 'borderRightStyle'], ['borderLeftWidth', 'borderRightWidth'], ['borderTopLeftRadius', 'borderTopRightRadius'], ['borderBottomLeftRadius', 'borderBottomRightRadius']]);
+
+// this is the same as the propertiesToConvert except for values
+var valuesToConvert = arrayToObject([['ltr', 'rtl'], ['left', 'right'], ['w-resize', 'e-resize'], ['sw-resize', 'se-resize'], ['nw-resize', 'ne-resize']]);
+
+// Sorry for the regex 😞, but basically thisis used to replace _every_ instance of
+// `ltr`, `rtl`, `right`, and `left` in `backgroundimage` with the corresponding opposite.
+// A situation we're accepting here:
+// url('/left/right/rtl/ltr.png') will be changed to url('/right/left/ltr/rtl.png')
+// Definite trade-offs here, but I think it's a good call.
+var bgImgDirectionRegex = new RegExp('(^|\\W|_)((ltr)|(rtl)|(left)|(right))(\\W|_|$)', 'g');
+var bgPosDirectionRegex = new RegExp('(left)|(right)');
+
 /**
@@ -274,4 +455,4 @@ * converts properties and values in the CSS in JS object to their corresponding RTL values
 function getValueDoppelganger(key, originalValue) {
-  /* eslint complexity:[2, 8] */ // let's try to keep the complexity down... If we have to do this much more, let's break this up
-  if (originalValue === null || typeof originalValue === 'undefined') {
+  /* eslint complexity:[2, 7] */ // let's try to keep the complexity down... If we have to do this much more, let's break this up
+  if (isNullOrUndefined(originalValue)) {
     return originalValue;
@@ -289,3 +470,9 @@ }
   if (valueConverter) {
-    newValue = valueConverter(importantlessValue);
+    newValue = valueConverter({
+      value: importantlessValue,
+      valuesToConvert: valuesToConvert,
+      isRtl: true,
+      bgImgDirectionRegex: bgImgDirectionRegex,
+      bgPosDirectionRegex: bgPosDirectionRegex
+    });
   } else {
@@ -300,131 +487,2 @@ newValue = valuesToConvert[importantlessValue] || importantlessValue;
 
-/**
- * This takes a list of CSS values and converts it to an array
- * @param {String} value - something like `1px`, `1px 2em`, or `3pt rgb(150, 230, 550) 40px calc(100% - 5px)`
- * @return {Array} the split values (for example: `['3pt', 'rgb(150, 230, 550)', '40px', 'calc(100% - 5px)']`)
- */
-function getValuesAsList(value) {
-  return value.replace(/ +/g, ' ') // remove all extraneous spaces
-  .split(' ').map(function (i) {
-    return i.trim();
-  }) // get rid of extra space before/after each item
-  .filter(Boolean) // get rid of empty strings
-  // join items which are within parenthese
-  // luckily `calc (100% - 5px)` is invalid syntax and it must be `calc(100% - 5px)`, otherwise this would be even more complex
-  .reduce(function (_ref, item) {
-    var list = _ref.list,
-        state = _ref.state;
-
-    var openParansCount = (item.match(/\(/g) || []).length;
-    var closedParansCount = (item.match(/\)/g) || []).length;
-    if (state.parensDepth > 0) {
-      list[list.length - 1] = list[list.length - 1] + ' ' + item;
-    } else {
-      list.push(item);
-    }
-    state.parensDepth += openParansCount - closedParansCount;
-    return { list: list, state: state };
-  }, { list: [], state: { parensDepth: 0 } }).list;
-}
-
-/**
- * This is intended for properties that are `top right bottom left` and will switch them to `top left bottom right`
- * @param {String} value - `1px 2px 3px 4px` for example, but also handles cases where there are too few/too many and
- * simply returns the value in those cases (which is the correct behavior)
- * @return {String} the result - `1px 4px 3px 2px` for example.
- */
-function handleQuartetValues(value) {
-  var splitValues = getValuesAsList(value);
-  if (splitValues.length <= 3 || splitValues.length > 4) {
-    return value;
-  }
-
-  var _splitValues2 = slicedToArray(splitValues, 4),
-      top = _splitValues2[0],
-      right = _splitValues2[1],
-      bottom = _splitValues2[2],
-      left = _splitValues2[3];
-
-  return [top, left, bottom, right].join(' ');
-}
-
-/**
- * Takes a percentage for background position and inverts it.
- * This was copied and modified from CSSJanus:
- * https://github.com/cssjanus/cssjanus/blob/4245f834365f6cfb0239191a151432fb85abab23/src/cssjanus.js#L152-L175
- * @param {String} value - the original value (for example 77%)
- * @return {String} the result (for example 23%)
- */
-function calculateNewBackgroundPosition(value) {
-  var idx = value.indexOf('.');
-  if (idx === -1) {
-    value = 100 - parseFloat(value) + '%';
-  } else {
-    // Two off, one for the "%" at the end, one for the dot itself
-    var len = value.length - idx - 2;
-    value = 100 - parseFloat(value);
-    value = value.toFixed(len) + '%';
-  }
-  return value;
-}
-
-/**
- * Flip the sign of a CSS value, possibly with a unit.
- *
- * We can't just negate the value with unary minus due to the units.
- *
- * @private
- * @param {String} value - the original value (for example 77%)
- * @return {String} the result (for example -77%)
- */
-function flipSign(value) {
-  if (parseFloat(value) === 0) {
-    // Don't mangle zeroes
-    return value;
-  }
-
-  if (value[0] === '-') {
-    return value.slice(1);
-  }
-
-  return '-' + value;
-}
-
-function calculateNewTranslate(match, prefix, offset, suffix) {
-  return prefix + flipSign(offset) + suffix;
-}
-
-/**
- * Takes an array of [keyValue1, keyValue2] pairs and creates an object of {keyValue1: keyValue2, keyValue2: keyValue1}
- * @param {Array} array the array of pairs
- * @return {Object} the {key, value} pair object
- */
-function arrayToObject(array) {
-  return array.reduce(function (obj, _ref2) {
-    var _ref3 = slicedToArray(_ref2, 2),
-        prop1 = _ref3[0],
-        prop2 = _ref3[1];
-
-    obj[prop1] = prop2;
-    obj[prop2] = prop1;
-    return obj;
-  }, {});
-}
-
-function isNumber(val) {
-  return typeof val === 'number';
-}
-
-function isObject(val) {
-  return val && (typeof val === 'undefined' ? 'undefined' : _typeof(val)) === 'object';
-}
-
-function isString(val) {
-  return typeof val === 'string';
-}
-
-function includes(inclusive, inclusee) {
-  return inclusive.indexOf(inclusee) !== -1;
-}
-
 module.exports = convert;

dist/rtl-css-js.umd.js

@@ -91,11 +91,140 @@ (function (global, factory) {
 
-// this will be an object of properties that map to their corresponding rtl property (their doppelganger)
-var propertiesToConvert = arrayToObject([['paddingLeft', 'paddingRight'], ['marginLeft', 'marginRight'], ['left', 'right'], ['borderLeft', 'borderRight'], ['borderLeftColor', 'borderRightColor'], ['borderLeftStyle', 'borderRightStyle'], ['borderLeftWidth', 'borderRightWidth'], ['borderTopLeftRadius', 'borderTopRightRadius'], ['borderBottomLeftRadius', 'borderBottomRightRadius']]);
+/**
+ * Takes an array of [keyValue1, keyValue2] pairs and creates an object of {keyValue1: keyValue2, keyValue2: keyValue1}
+ * @param {Array} array the array of pairs
+ * @return {Object} the {key, value} pair object
+ */
+function arrayToObject(array) {
+  return array.reduce(function (obj, _ref) {
+    var _ref2 = slicedToArray(_ref, 2),
+        prop1 = _ref2[0],
+        prop2 = _ref2[1];
 
-// this is the same as the propertiesToConvert except for values
-var valuesToConvert = arrayToObject([['ltr', 'rtl'], ['left', 'right'], ['w-resize', 'e-resize'], ['sw-resize', 'se-resize'], ['nw-resize', 'ne-resize']]);
+    obj[prop1] = prop2;
+    obj[prop2] = prop1;
+    return obj;
+  }, {});
+}
 
+function isNumber(val) {
+  return typeof val === 'number';
+}
+
+function isNullOrUndefined(val) {
+  return val === null || typeof val === 'undefined';
+}
+
+function isObject(val) {
+  return val && (typeof val === 'undefined' ? 'undefined' : _typeof(val)) === 'object';
+}
+
+function isString(val) {
+  return typeof val === 'string';
+}
+
+function includes(inclusive, inclusee) {
+  return inclusive.indexOf(inclusee) !== -1;
+}
+
+/**
+ * Flip the sign of a CSS value, possibly with a unit.
+ *
+ * We can't just negate the value with unary minus due to the units.
+ *
+ * @private
+ * @param {String} value - the original value (for example 77%)
+ * @return {String} the result (for example -77%)
+ */
+function flipSign(value) {
+  if (parseFloat(value) === 0) {
+    // Don't mangle zeroes
+    return value;
+  }
+
+  if (value[0] === '-') {
+    return value.slice(1);
+  }
+
+  return '-' + value;
+}
+
+function calculateNewTranslate(match, prefix, offset, suffix) {
+  return prefix + flipSign(offset) + suffix;
+}
+
+/**
+ * Takes a percentage for background position and inverts it.
+ * This was copied and modified from CSSJanus:
+ * https://github.com/cssjanus/cssjanus/blob/4245f834365f6cfb0239191a151432fb85abab23/src/cssjanus.js#L152-L175
+ * @param {String} value - the original value (for example 77%)
+ * @return {String} the result (for example 23%)
+ */
+function calculateNewBackgroundPosition(value) {
+  var idx = value.indexOf('.');
+  if (idx === -1) {
+    value = 100 - parseFloat(value) + '%';
+  } else {
+    // Two off, one for the "%" at the end, one for the dot itself
+    var len = value.length - idx - 2;
+    value = 100 - parseFloat(value);
+    value = value.toFixed(len) + '%';
+  }
+  return value;
+}
+
+/**
+ * This takes a list of CSS values and converts it to an array
+ * @param {String} value - something like `1px`, `1px 2em`, or `3pt rgb(150, 230, 550) 40px calc(100% - 5px)`
+ * @return {Array} the split values (for example: `['3pt', 'rgb(150, 230, 550)', '40px', 'calc(100% - 5px)']`)
+ */
+function getValuesAsList(value) {
+  return value.replace(/ +/g, ' ') // remove all extraneous spaces
+  .split(' ').map(function (i) {
+    return i.trim();
+  }) // get rid of extra space before/after each item
+  .filter(Boolean) // get rid of empty strings
+  // join items which are within parenthese
+  // luckily `calc (100% - 5px)` is invalid syntax and it must be `calc(100% - 5px)`, otherwise this would be even more complex
+  .reduce(function (_ref3, item) {
+    var list = _ref3.list,
+        state = _ref3.state;
+
+    var openParansCount = (item.match(/\(/g) || []).length;
+    var closedParansCount = (item.match(/\)/g) || []).length;
+    if (state.parensDepth > 0) {
+      list[list.length - 1] = list[list.length - 1] + ' ' + item;
+    } else {
+      list.push(item);
+    }
+    state.parensDepth += openParansCount - closedParansCount;
+    return { list: list, state: state };
+  }, { list: [], state: { parensDepth: 0 } }).list;
+}
+
+/**
+ * This is intended for properties that are `top right bottom left` and will switch them to `top left bottom right`
+ * @param {String} value - `1px 2px 3px 4px` for example, but also handles cases where there are too few/too many and
+ * simply returns the value in those cases (which is the correct behavior)
+ * @return {String} the result - `1px 4px 3px 2px` for example.
+ */
+function handleQuartetValues(value) {
+  var splitValues = getValuesAsList(value);
+  if (splitValues.length <= 3 || splitValues.length > 4) {
+    return value;
+  }
+
+  var _splitValues = slicedToArray(splitValues, 4),
+      top = _splitValues[0],
+      right = _splitValues[1],
+      bottom = _splitValues[2],
+      left = _splitValues[3];
+
+  return [top, left, bottom, right].join(' ');
+}
+
 // some values require a little fudging, that fudging goes here.
 var propertyValueConverters = {
-  padding: function padding(value) {
+  padding: function padding(_ref) {
+    var value = _ref.value;
+
     if (isNumber(value)) {
@@ -106,3 +235,5 @@ return value;
   },
-  textShadow: function textShadow(value) {
+  textShadow: function textShadow(_ref2) {
+    var value = _ref2.value;
+
     // intentionally leaving off the `g` flag here because we only want to change the first number (which is the offset-x)
@@ -117,6 +248,10 @@ return value.replace(/(-*)([.|\d]+)/, function (match, negative, number) {
   },
-  borderColor: function borderColor(value) {
+  borderColor: function borderColor(_ref3) {
+    var value = _ref3.value;
+
     return handleQuartetValues(value);
   },
-  borderRadius: function borderRadius(value) {
+  borderRadius: function borderRadius(_ref4) {
+    var value = _ref4.value;
+
     if (isNumber(value)) {
@@ -131,4 +266,8 @@ return value;
 
-      var convertedRadius1 = propertyValueConverters.borderRadius(radius1.trim());
-      var convertedRadius2 = propertyValueConverters.borderRadius(radius2.trim());
+      var convertedRadius1 = propertyValueConverters.borderRadius({
+        value: radius1.trim()
+      });
+      var convertedRadius2 = propertyValueConverters.borderRadius({
+        value: radius2.trim()
+      });
       return convertedRadius1 + ' / ' + convertedRadius2;
@@ -158,3 +297,9 @@ }
   },
-  background: function background(value) {
+  background: function background(_ref5) {
+    var value = _ref5.value,
+        valuesToConvert = _ref5.valuesToConvert,
+        isRtl = _ref5.isRtl,
+        bgImgDirectionRegex = _ref5.bgImgDirectionRegex,
+        bgPosDirectionRegex = _ref5.bgPosDirectionRegex;
+
     // Yeah, this is in need of a refactor 🙃...
@@ -165,46 +310,67 @@ // but this property is a tough cookie 🍪
     // replace that backgroundPosition value with the converted version
-    value = value.replace(backgroundPositionValue, propertyValueConverters.backgroundPosition(backgroundPositionValue));
+    value = value.replace(backgroundPositionValue, propertyValueConverters.backgroundPosition({
+      value: backgroundPositionValue,
+      valuesToConvert: valuesToConvert,
+      isRtl: isRtl,
+      bgPosDirectionRegex: bgPosDirectionRegex
+    }));
     // do the backgroundImage value replacing on the whole value (because why not?)
-    return propertyValueConverters.backgroundImage(value);
+    return propertyValueConverters.backgroundImage({
+      value: value,
+      valuesToConvert: valuesToConvert,
+      bgImgDirectionRegex: bgImgDirectionRegex
+    });
   },
-  backgroundImage: function backgroundImage(value) {
+  backgroundImage: function backgroundImage(_ref6) {
+    var value = _ref6.value,
+        valuesToConvert = _ref6.valuesToConvert,
+        bgImgDirectionRegex = _ref6.bgImgDirectionRegex;
+
     if (!includes(value, 'url(') && !includes(value, 'linear-gradient(')) {
       return value;
     }
-    // sorry for the regex 😞, but basically this replaces _every_ instance of `ltr`, `rtl`, `right`, and `left` with
-    // the corresponding opposite. A situation we're accepting here:
-    // url('/left/right/rtl/ltr.png') will be changed to url('/right/left/ltr/rtl.png')
-    // Definite trade-offs here, but I think it's a good call.
-    return value.replace(/(^|\W|_)((ltr)|(rtl)|(left)|(right))(\W|_|$)/g, function (match, g1, group2) {
+    return value.replace(bgImgDirectionRegex, function (match, g1, group2) {
       return match.replace(group2, valuesToConvert[group2]);
     });
   },
-  backgroundPosition: function backgroundPosition(value) {
+  backgroundPosition: function backgroundPosition(_ref7) {
+    var value = _ref7.value,
+        valuesToConvert = _ref7.valuesToConvert,
+        isRtl = _ref7.isRtl,
+        bgPosDirectionRegex = _ref7.bgPosDirectionRegex;
+
     return value
     // intentionally only grabbing the first instance of this because that represents `left`
-    .replace(/^((-|\d|\.)+%)/, function (match, group) {
+    .replace(isRtl ? /^((-|\d|\.)+%)/ : null, function (match, group) {
       return calculateNewBackgroundPosition(group);
-    }).replace(/(left)|(right)/, function (match) {
+    }).replace(bgPosDirectionRegex, function (match) {
       return valuesToConvert[match];
     });
   },
-  backgroundPositionX: function backgroundPositionX(value) {
+  backgroundPositionX: function backgroundPositionX(_ref8) {
+    var value = _ref8.value,
+        valuesToConvert = _ref8.valuesToConvert,
+        isRtl = _ref8.isRtl,
+        bgPosDirectionRegex = _ref8.bgPosDirectionRegex;
+
     if (isNumber(value)) {
       return value;
     }
-    return propertyValueConverters.backgroundPosition(value);
+    return propertyValueConverters.backgroundPosition({
+      value: value,
+      valuesToConvert: valuesToConvert,
+      isRtl: isRtl,
+      bgPosDirectionRegex: bgPosDirectionRegex
+    });
   },
-  transform: function transform(value) {
+  transform: function transform(_ref9) {
+    var value = _ref9.value;
+
     // This was copied and modified from CSSJanus:
     // https://github.com/cssjanus/cssjanus/blob/4a40f001b1ba35567112d8b8e1d9d95eda4234c3/src/cssjanus.js#L152-L153
     var nonAsciiPattern = '[^\\u0020-\\u007e]';
-    var unicodePattern = '(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)';
-    var numPattern = '(?:[0-9]*\\.[0-9]+|[0-9]+)';
-    var unitPattern = '(?:em|ex|px|cm|mm|in|pt|pc|deg|rad|grad|ms|s|hz|khz|%)';
-    var escapePattern = '(?:' + unicodePattern + '|\\\\[^\\r\\n\\f0-9a-f])';
-    var nmstartPattern = '(?:[_a-z]|' + nonAsciiPattern + '|' + escapePattern + ')';
-    var nmcharPattern = '(?:[_a-z0-9-]|' + nonAsciiPattern + '|' + escapePattern + ')';
-    var identPattern = '-?' + nmstartPattern + nmcharPattern + '*';
-    var quantPattern = numPattern + '(?:\\s*' + unitPattern + '|' + identPattern + ')?';
-    var signedQuantPattern = '((?:-?' + quantPattern + ')|(?:inherit|auto))';
+
+    var escapePattern = '(?:' + '(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)' + '|\\\\[^\\r\\n\\f0-9a-f])';
+
+    var signedQuantPattern = '((?:-?' + ('(?:[0-9]*\\.[0-9]+|[0-9]+)' + '(?:\\s*' + '(?:em|ex|px|cm|mm|in|pt|pc|deg|rad|grad|ms|s|hz|khz|%)' + '|' + ('-?' + ('(?:[_a-z]|' + nonAsciiPattern + '|' + escapePattern + ')') + ('(?:[_a-z0-9-]|' + nonAsciiPattern + '|' + escapePattern + ')') + '*') + ')?') + ')|(?:inherit|auto))';
     var translateXRegExp = new RegExp('(translateX\\s*\\(\\s*)' + signedQuantPattern + '(\\s*\\))', 'gi');
@@ -216,2 +382,3 @@ var translateRegExp = new RegExp('(translate\\s*\\(\\s*)' + signedQuantPattern + '((?:\\s*,\\s*' + signedQuantPattern + '){0,1}\\s*\\))', 'gi');
 };
+
 propertyValueConverters.margin = propertyValueConverters.padding;
@@ -226,2 +393,16 @@ propertyValueConverters.borderWidth = propertyValueConverters.padding;
 
+// this will be an object of properties that map to their corresponding rtl property (their doppelganger)
+var propertiesToConvert = arrayToObject([['paddingLeft', 'paddingRight'], ['marginLeft', 'marginRight'], ['left', 'right'], ['borderLeft', 'borderRight'], ['borderLeftColor', 'borderRightColor'], ['borderLeftStyle', 'borderRightStyle'], ['borderLeftWidth', 'borderRightWidth'], ['borderTopLeftRadius', 'borderTopRightRadius'], ['borderBottomLeftRadius', 'borderBottomRightRadius']]);
+
+// this is the same as the propertiesToConvert except for values
+var valuesToConvert = arrayToObject([['ltr', 'rtl'], ['left', 'right'], ['w-resize', 'e-resize'], ['sw-resize', 'se-resize'], ['nw-resize', 'ne-resize']]);
+
+// Sorry for the regex 😞, but basically thisis used to replace _every_ instance of
+// `ltr`, `rtl`, `right`, and `left` in `backgroundimage` with the corresponding opposite.
+// A situation we're accepting here:
+// url('/left/right/rtl/ltr.png') will be changed to url('/right/left/ltr/rtl.png')
+// Definite trade-offs here, but I think it's a good call.
+var bgImgDirectionRegex = new RegExp('(^|\\W|_)((ltr)|(rtl)|(left)|(right))(\\W|_|$)', 'g');
+var bgPosDirectionRegex = new RegExp('(left)|(right)');
+
 /**
@@ -278,4 +459,4 @@ * converts properties and values in the CSS in JS object to their corresponding RTL values
 function getValueDoppelganger(key, originalValue) {
-  /* eslint complexity:[2, 8] */ // let's try to keep the complexity down... If we have to do this much more, let's break this up
-  if (originalValue === null || typeof originalValue === 'undefined') {
+  /* eslint complexity:[2, 7] */ // let's try to keep the complexity down... If we have to do this much more, let's break this up
+  if (isNullOrUndefined(originalValue)) {
     return originalValue;
@@ -293,3 +474,9 @@ }
   if (valueConverter) {
-    newValue = valueConverter(importantlessValue);
+    newValue = valueConverter({
+      value: importantlessValue,
+      valuesToConvert: valuesToConvert,
+      isRtl: true,
+      bgImgDirectionRegex: bgImgDirectionRegex,
+      bgPosDirectionRegex: bgPosDirectionRegex
+    });
   } else {
@@ -304,134 +491,4 @@ newValue = valuesToConvert[importantlessValue] || importantlessValue;
 
-/**
- * This takes a list of CSS values and converts it to an array
- * @param {String} value - something like `1px`, `1px 2em`, or `3pt rgb(150, 230, 550) 40px calc(100% - 5px)`
- * @return {Array} the split values (for example: `['3pt', 'rgb(150, 230, 550)', '40px', 'calc(100% - 5px)']`)
- */
-function getValuesAsList(value) {
-  return value.replace(/ +/g, ' ') // remove all extraneous spaces
-  .split(' ').map(function (i) {
-    return i.trim();
-  }) // get rid of extra space before/after each item
-  .filter(Boolean) // get rid of empty strings
-  // join items which are within parenthese
-  // luckily `calc (100% - 5px)` is invalid syntax and it must be `calc(100% - 5px)`, otherwise this would be even more complex
-  .reduce(function (_ref, item) {
-    var list = _ref.list,
-        state = _ref.state;
-
-    var openParansCount = (item.match(/\(/g) || []).length;
-    var closedParansCount = (item.match(/\)/g) || []).length;
-    if (state.parensDepth > 0) {
-      list[list.length - 1] = list[list.length - 1] + ' ' + item;
-    } else {
-      list.push(item);
-    }
-    state.parensDepth += openParansCount - closedParansCount;
-    return { list: list, state: state };
-  }, { list: [], state: { parensDepth: 0 } }).list;
-}
-
-/**
- * This is intended for properties that are `top right bottom left` and will switch them to `top left bottom right`
- * @param {String} value - `1px 2px 3px 4px` for example, but also handles cases where there are too few/too many and
- * simply returns the value in those cases (which is the correct behavior)
- * @return {String} the result - `1px 4px 3px 2px` for example.
- */
-function handleQuartetValues(value) {
-  var splitValues = getValuesAsList(value);
-  if (splitValues.length <= 3 || splitValues.length > 4) {
-    return value;
-  }
-
-  var _splitValues2 = slicedToArray(splitValues, 4),
-      top = _splitValues2[0],
-      right = _splitValues2[1],
-      bottom = _splitValues2[2],
-      left = _splitValues2[3];
-
-  return [top, left, bottom, right].join(' ');
-}
-
-/**
- * Takes a percentage for background position and inverts it.
- * This was copied and modified from CSSJanus:
- * https://github.com/cssjanus/cssjanus/blob/4245f834365f6cfb0239191a151432fb85abab23/src/cssjanus.js#L152-L175
- * @param {String} value - the original value (for example 77%)
- * @return {String} the result (for example 23%)
- */
-function calculateNewBackgroundPosition(value) {
-  var idx = value.indexOf('.');
-  if (idx === -1) {
-    value = 100 - parseFloat(value) + '%';
-  } else {
-    // Two off, one for the "%" at the end, one for the dot itself
-    var len = value.length - idx - 2;
-    value = 100 - parseFloat(value);
-    value = value.toFixed(len) + '%';
-  }
-  return value;
-}
-
-/**
- * Flip the sign of a CSS value, possibly with a unit.
- *
- * We can't just negate the value with unary minus due to the units.
- *
- * @private
- * @param {String} value - the original value (for example 77%)
- * @return {String} the result (for example -77%)
- */
-function flipSign(value) {
-  if (parseFloat(value) === 0) {
-    // Don't mangle zeroes
-    return value;
-  }
-
-  if (value[0] === '-') {
-    return value.slice(1);
-  }
-
-  return '-' + value;
-}
-
-function calculateNewTranslate(match, prefix, offset, suffix) {
-  return prefix + flipSign(offset) + suffix;
-}
-
-/**
- * Takes an array of [keyValue1, keyValue2] pairs and creates an object of {keyValue1: keyValue2, keyValue2: keyValue1}
- * @param {Array} array the array of pairs
- * @return {Object} the {key, value} pair object
- */
-function arrayToObject(array) {
-  return array.reduce(function (obj, _ref2) {
-    var _ref3 = slicedToArray(_ref2, 2),
-        prop1 = _ref3[0],
-        prop2 = _ref3[1];
-
-    obj[prop1] = prop2;
-    obj[prop2] = prop1;
-    return obj;
-  }, {});
-}
-
-function isNumber(val) {
-  return typeof val === 'number';
-}
-
-function isObject(val) {
-  return val && (typeof val === 'undefined' ? 'undefined' : _typeof(val)) === 'object';
-}
-
-function isString(val) {
-  return typeof val === 'string';
-}
-
-function includes(inclusive, inclusee) {
-  return inclusive.indexOf(inclusee) !== -1;
-}
-
 return convert;
 
 })));
-//# sourceMappingURL=rtl-css-js.umd.js.map

dist/rtl-css-js.umd.min.js

@@ -1,2 +0,1 @@
-!function(r,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):r.rtlCSSJS=t()}(this,function(){"use strict";function r(r){return Object.keys(r).reduce(function(e,n){var o=r[n];c(o)&&(o=o.trim());var i=t(n,o),u=i.key,a=i.value;return e[u]=a,e},{})}function t(r,t){var o=/\/\*\s?@noflip\s?\*\//.test(t),i=o?r:e(r);return{key:i,value:o?t:n(i,t)}}function e(r){return b[r]||r}function n(t,e){if(null===e||void 0===e)return e;if(l(e))return r(e);var n=d(e),o=n?e:e.replace(/ !important.*?$/,""),i=!n&&o.length!==e.length,u=y[t],a=void 0;return a=u?u(o):m[o]||o,i?a+" !important":a}function o(r){return r.replace(/ +/g," ").split(" ").map(function(r){return r.trim()}).filter(Boolean).reduce(function(r,t){var e=r.list,n=r.state,o=(t.match(/\(/g)||[]).length,i=(t.match(/\)/g)||[]).length;return n.parensDepth>0?e[e.length-1]=e[e.length-1]+" "+t:e.push(t),n.parensDepth+=o-i,{list:e,state:n}},{list:[],state:{parensDepth:0}}).list}function i(r){var t=o(r);if(t.length<=3||t.length>4)return r;var e=h(t,4),n=e[0],i=e[1],u=e[2];return[n,e[3],u,i].join(" ")}function u(r){var t=r.indexOf(".");if(-1===t)r=100-parseFloat(r)+"%";else{var e=r.length-t-2;r=(r=100-parseFloat(r)).toFixed(e)+"%"}return r}function a(r){return 0===parseFloat(r)?r:"-"===r[0]?r.slice(1):"-"+r}function f(r,t,e,n){return t+a(e)+n}function s(r){return r.reduce(function(r,t){var e=h(t,2),n=e[0],o=e[1];return r[n]=o,r[o]=n,r},{})}function d(r){return"number"==typeof r}function l(r){return r&&"object"===(void 0===r?"undefined":g(r))}function c(r){return"string"==typeof r}function p(r,t){return-1!==r.indexOf(t)}var g="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},h=function(){function r(r,t){var e=[],n=!0,o=!1,i=void 0;try{for(var u,a=r[Symbol.iterator]();!(n=(u=a.next()).done)&&(e.push(u.value),!t||e.length!==t);n=!0);}catch(r){o=!0,i=r}finally{try{!n&&a.return&&a.return()}finally{if(o)throw i}}return e}return function(t,e){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return r(t,e);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),b=s([["paddingLeft","paddingRight"],["marginLeft","marginRight"],["left","right"],["borderLeft","borderRight"],["borderLeftColor","borderRightColor"],["borderLeftStyle","borderRightStyle"],["borderLeftWidth","borderRightWidth"],["borderTopLeftRadius","borderTopRightRadius"],["borderBottomLeftRadius","borderBottomRightRadius"]]),m=s([["ltr","rtl"],["left","right"],["w-resize","e-resize"],["sw-resize","se-resize"],["nw-resize","ne-resize"]]),y={padding:function(r){return d(r)?r:i(r)},textShadow:function(r){return r.replace(/(-*)([.|\d]+)/,function(r,t,e){return"0"===e?r:""+(""===t?"-":"")+e})},borderColor:function(r){return i(r)},borderRadius:function(r){if(d(r))return r;if(p(r,"/")){var t=r.split("/"),e=h(t,2),n=e[0],i=e[1];return y.borderRadius(n.trim())+" / "+y.borderRadius(i.trim())}var u=o(r);switch(u.length){case 2:return u.reverse().join(" ");case 4:var a=h(u,4),f=a[0],s=a[1],l=a[2];return[s,f,a[3],l].join(" ");default:return r}},background:function(r){var t=r.replace(/(url\(.*?\))|(rgba?\(.*?\))|(hsl\(.*?\))|(#[a-fA-F0-9]+)|((^| )(\D)+( |$))/g,"").trim();return r=r.replace(t,y.backgroundPosition(t)),y.backgroundImage(r)},backgroundImage:function(r){return p(r,"url(")||p(r,"linear-gradient(")?r.replace(/(^|\W|_)((ltr)|(rtl)|(left)|(right))(\W|_|$)/g,function(r,t,e){return r.replace(e,m[e])}):r},backgroundPosition:function(r){return r.replace(/^((-|\d|\.)+%)/,function(r,t){return u(t)}).replace(/(left)|(right)/,function(r){return m[r]})},backgroundPositionX:function(r){return d(r)?r:y.backgroundPosition(r)},transform:function(r){var t="((?:-?(?:[0-9]*\\.[0-9]+|[0-9]+)(?:\\s*(?:em|ex|px|cm|mm|in|pt|pc|deg|rad|grad|ms|s|hz|khz|%)|-?(?:[_a-z]|[^\\u0020-\\u007e]|(?:(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)|\\\\[^\\r\\n\\f0-9a-f]))(?:[_a-z0-9-]|[^\\u0020-\\u007e]|(?:(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)|\\\\[^\\r\\n\\f0-9a-f]))*)?)|(?:inherit|auto))",e=new RegExp("(translateX\\s*\\(\\s*)"+t+"(\\s*\\))","gi"),n=new RegExp("(translate\\s*\\(\\s*)"+t+"((?:\\s*,\\s*"+t+"){0,1}\\s*\\))","gi"),o=new RegExp("(translate3d\\s*\\(\\s*)"+t+"((?:\\s*,\\s*"+t+"){0,2}\\s*\\))","gi");return r.replace(e,f).replace(n,f).replace(o,f)}};return y.margin=y.padding,y.borderWidth=y.padding,y.boxShadow=y.textShadow,y.webkitBoxShadow=y.textShadow,y.mozBoxShadow=y.textShadow,y.borderStyle=y.borderColor,y.webkitTransform=y.transform,y.mozTransform=y.transform,r});
-//# sourceMappingURL=rtl-css-js.umd.min.js.map
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):e.rtlCSSJS=r()}(this,function(){"use strict";function e(e){return e.reduce(function(e,r){var t=b(r,2),n=t[0],o=t[1];return e[n]=o,e[o]=n,e},{})}function r(e){return"number"==typeof e}function t(e){return null===e||void 0===e}function n(e){return e&&"object"===(void 0===e?"undefined":p(e))}function o(e){return"string"==typeof e}function i(e,r){return-1!==e.indexOf(r)}function u(e){return 0===parseFloat(e)?e:"-"===e[0]?e.slice(1):"-"+e}function a(e,r,t,n){return r+u(t)+n}function l(e){var r=e.indexOf(".");if(-1===r)e=100-parseFloat(e)+"%";else{var t=e.length-r-2;e=(e=100-parseFloat(e)).toFixed(t)+"%"}return e}function s(e){return e.replace(/ +/g," ").split(" ").map(function(e){return e.trim()}).filter(Boolean).reduce(function(e,r){var t=e.list,n=e.state,o=(r.match(/\(/g)||[]).length,i=(r.match(/\)/g)||[]).length;return n.parensDepth>0?t[t.length-1]=t[t.length-1]+" "+r:t.push(r),n.parensDepth+=o-i,{list:t,state:n}},{list:[],state:{parensDepth:0}}).list}function f(e){var r=s(e);if(r.length<=3||r.length>4)return e;var t=b(r,4),n=t[0],o=t[1],i=t[2];return[n,t[3],i,o].join(" ")}function c(e){return Object.keys(e).reduce(function(r,t){var n=e[t];o(n)&&(n=n.trim());var i=d(t,n),u=i.key,a=i.value;return r[u]=a,r},{})}function d(e,r){var t=/\/\*\s?@noflip\s?\*\//.test(r),n=t?e:g(e);return{key:n,value:t?r:v(n,r)}}function g(e){return m[e]||e}function v(e,o){if(t(o))return o;if(n(o))return c(o);var i=r(o),u=i?o:o.replace(/ !important.*?$/,""),a=!i&&u.length!==o.length,l=h[e],s=void 0;return s=l?l({value:u,valuesToConvert:R,isRtl:!0,bgImgDirectionRegex:y,bgPosDirectionRegex:x}):R[u]||u,a?s+" !important":s}var p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},b=function(){function e(e,r){var t=[],n=!0,o=!1,i=void 0;try{for(var u,a=e[Symbol.iterator]();!(n=(u=a.next()).done)&&(t.push(u.value),!r||t.length!==r);n=!0);}catch(e){o=!0,i=e}finally{try{!n&&a.return&&a.return()}finally{if(o)throw i}}return t}return function(r,t){if(Array.isArray(r))return r;if(Symbol.iterator in Object(r))return e(r,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),h={padding:function(e){var t=e.value;return r(t)?t:f(t)},textShadow:function(e){return e.value.replace(/(-*)([.|\d]+)/,function(e,r,t){return"0"===t?e:""+(""===r?"-":"")+t})},borderColor:function(e){return f(e.value)},borderRadius:function(e){var t=e.value;if(r(t))return t;if(i(t,"/")){var n=t.split("/"),o=b(n,2),u=o[0],a=o[1];return h.borderRadius({value:u.trim()})+" / "+h.borderRadius({value:a.trim()})}var l=s(t);switch(l.length){case 2:return l.reverse().join(" ");case 4:var f=b(l,4),c=f[0],d=f[1],g=f[2];return[d,c,f[3],g].join(" ");default:return t}},background:function(e){var r=e.value,t=e.valuesToConvert,n=e.isRtl,o=e.bgImgDirectionRegex,i=e.bgPosDirectionRegex,u=r.replace(/(url\(.*?\))|(rgba?\(.*?\))|(hsl\(.*?\))|(#[a-fA-F0-9]+)|((^| )(\D)+( |$))/g,"").trim();return r=r.replace(u,h.backgroundPosition({value:u,valuesToConvert:t,isRtl:n,bgPosDirectionRegex:i})),h.backgroundImage({value:r,valuesToConvert:t,bgImgDirectionRegex:o})},backgroundImage:function(e){var r=e.value,t=e.valuesToConvert,n=e.bgImgDirectionRegex;return i(r,"url(")||i(r,"linear-gradient(")?r.replace(n,function(e,r,n){return e.replace(n,t[n])}):r},backgroundPosition:function(e){var r=e.value,t=e.valuesToConvert,n=e.isRtl,o=e.bgPosDirectionRegex;return r.replace(n?/^((-|\d|\.)+%)/:null,function(e,r){return l(r)}).replace(o,function(e){return t[e]})},backgroundPositionX:function(e){var t=e.value,n=e.valuesToConvert,o=e.isRtl,i=e.bgPosDirectionRegex;return r(t)?t:h.backgroundPosition({value:t,valuesToConvert:n,isRtl:o,bgPosDirectionRegex:i})},transform:function(e){var r=e.value,t="(?:(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)|\\\\[^\\r\\n\\f0-9a-f])",n="((?:-?(?:[0-9]*\\.[0-9]+|[0-9]+)(?:\\s*(?:em|ex|px|cm|mm|in|pt|pc|deg|rad|grad|ms|s|hz|khz|%)|-?(?:[_a-z]|[^\\u0020-\\u007e]|"+t+")(?:[_a-z0-9-]|[^\\u0020-\\u007e]|"+t+")*)?)|(?:inherit|auto))",o=new RegExp("(translateX\\s*\\(\\s*)"+n+"(\\s*\\))","gi"),i=new RegExp("(translate\\s*\\(\\s*)"+n+"((?:\\s*,\\s*"+n+"){0,1}\\s*\\))","gi"),u=new RegExp("(translate3d\\s*\\(\\s*)"+n+"((?:\\s*,\\s*"+n+"){0,2}\\s*\\))","gi");return r.replace(o,a).replace(i,a).replace(u,a)}};h.margin=h.padding,h.borderWidth=h.padding,h.boxShadow=h.textShadow,h.webkitBoxShadow=h.textShadow,h.mozBoxShadow=h.textShadow,h.borderStyle=h.borderColor,h.webkitTransform=h.transform,h.mozTransform=h.transform;var m=e([["paddingLeft","paddingRight"],["marginLeft","marginRight"],["left","right"],["borderLeft","borderRight"],["borderLeftColor","borderRightColor"],["borderLeftStyle","borderRightStyle"],["borderLeftWidth","borderRightWidth"],["borderTopLeftRadius","borderTopRightRadius"],["borderBottomLeftRadius","borderBottomRightRadius"]]),R=e([["ltr","rtl"],["left","right"],["w-resize","e-resize"],["sw-resize","se-resize"],["nw-resize","ne-resize"]]),y=new RegExp("(^|\\W|_)((ltr)|(rtl)|(left)|(right))(\\W|_|$)","g"),x=new RegExp("(left)|(right)");return c});

package.json

 {
   "name": "rtl-css-js",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Right To Left conversion for CSS in JS objects",
@@ -10,3 +10,5 @@ "main": "dist/rtl-css-js.cjs.js",
     "add-contributor": "kcd-scripts contributors add",
-    "build": "kcd-scripts build --browser --environment BUILD_NAME:rtlCSSJS",
+    "build": "rimraf dist && npm-run-all build:*",
+    "build:main": "kcd-scripts build --bundle --environment BUILD_NAME:rtlCSSJS --no-clean",
+    "build:core": "kcd-scripts build --bundle --environment BUILD_NAME:rtlCSSJSCore,BUILD_FILENAME_SUFFIX:\".core\",BUILD_INPUT:src/core/index.js --no-clean",
     "lint": "kcd-scripts lint",
@@ -19,3 +21,5 @@ "test": "kcd-scripts test",
   "files": [
-    "dist"
+    "dist",
+    "core",
+    "core.esm"
   ],
@@ -31,3 +35,5 @@ "keywords": [
   "devDependencies": {
-    "kcd-scripts": "^0.6.0"
+    "kcd-scripts": "^0.16.0",
+    "npm-run-all": "^4.1.1",
+    "rimraf": "^2.6.2"
   },
@@ -34,0 +40,0 @@ "eslintConfig": {

README.md

@@ -12,3 +12,3 @@ # rtl-css-js
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)
 [![PRs Welcome][prs-badge]][prs]
@@ -63,3 +63,3 @@ [![Donate][donate-badge]][donate]
 ```html
-<script src="https://unpkg.com/rtl-css-js@1.0.0-beta.1"></script>
+<script src="https://unpkg.com/rtl-css-js"></script>
 <script>
@@ -79,2 +79,13 @@ const styles = rtlCSSJS({paddingRight: 23})
 
+### core
+
+`rtl-css-js` also exposes its internal helpers and utilities so you can deal
+with [certain scenarios](https://github.com/kentcdodds/rtl-css-js/pull/22)
+yourself. To use these you can use the `rtlCSSJSCore` global with the UMD build,
+`require('rtl-css-js/core')`, or use
+`import {propertyValueConverters, arrayToObject} from 'rtl-css-js/core.esm'`.
+
+You can import anything that's exported from `src/core`. Please see the code
+comments for documentation on how to use these.
+
 ## Caveats
@@ -102,4 +113,4 @@
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-| [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub>Kent C. Dodds</sub>](https://kentcdodds.com)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=kentcdodds "Code") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=kentcdodds "Tests") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") | [<img src="https://avatars.githubusercontent.com/u/63876?v=3" width="100px;"/><br /><sub>Ahmed El Gabri</sub>](https://gabri.me)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=ahmedelgabri "Code") [📖](https://github.com/kentcdodds/rtl-css-js/commits?author=ahmedelgabri "Documentation") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=ahmedelgabri "Tests") | [<img src="https://avatars1.githubusercontent.com/u/1383861?v=4" width="100px;"/><br /><sub>Maja Wichrowska</sub>](https://github.com/majapw)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=majapw "Code") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=majapw "Tests") | [<img src="https://avatars2.githubusercontent.com/u/6600720?v=4" width="100px;"/><br /><sub>Yaniv</sub>](https://github.com/yzimet)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=yzimet "Code") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=yzimet "Tests") |
-| :---: | :---: | :---: | :---: |
+| [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub>Kent C. Dodds</sub>](https://kentcdodds.com)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=kentcdodds "Code") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=kentcdodds "Tests") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") | [<img src="https://avatars.githubusercontent.com/u/63876?v=3" width="100px;"/><br /><sub>Ahmed El Gabri</sub>](https://gabri.me)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=ahmedelgabri "Code") [📖](https://github.com/kentcdodds/rtl-css-js/commits?author=ahmedelgabri "Documentation") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=ahmedelgabri "Tests") | [<img src="https://avatars1.githubusercontent.com/u/1383861?v=4" width="100px;"/><br /><sub>Maja Wichrowska</sub>](https://github.com/majapw)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=majapw "Code") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=majapw "Tests") | [<img src="https://avatars2.githubusercontent.com/u/6600720?v=4" width="100px;"/><br /><sub>Yaniv</sub>](https://github.com/yzimet)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=yzimet "Code") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=yzimet "Tests") | [<img src="https://avatars2.githubusercontent.com/u/5658514?v=4" width="100px;"/><br /><sub>Jonathan Pollak</sub>](https://github.com/TxHawks)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=TxHawks "Code") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=TxHawks "Tests") |
+| :---: | :---: | :---: | :---: | :---: |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
@@ -106,0 +117,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

106867

increased by8.1%

Number of package files

12

increased by20%

Lines of code

2153

increased by103.31%

Number of lines in readme file

152

increased by7.8%

Worsened metrics

Dev dependency count

3

increased by200%

No dependency changes