`createVar` not working as expected?

[binajmen]

Starting from the example of the documentation, I was not able to use correctly the createVar utility.

Here a small reproduction: https://stackblitz.com/edit/macaron-css-macaron-ib7itb?file=vite.config.ts,index.html,src%2Findex.tsx,src%2FApp.tsx,src%2Fui%2Fbutton.tsx,package.json

In /ui/button.tsx:

import { createVar, fallbackVar } from '@macaron-css/core';
import { styled } from '@macaron-css/solid';

const colorVar = createVar('debug');

const Button = styled('button', {
  base: {
    color: fallbackVar(colorVar, 'red'),
    border: 'none',
  },
});

export function MyButton(props: { color?: string }) {
  // output: var(--debug__xxxxxx)
  // should be only `--debug__xxxxxx`
  console.log(colorVar);

  return (
    <Button
      style={{
        [colorVar]: props.color,
        // ["--debug__xxxxxx"]: "blue" <-- this would work
      }}
    >
      Click me
    </Button>
  );
}

colorVar returns var(--debug__xxxxxx) (invalid syntax) instead of var(--debug__xxxxxx). Did I misunderstand something?

[binajmen]

saw this in another issue: import { assignInlineVars } from "@macaron-css/core/dynamic";