Stencil and vars do not wrap passed css variables

[RayRedGoose]

🐛 Bug Report

Current functionality: css variables has not been wrapped with var in css:

const iconStencil = createStencil({
  vars: {
    fillColor: base.licorice200,
  },
});

// default var wrapped in css
element.style {
    --pc4cc-fillColor: --cnvs-base-palette-licorice-200;
}

// in component:
iconStencil({
  fillColor: base.blueberry400,
});

// overwritten value is not wrapped in css
element.style {
    --pc4cc-fillColor: --cnvs-base-palette-blueberry-400;
}

Solution to avoid this issue:

iconStencil({
  fillColor: cssVar(base.blueberry400),
  accentColor: cssVar(base.greenApple400),
});

Expected Behavior

Variable should be wrapped by stencil and vars automatically without using cssVar:

expect(myVars({color: '--my-var'})).toHaveProperty(myVars.color, 'var(--my-var)');
expect(myStencil({color: '--my-var'}).style).toHaveProperty(myStencil.vars.color, 'var(--my-var)');