-
Notifications
You must be signed in to change notification settings - Fork 2
/
converter.js
110 lines (91 loc) · 2.51 KB
/
converter.js
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
var escape = require('./escape');
var validator = require('./validator');
var getVendorPropertyName = require('react-kit/getVendorPropertyName');
var _uppercasePattern = /([A-Z])/g;
var msPattern = /^ms-/;
// Don't automatically add 'px' to these possibly-unitless properties.
// Borrowed from jquery.
var cssNumber = {
'column-count': true,
'fill-opacity': true,
'flex': true,
'flex-grow': true,
'flex-shrink': true,
'font-weight': true,
'line-height': true,
'opacity': true,
'order': true,
'orphans': true,
'widows': true,
'z-index': true,
'zoom': true
}
function hyphenateProp(string) {
// MozTransition -> -moz-transition
// msTransition -> -ms-transition. Notice the lower case m
// http://modernizr.com/docs/#prefixed
// thanks a lot IE
return string.replace(_uppercasePattern, '-$1')
.toLowerCase()
.replace(msPattern, '-ms-');
}
function processValueForProp(value, prop) {
// 'content' is a special property that must be quoted
if (prop === 'content') {
return '"' + value + '"';
}
// Add px to numeric values
if (!cssNumber[prop] && typeof value == 'number') {
value += 'px'
}else{
value = escape(value);
}
return value;
}
function ruleToString(propName, value) {
propName = getVendorPropertyName(propName);
var cssPropName = hyphenateProp(propName);
if (!validator.isValidValue(value)) {
return '';
}
return cssPropName + ':' + processValueForProp(value, cssPropName) + ';';
}
function _rulesToStringHeadless(styleObj) {
var markup = '';
for (var key in styleObj) {
if (!styleObj.hasOwnProperty(key)) {
continue;
}
if (key[0] === ':' || key.substring(0, 6) === '@media') {
continue;
}
markup += ruleToString(key, styleObj[key]);
}
return markup;
}
function rulesToString(className, styleObj) {
var markup = '';
var pseudos = '';
var mediaQueries = '';
for (var key in styleObj) {
if (!styleObj.hasOwnProperty(key)) {
continue;
}
// Skipping the special pseudo-selectors and media queries.
if (key[0] === ':') {
pseudos += className + key + '{' +
_rulesToStringHeadless(styleObj[key]) + '}';
} else if (key.substring(0, 6) === '@media') {
mediaQueries += key + '{' + rulesToString(className, styleObj[key]) + '}';
} else {
markup += ruleToString(key, styleObj[key]);
}
}
if (markup !== '') {
markup = className + '{' + markup + '}';
}
return markup + pseudos + mediaQueries;
}
module.exports = {
rulesToString: rulesToString
};