CSS: Support overwriting rules with !important priority

Fixes trac-14394 Ref gh-1385
jquery · Mar 4, 2019 · 6c0c64c · 6c0c64c
1 parent 6ced263
commit 6c0c64c
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 10 deletions.
diff --git a/src/core/kebabCase.js b/src/core/kebabCase.js
@@ -0,0 +1,12 @@
+define( function() {
+	"use strict";
+
+	var rbigLetter = /[A-Z]/g;
+
+	// Changes camelCase to kebab-case.
+	function kebabCase( value ) {
+		return value.replace( rbigLetter, "-$&" ).toLowerCase();
+	}
+
+	return kebabCase;
+} );
diff --git a/src/css.js b/src/css.js
@@ -2,6 +2,7 @@ define( [
 	"./core",
 	"./core/access",
 	"./core/camelCase",
+	"./core/kebabCase",
 	"./var/rcssNum",
 	"./css/var/rnumnonpx",
 	"./css/var/cssExpand",
@@ -16,7 +17,7 @@ define( [
 	"./core/init",
 	"./core/ready",
 	"./selector" // contains
-], function( jQuery, access, camelCase, rcssNum, rnumnonpx, cssExpand,
+], function( jQuery, access, camelCase, kebabCase, rcssNum, rnumnonpx, cssExpand,
 	getStyles, swap, curCSS, adjustCSS, addGetHookIf, support, finalPropName ) {
 
 "use strict";
@@ -27,6 +28,7 @@ var
 	// except "table", "table-cell", or "table-caption"
 	// See here for display values: https://developer.mozilla.org/en-US/docs/CSS/display
 	rdisplayswap = /^(none|table(?!-c[ea]).+)/,
+	rmsPropPrefix = /^ms[A-Z]/,
 	rcustomProp = /^--/,
 	cssShow = { position: "absolute", visibility: "hidden", display: "block" },
 	cssNormalTransform = {
@@ -274,11 +276,12 @@ jQuery.extend( {
 			if ( !hooks || !( "set" in hooks ) ||
 				( value = hooks.set( elem, value, extra ) ) !== undefined ) {
 
-				if ( isCustomProp ) {
-					style.setProperty( name, value );
-				} else {
-					style[ name ] = value;
-				}
+				style.setProperty(
+					isCustomProp ?
+						name :
+						kebabCase( name.replace( rmsPropPrefix, "-$&" ) ),
+					value
+				);
 			}
 
 		} else {

diff --git a/src/data.js b/src/data.js
@@ -2,9 +2,10 @@ define( [
 	"./core",
 	"./core/access",
 	"./core/camelCase",
+	"./core/kebabCase",
 	"./data/var/dataPriv",
 	"./data/var/dataUser"
-], function( jQuery, access, camelCase, dataPriv, dataUser ) {
+], function( jQuery, access, camelCase, kebabCase, dataPriv, dataUser ) {
 
 "use strict";
 
@@ -18,8 +19,7 @@ define( [
 //	5. Avoid exposing implementation details on user objects (eg. expando properties)
 //	6. Provide a clear path for implementation upgrade to WeakMap in 2014
 
-var rbrace = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,
-	rmultiDash = /[A-Z]/g;
+var rbrace = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/;
 
 function getData( data ) {
 	if ( data === "true" ) {
@@ -52,7 +52,7 @@ function dataAttr( elem, key, data ) {
 	// If nothing was found internally, try to fetch any
 	// data from the HTML5 data-* attribute
 	if ( data === undefined && elem.nodeType === 1 ) {
-		name = "data-" + key.replace( rmultiDash, "-$&" ).toLowerCase();
+		name = "data-" + kebabCase( key );
 		data = elem.getAttribute( name );
 
 		if ( typeof data === "string" ) {

diff --git a/test/unit/css.js b/test/unit/css.js
@@ -1501,6 +1501,13 @@ QUnit.test( "Reset the style if set to an empty string", function( assert ) {
 		"The style can be reset by setting to an empty string" );
 } );
 
+QUnit.test( "Override !important when changing styles (#14394)", function( assert ) {
+	assert.expect( 1 );
+
+	var el = jQuery( "<div style='display: block !important;'></div>" ).css( "display", "none" );
+	assert.equal( el.css( "display" ), "none", "New style replaced !important" );
+} );
+
 QUnit.test(
 	"Clearing a Cloned Element's Style Shouldn't Clear the Original Element's Style (#8908)",
 	function( assert ) {