Support `ms` vendor prefix when generating markup
Ben Alpert committed
Mar 27, 2014 at 19:46 UTC
6406183f7805bd1ee67f626440f8773ee5c284c7
4 files changed
+58
-2
src/browser/ui/dom/CSSPropertyOperations.js
+2
-2
@@ -23,11 +23,11 @@ var CSSProperty = require('CSSProperty');
23
24
var dangerousStyleValue = require('dangerousStyleValue');
25
var escapeTextForBrowser = require('escapeTextForBrowser');
26
-var hyphenate = require('hyphenate');
26
+var hyphenateStyleName = require('hyphenateStyleName');
27
var memoizeStringOnly = require('memoizeStringOnly');
28
29
var processStyleName = memoizeStringOnly(function(styleName) {
30
- return escapeTextForBrowser(hyphenate(styleName));
30
+ return escapeTextForBrowser(hyphenateStyleName(styleName));
31
});
32
33
/**
src/browser/ui/dom/__tests__/CSSPropertyOperations-test.js
+7
@@ -79,6 +79,13 @@ describe('CSSPropertyOperations', function() {
79
});
80
});
81
82
+ it('should create vendor-prefixed markup correctly', function() {
83
+ expect(CSSPropertyOperations.createMarkupForStyles({
84
+ msTransition: 'none',
85
+ MozTransition: 'none'
86
+ })).toBe('-ms-transition:none;-moz-transition:none;');
87
+ });
88
+
89
it('should set style attribute when styles exist', function() {
90
var styles = {
91
backgroundColor: '#000',
src/vendor/core/hyphenate.js
+3
@@ -25,6 +25,9 @@ var _uppercasePattern = /([A-Z])/g;
25
* > hyphenate('backgroundColor')
26
* < "background-color"
27
*
28
+ * For CSS style names, use `hyphenateStyleName` instead which works properly
29
+ * with all vendor prefixes, including `ms`.
30
+ *
31
* @param {string} string
32
* @return {string}
33
*/
src/vendor/core/hyphenateStyleName.js
new
+46
@@ -0,0 +1,46 @@
1
+/**
2
+ * Copyright 2013-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 hyphenateStyleName
17
+ * @typechecks
18
+ */
19
+
20
+"use strict";
21
+
22
+var hyphenate = require('hyphenate');
23
+
24
+var msPattern = /^ms-/;
25
+
26
+/**
27
+ * Hyphenates a camelcased CSS property name, for example:
28
+ *
29
+ * > hyphenate('backgroundColor')
30
+ * < "background-color"
31
+ * > hyphenate('MozTransition')
32
+ * < "-moz-transition"
33
+ * > hyphenate('msTransition')
34
+ * < "-ms-transition"
35
+ *
36
+ * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
37
+ * is converted to `-ms-`.
38
+ *
39
+ * @param {string} string
40
+ * @return {string}
41
+ */
42
+function hyphenateStyleName(string) {
43
+ return hyphenate(string).replace(msPattern, '-ms-');
44
+}
45
+
46
+module.exports = hyphenateStyleName;