Summary
The VitePress demo site has its own styles, and we don't want those to bleed into the component demos. For example, VitePress adds somewhat specific styles to links, which could cause an issue if an <a> element is used for something in a Codex component.
These demo site styles come from two places:
- VitePress itself
- Our custom.css file, which includes overrides to the default VitePress theme
VitePress provides a way (raw) to exclude styles from specific files in elements:
- Add a postcss plugin from VitePress
- Configure it to exclude the style files you don't want
- Use the vp-raw class on elements where you want to exclude those styles
We can apply the vp-raw class on the demo pane element in the Wrapper component.
Exceptions
We actually do want a couple of styles/resets in the demo pane:
- Some component demos need basic link styles, e.g. a Message with a link in the text or Tabs content
- We generally don't want the large margins placed on <p> elements in most browsers
We'll need to add these styles back to the demo pane. For link styles, this should be opt in via the existing allowLinkStyles prop of the Wrapper component.
Future work
A future use case might be a theme/skin switcher where a user can toggle between things like Vector or MinervaNeue styles, or a different theme, when viewing the demos. We should keep this use case in mind when implementing this baseline.
Acceptance criteria
- VitePress and our custom.css styles no longer apply in the demo pane
- Special styles, like link styles and paragraph margins, should still apply in the demo pane
