rtl-css-js
Advanced tools
Comparing version 1.9.1 to 1.10.0
/* eslint import/no-unresolved:0 */ | ||
// this file just makes it easier to import dist/core | ||
export * from './dist/rtl-css-js.core.esm' | ||
if (process.env.NODE_ENV !== 'production') { | ||
// eslint-disable-next-line no-console | ||
console.warn( | ||
'Importing `rtl-css-js/core.esm` is deprecated, please use `rtl-css-js/core`.', | ||
) | ||
} | ||
export * from './dist/esm/core.js' |
/* eslint import/no-unresolved:0 */ | ||
// this file just makes it easier to require dist/core | ||
module.exports = require('./dist/rtl-css-js.core.cjs') | ||
module.exports = require('./dist/cjs/core.js') |
(function (global, factory) { | ||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : | ||
typeof define === 'function' && define.amd ? define(['exports'], factory) : | ||
(factory((global.rtlCSSJSCore = {}))); | ||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : | ||
typeof define === 'function' && define.amd ? define(['exports'], factory) : | ||
(factory((global.rtlCSSJSCore = {}))); | ||
}(this, (function (exports) { 'use strict'; | ||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { | ||
return typeof obj; | ||
} : function (obj) { | ||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; | ||
}; | ||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { | ||
return typeof obj; | ||
} : function (obj) { | ||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; | ||
}; | ||
/** | ||
* 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 prop1 = _ref[0], | ||
prop2 = _ref[1]; | ||
obj[prop1] = prop2; | ||
obj[prop2] = prop1; | ||
return obj; | ||
}, {}); | ||
} | ||
function isBoolean(val) { | ||
return typeof val === 'boolean'; | ||
} | ||
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; | ||
} | ||
var slicedToArray = function () { | ||
function sliceIterator(arr, i) { | ||
var _arr = []; | ||
var _n = true; | ||
var _d = false; | ||
var _e = undefined; | ||
try { | ||
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { | ||
_arr.push(_s.value); | ||
if (i && _arr.length === i) break; | ||
} | ||
} catch (err) { | ||
_d = true; | ||
_e = err; | ||
} finally { | ||
try { | ||
if (!_n && _i["return"]) _i["return"](); | ||
} finally { | ||
if (_d) throw _e; | ||
} | ||
if (value[0] === '-') { | ||
return value.slice(1); | ||
} | ||
return _arr; | ||
return '-' + value; | ||
} | ||
return function (arr, i) { | ||
if (Array.isArray(arr)) { | ||
return arr; | ||
} else if (Symbol.iterator in Object(arr)) { | ||
return sliceIterator(arr, i); | ||
function flipTransformSign(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 { | ||
throw new TypeError("Invalid attempt to destructure non-iterable instance"); | ||
// 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) + '%'; | ||
} | ||
}; | ||
}(); | ||
/** | ||
* 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]; | ||
obj[prop1] = prop2; | ||
obj[prop2] = prop1; | ||
return obj; | ||
}, {}); | ||
} | ||
function isBoolean(val) { | ||
return typeof val === 'boolean'; | ||
} | ||
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); | ||
} | ||
/** | ||
* 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 (_ref2, item) { | ||
var list = _ref2.list, | ||
state = _ref2.state; | ||
return '-' + value; | ||
} | ||
function flipTransformSign(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) + '%'; | ||
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; | ||
} | ||
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); | ||
/** | ||
* 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; | ||
} | ||
state.parensDepth += openParansCount - closedParansCount; | ||
return { list: list, state: state }; | ||
}, { list: [], state: { parensDepth: 0 } }).list; | ||
} | ||
var top = splitValues[0], | ||
right = splitValues[1], | ||
bottom = splitValues[2], | ||
left = splitValues[3]; | ||
/** | ||
* 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; | ||
return [top, left, bottom, right].join(' '); | ||
} | ||
var _splitValues = slicedToArray(splitValues, 4), | ||
top = _splitValues[0], | ||
right = _splitValues[1], | ||
bottom = _splitValues[2], | ||
left = _splitValues[3]; | ||
// some values require a little fudging, that fudging goes here. | ||
var propertyValueConverters = { | ||
padding: function padding(_ref) { | ||
var value = _ref.value; | ||
return [top, left, bottom, right].join(' '); | ||
} | ||
if (isNumber(value)) { | ||
return value; | ||
} | ||
return handleQuartetValues(value); | ||
}, | ||
textShadow: function textShadow(_ref2) { | ||
var value = _ref2.value; | ||
// some values require a little fudging, that fudging goes here. | ||
var propertyValueConverters = { | ||
padding: function padding(_ref) { | ||
var value = _ref.value; | ||
// intentionally leaving off the `g` flag here because we only want to change the first number (which is the offset-x) | ||
return value.replace(/(-*)([.|\d]+)/, function (match, negative, number) { | ||
if (number === '0') { | ||
return match; | ||
} | ||
var doubleNegative = negative === '' ? '-' : ''; | ||
return '' + doubleNegative + number; | ||
}); | ||
}, | ||
borderColor: function borderColor(_ref3) { | ||
var value = _ref3.value; | ||
if (isNumber(value)) { | ||
return value; | ||
} | ||
return handleQuartetValues(value); | ||
}, | ||
textShadow: function textShadow(_ref2) { | ||
var value = _ref2.value; | ||
return handleQuartetValues(value); | ||
}, | ||
borderRadius: function borderRadius(_ref4) { | ||
var value = _ref4.value; | ||
// intentionally leaving off the `g` flag here because we only want to change the first number (which is the offset-x) | ||
return value.replace(/(-*)([.|\d]+)/, function (match, negative, number) { | ||
if (number === '0') { | ||
return match; | ||
if (isNumber(value)) { | ||
return value; | ||
} | ||
var doubleNegative = negative === '' ? '-' : ''; | ||
return '' + doubleNegative + number; | ||
}); | ||
}, | ||
borderColor: function borderColor(_ref3) { | ||
var value = _ref3.value; | ||
if (includes(value, '/')) { | ||
var _value$split = value.split('/'), | ||
radius1 = _value$split[0], | ||
radius2 = _value$split[1]; | ||
return handleQuartetValues(value); | ||
}, | ||
borderRadius: function borderRadius(_ref4) { | ||
var value = _ref4.value; | ||
var convertedRadius1 = propertyValueConverters.borderRadius({ | ||
value: radius1.trim() | ||
}); | ||
var convertedRadius2 = propertyValueConverters.borderRadius({ | ||
value: radius2.trim() | ||
}); | ||
return convertedRadius1 + ' / ' + convertedRadius2; | ||
} | ||
var splitValues = getValuesAsList(value); | ||
switch (splitValues.length) { | ||
case 2: | ||
{ | ||
return splitValues.reverse().join(' '); | ||
} | ||
case 4: | ||
{ | ||
var topLeft = splitValues[0], | ||
topRight = splitValues[1], | ||
bottomRight = splitValues[2], | ||
bottomLeft = splitValues[3]; | ||
if (isNumber(value)) { | ||
return value; | ||
} | ||
if (includes(value, '/')) { | ||
var _value$split = value.split('/'), | ||
_value$split2 = slicedToArray(_value$split, 2), | ||
radius1 = _value$split2[0], | ||
radius2 = _value$split2[1]; | ||
return [topRight, topLeft, bottomLeft, bottomRight].join(' '); | ||
} | ||
default: | ||
{ | ||
return value; | ||
} | ||
} | ||
}, | ||
background: function background(_ref5) { | ||
var value = _ref5.value, | ||
valuesToConvert = _ref5.valuesToConvert, | ||
isRtl = _ref5.isRtl, | ||
bgImgDirectionRegex = _ref5.bgImgDirectionRegex, | ||
bgPosDirectionRegex = _ref5.bgPosDirectionRegex; | ||
var convertedRadius1 = propertyValueConverters.borderRadius({ | ||
value: radius1.trim() | ||
// Yeah, this is in need of a refactor 🙃... | ||
// but this property is a tough cookie 🍪 | ||
// get the backgroundPosition out of the string by removing everything that couldn't be the backgroundPosition value | ||
var backgroundPositionValue = value.replace(/(url\(.*?\))|(rgba?\(.*?\))|(hsl\(.*?\))|(#[a-fA-F0-9]+)|((^| )(\D)+( |$))/g, '').trim(); | ||
// replace that backgroundPosition value with the converted version | ||
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: value, | ||
valuesToConvert: valuesToConvert, | ||
bgImgDirectionRegex: bgImgDirectionRegex | ||
}); | ||
var convertedRadius2 = propertyValueConverters.borderRadius({ | ||
value: radius2.trim() | ||
}, | ||
backgroundImage: function backgroundImage(_ref6) { | ||
var value = _ref6.value, | ||
valuesToConvert = _ref6.valuesToConvert, | ||
bgImgDirectionRegex = _ref6.bgImgDirectionRegex; | ||
if (!includes(value, 'url(') && !includes(value, 'linear-gradient(')) { | ||
return value; | ||
} | ||
return value.replace(bgImgDirectionRegex, function (match, g1, group2) { | ||
return match.replace(group2, valuesToConvert[group2]); | ||
}); | ||
return convertedRadius1 + ' / ' + convertedRadius2; | ||
} | ||
var splitValues = getValuesAsList(value); | ||
switch (splitValues.length) { | ||
case 2: | ||
{ | ||
return splitValues.reverse().join(' '); | ||
} | ||
case 4: | ||
{ | ||
var _splitValues = slicedToArray(splitValues, 4), | ||
topLeft = _splitValues[0], | ||
topRight = _splitValues[1], | ||
bottomRight = _splitValues[2], | ||
bottomLeft = _splitValues[3]; | ||
}, | ||
backgroundPosition: function backgroundPosition(_ref7) { | ||
var value = _ref7.value, | ||
valuesToConvert = _ref7.valuesToConvert, | ||
isRtl = _ref7.isRtl, | ||
bgPosDirectionRegex = _ref7.bgPosDirectionRegex; | ||
return [topRight, topLeft, bottomLeft, bottomRight].join(' '); | ||
} | ||
default: | ||
{ | ||
return value; | ||
} | ||
} | ||
}, | ||
background: function background(_ref5) { | ||
var value = _ref5.value, | ||
valuesToConvert = _ref5.valuesToConvert, | ||
isRtl = _ref5.isRtl, | ||
bgImgDirectionRegex = _ref5.bgImgDirectionRegex, | ||
bgPosDirectionRegex = _ref5.bgPosDirectionRegex; | ||
return value | ||
// intentionally only grabbing the first instance of this because that represents `left` | ||
.replace(isRtl ? /^((-|\d|\.)+%)/ : null, function (match, group) { | ||
return calculateNewBackgroundPosition(group); | ||
}).replace(bgPosDirectionRegex, function (match) { | ||
return valuesToConvert[match]; | ||
}); | ||
}, | ||
backgroundPositionX: function backgroundPositionX(_ref8) { | ||
var value = _ref8.value, | ||
valuesToConvert = _ref8.valuesToConvert, | ||
isRtl = _ref8.isRtl, | ||
bgPosDirectionRegex = _ref8.bgPosDirectionRegex; | ||
// Yeah, this is in need of a refactor 🙃... | ||
// but this property is a tough cookie 🍪 | ||
// get the backgroundPosition out of the string by removing everything that couldn't be the backgroundPosition value | ||
var backgroundPositionValue = value.replace(/(url\(.*?\))|(rgba?\(.*?\))|(hsl\(.*?\))|(#[a-fA-F0-9]+)|((^| )(\D)+( |$))/g, '').trim(); | ||
// replace that backgroundPosition value with the converted version | ||
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: value, | ||
valuesToConvert: valuesToConvert, | ||
bgImgDirectionRegex: bgImgDirectionRegex | ||
}); | ||
}, | ||
backgroundImage: function backgroundImage(_ref6) { | ||
var value = _ref6.value, | ||
valuesToConvert = _ref6.valuesToConvert, | ||
bgImgDirectionRegex = _ref6.bgImgDirectionRegex; | ||
if (isNumber(value)) { | ||
return value; | ||
} | ||
return propertyValueConverters.backgroundPosition({ | ||
value: value, | ||
valuesToConvert: valuesToConvert, | ||
isRtl: isRtl, | ||
bgPosDirectionRegex: bgPosDirectionRegex | ||
}); | ||
}, | ||
transform: function transform(_ref9) { | ||
var value = _ref9.value; | ||
if (!includes(value, 'url(') && !includes(value, 'linear-gradient(')) { | ||
return value; | ||
} | ||
return value.replace(bgImgDirectionRegex, function (match, g1, group2) { | ||
return match.replace(group2, valuesToConvert[group2]); | ||
}); | ||
}, | ||
backgroundPosition: function backgroundPosition(_ref7) { | ||
var value = _ref7.value, | ||
valuesToConvert = _ref7.valuesToConvert, | ||
isRtl = _ref7.isRtl, | ||
bgPosDirectionRegex = _ref7.bgPosDirectionRegex; | ||
// This was copied and modified from CSSJanus: | ||
// https://github.com/cssjanus/cssjanus/blob/4a40f001b1ba35567112d8b8e1d9d95eda4234c3/src/cssjanus.js#L152-L153 | ||
var nonAsciiPattern = '[^\\u0020-\\u007e]'; | ||
return value | ||
// intentionally only grabbing the first instance of this because that represents `left` | ||
.replace(isRtl ? /^((-|\d|\.)+%)/ : null, function (match, group) { | ||
return calculateNewBackgroundPosition(group); | ||
}).replace(bgPosDirectionRegex, function (match) { | ||
return valuesToConvert[match]; | ||
}); | ||
}, | ||
backgroundPositionX: function backgroundPositionX(_ref8) { | ||
var value = _ref8.value, | ||
valuesToConvert = _ref8.valuesToConvert, | ||
isRtl = _ref8.isRtl, | ||
bgPosDirectionRegex = _ref8.bgPosDirectionRegex; | ||
var escapePattern = '(?:' + '(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)' + '|\\\\[^\\r\\n\\f0-9a-f])'; | ||
if (isNumber(value)) { | ||
return value; | ||
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'); | ||
var translateRegExp = new RegExp('(translate\\s*\\(\\s*)' + signedQuantPattern + '((?:\\s*,\\s*' + signedQuantPattern + '){0,1}\\s*\\))', 'gi'); | ||
var translate3dRegExp = new RegExp('(translate3d\\s*\\(\\s*)' + signedQuantPattern + '((?:\\s*,\\s*' + signedQuantPattern + '){0,2}\\s*\\))', 'gi'); | ||
var rotateRegExp = new RegExp('(rotate[ZY]?\\s*\\(\\s*)' + signedQuantPattern + '(\\s*\\))', 'gi'); | ||
return value.replace(translateXRegExp, flipTransformSign).replace(translateRegExp, flipTransformSign).replace(translate3dRegExp, flipTransformSign).replace(rotateRegExp, flipTransformSign); | ||
} | ||
return propertyValueConverters.backgroundPosition({ | ||
value: value, | ||
valuesToConvert: valuesToConvert, | ||
isRtl: isRtl, | ||
bgPosDirectionRegex: bgPosDirectionRegex | ||
}); | ||
}, | ||
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]'; | ||
propertyValueConverters.margin = propertyValueConverters.padding; | ||
propertyValueConverters.borderWidth = propertyValueConverters.padding; | ||
propertyValueConverters.boxShadow = propertyValueConverters.textShadow; | ||
propertyValueConverters.webkitBoxShadow = propertyValueConverters.boxShadow; | ||
propertyValueConverters.mozBoxShadow = propertyValueConverters.boxShadow; | ||
propertyValueConverters.WebkitBoxShadow = propertyValueConverters.boxShadow; | ||
propertyValueConverters.MozBoxShadow = propertyValueConverters.boxShadow; | ||
propertyValueConverters.borderStyle = propertyValueConverters.borderColor; | ||
propertyValueConverters.webkitTransform = propertyValueConverters.transform; | ||
propertyValueConverters.mozTransform = propertyValueConverters.transform; | ||
propertyValueConverters.WebkitTransform = propertyValueConverters.transform; | ||
propertyValueConverters.MozTransform = propertyValueConverters.transform; | ||
propertyValueConverters.transformOrigin = propertyValueConverters.backgroundPosition; | ||
propertyValueConverters.webkitTransformOrigin = propertyValueConverters.transformOrigin; | ||
propertyValueConverters.mozTransformOrigin = propertyValueConverters.transformOrigin; | ||
propertyValueConverters.WebkitTransformOrigin = propertyValueConverters.transformOrigin; | ||
propertyValueConverters.MozTransformOrigin = propertyValueConverters.transformOrigin; | ||
var escapePattern = '(?:' + '(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)' + '|\\\\[^\\r\\n\\f0-9a-f])'; | ||
// kebab-case versions | ||
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'); | ||
var translateRegExp = new RegExp('(translate\\s*\\(\\s*)' + signedQuantPattern + '((?:\\s*,\\s*' + signedQuantPattern + '){0,1}\\s*\\))', 'gi'); | ||
var translate3dRegExp = new RegExp('(translate3d\\s*\\(\\s*)' + signedQuantPattern + '((?:\\s*,\\s*' + signedQuantPattern + '){0,2}\\s*\\))', 'gi'); | ||
var rotateRegExp = new RegExp('(rotate[ZY]?\\s*\\(\\s*)' + signedQuantPattern + '(\\s*\\))', 'gi'); | ||
return value.replace(translateXRegExp, flipTransformSign).replace(translateRegExp, flipTransformSign).replace(translate3dRegExp, flipTransformSign).replace(rotateRegExp, flipTransformSign); | ||
} | ||
}; | ||
propertyValueConverters['text-shadow'] = propertyValueConverters.textShadow; | ||
propertyValueConverters['border-color'] = propertyValueConverters.borderColor; | ||
propertyValueConverters['border-radius'] = propertyValueConverters.borderRadius; | ||
propertyValueConverters['background-image'] = propertyValueConverters.backgroundImage; | ||
propertyValueConverters['background-position'] = propertyValueConverters.backgroundPosition; | ||
propertyValueConverters['background-position-x'] = propertyValueConverters.backgroundPositionX; | ||
propertyValueConverters['border-width'] = propertyValueConverters.padding; | ||
propertyValueConverters['box-shadow'] = propertyValueConverters.textShadow; | ||
propertyValueConverters['-webkit-box-shadow'] = propertyValueConverters.textShadow; | ||
propertyValueConverters['-moz-box-shadow'] = propertyValueConverters.textShadow; | ||
propertyValueConverters['border-style'] = propertyValueConverters.borderColor; | ||
propertyValueConverters['-webkit-transform'] = propertyValueConverters.transform; | ||
propertyValueConverters['-moz-transform'] = propertyValueConverters.transform; | ||
propertyValueConverters['transform-origin'] = propertyValueConverters.transformOrigin; | ||
propertyValueConverters['-webkit-transform-origin'] = propertyValueConverters.transformOrigin; | ||
propertyValueConverters['-moz-transform-origin'] = propertyValueConverters.transformOrigin; | ||
propertyValueConverters.margin = propertyValueConverters.padding; | ||
propertyValueConverters.borderWidth = propertyValueConverters.padding; | ||
propertyValueConverters.boxShadow = propertyValueConverters.textShadow; | ||
propertyValueConverters.webkitBoxShadow = propertyValueConverters.boxShadow; | ||
propertyValueConverters.mozBoxShadow = propertyValueConverters.boxShadow; | ||
propertyValueConverters.WebkitBoxShadow = propertyValueConverters.boxShadow; | ||
propertyValueConverters.MozBoxShadow = propertyValueConverters.boxShadow; | ||
propertyValueConverters.borderStyle = propertyValueConverters.borderColor; | ||
propertyValueConverters.webkitTransform = propertyValueConverters.transform; | ||
propertyValueConverters.mozTransform = propertyValueConverters.transform; | ||
propertyValueConverters.WebkitTransform = propertyValueConverters.transform; | ||
propertyValueConverters.MozTransform = propertyValueConverters.transform; | ||
propertyValueConverters.transformOrigin = propertyValueConverters.backgroundPosition; | ||
propertyValueConverters.webkitTransformOrigin = propertyValueConverters.transformOrigin; | ||
propertyValueConverters.mozTransformOrigin = propertyValueConverters.transformOrigin; | ||
propertyValueConverters.WebkitTransformOrigin = propertyValueConverters.transformOrigin; | ||
propertyValueConverters.MozTransformOrigin = propertyValueConverters.transformOrigin; | ||
exports.propertyValueConverters = propertyValueConverters; | ||
exports.arrayToObject = arrayToObject; | ||
exports.calculateNewBackgroundPosition = calculateNewBackgroundPosition; | ||
exports.calculateNewTranslate = flipTransformSign; | ||
exports.flipTransformSign = flipTransformSign; | ||
exports.flipSign = flipSign; | ||
exports.handleQuartetValues = handleQuartetValues; | ||
exports.includes = includes; | ||
exports.isBoolean = isBoolean; | ||
exports.isNullOrUndefined = isNullOrUndefined; | ||
exports.isNumber = isNumber; | ||
exports.isObject = isObject; | ||
exports.isString = isString; | ||
exports.getValuesAsList = getValuesAsList; | ||
// kebab-case versions | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
propertyValueConverters['text-shadow'] = propertyValueConverters.textShadow; | ||
propertyValueConverters['border-color'] = propertyValueConverters.borderColor; | ||
propertyValueConverters['border-radius'] = propertyValueConverters.borderRadius; | ||
propertyValueConverters['background-image'] = propertyValueConverters.backgroundImage; | ||
propertyValueConverters['background-position'] = propertyValueConverters.backgroundPosition; | ||
propertyValueConverters['background-position-x'] = propertyValueConverters.backgroundPositionX; | ||
propertyValueConverters['border-width'] = propertyValueConverters.padding; | ||
propertyValueConverters['box-shadow'] = propertyValueConverters.textShadow; | ||
propertyValueConverters['-webkit-box-shadow'] = propertyValueConverters.textShadow; | ||
propertyValueConverters['-moz-box-shadow'] = propertyValueConverters.textShadow; | ||
propertyValueConverters['border-style'] = propertyValueConverters.borderColor; | ||
propertyValueConverters['-webkit-transform'] = propertyValueConverters.transform; | ||
propertyValueConverters['-moz-transform'] = propertyValueConverters.transform; | ||
propertyValueConverters['transform-origin'] = propertyValueConverters.transformOrigin; | ||
propertyValueConverters['-webkit-transform-origin'] = propertyValueConverters.transformOrigin; | ||
propertyValueConverters['-moz-transform-origin'] = propertyValueConverters.transformOrigin; | ||
exports.propertyValueConverters = propertyValueConverters; | ||
exports.arrayToObject = arrayToObject; | ||
exports.calculateNewBackgroundPosition = calculateNewBackgroundPosition; | ||
exports.calculateNewTranslate = flipTransformSign; | ||
exports.flipTransformSign = flipTransformSign; | ||
exports.flipSign = flipSign; | ||
exports.handleQuartetValues = handleQuartetValues; | ||
exports.includes = includes; | ||
exports.isBoolean = isBoolean; | ||
exports.isNullOrUndefined = isNullOrUndefined; | ||
exports.isNumber = isNumber; | ||
exports.isObject = isObject; | ||
exports.isString = isString; | ||
exports.getValuesAsList = getValuesAsList; | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
}))); | ||
//# sourceMappingURL=rtl-css-js.core.umd.js.map |
@@ -1,1 +0,2 @@ | ||
!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(r.rtlCSSJSCore={})}(this,function(r){"use strict";var e="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},c=function(r,e){if(Array.isArray(r))return r;if(Symbol.iterator in Object(r))return function(r,e){var n=[],t=!0,o=!1,i=void 0;try{for(var a,u=r[Symbol.iterator]();!(t=(a=u.next()).done)&&(n.push(a.value),!e||n.length!==e);t=!0);}catch(r){o=!0,i=r}finally{try{!t&&u.return&&u.return()}finally{if(o)throw i}}return n}(r,e);throw new TypeError("Invalid attempt to destructure non-iterable instance")};function d(r){return"number"==typeof r}function g(r,e){return-1!==r.indexOf(e)}function o(r){return 0===parseFloat(r)?r:"-"===r[0]?r.slice(1):"-"+r}function l(r,e,n,t){return e+o(n)+t}function i(r){var e=r.indexOf(".");if(-1===e)r=100-parseFloat(r)+"%";else{var n=r.length-e-2;r=(r=100-parseFloat(r)).toFixed(n)+"%"}return r}function b(r){return r.replace(/ +/g," ").split(" ").map(function(r){return r.trim()}).filter(Boolean).reduce(function(r,e){var n=r.list,t=r.state,o=(e.match(/\(/g)||[]).length,i=(e.match(/\)/g)||[]).length;return 0<t.parensDepth?n[n.length-1]=n[n.length-1]+" "+e:n.push(e),t.parensDepth+=o-i,{list:n,state:t}},{list:[],state:{parensDepth:0}}).list}function n(r){var e=b(r);if(e.length<=3||4<e.length)return r;var n=c(e,4),t=n[0],o=n[1],i=n[2];return[t,n[3],i,o].join(" ")}var m={padding:function(r){var e=r.value;return d(e)?e:n(e)},textShadow:function(r){return r.value.replace(/(-*)([.|\d]+)/,function(r,e,n){return"0"===n?r:""+(""===e?"-":"")+n})},borderColor:function(r){return n(r.value)},borderRadius:function(r){var e=r.value;if(d(e))return e;if(g(e,"/")){var n=e.split("/"),t=c(n,2),o=t[0],i=t[1];return m.borderRadius({value:o.trim()})+" / "+m.borderRadius({value:i.trim()})}var a=b(e);switch(a.length){case 2:return a.reverse().join(" ");case 4:var u=c(a,4),s=u[0],l=u[1],f=u[2];return[l,s,u[3],f].join(" ");default:return e}},background:function(r){var e=r.value,n=r.valuesToConvert,t=r.isRtl,o=r.bgImgDirectionRegex,i=r.bgPosDirectionRegex,a=e.replace(/(url\(.*?\))|(rgba?\(.*?\))|(hsl\(.*?\))|(#[a-fA-F0-9]+)|((^| )(\D)+( |$))/g,"").trim();return e=e.replace(a,m.backgroundPosition({value:a,valuesToConvert:n,isRtl:t,bgPosDirectionRegex:i})),m.backgroundImage({value:e,valuesToConvert:n,bgImgDirectionRegex:o})},backgroundImage:function(r){var e=r.value,t=r.valuesToConvert,n=r.bgImgDirectionRegex;return g(e,"url(")||g(e,"linear-gradient(")?e.replace(n,function(r,e,n){return r.replace(n,t[n])}):e},backgroundPosition:function(r){var e=r.value,n=r.valuesToConvert,t=r.isRtl,o=r.bgPosDirectionRegex;return e.replace(t?/^((-|\d|\.)+%)/:null,function(r,e){return i(e)}).replace(o,function(r){return n[r]})},backgroundPositionX:function(r){var e=r.value,n=r.valuesToConvert,t=r.isRtl,o=r.bgPosDirectionRegex;return d(e)?e:m.backgroundPosition({value:e,valuesToConvert:n,isRtl:t,bgPosDirectionRegex:o})},transform:function(r){var e=r.value,n="[^\\u0020-\\u007e]",t="(?:(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)|\\\\[^\\r\\n\\f0-9a-f])",o="((?:-?(?:[0-9]*\\.[0-9]+|[0-9]+)(?:\\s*(?:em|ex|px|cm|mm|in|pt|pc|deg|rad|grad|ms|s|hz|khz|%)|-?(?:[_a-z]|"+n+"|"+t+")(?:[_a-z0-9-]|"+n+"|"+t+")*)?)|(?:inherit|auto))",i=new RegExp("(translateX\\s*\\(\\s*)"+o+"(\\s*\\))","gi"),a=new RegExp("(translate\\s*\\(\\s*)"+o+"((?:\\s*,\\s*"+o+"){0,1}\\s*\\))","gi"),u=new RegExp("(translate3d\\s*\\(\\s*)"+o+"((?:\\s*,\\s*"+o+"){0,2}\\s*\\))","gi"),s=new RegExp("(rotate[ZY]?\\s*\\(\\s*)"+o+"(\\s*\\))","gi");return e.replace(i,l).replace(a,l).replace(u,l).replace(s,l)}};m.margin=m.padding,m.borderWidth=m.padding,m.boxShadow=m.textShadow,m.webkitBoxShadow=m.boxShadow,m.mozBoxShadow=m.boxShadow,m.WebkitBoxShadow=m.boxShadow,m.MozBoxShadow=m.boxShadow,m.borderStyle=m.borderColor,m.webkitTransform=m.transform,m.mozTransform=m.transform,m.WebkitTransform=m.transform,m.MozTransform=m.transform,m.transformOrigin=m.backgroundPosition,m.webkitTransformOrigin=m.transformOrigin,m.mozTransformOrigin=m.transformOrigin,m.WebkitTransformOrigin=m.transformOrigin,m.MozTransformOrigin=m.transformOrigin,m["text-shadow"]=m.textShadow,m["border-color"]=m.borderColor,m["border-radius"]=m.borderRadius,m["background-image"]=m.backgroundImage,m["background-position"]=m.backgroundPosition,m["background-position-x"]=m.backgroundPositionX,m["border-width"]=m.padding,m["box-shadow"]=m.textShadow,m["-webkit-box-shadow"]=m.textShadow,m["-moz-box-shadow"]=m.textShadow,m["border-style"]=m.borderColor,m["-webkit-transform"]=m.transform,m["-moz-transform"]=m.transform,m["transform-origin"]=m.transformOrigin,m["-webkit-transform-origin"]=m.transformOrigin,m["-moz-transform-origin"]=m.transformOrigin,r.propertyValueConverters=m,r.arrayToObject=function(r){return r.reduce(function(r,e){var n=c(e,2),t=n[0],o=n[1];return r[t]=o,r[o]=t,r},{})},r.calculateNewBackgroundPosition=i,r.calculateNewTranslate=l,r.flipTransformSign=l,r.flipSign=o,r.handleQuartetValues=n,r.includes=g,r.isBoolean=function(r){return"boolean"==typeof r},r.isNullOrUndefined=function(r){return null==r},r.isNumber=d,r.isObject=function(r){return r&&"object"===(void 0===r?"undefined":e(r))},r.isString=function(r){return"string"==typeof r},r.getValuesAsList=b,Object.defineProperty(r,"__esModule",{value:!0})}); | ||
!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(r.rtlCSSJSCore={})}(this,function(r){"use strict";var e="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};function n(r){return"number"==typeof r}function o(r,e){return-1!==r.indexOf(e)}function t(r){return 0===parseFloat(r)?r:"-"===r[0]?r.slice(1):"-"+r}function i(r,e,n,o){return e+t(n)+o}function a(r){var e=r.indexOf(".");if(-1===e)r=100-parseFloat(r)+"%";else{var n=r.length-e-2;r=(r=100-parseFloat(r)).toFixed(n)+"%"}return r}function u(r){return r.replace(/ +/g," ").split(" ").map(function(r){return r.trim()}).filter(Boolean).reduce(function(r,e){var n=r.list,o=r.state,t=(e.match(/\(/g)||[]).length,i=(e.match(/\)/g)||[]).length;return o.parensDepth>0?n[n.length-1]=n[n.length-1]+" "+e:n.push(e),o.parensDepth+=t-i,{list:n,state:o}},{list:[],state:{parensDepth:0}}).list}function s(r){var e=u(r);if(e.length<=3||e.length>4)return r;var n=e[0],o=e[1],t=e[2];return[n,e[3],t,o].join(" ")}var l={padding:function(r){var e=r.value;return n(e)?e:s(e)},textShadow:function(r){return r.value.replace(/(-*)([.|\d]+)/,function(r,e,n){return"0"===n?r:""+(""===e?"-":"")+n})},borderColor:function(r){return s(r.value)},borderRadius:function(r){var e=r.value;if(n(e))return e;if(o(e,"/")){var t=e.split("/"),i=t[0],a=t[1];return l.borderRadius({value:i.trim()})+" / "+l.borderRadius({value:a.trim()})}var s=u(e);switch(s.length){case 2:return s.reverse().join(" ");case 4:var f=s[0],c=s[1],d=s[2];return[c,f,s[3],d].join(" ");default:return e}},background:function(r){var e=r.value,n=r.valuesToConvert,o=r.isRtl,t=r.bgImgDirectionRegex,i=r.bgPosDirectionRegex,a=e.replace(/(url\(.*?\))|(rgba?\(.*?\))|(hsl\(.*?\))|(#[a-fA-F0-9]+)|((^| )(\D)+( |$))/g,"").trim();return e=e.replace(a,l.backgroundPosition({value:a,valuesToConvert:n,isRtl:o,bgPosDirectionRegex:i})),l.backgroundImage({value:e,valuesToConvert:n,bgImgDirectionRegex:t})},backgroundImage:function(r){var e=r.value,n=r.valuesToConvert,t=r.bgImgDirectionRegex;return o(e,"url(")||o(e,"linear-gradient(")?e.replace(t,function(r,e,o){return r.replace(o,n[o])}):e},backgroundPosition:function(r){var e=r.value,n=r.valuesToConvert,o=r.isRtl,t=r.bgPosDirectionRegex;return e.replace(o?/^((-|\d|\.)+%)/:null,function(r,e){return a(e)}).replace(t,function(r){return n[r]})},backgroundPositionX:function(r){var e=r.value,o=r.valuesToConvert,t=r.isRtl,i=r.bgPosDirectionRegex;return n(e)?e:l.backgroundPosition({value:e,valuesToConvert:o,isRtl:t,bgPosDirectionRegex:i})},transform:function(r){var e=r.value,n="(?:(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)|\\\\[^\\r\\n\\f0-9a-f])",o="((?:-?(?:[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]|"+n+")(?:[_a-z0-9-]|[^\\u0020-\\u007e]|"+n+")*)?)|(?:inherit|auto))",t=new RegExp("(translateX\\s*\\(\\s*)"+o+"(\\s*\\))","gi"),a=new RegExp("(translate\\s*\\(\\s*)"+o+"((?:\\s*,\\s*"+o+"){0,1}\\s*\\))","gi"),u=new RegExp("(translate3d\\s*\\(\\s*)"+o+"((?:\\s*,\\s*"+o+"){0,2}\\s*\\))","gi"),s=new RegExp("(rotate[ZY]?\\s*\\(\\s*)"+o+"(\\s*\\))","gi");return e.replace(t,i).replace(a,i).replace(u,i).replace(s,i)}};l.margin=l.padding,l.borderWidth=l.padding,l.boxShadow=l.textShadow,l.webkitBoxShadow=l.boxShadow,l.mozBoxShadow=l.boxShadow,l.WebkitBoxShadow=l.boxShadow,l.MozBoxShadow=l.boxShadow,l.borderStyle=l.borderColor,l.webkitTransform=l.transform,l.mozTransform=l.transform,l.WebkitTransform=l.transform,l.MozTransform=l.transform,l.transformOrigin=l.backgroundPosition,l.webkitTransformOrigin=l.transformOrigin,l.mozTransformOrigin=l.transformOrigin,l.WebkitTransformOrigin=l.transformOrigin,l.MozTransformOrigin=l.transformOrigin,l["text-shadow"]=l.textShadow,l["border-color"]=l.borderColor,l["border-radius"]=l.borderRadius,l["background-image"]=l.backgroundImage,l["background-position"]=l.backgroundPosition,l["background-position-x"]=l.backgroundPositionX,l["border-width"]=l.padding,l["box-shadow"]=l.textShadow,l["-webkit-box-shadow"]=l.textShadow,l["-moz-box-shadow"]=l.textShadow,l["border-style"]=l.borderColor,l["-webkit-transform"]=l.transform,l["-moz-transform"]=l.transform,l["transform-origin"]=l.transformOrigin,l["-webkit-transform-origin"]=l.transformOrigin,l["-moz-transform-origin"]=l.transformOrigin,r.propertyValueConverters=l,r.arrayToObject=function(r){return r.reduce(function(r,e){var n=e[0],o=e[1];return r[n]=o,r[o]=n,r},{})},r.calculateNewBackgroundPosition=a,r.calculateNewTranslate=i,r.flipTransformSign=i,r.flipSign=t,r.handleQuartetValues=s,r.includes=o,r.isBoolean=function(r){return"boolean"==typeof r},r.isNullOrUndefined=function(r){return null===r||void 0===r},r.isNumber=n,r.isObject=function(r){return r&&"object"===(void 0===r?"undefined":e(r))},r.isString=function(r){return"string"==typeof r},r.getValuesAsList=u,Object.defineProperty(r,"__esModule",{value:!0})}); | ||
//# sourceMappingURL=rtl-css-js.core.umd.min.js.map |
(function (global, factory) { | ||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
typeof define === 'function' && define.amd ? define(factory) : | ||
(global.rtlCSSJS = factory()); | ||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
typeof define === 'function' && define.amd ? define(factory) : | ||
(global.RtlCssJs = factory()); | ||
}(this, (function () { 'use strict'; | ||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { | ||
return typeof obj; | ||
} : function (obj) { | ||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; | ||
}; | ||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { | ||
return typeof obj; | ||
} : function (obj) { | ||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; | ||
}; | ||
/** | ||
* 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 prop1 = _ref[0], | ||
prop2 = _ref[1]; | ||
obj[prop1] = prop2; | ||
obj[prop2] = prop1; | ||
return obj; | ||
}, {}); | ||
} | ||
function isBoolean(val) { | ||
return typeof val === 'boolean'; | ||
} | ||
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; | ||
} | ||
var slicedToArray = function () { | ||
function sliceIterator(arr, i) { | ||
var _arr = []; | ||
var _n = true; | ||
var _d = false; | ||
var _e = undefined; | ||
try { | ||
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { | ||
_arr.push(_s.value); | ||
if (i && _arr.length === i) break; | ||
} | ||
} catch (err) { | ||
_d = true; | ||
_e = err; | ||
} finally { | ||
try { | ||
if (!_n && _i["return"]) _i["return"](); | ||
} finally { | ||
if (_d) throw _e; | ||
} | ||
if (value[0] === '-') { | ||
return value.slice(1); | ||
} | ||
return _arr; | ||
return '-' + value; | ||
} | ||
return function (arr, i) { | ||
if (Array.isArray(arr)) { | ||
return arr; | ||
} else if (Symbol.iterator in Object(arr)) { | ||
return sliceIterator(arr, i); | ||
function flipTransformSign(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 { | ||
throw new TypeError("Invalid attempt to destructure non-iterable instance"); | ||
// 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) + '%'; | ||
} | ||
}; | ||
}(); | ||
/** | ||
* 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]; | ||
obj[prop1] = prop2; | ||
obj[prop2] = prop1; | ||
return obj; | ||
}, {}); | ||
} | ||
function isBoolean(val) { | ||
return typeof val === 'boolean'; | ||
} | ||
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); | ||
} | ||
/** | ||
* 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 (_ref2, item) { | ||
var list = _ref2.list, | ||
state = _ref2.state; | ||
return '-' + value; | ||
} | ||
function flipTransformSign(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) + '%'; | ||
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; | ||
} | ||
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); | ||
/** | ||
* 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; | ||
} | ||
state.parensDepth += openParansCount - closedParansCount; | ||
return { list: list, state: state }; | ||
}, { list: [], state: { parensDepth: 0 } }).list; | ||
} | ||
var top = splitValues[0], | ||
right = splitValues[1], | ||
bottom = splitValues[2], | ||
left = splitValues[3]; | ||
/** | ||
* 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; | ||
return [top, left, bottom, right].join(' '); | ||
} | ||
var _splitValues = slicedToArray(splitValues, 4), | ||
top = _splitValues[0], | ||
right = _splitValues[1], | ||
bottom = _splitValues[2], | ||
left = _splitValues[3]; | ||
// some values require a little fudging, that fudging goes here. | ||
var propertyValueConverters = { | ||
padding: function padding(_ref) { | ||
var value = _ref.value; | ||
return [top, left, bottom, right].join(' '); | ||
} | ||
if (isNumber(value)) { | ||
return value; | ||
} | ||
return handleQuartetValues(value); | ||
}, | ||
textShadow: function textShadow(_ref2) { | ||
var value = _ref2.value; | ||
// some values require a little fudging, that fudging goes here. | ||
var propertyValueConverters = { | ||
padding: function padding(_ref) { | ||
var value = _ref.value; | ||
// intentionally leaving off the `g` flag here because we only want to change the first number (which is the offset-x) | ||
return value.replace(/(-*)([.|\d]+)/, function (match, negative, number) { | ||
if (number === '0') { | ||
return match; | ||
} | ||
var doubleNegative = negative === '' ? '-' : ''; | ||
return '' + doubleNegative + number; | ||
}); | ||
}, | ||
borderColor: function borderColor(_ref3) { | ||
var value = _ref3.value; | ||
if (isNumber(value)) { | ||
return value; | ||
} | ||
return handleQuartetValues(value); | ||
}, | ||
textShadow: function textShadow(_ref2) { | ||
var value = _ref2.value; | ||
return handleQuartetValues(value); | ||
}, | ||
borderRadius: function borderRadius(_ref4) { | ||
var value = _ref4.value; | ||
// intentionally leaving off the `g` flag here because we only want to change the first number (which is the offset-x) | ||
return value.replace(/(-*)([.|\d]+)/, function (match, negative, number) { | ||
if (number === '0') { | ||
return match; | ||
if (isNumber(value)) { | ||
return value; | ||
} | ||
var doubleNegative = negative === '' ? '-' : ''; | ||
return '' + doubleNegative + number; | ||
}); | ||
}, | ||
borderColor: function borderColor(_ref3) { | ||
var value = _ref3.value; | ||
if (includes(value, '/')) { | ||
var _value$split = value.split('/'), | ||
radius1 = _value$split[0], | ||
radius2 = _value$split[1]; | ||
return handleQuartetValues(value); | ||
}, | ||
borderRadius: function borderRadius(_ref4) { | ||
var value = _ref4.value; | ||
var convertedRadius1 = propertyValueConverters.borderRadius({ | ||
value: radius1.trim() | ||
}); | ||
var convertedRadius2 = propertyValueConverters.borderRadius({ | ||
value: radius2.trim() | ||
}); | ||
return convertedRadius1 + ' / ' + convertedRadius2; | ||
} | ||
var splitValues = getValuesAsList(value); | ||
switch (splitValues.length) { | ||
case 2: | ||
{ | ||
return splitValues.reverse().join(' '); | ||
} | ||
case 4: | ||
{ | ||
var topLeft = splitValues[0], | ||
topRight = splitValues[1], | ||
bottomRight = splitValues[2], | ||
bottomLeft = splitValues[3]; | ||
if (isNumber(value)) { | ||
return value; | ||
} | ||
if (includes(value, '/')) { | ||
var _value$split = value.split('/'), | ||
_value$split2 = slicedToArray(_value$split, 2), | ||
radius1 = _value$split2[0], | ||
radius2 = _value$split2[1]; | ||
return [topRight, topLeft, bottomLeft, bottomRight].join(' '); | ||
} | ||
default: | ||
{ | ||
return value; | ||
} | ||
} | ||
}, | ||
background: function background(_ref5) { | ||
var value = _ref5.value, | ||
valuesToConvert = _ref5.valuesToConvert, | ||
isRtl = _ref5.isRtl, | ||
bgImgDirectionRegex = _ref5.bgImgDirectionRegex, | ||
bgPosDirectionRegex = _ref5.bgPosDirectionRegex; | ||
var convertedRadius1 = propertyValueConverters.borderRadius({ | ||
value: radius1.trim() | ||
// Yeah, this is in need of a refactor 🙃... | ||
// but this property is a tough cookie 🍪 | ||
// get the backgroundPosition out of the string by removing everything that couldn't be the backgroundPosition value | ||
var backgroundPositionValue = value.replace(/(url\(.*?\))|(rgba?\(.*?\))|(hsl\(.*?\))|(#[a-fA-F0-9]+)|((^| )(\D)+( |$))/g, '').trim(); | ||
// replace that backgroundPosition value with the converted version | ||
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: value, | ||
valuesToConvert: valuesToConvert, | ||
bgImgDirectionRegex: bgImgDirectionRegex | ||
}); | ||
var convertedRadius2 = propertyValueConverters.borderRadius({ | ||
value: radius2.trim() | ||
}, | ||
backgroundImage: function backgroundImage(_ref6) { | ||
var value = _ref6.value, | ||
valuesToConvert = _ref6.valuesToConvert, | ||
bgImgDirectionRegex = _ref6.bgImgDirectionRegex; | ||
if (!includes(value, 'url(') && !includes(value, 'linear-gradient(')) { | ||
return value; | ||
} | ||
return value.replace(bgImgDirectionRegex, function (match, g1, group2) { | ||
return match.replace(group2, valuesToConvert[group2]); | ||
}); | ||
return convertedRadius1 + ' / ' + convertedRadius2; | ||
} | ||
var splitValues = getValuesAsList(value); | ||
switch (splitValues.length) { | ||
case 2: | ||
{ | ||
return splitValues.reverse().join(' '); | ||
} | ||
case 4: | ||
{ | ||
var _splitValues = slicedToArray(splitValues, 4), | ||
topLeft = _splitValues[0], | ||
topRight = _splitValues[1], | ||
bottomRight = _splitValues[2], | ||
bottomLeft = _splitValues[3]; | ||
}, | ||
backgroundPosition: function backgroundPosition(_ref7) { | ||
var value = _ref7.value, | ||
valuesToConvert = _ref7.valuesToConvert, | ||
isRtl = _ref7.isRtl, | ||
bgPosDirectionRegex = _ref7.bgPosDirectionRegex; | ||
return [topRight, topLeft, bottomLeft, bottomRight].join(' '); | ||
} | ||
default: | ||
{ | ||
return value; | ||
} | ||
} | ||
}, | ||
background: function background(_ref5) { | ||
var value = _ref5.value, | ||
valuesToConvert = _ref5.valuesToConvert, | ||
isRtl = _ref5.isRtl, | ||
bgImgDirectionRegex = _ref5.bgImgDirectionRegex, | ||
bgPosDirectionRegex = _ref5.bgPosDirectionRegex; | ||
return value | ||
// intentionally only grabbing the first instance of this because that represents `left` | ||
.replace(isRtl ? /^((-|\d|\.)+%)/ : null, function (match, group) { | ||
return calculateNewBackgroundPosition(group); | ||
}).replace(bgPosDirectionRegex, function (match) { | ||
return valuesToConvert[match]; | ||
}); | ||
}, | ||
backgroundPositionX: function backgroundPositionX(_ref8) { | ||
var value = _ref8.value, | ||
valuesToConvert = _ref8.valuesToConvert, | ||
isRtl = _ref8.isRtl, | ||
bgPosDirectionRegex = _ref8.bgPosDirectionRegex; | ||
// Yeah, this is in need of a refactor 🙃... | ||
// but this property is a tough cookie 🍪 | ||
// get the backgroundPosition out of the string by removing everything that couldn't be the backgroundPosition value | ||
var backgroundPositionValue = value.replace(/(url\(.*?\))|(rgba?\(.*?\))|(hsl\(.*?\))|(#[a-fA-F0-9]+)|((^| )(\D)+( |$))/g, '').trim(); | ||
// replace that backgroundPosition value with the converted version | ||
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: value, | ||
valuesToConvert: valuesToConvert, | ||
bgImgDirectionRegex: bgImgDirectionRegex | ||
}); | ||
}, | ||
backgroundImage: function backgroundImage(_ref6) { | ||
var value = _ref6.value, | ||
valuesToConvert = _ref6.valuesToConvert, | ||
bgImgDirectionRegex = _ref6.bgImgDirectionRegex; | ||
if (isNumber(value)) { | ||
return value; | ||
} | ||
return propertyValueConverters.backgroundPosition({ | ||
value: value, | ||
valuesToConvert: valuesToConvert, | ||
isRtl: isRtl, | ||
bgPosDirectionRegex: bgPosDirectionRegex | ||
}); | ||
}, | ||
transform: function transform(_ref9) { | ||
var value = _ref9.value; | ||
if (!includes(value, 'url(') && !includes(value, 'linear-gradient(')) { | ||
return value; | ||
} | ||
return value.replace(bgImgDirectionRegex, function (match, g1, group2) { | ||
return match.replace(group2, valuesToConvert[group2]); | ||
}); | ||
}, | ||
backgroundPosition: function backgroundPosition(_ref7) { | ||
var value = _ref7.value, | ||
valuesToConvert = _ref7.valuesToConvert, | ||
isRtl = _ref7.isRtl, | ||
bgPosDirectionRegex = _ref7.bgPosDirectionRegex; | ||
// This was copied and modified from CSSJanus: | ||
// https://github.com/cssjanus/cssjanus/blob/4a40f001b1ba35567112d8b8e1d9d95eda4234c3/src/cssjanus.js#L152-L153 | ||
var nonAsciiPattern = '[^\\u0020-\\u007e]'; | ||
return value | ||
// intentionally only grabbing the first instance of this because that represents `left` | ||
.replace(isRtl ? /^((-|\d|\.)+%)/ : null, function (match, group) { | ||
return calculateNewBackgroundPosition(group); | ||
}).replace(bgPosDirectionRegex, function (match) { | ||
return valuesToConvert[match]; | ||
}); | ||
}, | ||
backgroundPositionX: function backgroundPositionX(_ref8) { | ||
var value = _ref8.value, | ||
valuesToConvert = _ref8.valuesToConvert, | ||
isRtl = _ref8.isRtl, | ||
bgPosDirectionRegex = _ref8.bgPosDirectionRegex; | ||
var escapePattern = '(?:' + '(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)' + '|\\\\[^\\r\\n\\f0-9a-f])'; | ||
if (isNumber(value)) { | ||
return value; | ||
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'); | ||
var translateRegExp = new RegExp('(translate\\s*\\(\\s*)' + signedQuantPattern + '((?:\\s*,\\s*' + signedQuantPattern + '){0,1}\\s*\\))', 'gi'); | ||
var translate3dRegExp = new RegExp('(translate3d\\s*\\(\\s*)' + signedQuantPattern + '((?:\\s*,\\s*' + signedQuantPattern + '){0,2}\\s*\\))', 'gi'); | ||
var rotateRegExp = new RegExp('(rotate[ZY]?\\s*\\(\\s*)' + signedQuantPattern + '(\\s*\\))', 'gi'); | ||
return value.replace(translateXRegExp, flipTransformSign).replace(translateRegExp, flipTransformSign).replace(translate3dRegExp, flipTransformSign).replace(rotateRegExp, flipTransformSign); | ||
} | ||
return propertyValueConverters.backgroundPosition({ | ||
value: value, | ||
valuesToConvert: valuesToConvert, | ||
isRtl: isRtl, | ||
bgPosDirectionRegex: bgPosDirectionRegex | ||
}); | ||
}, | ||
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]'; | ||
propertyValueConverters.margin = propertyValueConverters.padding; | ||
propertyValueConverters.borderWidth = propertyValueConverters.padding; | ||
propertyValueConverters.boxShadow = propertyValueConverters.textShadow; | ||
propertyValueConverters.webkitBoxShadow = propertyValueConverters.boxShadow; | ||
propertyValueConverters.mozBoxShadow = propertyValueConverters.boxShadow; | ||
propertyValueConverters.WebkitBoxShadow = propertyValueConverters.boxShadow; | ||
propertyValueConverters.MozBoxShadow = propertyValueConverters.boxShadow; | ||
propertyValueConverters.borderStyle = propertyValueConverters.borderColor; | ||
propertyValueConverters.webkitTransform = propertyValueConverters.transform; | ||
propertyValueConverters.mozTransform = propertyValueConverters.transform; | ||
propertyValueConverters.WebkitTransform = propertyValueConverters.transform; | ||
propertyValueConverters.MozTransform = propertyValueConverters.transform; | ||
propertyValueConverters.transformOrigin = propertyValueConverters.backgroundPosition; | ||
propertyValueConverters.webkitTransformOrigin = propertyValueConverters.transformOrigin; | ||
propertyValueConverters.mozTransformOrigin = propertyValueConverters.transformOrigin; | ||
propertyValueConverters.WebkitTransformOrigin = propertyValueConverters.transformOrigin; | ||
propertyValueConverters.MozTransformOrigin = propertyValueConverters.transformOrigin; | ||
var escapePattern = '(?:' + '(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)' + '|\\\\[^\\r\\n\\f0-9a-f])'; | ||
// kebab-case versions | ||
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'); | ||
var translateRegExp = new RegExp('(translate\\s*\\(\\s*)' + signedQuantPattern + '((?:\\s*,\\s*' + signedQuantPattern + '){0,1}\\s*\\))', 'gi'); | ||
var translate3dRegExp = new RegExp('(translate3d\\s*\\(\\s*)' + signedQuantPattern + '((?:\\s*,\\s*' + signedQuantPattern + '){0,2}\\s*\\))', 'gi'); | ||
var rotateRegExp = new RegExp('(rotate[ZY]?\\s*\\(\\s*)' + signedQuantPattern + '(\\s*\\))', 'gi'); | ||
return value.replace(translateXRegExp, flipTransformSign).replace(translateRegExp, flipTransformSign).replace(translate3dRegExp, flipTransformSign).replace(rotateRegExp, flipTransformSign); | ||
} | ||
}; | ||
propertyValueConverters['text-shadow'] = propertyValueConverters.textShadow; | ||
propertyValueConverters['border-color'] = propertyValueConverters.borderColor; | ||
propertyValueConverters['border-radius'] = propertyValueConverters.borderRadius; | ||
propertyValueConverters['background-image'] = propertyValueConverters.backgroundImage; | ||
propertyValueConverters['background-position'] = propertyValueConverters.backgroundPosition; | ||
propertyValueConverters['background-position-x'] = propertyValueConverters.backgroundPositionX; | ||
propertyValueConverters['border-width'] = propertyValueConverters.padding; | ||
propertyValueConverters['box-shadow'] = propertyValueConverters.textShadow; | ||
propertyValueConverters['-webkit-box-shadow'] = propertyValueConverters.textShadow; | ||
propertyValueConverters['-moz-box-shadow'] = propertyValueConverters.textShadow; | ||
propertyValueConverters['border-style'] = propertyValueConverters.borderColor; | ||
propertyValueConverters['-webkit-transform'] = propertyValueConverters.transform; | ||
propertyValueConverters['-moz-transform'] = propertyValueConverters.transform; | ||
propertyValueConverters['transform-origin'] = propertyValueConverters.transformOrigin; | ||
propertyValueConverters['-webkit-transform-origin'] = propertyValueConverters.transformOrigin; | ||
propertyValueConverters['-moz-transform-origin'] = propertyValueConverters.transformOrigin; | ||
propertyValueConverters.margin = propertyValueConverters.padding; | ||
propertyValueConverters.borderWidth = propertyValueConverters.padding; | ||
propertyValueConverters.boxShadow = propertyValueConverters.textShadow; | ||
propertyValueConverters.webkitBoxShadow = propertyValueConverters.boxShadow; | ||
propertyValueConverters.mozBoxShadow = propertyValueConverters.boxShadow; | ||
propertyValueConverters.WebkitBoxShadow = propertyValueConverters.boxShadow; | ||
propertyValueConverters.MozBoxShadow = propertyValueConverters.boxShadow; | ||
propertyValueConverters.borderStyle = propertyValueConverters.borderColor; | ||
propertyValueConverters.webkitTransform = propertyValueConverters.transform; | ||
propertyValueConverters.mozTransform = propertyValueConverters.transform; | ||
propertyValueConverters.WebkitTransform = propertyValueConverters.transform; | ||
propertyValueConverters.MozTransform = propertyValueConverters.transform; | ||
propertyValueConverters.transformOrigin = propertyValueConverters.backgroundPosition; | ||
propertyValueConverters.webkitTransformOrigin = propertyValueConverters.transformOrigin; | ||
propertyValueConverters.mozTransformOrigin = propertyValueConverters.transformOrigin; | ||
propertyValueConverters.WebkitTransformOrigin = propertyValueConverters.transformOrigin; | ||
propertyValueConverters.MozTransformOrigin = propertyValueConverters.transformOrigin; | ||
// 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'], | ||
// kebab-case versions | ||
['padding-left', 'padding-right'], ['margin-left', 'margin-right'], ['border-left', 'border-right'], ['border-left-color', 'border-right-color'], ['border-left-style', 'border-right-style'], ['border-left-width', 'border-right-width'], ['border-top-left-radius', 'border-top-right-radius'], ['border-bottom-left-radius', 'border-bottom-right-radius']]); | ||
// kebab-case versions | ||
var propsToIgnore = ['content']; | ||
propertyValueConverters['text-shadow'] = propertyValueConverters.textShadow; | ||
propertyValueConverters['border-color'] = propertyValueConverters.borderColor; | ||
propertyValueConverters['border-radius'] = propertyValueConverters.borderRadius; | ||
propertyValueConverters['background-image'] = propertyValueConverters.backgroundImage; | ||
propertyValueConverters['background-position'] = propertyValueConverters.backgroundPosition; | ||
propertyValueConverters['background-position-x'] = propertyValueConverters.backgroundPositionX; | ||
propertyValueConverters['border-width'] = propertyValueConverters.padding; | ||
propertyValueConverters['box-shadow'] = propertyValueConverters.textShadow; | ||
propertyValueConverters['-webkit-box-shadow'] = propertyValueConverters.textShadow; | ||
propertyValueConverters['-moz-box-shadow'] = propertyValueConverters.textShadow; | ||
propertyValueConverters['border-style'] = propertyValueConverters.borderColor; | ||
propertyValueConverters['-webkit-transform'] = propertyValueConverters.transform; | ||
propertyValueConverters['-moz-transform'] = propertyValueConverters.transform; | ||
propertyValueConverters['transform-origin'] = propertyValueConverters.transformOrigin; | ||
propertyValueConverters['-webkit-transform-origin'] = propertyValueConverters.transformOrigin; | ||
propertyValueConverters['-moz-transform-origin'] = propertyValueConverters.transformOrigin; | ||
// 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']]); | ||
// 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'], | ||
// kebab-case versions | ||
['padding-left', 'padding-right'], ['margin-left', 'margin-right'], ['border-left', 'border-right'], ['border-left-color', 'border-right-color'], ['border-left-style', 'border-right-style'], ['border-left-width', 'border-right-width'], ['border-top-left-radius', 'border-top-right-radius'], ['border-bottom-left-radius', 'border-bottom-right-radius']]); | ||
// 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)'); | ||
var propsToIgnore = ['content']; | ||
/** | ||
* converts properties and values in the CSS in JS object to their corresponding RTL values | ||
* @param {Object} object the CSS in JS object | ||
* @return {Object} the RTL converted object | ||
*/ | ||
function convert(object) { | ||
return Object.keys(object).reduce(function (newObj, originalKey) { | ||
var originalValue = object[originalKey]; | ||
if (isString(originalValue)) { | ||
// you're welcome to later code 😺 | ||
originalValue = originalValue.trim(); | ||
} | ||
// 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']]); | ||
// Some properties should never be transformed | ||
if (includes(propsToIgnore, originalKey)) { | ||
newObj[originalKey] = originalValue; | ||
return newObj; | ||
} | ||
// 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)'); | ||
var _convertProperty = convertProperty(originalKey, originalValue), | ||
key = _convertProperty.key, | ||
value = _convertProperty.value; | ||
/** | ||
* converts properties and values in the CSS in JS object to their corresponding RTL values | ||
* @param {Object} object the CSS in JS object | ||
* @return {Object} the RTL converted object | ||
*/ | ||
function convert(object) { | ||
return Object.keys(object).reduce(function (newObj, originalKey) { | ||
var originalValue = object[originalKey]; | ||
if (isString(originalValue)) { | ||
// you're welcome to later code 😺 | ||
originalValue = originalValue.trim(); | ||
} | ||
// Some properties should never be transformed | ||
if (includes(propsToIgnore, originalKey)) { | ||
newObj[originalKey] = originalValue; | ||
newObj[key] = value; | ||
return newObj; | ||
} | ||
}, Array.isArray(object) ? [] : {}); | ||
} | ||
var _convertProperty = convertProperty(originalKey, originalValue), | ||
key = _convertProperty.key, | ||
value = _convertProperty.value; | ||
/** | ||
* Converts a property and its value to the corresponding RTL key and value | ||
* @param {String} originalKey the original property key | ||
* @param {Number|String|Object} originalValue the original css property value | ||
* @return {Object} the new {key, value} pair | ||
*/ | ||
function convertProperty(originalKey, originalValue) { | ||
var isNoFlip = /\/\*\s?@noflip\s?\*\//.test(originalValue); | ||
var key = isNoFlip ? originalKey : getPropertyDoppelganger(originalKey); | ||
var value = isNoFlip ? originalValue : getValueDoppelganger(key, originalValue); | ||
return { key: key, value: value }; | ||
} | ||
newObj[key] = value; | ||
return newObj; | ||
}, Array.isArray(object) ? [] : {}); | ||
} | ||
/** | ||
* This gets the RTL version of the given property if it has a corresponding RTL property | ||
* @param {String} property the name of the property | ||
* @return {String} the name of the RTL property | ||
*/ | ||
function getPropertyDoppelganger(property) { | ||
return propertiesToConvert[property] || property; | ||
} | ||
/** | ||
* Converts a property and its value to the corresponding RTL key and value | ||
* @param {String} originalKey the original property key | ||
* @param {Number|String|Object} originalValue the original css property value | ||
* @return {Object} the new {key, value} pair | ||
*/ | ||
function convertProperty(originalKey, originalValue) { | ||
var isNoFlip = /\/\*\s?@noflip\s?\*\//.test(originalValue); | ||
var key = isNoFlip ? originalKey : getPropertyDoppelganger(originalKey); | ||
var value = isNoFlip ? originalValue : getValueDoppelganger(key, originalValue); | ||
return { key: key, value: value }; | ||
} | ||
/** | ||
* This converts the given value to the RTL version of that value based on the key | ||
* @param {String} key this is the key (note: this should be the RTL version of the originalKey) | ||
* @param {String|Number|Object} originalValue the original css property value. If it's an object, then we'll convert that as well | ||
* @return {String|Number|Object} the converted value | ||
*/ | ||
function getValueDoppelganger(key, originalValue) { | ||
/* eslint complexity:[2, 9] */ // let's try to keep the complexity down... If we have to do this much more, let's break this up | ||
if (isNullOrUndefined(originalValue) || isBoolean(originalValue)) { | ||
return originalValue; | ||
} | ||
/** | ||
* This gets the RTL version of the given property if it has a corresponding RTL property | ||
* @param {String} property the name of the property | ||
* @return {String} the name of the RTL property | ||
*/ | ||
function getPropertyDoppelganger(property) { | ||
return propertiesToConvert[property] || property; | ||
} | ||
/** | ||
* This converts the given value to the RTL version of that value based on the key | ||
* @param {String} key this is the key (note: this should be the RTL version of the originalKey) | ||
* @param {String|Number|Object} originalValue the original css property value. If it's an object, then we'll convert that as well | ||
* @return {String|Number|Object} the converted value | ||
*/ | ||
function getValueDoppelganger(key, originalValue) { | ||
/* eslint complexity:[2, 9] */ // let's try to keep the complexity down... If we have to do this much more, let's break this up | ||
if (isNullOrUndefined(originalValue) || isBoolean(originalValue)) { | ||
return originalValue; | ||
if (isObject(originalValue)) { | ||
return convert(originalValue); // recurssion 🌀 | ||
} | ||
var isNum = isNumber(originalValue); | ||
var importantlessValue = isNum ? originalValue : originalValue.replace(/ !important.*?$/, ''); | ||
var isImportant = !isNum && importantlessValue.length !== originalValue.length; | ||
var valueConverter = propertyValueConverters[key]; | ||
var newValue = void 0; | ||
if (valueConverter) { | ||
newValue = valueConverter({ | ||
value: importantlessValue, | ||
valuesToConvert: valuesToConvert, | ||
isRtl: true, | ||
bgImgDirectionRegex: bgImgDirectionRegex, | ||
bgPosDirectionRegex: bgPosDirectionRegex | ||
}); | ||
} else { | ||
newValue = valuesToConvert[importantlessValue] || importantlessValue; | ||
} | ||
if (isImportant) { | ||
return newValue + ' !important'; | ||
} | ||
return newValue; | ||
} | ||
if (isObject(originalValue)) { | ||
return convert(originalValue); // recurssion 🌀 | ||
} | ||
var isNum = isNumber(originalValue); | ||
var importantlessValue = isNum ? originalValue : originalValue.replace(/ !important.*?$/, ''); | ||
var isImportant = !isNum && importantlessValue.length !== originalValue.length; | ||
var valueConverter = propertyValueConverters[key]; | ||
var newValue = void 0; | ||
if (valueConverter) { | ||
newValue = valueConverter({ | ||
value: importantlessValue, | ||
valuesToConvert: valuesToConvert, | ||
isRtl: true, | ||
bgImgDirectionRegex: bgImgDirectionRegex, | ||
bgPosDirectionRegex: bgPosDirectionRegex | ||
}); | ||
} else { | ||
newValue = valuesToConvert[importantlessValue] || importantlessValue; | ||
} | ||
if (isImportant) { | ||
return newValue + ' !important'; | ||
} | ||
return newValue; | ||
} | ||
return convert; | ||
return convert; | ||
}))); | ||
//# sourceMappingURL=rtl-css-js.umd.js.map |
@@ -1,1 +0,2 @@ | ||
!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):r.rtlCSSJS=e()}(this,function(){"use strict";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},f=function(r,e){if(Array.isArray(r))return r;if(Symbol.iterator in Object(r))return function(r,e){var t=[],o=!0,n=!1,i=void 0;try{for(var a,u=r[Symbol.iterator]();!(o=(a=u.next()).done)&&(t.push(a.value),!e||t.length!==e);o=!0);}catch(r){n=!0,i=r}finally{try{!o&&u.return&&u.return()}finally{if(n)throw i}}return t}(r,e);throw new TypeError("Invalid attempt to destructure non-iterable instance")};function r(r){return r.reduce(function(r,e){var t=f(e,2),o=t[0],n=t[1];return r[o]=n,r[n]=o,r},{})}function b(r){return"number"==typeof r}function c(r,e){return-1!==r.indexOf(e)}function d(r,e,t,o){return e+(n=t,0===parseFloat(n)?n:"-"===n[0]?n.slice(1):"-"+n)+o;var n}function m(r){return r.replace(/ +/g," ").split(" ").map(function(r){return r.trim()}).filter(Boolean).reduce(function(r,e){var t=r.list,o=r.state,n=(e.match(/\(/g)||[]).length,i=(e.match(/\)/g)||[]).length;return 0<o.parensDepth?t[t.length-1]=t[t.length-1]+" "+e:t.push(e),o.parensDepth+=n-i,{list:t,state:o}},{list:[],state:{parensDepth:0}}).list}function t(r){var e=m(r);if(e.length<=3||4<e.length)return r;var t=f(e,4),o=t[0],n=t[1],i=t[2];return[o,t[3],i,n].join(" ")}var h={padding:function(r){var e=r.value;return b(e)?e:t(e)},textShadow:function(r){return r.value.replace(/(-*)([.|\d]+)/,function(r,e,t){return"0"===t?r:""+(""===e?"-":"")+t})},borderColor:function(r){return t(r.value)},borderRadius:function(r){var e=r.value;if(b(e))return e;if(c(e,"/")){var t=e.split("/"),o=f(t,2),n=o[0],i=o[1];return h.borderRadius({value:n.trim()})+" / "+h.borderRadius({value:i.trim()})}var a=m(e);switch(a.length){case 2:return a.reverse().join(" ");case 4:var u=f(a,4),s=u[0],d=u[1],l=u[2];return[d,s,u[3],l].join(" ");default:return e}},background:function(r){var e=r.value,t=r.valuesToConvert,o=r.isRtl,n=r.bgImgDirectionRegex,i=r.bgPosDirectionRegex,a=e.replace(/(url\(.*?\))|(rgba?\(.*?\))|(hsl\(.*?\))|(#[a-fA-F0-9]+)|((^| )(\D)+( |$))/g,"").trim();return e=e.replace(a,h.backgroundPosition({value:a,valuesToConvert:t,isRtl:o,bgPosDirectionRegex:i})),h.backgroundImage({value:e,valuesToConvert:t,bgImgDirectionRegex:n})},backgroundImage:function(r){var e=r.value,o=r.valuesToConvert,t=r.bgImgDirectionRegex;return c(e,"url(")||c(e,"linear-gradient(")?e.replace(t,function(r,e,t){return r.replace(t,o[t])}):e},backgroundPosition:function(r){var e=r.value,t=r.valuesToConvert,o=r.isRtl,n=r.bgPosDirectionRegex;return e.replace(o?/^((-|\d|\.)+%)/:null,function(r,e){return function(r){var e=r.indexOf(".");if(-1===e)r=100-parseFloat(r)+"%";else{var t=r.length-e-2;r=(r=100-parseFloat(r)).toFixed(t)+"%"}return r}(e)}).replace(n,function(r){return t[r]})},backgroundPositionX:function(r){var e=r.value,t=r.valuesToConvert,o=r.isRtl,n=r.bgPosDirectionRegex;return b(e)?e:h.backgroundPosition({value:e,valuesToConvert:t,isRtl:o,bgPosDirectionRegex:n})},transform:function(r){var e=r.value,t="[^\\u0020-\\u007e]",o="(?:(?:(?:\\[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]|"+t+"|"+o+")(?:[_a-z0-9-]|"+t+"|"+o+")*)?)|(?:inherit|auto))",i=new RegExp("(translateX\\s*\\(\\s*)"+n+"(\\s*\\))","gi"),a=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"),s=new RegExp("(rotate[ZY]?\\s*\\(\\s*)"+n+"(\\s*\\))","gi");return e.replace(i,d).replace(a,d).replace(u,d).replace(s,d)}};h.margin=h.padding,h.borderWidth=h.padding,h.boxShadow=h.textShadow,h.webkitBoxShadow=h.boxShadow,h.mozBoxShadow=h.boxShadow,h.WebkitBoxShadow=h.boxShadow,h.MozBoxShadow=h.boxShadow,h.borderStyle=h.borderColor,h.webkitTransform=h.transform,h.mozTransform=h.transform,h.WebkitTransform=h.transform,h.MozTransform=h.transform,h.transformOrigin=h.backgroundPosition,h.webkitTransformOrigin=h.transformOrigin,h.mozTransformOrigin=h.transformOrigin,h.WebkitTransformOrigin=h.transformOrigin,h.MozTransformOrigin=h.transformOrigin,h["text-shadow"]=h.textShadow,h["border-color"]=h.borderColor,h["border-radius"]=h.borderRadius,h["background-image"]=h.backgroundImage,h["background-position"]=h.backgroundPosition,h["background-position-x"]=h.backgroundPositionX,h["border-width"]=h.padding,h["box-shadow"]=h.textShadow,h["-webkit-box-shadow"]=h.textShadow,h["-moz-box-shadow"]=h.textShadow,h["border-style"]=h.borderColor,h["-webkit-transform"]=h.transform,h["-moz-transform"]=h.transform,h["transform-origin"]=h.transformOrigin,h["-webkit-transform-origin"]=h.transformOrigin,h["-moz-transform-origin"]=h.transformOrigin;var p=r([["paddingLeft","paddingRight"],["marginLeft","marginRight"],["left","right"],["borderLeft","borderRight"],["borderLeftColor","borderRightColor"],["borderLeftStyle","borderRightStyle"],["borderLeftWidth","borderRightWidth"],["borderTopLeftRadius","borderTopRightRadius"],["borderBottomLeftRadius","borderBottomRightRadius"],["padding-left","padding-right"],["margin-left","margin-right"],["border-left","border-right"],["border-left-color","border-right-color"],["border-left-style","border-right-style"],["border-left-width","border-right-width"],["border-top-left-radius","border-top-right-radius"],["border-bottom-left-radius","border-bottom-right-radius"]]),v=["content"],x=r([["ltr","rtl"],["left","right"],["w-resize","e-resize"],["sw-resize","se-resize"],["nw-resize","ne-resize"]]),w=new RegExp("(^|\\W|_)((ltr)|(rtl)|(left)|(right))(\\W|_|$)","g"),y=new RegExp("(left)|(right)");function R(f){return Object.keys(f).reduce(function(r,e){var t=f[e];if("string"==typeof t&&(t=t.trim()),c(v,e))return r[e]=t,r;var o,n,i,a,u,s,d=(o=e,i=/\/\*\s?@noflip\s?\*\//.test(n=t),a=i?o:p[s=o]||s,u=i?n:function(r,e){if(o=e,null==o||(t=e,"boolean"==typeof t))return e;var t;var o;if(n=e,n&&"object"===(void 0===n?"undefined":g(n)))return R(e);var n;var i=b(e),a=i?e:e.replace(/ !important.*?$/,""),u=!i&&a.length!==e.length,s=h[r],d=void 0;d=s?s({value:a,valuesToConvert:x,isRtl:!0,bgImgDirectionRegex:w,bgPosDirectionRegex:y}):x[a]||a;if(u)return d+" !important";return d}(a,n),{key:a,value:u}),l=d.value;return r[d.key]=l,r},Array.isArray(f)?[]:{})}return R}); | ||
!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):r.RtlCssJs=e()}(this,function(){"use strict";var r="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};function e(r){return r.reduce(function(r,e){var t=e[0],o=e[1];return r[t]=o,r[o]=t,r},{})}function t(r){return"number"==typeof r}function o(r,e){return-1!==r.indexOf(e)}function n(r,e,t,o){return e+(n=t,0===parseFloat(n)?n:"-"===n[0]?n.slice(1):"-"+n)+o;var n}function i(r){return r.replace(/ +/g," ").split(" ").map(function(r){return r.trim()}).filter(Boolean).reduce(function(r,e){var t=r.list,o=r.state,n=(e.match(/\(/g)||[]).length,i=(e.match(/\)/g)||[]).length;return o.parensDepth>0?t[t.length-1]=t[t.length-1]+" "+e:t.push(e),o.parensDepth+=n-i,{list:t,state:o}},{list:[],state:{parensDepth:0}}).list}function a(r){var e=i(r);if(e.length<=3||e.length>4)return r;var t=e[0],o=e[1],n=e[2];return[t,e[3],n,o].join(" ")}var u={padding:function(r){var e=r.value;return t(e)?e:a(e)},textShadow:function(r){return r.value.replace(/(-*)([.|\d]+)/,function(r,e,t){return"0"===t?r:""+(""===e?"-":"")+t})},borderColor:function(r){return a(r.value)},borderRadius:function(r){var e=r.value;if(t(e))return e;if(o(e,"/")){var n=e.split("/"),a=n[0],s=n[1];return u.borderRadius({value:a.trim()})+" / "+u.borderRadius({value:s.trim()})}var d=i(e);switch(d.length){case 2:return d.reverse().join(" ");case 4:var l=d[0],g=d[1],f=d[2];return[g,l,d[3],f].join(" ");default:return e}},background:function(r){var e=r.value,t=r.valuesToConvert,o=r.isRtl,n=r.bgImgDirectionRegex,i=r.bgPosDirectionRegex,a=e.replace(/(url\(.*?\))|(rgba?\(.*?\))|(hsl\(.*?\))|(#[a-fA-F0-9]+)|((^| )(\D)+( |$))/g,"").trim();return e=e.replace(a,u.backgroundPosition({value:a,valuesToConvert:t,isRtl:o,bgPosDirectionRegex:i})),u.backgroundImage({value:e,valuesToConvert:t,bgImgDirectionRegex:n})},backgroundImage:function(r){var e=r.value,t=r.valuesToConvert,n=r.bgImgDirectionRegex;return o(e,"url(")||o(e,"linear-gradient(")?e.replace(n,function(r,e,o){return r.replace(o,t[o])}):e},backgroundPosition:function(r){var e=r.value,t=r.valuesToConvert,o=r.isRtl,n=r.bgPosDirectionRegex;return e.replace(o?/^((-|\d|\.)+%)/:null,function(r,e){return function(r){var e=r.indexOf(".");if(-1===e)r=100-parseFloat(r)+"%";else{var t=r.length-e-2;r=(r=100-parseFloat(r)).toFixed(t)+"%"}return r}(e)}).replace(n,function(r){return t[r]})},backgroundPositionX:function(r){var e=r.value,o=r.valuesToConvert,n=r.isRtl,i=r.bgPosDirectionRegex;return t(e)?e:u.backgroundPosition({value:e,valuesToConvert:o,isRtl:n,bgPosDirectionRegex:i})},transform:function(r){var e=r.value,t="(?:(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)|\\\\[^\\r\\n\\f0-9a-f])",o="((?:-?(?:[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))",i=new RegExp("(translateX\\s*\\(\\s*)"+o+"(\\s*\\))","gi"),a=new RegExp("(translate\\s*\\(\\s*)"+o+"((?:\\s*,\\s*"+o+"){0,1}\\s*\\))","gi"),u=new RegExp("(translate3d\\s*\\(\\s*)"+o+"((?:\\s*,\\s*"+o+"){0,2}\\s*\\))","gi"),s=new RegExp("(rotate[ZY]?\\s*\\(\\s*)"+o+"(\\s*\\))","gi");return e.replace(i,n).replace(a,n).replace(u,n).replace(s,n)}};u.margin=u.padding,u.borderWidth=u.padding,u.boxShadow=u.textShadow,u.webkitBoxShadow=u.boxShadow,u.mozBoxShadow=u.boxShadow,u.WebkitBoxShadow=u.boxShadow,u.MozBoxShadow=u.boxShadow,u.borderStyle=u.borderColor,u.webkitTransform=u.transform,u.mozTransform=u.transform,u.WebkitTransform=u.transform,u.MozTransform=u.transform,u.transformOrigin=u.backgroundPosition,u.webkitTransformOrigin=u.transformOrigin,u.mozTransformOrigin=u.transformOrigin,u.WebkitTransformOrigin=u.transformOrigin,u.MozTransformOrigin=u.transformOrigin,u["text-shadow"]=u.textShadow,u["border-color"]=u.borderColor,u["border-radius"]=u.borderRadius,u["background-image"]=u.backgroundImage,u["background-position"]=u.backgroundPosition,u["background-position-x"]=u.backgroundPositionX,u["border-width"]=u.padding,u["box-shadow"]=u.textShadow,u["-webkit-box-shadow"]=u.textShadow,u["-moz-box-shadow"]=u.textShadow,u["border-style"]=u.borderColor,u["-webkit-transform"]=u.transform,u["-moz-transform"]=u.transform,u["transform-origin"]=u.transformOrigin,u["-webkit-transform-origin"]=u.transformOrigin,u["-moz-transform-origin"]=u.transformOrigin;var s=e([["paddingLeft","paddingRight"],["marginLeft","marginRight"],["left","right"],["borderLeft","borderRight"],["borderLeftColor","borderRightColor"],["borderLeftStyle","borderRightStyle"],["borderLeftWidth","borderRightWidth"],["borderTopLeftRadius","borderTopRightRadius"],["borderBottomLeftRadius","borderBottomRightRadius"],["padding-left","padding-right"],["margin-left","margin-right"],["border-left","border-right"],["border-left-color","border-right-color"],["border-left-style","border-right-style"],["border-left-width","border-right-width"],["border-top-left-radius","border-top-right-radius"],["border-bottom-left-radius","border-bottom-right-radius"]]),d=["content"],l=e([["ltr","rtl"],["left","right"],["w-resize","e-resize"],["sw-resize","se-resize"],["nw-resize","ne-resize"]]),g=new RegExp("(^|\\W|_)((ltr)|(rtl)|(left)|(right))(\\W|_|$)","g"),f=new RegExp("(left)|(right)");function b(e){return Object.keys(e).reduce(function(n,i){var a=e[i];if("string"==typeof a&&(a=a.trim()),o(d,i))return n[i]=a,n;var c=function(e,o){var n=/\/\*\s?@noflip\s?\*\//.test(o),i=n?e:(d=e,s[d]||d),a=n?o:function(e,o){if(n=o,null===n||void 0===n||function(r){return"boolean"==typeof r}(o))return o;var n;if(function(e){return e&&"object"===(void 0===e?"undefined":r(e))}(o))return b(o);var i=t(o),a=i?o:o.replace(/ !important.*?$/,""),s=!i&&a.length!==o.length,d=u[e],c=void 0;c=d?d({value:a,valuesToConvert:l,isRtl:!0,bgImgDirectionRegex:g,bgPosDirectionRegex:f}):l[a]||a;if(s)return c+" !important";return c}(i,o);var d;return{key:i,value:a}}(i,a),m=c.key,h=c.value;return n[m]=h,n},Array.isArray(e)?[]:{})}return b}); | ||
//# sourceMappingURL=rtl-css-js.umd.min.js.map |
{ | ||
"name": "rtl-css-js", | ||
"version": "1.9.1", | ||
"version": "1.10.0", | ||
"description": "Right To Left conversion for CSS in JS objects", | ||
"main": "dist/rtl-css-js.cjs.js", | ||
"jsnext:main": "dist/rtl-css-js.esm.js", | ||
"module": "dist/rtl-css-js.esm.js", | ||
"main": "dist/cjs/index.js", | ||
"jsnext:main": "dist/esm/index.js", | ||
"module": "dist/esm/index.js", | ||
"types": "types.d.ts", | ||
"scripts": { | ||
"add-contributor": "kcd-scripts contributors add", | ||
"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", | ||
"build": "rimraf dist && npm-run-all build:**", | ||
"build:bundlers": "kcd-scripts build --bundle cjs,esm --environment BUILD_INPUT:src/*.js --no-clean", | ||
"build:umd:main": "kcd-scripts build --bundle umd,umd.min BUILD_NAME:rtlCSSJS --no-clean", | ||
"build:umd:core": "kcd-scripts build --bundle umd,umd.min --environment BUILD_NAME:rtlCSSJSCore,BUILD_FILENAME_SUFFIX:\".core\",BUILD_INPUT:src/core.js --no-clean", | ||
"postbuild:bundlers": "node scripts/add-proxies-typings.js", | ||
"lint": "kcd-scripts lint", | ||
@@ -22,2 +24,3 @@ "test": "kcd-scripts test", | ||
"dist", | ||
"core", | ||
"types.d.ts", | ||
@@ -38,5 +41,6 @@ "core.js", | ||
"devDependencies": { | ||
"kcd-scripts": "^0.16.0", | ||
"kcd-scripts": "^0.38.0", | ||
"npm-run-all": "^4.1.1", | ||
"rimraf": "^2.6.2" | ||
"rimraf": "^2.6.2", | ||
"tiny-glob": "^0.2.0" | ||
}, | ||
@@ -43,0 +47,0 @@ "eslintConfig": { |
@@ -10,3 +10,3 @@ # rtl-css-js | ||
[![downloads][downloads-badge]][npm-stat] | ||
[![MIT License][license-badge]][LICENSE] | ||
[![MIT License][license-badge]][license] | ||
@@ -38,2 +38,22 @@ [![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors) | ||
## Table of Contentss | ||
<!-- START doctoc generated TOC please keep comment here to allow auto update --> | ||
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> | ||
* [Installation](#installation) | ||
* [Usage](#usage) | ||
* [kebab-case](#kebab-case) | ||
* [core](#core) | ||
* [Caveats](#caveats) | ||
* [`background`](#background) | ||
* [Inspiration](#inspiration) | ||
* [Ecosystem](#ecosystem) | ||
* [Other Solutions](#other-solutions) | ||
* [Contributors](#contributors) | ||
* [LICENSE](#license) | ||
<!-- END doctoc generated TOC please keep comment here to allow auto update --> | ||
## Installation | ||
@@ -95,3 +115,3 @@ | ||
`require('rtl-css-js/core')`, or use | ||
`import {propertyValueConverters, arrayToObject} from 'rtl-css-js/core.esm'`. | ||
`import {propertyValueConverters, arrayToObject} from 'rtl-css-js/core'`. | ||
@@ -107,3 +127,3 @@ You can import anything that's exported from `src/core`. Please see the code | ||
This is so you can have a different image for your LTR and RTL, and in order to flip linear gradients. Note that | ||
this is case sensitive! Must be lower case. Note also that it *will not* change `bright` to `bleft`. | ||
this is case sensitive! Must be lower case. Note also that it _will not_ change `bright` to `bleft`. | ||
It's a _little_ smarter than that. But this is definitely something to consider with your URLs. | ||
@@ -130,4 +150,7 @@ | ||
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> | ||
<!-- prettier-ignore --> | ||
| [<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") | [<img src="https://avatars1.githubusercontent.com/u/8528759?v=4" width="100px;"/><br /><sub>Ali Taheri Moghaddar</sub>](https://github.com/alitaheri)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=alitaheri "Code") [📖](https://github.com/kentcdodds/rtl-css-js/commits?author=alitaheri "Documentation") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=alitaheri "Tests") | [<img src="https://avatars0.githubusercontent.com/u/844459?v=4" width="100px;"/><br /><sub>garrettberg</sub>](https://github.com/garrettberg)<br />[💻](https://github.com/kentcdodds/rtl-css-js/commits?author=garrettberg "Code") [⚠️](https://github.com/kentcdodds/rtl-css-js/commits?author=garrettberg "Tests") | | ||
| :---: | :---: | :---: | :---: | :---: | :---: | :---: | | ||
<!-- ALL-CONTRIBUTORS-LIST:END --> | ||
@@ -134,0 +157,0 @@ |
License Policy Violation
LicenseThis 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 riskPackage 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
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
194823
22
191
4
1675
1
1