Warn when casing CSS vendor prefixes incorrectly

Fixes facebook#2487. Test Plan: jest
sophiebits · Nov 15, 2014 · 22da7b6 · 22da7b6
1 parent 0db323e
commit 22da7b6
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/src/browser/ui/dom/CSSPropertyOperations.js b/src/browser/ui/dom/CSSPropertyOperations.js
@@ -34,6 +34,9 @@ if (ExecutionEnvironment.canUseDOM) {
 }
 
 if (__DEV__) {
+  // 'msTransform' is correct, but the other prefixes should be capitalized
+  var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;
+
   var warnedStyleNames = {};
 
   var warnHyphenatedStyleName = function(name) {
@@ -48,6 +51,19 @@ if (__DEV__) {
       camelizeStyleName(name) + '?'
     );
   };
+
+  var warnBadVendoredStyleName = function(name) {
+    if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
+      return;
+    }
+
+    warnedStyleNames[name] = true;
+    warning(
+      false,
+      'Unsupported vendor-prefixed style property ' + name + '. Did you mean ' +
+      name.charAt(0).toUpperCase() + name.slice(1) + '?'
+    );
+  };
 }
 
 /**
@@ -76,6 +92,8 @@ var CSSPropertyOperations = {
       if (__DEV__) {
         if (styleName.indexOf('-') > -1) {
           warnHyphenatedStyleName(styleName);
+        } else if (badVendoredStyleNamePattern.test(styleName)) {
+          warnBadVendoredStyleName(styleName);
         }
       }
       var styleValue = styles[styleName];
@@ -103,6 +121,8 @@ var CSSPropertyOperations = {
       if (__DEV__) {
         if (styleName.indexOf('-') > -1) {
           warnHyphenatedStyleName(styleName);
+        } else if (badVendoredStyleNamePattern.test(styleName)) {
+          warnBadVendoredStyleName(styleName);
         }
       }
       var styleValue = dangerousStyleValue(styleName, styles[styleName]);

diff --git a/src/browser/ui/dom/__tests__/CSSPropertyOperations-test.js b/src/browser/ui/dom/__tests__/CSSPropertyOperations-test.js
@@ -136,4 +136,21 @@ describe('CSSPropertyOperations', function() {
     expect(console.warn.argsForCall[1][0]).toContain('WebkitTransform');
   });
 
+  it('warns when miscapitalizing vendored style names', function() {
+    spyOn(console, 'warn');
+
+    CSSPropertyOperations.createMarkupForStyles({
+      msTransform: 'translate3d(0, 0, 0)',
+      oTransform: 'translate3d(0, 0, 0)',
+      webkitTransform: 'translate3d(0, 0, 0)'
+    });
+
+    // msTransform is correct already and shouldn't warn
+    expect(console.warn.argsForCall.length).toBe(2);
+    expect(console.warn.argsForCall[0][0]).toContain('oTransform');
+    expect(console.warn.argsForCall[0][0]).toContain('OTransform');
+    expect(console.warn.argsForCall[1][0]).toContain('webkitTransform');
+    expect(console.warn.argsForCall[1][0]).toContain('WebkitTransform');
+  });
+
 });