Skip to content

Core: Fix parsing to preserve CSS variables with fallback colors - #180

Open
Krinkle wants to merge 1 commit into
jquery:mainfrom
Krinkle:fix-css-var
Open

Core: Fix parsing to preserve CSS variables with fallback colors#180
Krinkle wants to merge 1 commit into
jquery:mainfrom
Krinkle:fix-css-var

Conversation

@Krinkle

@Krinkle Krinkle commented Jul 22, 2026

Copy link
Copy Markdown
Member

Before:

$('<div>').css('color', 'var(--color-base, #202122)').attr('style');
//> color: rgb(32, 33, 34);

After:

$('<div>').css('color', 'var(--color-base, #202122)').attr('style');
//> var(--color-base, #202122)

The "with fallback" test cases fail without the patch:

message: Declared value
expected: "rgba(255, 255, 0, 0)"
actual: "var(--example-not-found,#ff0077)"

To minimise the impact of this change, make whitespace tolerance explicit in the regex. This was previousluy implict because the regex wasn't anchored. Whitespace tolerance isn't just theoretical back-compat, it matches native DOM behaviour and (without this plugin) jQuery Core behavior:

var d = document.createElement('div');
d.style.color = '    #202FF2   ';
d.style.color;
//> "rgb(32, 47, 242)"

Fixes jquery/jquery-ui#2411.

@Krinkle
Krinkle force-pushed the fix-css-var branch 3 times, most recently from 66e5fc1 to acc45ae Compare July 22, 2026 18:27
@Krinkle
Krinkle requested a review from mgol July 22, 2026 18:37
Before:
```
$('<div>').css('color', 'var(--color-base, #202122)').attr('style');
//> color: rgb(32, 33, 34);
```

After:
```
$('<div>').css('color', 'var(--color-base, #202122)').attr('style');
//> var(--color-base, #202122)
```

The "with fallback" test cases fail without the patch:
> message:  Declared value
> expected: "rgba(255, 255, 0, 0)"
> actual:   "var(--example-not-found,#ff0077)"

To minimise the impact of this change, make whitespace tolerance
explicit in the regex. This was previousluy implict because the
regex wasn't anchored. Whitespace tolerance isn't just theoretical
back-compat, it matches native DOM behaviour and (without this plugin)
jQuery Core behavior:

```
var d = document.createElement('div');
d.style.color = '    #202FF2   ';
d.style.color;
//> "rgb(32, 47, 242)"
```

Fixes jquery/jquery-ui#2411.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

CSS variable stripped from calls to jQuery .css()

1 participant