Data: Separate data & css/effects camelCase implementations

The camelCase implementation used by the data module no longer turns `-ms-foo` into `msFoo` but to `MsFoo` now. This is because `data` is supposed to be a generic utility not specifically bound to CSS use cases. Fixes gh-3355 Closes gh-4365
jquery · Apr 29, 2019 · 8fae212 · 8fae212
1 parent eb6c0a7
commit 8fae212
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 18 deletions.
diff --git a/src/core/camelCase.js b/src/core/camelCase.js
@@ -3,19 +3,16 @@ define( [], function() {
 "use strict";
 
 // Matches dashed string for camelizing
-var rmsPrefix = /^-ms-/,
-	rdashAlpha = /-([a-z])/g;
+var rdashAlpha = /-([a-z])/g;
 
 // Used by camelCase as callback to replace()
 function fcamelCase( all, letter ) {
 	return letter.toUpperCase();
 }
 
-// Convert dashed to camelCase; used by the css and data modules
-// Support: IE <=9 - 11, Edge 12 - 15
-// Microsoft forgot to hump their vendor prefix (#9572)
+// Convert dashed to camelCase
 function camelCase( string ) {
-	return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
+	return string.replace( rdashAlpha, fcamelCase );
 }
 
 return camelCase;

diff --git a/src/css.js b/src/css.js
@@ -1,11 +1,11 @@
 define( [
 	"./core",
 	"./core/access",
-	"./core/camelCase",
 	"./var/rcssNum",
 	"./css/var/rnumnonpx",
 	"./css/var/cssExpand",
 	"./css/isAutoPx",
+	"./css/cssCamelCase",
 	"./css/var/getStyles",
 	"./css/var/swap",
 	"./css/curCSS",
@@ -17,7 +17,7 @@ define( [
 	"./core/init",
 	"./core/ready",
 	"./selector" // contains
-], function( jQuery, access, camelCase, rcssNum, rnumnonpx, cssExpand, isAutoPx,
+], function( jQuery, access, rcssNum, rnumnonpx, cssExpand, isAutoPx, cssCamelCase,
 	getStyles, swap, curCSS, adjustCSS, addGetHookIf, support, finalPropName ) {
 
 "use strict";
@@ -213,7 +213,7 @@ jQuery.extend( {
 
 		// Make sure that we're working with the right name
 		var ret, type, hooks,
-			origName = camelCase( name ),
+			origName = cssCamelCase( name ),
 			isCustomProp = rcustomProp.test( name ),
 			style = elem.style;
 
@@ -281,7 +281,7 @@ jQuery.extend( {
 
 	css: function( elem, name, extra, styles ) {
 		var val, num, hooks,
-			origName = camelCase( name ),
+			origName = cssCamelCase( name ),
 			isCustomProp = rcustomProp.test( name );
 
 		// Make sure that we're working with the right name. We don't

diff --git a/src/css/cssCamelCase.js b/src/css/cssCamelCase.js
@@ -0,0 +1,20 @@
+define( [
+	"../core/camelCase"
+], function( camelCase ) {
+
+"use strict";
+
+// Matches dashed string for camelizing
+var rmsPrefix = /^-ms-/;
+
+// Convert dashed to camelCase, handle vendor prefixes.
+// Used by the css & effects modules.
+// Support: IE <=9 - 11+, Edge 12 - 18+
+// Microsoft forgot to hump their vendor prefix (#9572)
+function cssCamelCase( string ) {
+	return camelCase( string.replace( rmsPrefix, "ms-" ) );
+}
+
+return cssCamelCase;
+
+} );
diff --git a/src/deprecated.js b/src/deprecated.js
@@ -1,14 +1,14 @@
 define( [
 	"./core",
 	"./core/nodeName",
-	"./core/camelCase",
 	"./core/toType",
+	"./css/cssCamelCase",
 	"./var/isFunction",
 	"./var/isWindow",
 	"./var/slice",
 
 	"./event/alias"
-], function( jQuery, nodeName, camelCase, toType, isFunction, isWindow, slice ) {
+], function( jQuery, nodeName, toType, cssCamelCase, isFunction, isWindow, slice ) {
 
 "use strict";
 
@@ -76,7 +76,7 @@ jQuery.parseJSON = JSON.parse;
 jQuery.nodeName = nodeName;
 jQuery.isFunction = isFunction;
 jQuery.isWindow = isWindow;
-jQuery.camelCase = camelCase;
+jQuery.camelCase = cssCamelCase;
 jQuery.type = toType;
 
 jQuery.now = Date.now;

diff --git a/src/effects.js b/src/effects.js
@@ -1,6 +1,5 @@
 define( [
 	"./core",
-	"./core/camelCase",
 	"./var/document",
 	"./var/isFunction",
 	"./var/rcssNum",
@@ -9,6 +8,7 @@ define( [
 	"./css/var/isHiddenWithinTree",
 	"./css/var/swap",
 	"./css/adjustCSS",
+	"./css/cssCamelCase",
 	"./data/var/dataPriv",
 	"./css/showHide",
 
@@ -19,8 +19,8 @@ define( [
 	"./manipulation",
 	"./css",
 	"./effects/Tween"
-], function( jQuery, camelCase, document, isFunction, rcssNum, rnothtmlwhite, cssExpand,
-	isHiddenWithinTree, swap, adjustCSS, dataPriv, showHide ) {
+], function( jQuery, document, isFunction, rcssNum, rnothtmlwhite, cssExpand,
+	isHiddenWithinTree, swap, adjustCSS, cssCamelCase, dataPriv, showHide ) {
 
 "use strict";
 
@@ -261,7 +261,7 @@ function propFilter( props, specialEasing ) {
 
 	// camelCase, specialEasing and expand cssHook pass
 	for ( index in props ) {
-		name = camelCase( index );
+		name = cssCamelCase( index );
 		easing = specialEasing[ name ];
 		value = props[ index ];
 		if ( Array.isArray( value ) ) {

diff --git a/test/unit/css.js b/test/unit/css.js
@@ -1885,3 +1885,18 @@ QUnit.test( "Do not throw on frame elements from css method (#15098)", function(
 } )();
 
 }
+
+// Support: IE 11+
+if ( document.documentMode ) {
+	// Make sure explicitly provided IE vendor prefix (`-ms-`) is not converted
+	// to a non-working `Ms` prefix in JavaScript.
+	QUnit.test( "IE vendor prefixes are not mangled", function( assert ) {
+		assert.expect( 1 );
+
+		var div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
+
+		div.css( "-ms-grid-row", "1" );
+
+		assert.strictEqual( div.css( "-ms-grid-row" ), "1", "IE vendor prefixing" );
+	} );
+}
diff --git a/test/unit/data.js b/test/unit/data.js
@@ -722,10 +722,28 @@ QUnit.test( ".data supports interoperable hyphenated/camelCase get/set of proper
 			"2-num-start": {
 				key: "2NumStart",
 				value: true
+			},
+
+			// Vendor prefixes are not treated in a special way.
+			"-ms-foo": {
+				key: "MsFoo",
+				value: true
+			},
+			"-moz-foo": {
+				key: "MozFoo",
+				value: true
+			},
+			"-webkit-foo": {
+				key: "WebkitFoo",
+				value: true
+			},
+			"-fake-foo": {
+				key: "FakeFoo",
+				value: true
 			}
 		};
 
-	assert.expect( 24 );
+	assert.expect( 32 );
 
 	jQuery.each( datas, function( key, val ) {
 		div.data( key, val.value );