-
-
Notifications
You must be signed in to change notification settings - Fork 111
Expand file tree
/
Copy pathStyle.js
More file actions
82 lines (79 loc) · 2.44 KB
/
Style.js
File metadata and controls
82 lines (79 loc) · 2.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
'use strict';
// from https://github.com/developit/preact/blob/33fc697ac11762a1cb6e71e9847670d047af7ce5/src/constants.js
const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;
// style is handled as both string and object
// even if the target is an SVG element (consistency)
Object.defineProperty(exports, '__esModule', {value: true}).default = (node, original, isSVG) => {
if (isSVG) {
const style = original.cloneNode(true);
style.value = '';
node.setAttributeNode(style);
return update(style, isSVG);
}
return update(node.style, isSVG);
};
// the update takes care or changing/replacing
// only properties that are different or
// in case of string, the whole node
const update = (style, isSVG) => {
let oldType, oldValue;
return newValue => {
switch (typeof newValue) {
case 'object':
if (newValue) {
if (oldType === 'object') {
if (!isSVG) {
if (oldValue !== newValue) {
for (const key in oldValue) {
if (!(key in newValue)) {
style[key] = '';
}
}
}
}
} else {
if (isSVG)
style.value = '';
else
style.cssText = '';
}
const info = isSVG ? {} : style;
for (const key in newValue) {
const value = newValue[key];
const styleValue = typeof value === 'number' &&
!IS_NON_DIMENSIONAL.test(key) ?
(value + 'px') : value;
if (!isSVG && /^--/.test(key))
info.setProperty(key, styleValue);
else
info[key] = styleValue;
}
oldType = 'object';
if (isSVG)
style.value = toStyle((oldValue = info));
else
oldValue = newValue;
break;
}
default:
if (oldValue != newValue) {
oldType = 'string';
oldValue = newValue;
if (isSVG)
style.value = newValue || '';
else
style.cssText = newValue || '';
}
break;
}
};
};
const hyphen = /([^A-Z])([A-Z]+)/g;
const ized = ($0, $1, $2) => $1 + '-' + $2.toLowerCase();
const toStyle = object => {
const css = [];
for (const key in object) {
css.push(key.replace(hyphen, ized), ':', object[key], ';');
}
return css.join('');
};