Support composes?

[phil-lgr]

It would be nice to do something like this:

import { createTextStyle } from '@capsizecss/vanilla-extract';
import { globalStyle, style } from '@vanilla-extract/css';
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';

import { layoutCSS, typographyVars } from '../theme';

export const t1 = createTextStyle(typographyVars.titles.mobile.t1.capsize, {
  '@media': {
    [layoutCSS.media.tablet]: typographyVars.titles.tablet.t1.capsize,
    [layoutCSS.media.desktopSmall]: typographyVars.titles.desktop.t1.capsize,
  },
});

export const t2 = createTextStyle(typographyVars.titles.mobile.t2.capsize, {
  '@media': {
    [layoutCSS.media.tablet]: typographyVars.titles.tablet.t2.capsize,
    [layoutCSS.media.desktopSmall]: typographyVars.titles.desktop.t2.capsize,
  },
});

export const title = recipe({
  base: [
    {
      fontFamily: typographyVars.titles.font,
      position: 'relative',
      wordBreak: 'normal',
      userSelect: 'none',
    },
  ],
  variants: {
    size: {
      t1: t1,
      t2: t2,
    },
  },
});

globalStyle(`.title-t1`, {
  // @ts-ignore
  composes: title({ size: 't1' }),
});

Which would result in:

.title-t1 {
  // combined styles of .title_size_t1__15hp6ko5, .title__15hp6ko1 and .capsize_capsizeStyle__1d0g9qk4
}

right now, I'm getting this:

.title-t1 {
  composes: title__15hp6ko4 title_size_t1__15hp6ko5 title__15hp6ko1 capsize_capsizeStyle__1d0g9qk4 title__15hp6ko0;
}

My usecase: trying to generate global classnames (no hashes) from existing styles and recipes