Warn when casing CSS vendor prefixes incorrectly
Fixes #2487. Test Plan: jest
Ben Alpert committed
Nov 12, 2014 at 01:51 UTC
22da7b6fa568a905fbd3f9cb4362cffff3f37f8b
2 files changed
+37
src/browser/ui/dom/CSSPropertyOperations.js
+20
@@ -34,6 +34,9 @@ if (ExecutionEnvironment.canUseDOM) {
34
}
35
36
if (__DEV__) {
37
+ // 'msTransform' is correct, but the other prefixes should be capitalized
38
+ var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;
39
+
40
var warnedStyleNames = {};
41
42
var warnHyphenatedStyleName = function(name) {
@@ -48,6 +51,19 @@ if (__DEV__) {
51
camelizeStyleName(name) + '?'
52
);
53
};
54
+
55
+ var warnBadVendoredStyleName = function(name) {
56
+ if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
57
+ return;
58
+ }
59
+
60
+ warnedStyleNames[name] = true;
61
+ warning(
62
+ false,
63
+ 'Unsupported vendor-prefixed style property ' + name + '. Did you mean ' +
64
+ name.charAt(0).toUpperCase() + name.slice(1) + '?'
65
+ );
66
+ };
67
}
68
69
/**
@@ -76,6 +92,8 @@ var CSSPropertyOperations = {
92
if (__DEV__) {
93
if (styleName.indexOf('-') > -1) {
94
warnHyphenatedStyleName(styleName);
95
+ } else if (badVendoredStyleNamePattern.test(styleName)) {
96
+ warnBadVendoredStyleName(styleName);
97
}
98
}
99
var styleValue = styles[styleName];
@@ -103,6 +121,8 @@ var CSSPropertyOperations = {
121
if (__DEV__) {
122
if (styleName.indexOf('-') > -1) {
123
warnHyphenatedStyleName(styleName);
124
+ } else if (badVendoredStyleNamePattern.test(styleName)) {
125
+ warnBadVendoredStyleName(styleName);
126
}
127
}
128
var styleValue = dangerousStyleValue(styleName, styles[styleName]);
src/browser/ui/dom/__tests__/CSSPropertyOperations-test.js
+17
@@ -136,4 +136,21 @@ describe('CSSPropertyOperations', function() {
136
expect(console.warn.argsForCall[1][0]).toContain('WebkitTransform');
137
});
138
139
+ it('warns when miscapitalizing vendored style names', function() {
140
+ spyOn(console, 'warn');
141
+
142
+ CSSPropertyOperations.createMarkupForStyles({
143
+ msTransform: 'translate3d(0, 0, 0)',
144
+ oTransform: 'translate3d(0, 0, 0)',
145
+ webkitTransform: 'translate3d(0, 0, 0)'
146
+ });
147
+
148
+ // msTransform is correct already and shouldn't warn
149
+ expect(console.warn.argsForCall.length).toBe(2);
150
+ expect(console.warn.argsForCall[0][0]).toContain('oTransform');
151
+ expect(console.warn.argsForCall[0][0]).toContain('OTransform');
152
+ expect(console.warn.argsForCall[1][0]).toContain('webkitTransform');
153
+ expect(console.warn.argsForCall[1][0]).toContain('WebkitTransform');
154
+ });
155
+
156
});