Oxygen 4.0 RC 1 - Oxygen API Element using CSS variables works on front-end but incorrectly render in the builder.

[cbontems]

Describe the bug

Noticed in Oxygen 4.0 RC 1

When creating an Oxygen Element using Oxygen API Element, and this element uses CSS variables to define a property value in its default CSS, then the property is rendered on the front end, but not in the builder.

In the provided example sandbox, the card component is defined with :

:root {
    --bg-clr: white;
}
.my-card {
    display: flex;
    flex-direction: column;
    padding: 32px;
    background-color: var(--bg-clr);
    border-radius: 8px;
}

Inspecting the front-end, everything is OK :

.my-card {
    background-color: var(--bg-clr);
}

But in the builder artificial viewport, Oxygen removes the var() function around the CSS variable, and renders:

.my-card {
    background-color: --bg-clr;
}

A link to a Sandbox site where the bug has been reproduced https://oxygenbuilder.com/try? (REQUIRED) https://oxygen-qhb45fr7ck5ll.oxygen-demo.qsandbox.me/sample-page/ Example based on Elijah's boilerplate plugin and card element.

IF YOU CAN'T PROVIDE A SANDBOX REPRODUCTION: Steps required to reproduce the bug: Sandbox is set-up with Oxygen 4.0 RC 1 and a text plugin based on Elijah's boilerplate.

If you can't fill out the above information, you should not be filing a bug report. Instead, contact us via https://oxygenbuilder.com/support with the details you have and we'll investigate your issue further.

[KittenCodes]

Thanks for the report!