globalStyle seems limited

[badsyntax]

For rendering markdown content I need to use descendant selectors to style markup tags. (Similar to https://github.com/tailwindlabs/tailwindcss-typography)

So let's say I have a link component with corresponding styles:

export const linkStyle = sprinkles({
  color: {
    default: 'link',
    hover: 'linkHover',
  },
});

Now for my markdown content I want to use exactly the same styles for styling a tags.

Ideally I'd like to do:

globalStyle(`${variantProse} a`, linkStyle);

...but that obviously doesn't work because globalStyle expects a style object and not a className string.

I'm still getting familiar with the API but I don't really understand how I can re-use styles using globalStyle. Is there a different approach I can take here to share styles using descendant selectors?

[badsyntax]

In the end I've taken the approach of adding class names on all markdown rendered elements (via https://github.com/martypdx/rehype-add-classes) and this appears to work pretty well. It would still be good to know how I can use sprinkles with globalStyle though.

[mattcompiles]

globalStyle is basically generating straight CSS. Sprinkles returns a list of class identifiers. Without adding a bunch of post-processing magic these two ideas are completely incompatible.

[badsyntax]

Any other suggestions then?

[LekoArts]

I've created some utils for myself to have Tailwind CSS Typography working with vanilla-extract: https://github.com/LekoArts/portfolio-v2/blob/main/www/src/utils/vanilla-extract.ts

Until I write about that you can check the unit tests.