Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS: Support overwriting rules with !important priority #3873

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

CSS: Support overwriting rules with !important priority #3873

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/core/kebabCase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
} );
15 changes: 9 additions & 6 deletions src/css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
define( [
"./core",
"./core/access",
"./core/kebabCase",
"./var/rcssNum",
"./var/isIE",
"./css/var/rnumnonpx",
Expand All @@ -16,7 +17,7 @@ define( [
"./core/init",
"./core/ready",
"./selector" // contains
], function( jQuery, access, rcssNum, isIE, rnumnonpx, cssExpand, isAutoPx,
], function( jQuery, access, kebabCase, rcssNum, isIE, rnumnonpx, cssExpand, isAutoPx,
cssCamelCase, getStyles, swap, curCSS, adjustCSS, finalPropName ) {

"use strict";
Expand All @@ -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 = {
Expand Down Expand Up @@ -250,11 +252,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 {
Expand Down
8 changes: 4 additions & 4 deletions src/data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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" ) {
Expand Down Expand Up @@ -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" ) {
Expand Down
7 changes: 7 additions & 0 deletions test/unit/css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1535,6 +1535,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 ) {
Expand Down