Avoid adding trailing semicolons to inline styles. (#9550)
* Avoid adding trailing semicolons to inline styles. * Prettify. * For sake of performance, avoid messing around with arrays. * Change approach to avoid calling .substring.
Arthur Gunn committed
Jun 6, 2017 at 03:17 UTC
5aa31534cd118af58e4334eafff811f49a0ab899
3 files changed
+13
-11
src/renderers/dom/shared/CSSPropertyOperations.js
+5
-3
@@ -194,6 +194,7 @@ var CSSPropertyOperations = {
194
*/
195
createMarkupForStyles: function(styles, component) {
196
var serialized = '';
197
+ var delimiter = '';
198
for (var styleName in styles) {
199
if (!styles.hasOwnProperty(styleName)) {
200
continue;
@@ -203,9 +204,10 @@ var CSSPropertyOperations = {
204
warnValidStyle(styleName, styleValue, component);
205
}
206
if (styleValue != null) {
206
- serialized += processStyleName(styleName) + ':';
207
- serialized +=
208
- dangerousStyleValue(styleName, styleValue, component) + ';';
207
+ serialized += delimiter + processStyleName(styleName) + ':';
208
+ serialized += dangerousStyleValue(styleName, styleValue, component);
209
+
210
+ delimiter = ';';
211
}
212
}
213
return serialized || null;
src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
+7
-7
@@ -29,7 +29,7 @@ describe('CSSPropertyOperations', () => {
29
backgroundColor: '#3b5998',
30
display: 'none',
31
}),
32
- ).toBe('background-color:#3b5998;display:none;');
32
+ ).toBe('background-color:#3b5998;display:none');
33
});
34
35
it('should ignore undefined styles', () => {
@@ -38,7 +38,7 @@ describe('CSSPropertyOperations', () => {
38
backgroundColor: undefined,
39
display: 'none',
40
}),
41
- ).toBe('display:none;');
41
+ ).toBe('display:none');
42
});
43
44
it('should ignore null styles', () => {
@@ -47,7 +47,7 @@ describe('CSSPropertyOperations', () => {
47
backgroundColor: null,
48
display: 'none',
49
}),
50
- ).toBe('display:none;');
50
+ ).toBe('display:none');
51
});
52
53
it('should return null for no styles', () => {
@@ -67,7 +67,7 @@ describe('CSSPropertyOperations', () => {
67
opacity: 0.5,
68
padding: '4px',
69
}),
70
- ).toBe('left:0;margin:16px;opacity:0.5;padding:4px;');
70
+ ).toBe('left:0;margin:16px;opacity:0.5;padding:4px');
71
});
72
73
it('should trim values', () => {
@@ -77,7 +77,7 @@ describe('CSSPropertyOperations', () => {
77
opacity: 0.5,
78
right: ' 4 ',
79
}),
80
- ).toBe('left:16;opacity:0.5;right:4;');
80
+ ).toBe('left:16;opacity:0.5;right:4');
81
});
82
83
it('should not append `px` to styles that might need a number', () => {
@@ -87,7 +87,7 @@ describe('CSSPropertyOperations', () => {
87
var styles = {};
88
styles[property] = 1;
89
expect(CSSPropertyOperations.createMarkupForStyles(styles)).toMatch(
90
- /:1;$/,
90
+ /:1$/,
91
);
92
});
93
});
@@ -98,7 +98,7 @@ describe('CSSPropertyOperations', () => {
98
msTransition: 'none',
99
MozTransition: 'none',
100
}),
101
- ).toBe('-ms-transition:none;-moz-transition:none;');
101
+ ).toBe('-ms-transition:none;-moz-transition:none');
102
});
103
104
it('should set style attribute when styles exist', () => {
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+1
-1
@@ -1206,7 +1206,7 @@ describe('ReactDOMComponent', () => {
1206
),
1207
),
1208
).toBe(
1209
- '<div title="'"<>&" style="text-align:'"<>&;">' +
1209
+ '<div title="'"<>&" style="text-align:'"<>&">' +
1210
''"<>&' +
1211
'</div>',
1212
);