issue with linear-gradient background inside cva

[eagerlynl]

Description

When i add the following lines to a cva() function:

...
'&:before': {
    ......
    background: 'linear-gradient(0deg, {colors.black} 0%, transparent 100%)',
   }
}

it looks fine in development, but after running the build, the first percentage-sign from my value is gone, so the output looks like this:

.gxrkEY_ifBKb_dzgijn_AxdCC_fVHuaE_oxaYq:before {
    background: linear-gradient(0deg, var(--daBmZR) 0, color-mix(in srgb, var(--daBmZR) 0, transparent) 100%);
}

but it should output this instead:

.gxrkEY_ifBKb_dzgijn_AxdCC_fVHuaE_oxaYq:before {
    background: linear-gradient(0deg, var(--daBmZR) 0%, color-mix(in srgb, var(--daBmZR) 0, transparent) 100%);
}

Thanks!

Link to Reproduction

Not possible, since we need a production build.

Steps to reproduce

1. Create an element where the before element has the same background value as above;
2. Run a production build;
3. See the percentage sign dissapear

JS Framework

React, Nextjs 14

Panda CSS Version

0.47.1

Browser

Latest Chrome

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[eagerlynl]

To add to this: looks like it's only an issue when using background: instead of backgroundImage: