namespace prism css to avoid collisions with component css

[dusty]

I have a component that is using the bulma css framework. In docz 2.0.0-rc.5 when I view the source of the component, the styles are overridden by bulma which also targets a .tag class name.

Example:

If I remove the CSS import, the view source looks great, but of course my component doesn't anymore.

It would be nice if prism highlighter could be prefixed so its css styling could work independently of whatever CSS the components docz is showing uses.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rakannimer]

I think this more of an issue than an enhancement. Happy to help anyone who would like to take this on !

[rakannimer]

Hey @dusty

This is solved in 2.2.0.

To scope your playground styles and make them independent of docz theme css you have 2 choices :

1. add a useScoping prop to your playground

<Playground useScoping> 
{
// blablabla
}
</Playground>

2. add useScopingInPlayground : true in doczrc.js

export default {
	useScopingInPlayground: true
}

Sorry for the delay in the reply but the fix was implemented thanks to you raising this issue ! So thanks 👍

Going to close it, please re-open or comment if for some reason something doesn't work for you !

If you're interested in implementation details check #1305