[Bug]: CSS variable accessed from JavaScript is removed

[2-5]

Describe the bug

CSS variables which are accessed only from JavaScript are removed.

To Reproduce

/* test.css */

:root {
  --test-used: green;
  --test-unused: red;
  --test-used-from-js: blue;
}

.test-used {
  --test-used-from-js: yellow;
  color: var(--test-used);
}

.test-unused {
  color: var(--test-unused);
}

// test.js

const el = document.createElement("div")
el.classList.add("test-used")

const color = window.getComputedStyle(el).getPropertyValue("--test-used-from-js")

purgecss --variables --css test.css --content test.js

/* output */

:root {
  --test-used: green;
}

.test-used {
  color: var(--test-used);
}

Expected Behavior

CSS variables used from JavaScript are safe-listed and not removed.

Environment

purgecss 4.1.3

Add any other context about the problem here

I encountered this problem using Bootstrap 5.2.1, which accesses a CSS variable from JavaScript in it's dropdown implementation:

https://github.com/twbs/bootstrap/blob/23e50829f958ea1d741d63e2781716be037e4644/dist/css/bootstrap.css#L3304-L3306

.dropdown-menu-end {
  --bs-position: end;
}

https://github.com/twbs/bootstrap/blob/23e50829f958ea1d741d63e2781716be037e4644/js/src/dropdown.js#L265

const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end'

Code of Conduct

• I agree to follow this project's Code of Conduct