mirror of
https://github.com/idanoo/GoScrobble.git
synced 2024-11-23 00:45:16 +00:00
253 lines
5.9 KiB
JavaScript
253 lines
5.9 KiB
JavaScript
|
import { hasCSSTOMSupport } from 'jss';
|
||
|
|
||
|
var px = hasCSSTOMSupport && CSS ? CSS.px : 'px';
|
||
|
var ms = hasCSSTOMSupport && CSS ? CSS.ms : 'ms';
|
||
|
var percent = hasCSSTOMSupport && CSS ? CSS.percent : '%';
|
||
|
/**
|
||
|
* Generated jss-plugin-default-unit CSS property units
|
||
|
*
|
||
|
* @type object
|
||
|
*/
|
||
|
|
||
|
var defaultUnits = {
|
||
|
// Animation properties
|
||
|
'animation-delay': ms,
|
||
|
'animation-duration': ms,
|
||
|
// Background properties
|
||
|
'background-position': px,
|
||
|
'background-position-x': px,
|
||
|
'background-position-y': px,
|
||
|
'background-size': px,
|
||
|
// Border Properties
|
||
|
border: px,
|
||
|
'border-bottom': px,
|
||
|
'border-bottom-left-radius': px,
|
||
|
'border-bottom-right-radius': px,
|
||
|
'border-bottom-width': px,
|
||
|
'border-left': px,
|
||
|
'border-left-width': px,
|
||
|
'border-radius': px,
|
||
|
'border-right': px,
|
||
|
'border-right-width': px,
|
||
|
'border-top': px,
|
||
|
'border-top-left-radius': px,
|
||
|
'border-top-right-radius': px,
|
||
|
'border-top-width': px,
|
||
|
'border-width': px,
|
||
|
'border-block': px,
|
||
|
'border-block-end': px,
|
||
|
'border-block-end-width': px,
|
||
|
'border-block-start': px,
|
||
|
'border-block-start-width': px,
|
||
|
'border-block-width': px,
|
||
|
'border-inline': px,
|
||
|
'border-inline-end': px,
|
||
|
'border-inline-end-width': px,
|
||
|
'border-inline-start': px,
|
||
|
'border-inline-start-width': px,
|
||
|
'border-inline-width': px,
|
||
|
'border-start-start-radius': px,
|
||
|
'border-start-end-radius': px,
|
||
|
'border-end-start-radius': px,
|
||
|
'border-end-end-radius': px,
|
||
|
// Margin properties
|
||
|
margin: px,
|
||
|
'margin-bottom': px,
|
||
|
'margin-left': px,
|
||
|
'margin-right': px,
|
||
|
'margin-top': px,
|
||
|
'margin-block': px,
|
||
|
'margin-block-end': px,
|
||
|
'margin-block-start': px,
|
||
|
'margin-inline': px,
|
||
|
'margin-inline-end': px,
|
||
|
'margin-inline-start': px,
|
||
|
// Padding properties
|
||
|
padding: px,
|
||
|
'padding-bottom': px,
|
||
|
'padding-left': px,
|
||
|
'padding-right': px,
|
||
|
'padding-top': px,
|
||
|
'padding-block': px,
|
||
|
'padding-block-end': px,
|
||
|
'padding-block-start': px,
|
||
|
'padding-inline': px,
|
||
|
'padding-inline-end': px,
|
||
|
'padding-inline-start': px,
|
||
|
// Mask properties
|
||
|
'mask-position-x': px,
|
||
|
'mask-position-y': px,
|
||
|
'mask-size': px,
|
||
|
// Width and height properties
|
||
|
height: px,
|
||
|
width: px,
|
||
|
'min-height': px,
|
||
|
'max-height': px,
|
||
|
'min-width': px,
|
||
|
'max-width': px,
|
||
|
// Position properties
|
||
|
bottom: px,
|
||
|
left: px,
|
||
|
top: px,
|
||
|
right: px,
|
||
|
inset: px,
|
||
|
'inset-block': px,
|
||
|
'inset-block-end': px,
|
||
|
'inset-block-start': px,
|
||
|
'inset-inline': px,
|
||
|
'inset-inline-end': px,
|
||
|
'inset-inline-start': px,
|
||
|
// Shadow properties
|
||
|
'box-shadow': px,
|
||
|
'text-shadow': px,
|
||
|
// Column properties
|
||
|
'column-gap': px,
|
||
|
'column-rule': px,
|
||
|
'column-rule-width': px,
|
||
|
'column-width': px,
|
||
|
// Font and text properties
|
||
|
'font-size': px,
|
||
|
'font-size-delta': px,
|
||
|
'letter-spacing': px,
|
||
|
'text-decoration-thickness': px,
|
||
|
'text-indent': px,
|
||
|
'text-stroke': px,
|
||
|
'text-stroke-width': px,
|
||
|
'word-spacing': px,
|
||
|
// Motion properties
|
||
|
motion: px,
|
||
|
'motion-offset': px,
|
||
|
// Outline properties
|
||
|
outline: px,
|
||
|
'outline-offset': px,
|
||
|
'outline-width': px,
|
||
|
// Perspective properties
|
||
|
perspective: px,
|
||
|
'perspective-origin-x': percent,
|
||
|
'perspective-origin-y': percent,
|
||
|
// Transform properties
|
||
|
'transform-origin': percent,
|
||
|
'transform-origin-x': percent,
|
||
|
'transform-origin-y': percent,
|
||
|
'transform-origin-z': percent,
|
||
|
// Transition properties
|
||
|
'transition-delay': ms,
|
||
|
'transition-duration': ms,
|
||
|
// Alignment properties
|
||
|
'vertical-align': px,
|
||
|
'flex-basis': px,
|
||
|
// Some random properties
|
||
|
'shape-margin': px,
|
||
|
size: px,
|
||
|
gap: px,
|
||
|
// Grid properties
|
||
|
grid: px,
|
||
|
'grid-gap': px,
|
||
|
'row-gap': px,
|
||
|
'grid-row-gap': px,
|
||
|
'grid-column-gap': px,
|
||
|
'grid-template-rows': px,
|
||
|
'grid-template-columns': px,
|
||
|
'grid-auto-rows': px,
|
||
|
'grid-auto-columns': px,
|
||
|
// Not existing properties.
|
||
|
// Used to avoid issues with jss-plugin-expand integration.
|
||
|
'box-shadow-x': px,
|
||
|
'box-shadow-y': px,
|
||
|
'box-shadow-blur': px,
|
||
|
'box-shadow-spread': px,
|
||
|
'font-line-height': px,
|
||
|
'text-shadow-x': px,
|
||
|
'text-shadow-y': px,
|
||
|
'text-shadow-blur': px
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Clones the object and adds a camel cased property version.
|
||
|
*/
|
||
|
function addCamelCasedVersion(obj) {
|
||
|
var regExp = /(-[a-z])/g;
|
||
|
|
||
|
var replace = function replace(str) {
|
||
|
return str[1].toUpperCase();
|
||
|
};
|
||
|
|
||
|
var newObj = {};
|
||
|
|
||
|
for (var _key in obj) {
|
||
|
newObj[_key] = obj[_key];
|
||
|
newObj[_key.replace(regExp, replace)] = obj[_key];
|
||
|
}
|
||
|
|
||
|
return newObj;
|
||
|
}
|
||
|
|
||
|
var units = addCamelCasedVersion(defaultUnits);
|
||
|
/**
|
||
|
* Recursive deep style passing function
|
||
|
*/
|
||
|
|
||
|
function iterate(prop, value, options) {
|
||
|
if (value == null) return value;
|
||
|
|
||
|
if (Array.isArray(value)) {
|
||
|
for (var i = 0; i < value.length; i++) {
|
||
|
value[i] = iterate(prop, value[i], options);
|
||
|
}
|
||
|
} else if (typeof value === 'object') {
|
||
|
if (prop === 'fallbacks') {
|
||
|
for (var innerProp in value) {
|
||
|
value[innerProp] = iterate(innerProp, value[innerProp], options);
|
||
|
}
|
||
|
} else {
|
||
|
for (var _innerProp in value) {
|
||
|
value[_innerProp] = iterate(prop + "-" + _innerProp, value[_innerProp], options);
|
||
|
}
|
||
|
} // eslint-disable-next-line no-restricted-globals
|
||
|
|
||
|
} else if (typeof value === 'number' && isNaN(value) === false) {
|
||
|
var unit = options[prop] || units[prop]; // Add the unit if available, except for the special case of 0px.
|
||
|
|
||
|
if (unit && !(value === 0 && unit === px)) {
|
||
|
return typeof unit === 'function' ? unit(value).toString() : "" + value + unit;
|
||
|
}
|
||
|
|
||
|
return value.toString();
|
||
|
}
|
||
|
|
||
|
return value;
|
||
|
}
|
||
|
/**
|
||
|
* Add unit to numeric values.
|
||
|
*/
|
||
|
|
||
|
|
||
|
function defaultUnit(options) {
|
||
|
if (options === void 0) {
|
||
|
options = {};
|
||
|
}
|
||
|
|
||
|
var camelCasedOptions = addCamelCasedVersion(options);
|
||
|
|
||
|
function onProcessStyle(style, rule) {
|
||
|
if (rule.type !== 'style') return style;
|
||
|
|
||
|
for (var prop in style) {
|
||
|
style[prop] = iterate(prop, style[prop], camelCasedOptions);
|
||
|
}
|
||
|
|
||
|
return style;
|
||
|
}
|
||
|
|
||
|
function onChangeValue(value, prop) {
|
||
|
return iterate(prop, value, camelCasedOptions);
|
||
|
}
|
||
|
|
||
|
return {
|
||
|
onProcessStyle: onProcessStyle,
|
||
|
onChangeValue: onChangeValue
|
||
|
};
|
||
|
}
|
||
|
|
||
|
export default defaultUnit;
|