Provide warning when using styles containing a semicolon
mzabriskie committed
Jan 26, 2015 at 17:33 UTC
4054bb13cd955b8fa798ffd70056941a0e0bfeba
2 files changed
+44
-11
src/browser/ui/dom/CSSPropertyOperations.js
+34
-11
@@ -37,7 +37,11 @@ if (__DEV__) {
37
// 'msTransform' is correct, but the other prefixes should be capitalized
38
var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;
39
40
+ // style values shouldn't contain a semicolon
41
+ var badStyleValueWithSemicolonPattern = /;(\s*)$/;
42
+
43
var warnedStyleNames = {};
44
+ var warnedStyleValues = {};
45
46
var warnHyphenatedStyleName = function(name) {
47
if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
@@ -64,6 +68,33 @@ if (__DEV__) {
68
name.charAt(0).toUpperCase() + name.slice(1) + '?'
69
);
70
};
71
+
72
+ var warnStyleValueWithSemicolon = function(name, value) {
73
+ if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) {
74
+ return;
75
+ }
76
+
77
+ warnedStyleValues[value] = true;
78
+ warning(
79
+ false,
80
+ 'Style property values shouldn\'t contain a semicolon. Try "' +
81
+ name + ': ' + value.replace(badStyleValueWithSemicolonPattern, '') + '" instead.'
82
+ );
83
+ };
84
+
85
+ /**
86
+ * @param {string} name
87
+ * @param {string|number} value
88
+ */
89
+ var assertValidStyle = function(name, value) {
90
+ if (name.indexOf('-') > -1) {
91
+ warnHyphenatedStyleName(name);
92
+ } else if (badVendoredStyleNamePattern.test(name)) {
93
+ warnBadVendoredStyleName(name);
94
+ } else if (badStyleValueWithSemicolonPattern.test(value)) {
95
+ warnStyleValueWithSemicolon(name, value);
96
+ }
97
+ };
98
}
99
100
/**
@@ -89,14 +120,10 @@ var CSSPropertyOperations = {
120
if (!styles.hasOwnProperty(styleName)) {
121
continue;
122
}
123
+ var styleValue = styles[styleName];
124
if (__DEV__) {
93
- if (styleName.indexOf('-') > -1) {
94
- warnHyphenatedStyleName(styleName);
95
- } else if (badVendoredStyleNamePattern.test(styleName)) {
96
- warnBadVendoredStyleName(styleName);
97
- }
125
+ assertValidStyle(styleName, styleValue);
126
}
99
- var styleValue = styles[styleName];
127
if (styleValue != null) {
128
serialized += processStyleName(styleName) + ':';
129
serialized += dangerousStyleValue(styleName, styleValue) + ';';
@@ -119,11 +146,7 @@ var CSSPropertyOperations = {
146
continue;
147
}
148
if (__DEV__) {
122
- if (styleName.indexOf('-') > -1) {
123
- warnHyphenatedStyleName(styleName);
124
- } else if (badVendoredStyleNamePattern.test(styleName)) {
125
- warnBadVendoredStyleName(styleName);
126
- }
149
+ assertValidStyle(styleName, styles[styleName]);
150
}
151
var styleValue = dangerousStyleValue(styleName, styles[styleName]);
152
if (styleName === 'float') {
src/browser/ui/dom/__tests__/CSSPropertyOperations-test.js
+10
@@ -153,4 +153,14 @@ describe('CSSPropertyOperations', function() {
153
expect(console.warn.argsForCall[1][0]).toContain('WebkitTransform');
154
});
155
156
+ it('should warn about style having a trailing semicolon', function() {
157
+ spyOn(console, 'warn');
158
+
159
+ CSSPropertyOperations.createMarkupForStyles({
160
+ backgroundColor: 'blue;'
161
+ });
162
+
163
+ expect(console.warn.callCount).toBe(1);
164
+ expect(console.warn.argsForCall[0][0]).toContain('Try "backgroundColor: blue" instead');
165
+ });
166
});