Hello community,
I’ve started developping my first tiny PS plugin.
Everything works fine so far – thanks to this forum!
Unfortunately I’m having an issue with custom CSS properties
and would like to know if this is a bug, or if I’m missing something obvious.
As stated here, ‘UXP supports the use of CSS Variables’, which is only partially true. Predefined variables in the stylesheet work fine, but when used as inline styles, the variables don’t get applied.
Here’s a simplified example:
<!-- index.html -->
<!-- ... -->
<body>
<div id="list-container">
<li class="color-item" style="--nice-color: 180, 60%, 50%, 1">FIRST - (not working)</li>
</div>
</body
<!-- ... -->
/* CSS */
.color-item {
background: hsla(var(--nice-color));
}
// JS
const containerEl = document.getElementById('list-container');
const listData = [
{id: 1, name: 'Nice Color', color: "300, 100%, 50%, 1"},
{id: 2, name: 'Another nice color', color: "100, 100%, 50%, .35"}
];
for (let item of listData) {
const listEl = document.createElement('li');
listEl.setAttribute('style', `--nice-color: ${item.color};`);
listEl.innerHTML = `${item.name} - (not working)`;
containerEl.appendChild(listEl)
};