Add `createVarName` for creating scoped CSS vars

I was really looking forward to see what you have been working on and I am super excited to try it out in my project that currently uses Emotion 😃

Currently the createVar function generates a variable name and then returns it wrapped in var(...). This makes it easier to reference a scoped CSS var in style blocks, but at the same time makes it a bit trickier to set its value outside of a .css.ts file.

Would you consider adding a new function, for example called createVarName, that just returns a variable name?

Here is a pseudo-example of usage:

// component.css.ts
import { createVarName, style } from '@vanilla-extract/css';

export const positionVar = createVarName();

export const box = style({
  transform: `translate3d(var(${positionVar}), 0, 0)`,
});

// component.ts
import { useRef, useState } from 'react';
import * as styles from './component.css';

export default function SomeComponent() {
  const boxRef = useRef<HTMLDivElement>(null);
  const [currentIndex, setCurrentIndex] = useState(0);

  useLayoutEffect(() => {
    if (boxRef.current) {
      boxRef.current.style.setProperty(
        styles.positionVar,
        `${currentIndex * 1000}px`,
      );
    }
  }, [currentIndex]);

  return (
    <div className={styles.box} ref={boxRef}>
      ...
    </div>
  );
}

[damianstasik]

@markdalgleish thank you! I think we can close this issue.

[mattcompiles]

@duarten I think your use-case is already catered to by the createInlineTheme API?