@wezom/toolkit-css-in-js/dist/units.js

Useful tools for working with CSS-in-JS

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var unitRegExp = /px|rem|em|%|vw|vh|ms|s$/;
/**
 * Get CSS unit `px|rem|em|%|vw|vh|ms|s` from value
 * @example
 *  jssUnitExtract(100) // ''
 *  jssUnitExtract('3rem') // 'rem'
 *  jssUnitExtract(jssEm(16, [64])) // 'em'
 *  jssUnitExtract('-20px') // 'px'
 *  jssUnitExtract('56.25%') // '%'
 */
function jssUnitExtract(value) {
	if (typeof value === 'string') {
		var match = unitRegExp.exec(value);
		if (match !== null) {
			return match[0];
		}
	}
	return '';
}
/**
 * Remove CSS unit `px|rem|em|%|vw|vh|ms|s` and receive number value
 * @example
 *  jssUnitLess('3rem') // 4
 *  jssUnitLess(jssEm(16, [64])) // 4
 *  jssUnitLess('-20px') // -20
 *  jssUnitLess('56.25%') // 56.25
 */
function jssUnitLess(value) {
	if (typeof value === 'string') {
		return Number(value.replace(unitRegExp, ''));
	}
	return value;
}
/**
 * Invert value sign
 * @example
 *  jssUnitRevertSign(-20) // 20
 *  jssUnitRevertSign('3rem') // '-3rem'
 *  jssUnitRevertSign('56.25%') // '-56.25%'
 *  jssUnitRevertSign('-4px 4px') // '4px -4px'
 *  jssUnitRevertSign(jssEm(16, 64, -64)) // '-4em 4em'
 *  jssUnitRevertSign('-4px, 4px') // '4px, -4px'
 *  jssUnitRevertSign('-4px, 4px 4px, -5px, -6 -7 -8, 99.9%') // '4px, -4px -4px, 5px, 6 7 8, -99.9%'
 */
function jssUnitRevertSign(value) {
	if (typeof value === 'number') {
		return value * -1;
	} else {
		return value
			.split(', ')
			.map(function (val) {
				return val
					.split(' ')
					.map(function (v) {
						var unit = jssUnitExtract(v);
						var number = jssUnitLess(v);
						return number * -1 + unit;
					})
					.join(' ');
			})
			.join(', ');
	}
}

exports.jssUnitExtract = jssUnitExtract;
exports.jssUnitLess = jssUnitLess;
exports.jssUnitRevertSign = jssUnitRevertSign;