Invalid CSS is generated: Unexpected token Function("var")

[Mydayyy]

Greetings

Which generators are impacted?

• [X] All
• [ ] HTML
• [ ] React
• [ ] Angular
• [ ] Vue
• [ ] Web components
• [ ] Power Apps

Reproduction case

The file db-ui-42.css contains invalid css.

1. Search for this selector inside the file: dialog:not([data-backdrop=none])::backdrop
2. Locate the background-color style inside the selector
3. That style is assigned the value var(var(--db-current-color-enabled), var(--db-neutral-on-bg-enabled)) which is invalid

   Expected Behaviour

The file db-ui-42.css should not contain invalid css.

Screenshots

Browser version

None

Add any other context about the problem here.

The source of the problem can be found here: https://github.com/db-ui/mono/blob/c5b4478d08fdd293b19f0b661a42fc28223e4ca6/packages/components/src/styles/dialog-init.scss#L30

which in turns gets assigned the variable declared here: https://github.com/db-ui/mono/blob/c5b4478d08fdd293b19f0b661a42fc28223e4ca6/packages/components/src/styles/dialog-init.scss#L3

And ends up having the invalid nested var(var(... assignment

Best Regards Mydayyy

[annsch]

I have the same problem in my project ;)

[dkolba]

Sass in one picture

[mfranzke]

I have the same problem in my project ;)

what a coincidence