Skip to content

Commit

Permalink
Data: Separate data & css/effects camelCase implementations
Browse files Browse the repository at this point in the history
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
  • Loading branch information
mgol committed Apr 29, 2019
1 parent eb6c0a7 commit 8fae212
Show file tree
Hide file tree
Showing 7 changed files with 68 additions and 18 deletions.
9 changes: 3 additions & 6 deletions src/core/camelCase.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions src/css.js
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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";
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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
Expand Down
20 changes: 20 additions & 0 deletions src/css/cssCamelCase.js
Original file line number Diff line number Diff line change
@@ -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;

} );
6 changes: 3 additions & 3 deletions src/deprecated.js
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions src/effects.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
define( [
"./core",
"./core/camelCase",
"./var/document",
"./var/isFunction",
"./var/rcssNum",
Expand All @@ -9,6 +8,7 @@ define( [
"./css/var/isHiddenWithinTree",
"./css/var/swap",
"./css/adjustCSS",
"./css/cssCamelCase",
"./data/var/dataPriv",
"./css/showHide",

Expand All @@ -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";

Expand Down Expand Up @@ -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 ) ) {
Expand Down
15 changes: 15 additions & 0 deletions test/unit/css.js
Original file line number Diff line number Diff line change
Expand Up @@ -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" );
} );
}
20 changes: 19 additions & 1 deletion test/unit/data.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down

0 comments on commit 8fae212

Please sign in to comment.