Warn when using hyphenated style property names
Dan Abramov committed
Jun 8, 2014 at 19:47 UTC
e625b8b2348d151fd3ee969e55ccd64ca9461006
5 files changed
+110
-5
docs/tips/02-inline-styles.md
+3
-2
@@ -15,10 +15,11 @@ In React, inline styles are not specified as a string. Instead they are specifie
15
var divStyle = {
16
color: 'white',
17
backgroundImage: 'url(' + imgUrl + ')',
18
- WebkitTransition: 'all' // note the capital 'W' here
18
+ WebkitTransition: 'all', // note the capital 'W' here
19
+ msTransition: 'all' // 'ms' is the only lowercase vendor prefix
20
};
21
22
React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
23
```
24
24
-Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W".
25
+Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes [other than `ms`](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W".
src/browser/ui/dom/CSSPropertyOperations.js
+29
@@ -21,14 +21,33 @@
21
22
var CSSProperty = require('CSSProperty');
23
24
+var camelizeStyleName = require('camelizeStyleName');
25
var dangerousStyleValue = require('dangerousStyleValue');
26
var hyphenateStyleName = require('hyphenateStyleName');
27
var memoizeStringOnly = require('memoizeStringOnly');
28
+var warning = require('warning');
29
30
var processStyleName = memoizeStringOnly(function(styleName) {
31
return hyphenateStyleName(styleName);
32
});
33
34
+if (__DEV__) {
35
+ var warnedStyleNames = {};
36
+
37
+ var warnHyphenatedStyleName = function(name) {
38
+ if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
39
+ return;
40
+ }
41
+
42
+ warnedStyleNames[name] = true;
43
+ warning(
44
+ false,
45
+ 'Unsupported style property ' + name + '. Did you mean ' +
46
+ camelizeStyleName(name) + '?'
47
+ );
48
+ };
49
+}
50
+
51
/**
52
* Operations for dealing with CSS properties.
53
*/
@@ -52,6 +71,11 @@ var CSSPropertyOperations = {
71
if (!styles.hasOwnProperty(styleName)) {
72
continue;
73
}
74
+ if (__DEV__) {
75
+ if (styleName.indexOf('-') > -1) {
76
+ warnHyphenatedStyleName(styleName);
77
+ }
78
+ }
79
var styleValue = styles[styleName];
80
if (styleValue != null) {
81
serialized += processStyleName(styleName) + ':';
@@ -74,6 +98,11 @@ var CSSPropertyOperations = {
98
if (!styles.hasOwnProperty(styleName)) {
99
continue;
100
}
101
+ if (__DEV__) {
102
+ if (styleName.indexOf('-') > -1) {
103
+ warnHyphenatedStyleName(styleName);
104
+ }
105
+ }
106
var styleValue = dangerousStyleValue(styleName, styles[styleName]);
107
if (styleValue) {
108
style[styleName] = styleValue;
src/browser/ui/dom/__tests__/CSSPropertyOperations-test.js
+28
@@ -108,4 +108,32 @@ describe('CSSPropertyOperations', function() {
108
expect(/style=".*"/.test(root.innerHTML)).toBe(false);
109
});
110
111
+ it('should warn when using hyphenated style names', function() {
112
+ spyOn(console, 'warn');
113
+
114
+ expect(CSSPropertyOperations.createMarkupForStyles({
115
+ 'background-color': 'crimson'
116
+ })).toBe('background-color:crimson;');
117
+
118
+ expect(console.warn.argsForCall.length).toBe(1);
119
+ expect(console.warn.argsForCall[0][0]).toContain('backgroundColor');
120
+ });
121
+
122
+ it('should warn when updating hyphenated style names', function() {
123
+ spyOn(console, 'warn');
124
+
125
+ var root = document.createElement('div');
126
+ var styles = {
127
+ '-ms-transform': 'translate3d(0, 0, 0)',
128
+ '-webkit-transform': 'translate3d(0, 0, 0)'
129
+ };
130
+
131
+ React.renderComponent(<div />, root);
132
+ React.renderComponent(<div style={styles} />, root);
133
+
134
+ expect(console.warn.argsForCall.length).toBe(2);
135
+ expect(console.warn.argsForCall[0][0]).toContain('msTransform');
136
+ expect(console.warn.argsForCall[1][0]).toContain('WebkitTransform');
137
+ });
138
+
139
});
src/vendor/core/camelizeStyleName.js
new
+47
@@ -0,0 +1,47 @@
1
+/**
2
+ * Copyright 2014 Facebook, Inc.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ *
16
+ * @providesModule camelizeStyleName
17
+ * @typechecks
18
+ */
19
+
20
+"use strict";
21
+
22
+var camelize = require('camelize');
23
+
24
+var msPattern = /^-ms-/;
25
+
26
+/**
27
+ * Camelcases a hyphenated CSS property name, for example:
28
+ *
29
+ * > camelizeStyleName('background-color')
30
+ * < "backgroundColor"
31
+ * > camelizeStyleName('-moz-transition')
32
+ * < "MozTransition"
33
+ * > camelizeStyleName('-ms-transition')
34
+ * < "msTransition"
35
+ *
36
+ * As Andi Smith suggests
37
+ * (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix
38
+ * is converted to lowercase `ms`.
39
+ *
40
+ * @param {string} string
41
+ * @return {string}
42
+ */
43
+function camelizeStyleName(string) {
44
+ return camelize(string.replace(msPattern, 'ms-'));
45
+}
46
+
47
+module.exports = camelizeStyleName;
src/vendor/core/hyphenateStyleName.js
+3
-3
@@ -26,11 +26,11 @@ var msPattern = /^ms-/;
26
/**
27
* Hyphenates a camelcased CSS property name, for example:
28
*
29
- * > hyphenate('backgroundColor')
29
+ * > hyphenateStyleName('backgroundColor')
30
* < "background-color"
31
- * > hyphenate('MozTransition')
31
+ * > hyphenateStyleName('MozTransition')
32
* < "-moz-transition"
33
- * > hyphenate('msTransition')
33
+ * > hyphenateStyleName('msTransition')
34
* < "-ms-transition"
35
*
36
* As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix