Get rendered CSS from component

[plckr]

Is your feature request related to a problem? Please describe. More than once I wanted to be able to access the rendered css from stitches instead of using the classNames. For example, I have an external Cookie script that creates a Cookie modal on the DOM, I don't have access to add classes to it (or atleast I don't want to query the DOM all the time), so my approach is to override the global css. I have many UI Components, and instead of writing the same CSS as of those Components (like Button), I want to get the rendered css from them to inject into the cookie modal css id

Describe the solution you'd like Something like this will fix the problem

const buttonCss = getCssCode(
  React.createElement(Button, { variant: 'secondary' })
)

const globalStyles = globalCss({
  '#cookie button': buttonCss,
})

globalStyles()

Describe alternatives you've considered

Additional context

[predaytor]

Similar here. I have an external html, and want to construct styles from styled/css function to target a selector:

export const paragraph = css({
    display: 'block',

    variants: {
        size: {
            '1': {
                fontSize: '$1',
            },
            '2': {
                fontSize: '$2',
            },
        },
    },

    defaultVariants: {
        size: '1',
    },
});

<Box
    css={{
        '& > p': {
            /* would be great */
            ...paragraph({ size: 1 }).css,
        },
    }}
    dangerouslySetInnerHTML={{ __html: `<p>Text</p>` }}
/>;