Is there a way to construct styles from styled function to target a selector with css?

[predaytor]

I have html from cms, and I would like to target a selector with css (including choosing variants etc.) without parsing, for example:

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>` }}
/>;

For now I'm using html-react-parser, but that's additional overhead plus larger bundle size.