Is there any chance to allow arbitrary code inside .css.ts / compile outside .css.ts?

[hjkcai]

Vanilla Extract is really a great idea in the CSS-in-JS world!

I am trying to integrate Vanilla Extract to my project. We currently have this kind of component code style, which combines the React component and its styles.

export const Component: FC<Props> = () => (
  <div className={classes.root} />
);

const classes = styleVariants({
  root: {
    display: 'flex'
  }
});

However, it is required to write those styles in a separated .css.ts file in Vanilla Extract. I tried the above pattern but the compiler removed rest of the codes.

In a more general way, is there any chance to allow arbitrary code inside .css.ts, or compile outside .css.ts? For example, use babel (or anything) to replace Vanilla Extract directives to plain JavaScript object. It produces the code below:

import './Component.ts.vanilla.js'

export const Component: FC<Props> = () => (
  <div className={classes.root} />
);

const classes = { root: "test_classes_root__xsc7qp0" }