Modularizing CSS for Markdown extensions related markup

[NiklasBeierl]

Hey There,

I am building a custom theme for a vitepress site and I am having the following issue:
I would like to use some of the css that the default theme applies to the rendered markdown, but not all of it.

In particular, I would like to keep my own style for: Headings, Lists, and Quotes. But from the default theme I would like to use the sexy code blocks with copy button, language indicators and so on.

Unfortunately, as of now it seems like a lot of this is "entangled" in vitepress/dist/client/theme-default/styles/components/vp-doc.css. I haven't found a satisfying solution that doesn't involve copying and adjusting the markup from there.

I'd be happy to attempt a contribution but before investing a lot of time into something that the maintainers end up not liking, I'd like to brainstorm the best way of going about this.

Suggestions

One convenient way of achieving this modularization I've seen in the wild is provided via sass by picocss. In short, you can specify which parts of picocss you want to have in your stylesheets by passing the list of "modules" to @use ... with ( ... ).

The native css way would probably be to just split the css up into more files, but one thing that needs to be decided then is whether and how these styles get restricted to the markup resulting from markdown. At the moment, all selectors assert that there is a parent with .vp-doc, that sits allright with me but maybe someone has a more elegant solution.

It would then of course also be beneficial to list what modules / css-files go with what extensions in the "Markdown Extensions" doc-page.

Happy to hear your thoughts.