Whyframe doesn't encapsulate the render of the component or am I crazy

[Francisco Marín]

I'm using Vitepress to document a component library, and when I load the scope style sheet in the component that I'm going to document, the rendering is done fine but my styles are also taken by the vitepress theme :(. I would like a isolation level where only the wiframe has those styles and it is not taken HELP PLEASE

[Bjorn Lu]

Hey, I think I know what's happening as I can reproduce it in https://whyframe.dev/new/vitepress (stackblitz) too. Unfortunately I think I had overlooked this and it'll be hard to fix this.

The problem is that when you're documenting this like:

// index.md

<script setup>
import Popup from './components/Popup.vue'
</script>

# test

<iframe data-why>
  <Popup />
</iframe>

The vue component has styles that Vite sees as side-effectful, and it thinks that the component styles could be useful for the markdown page, so when you load that page, the styles get loaded.

In practice, if you use Vue scoped styles like <style scoped>, the style wouldn't bleed into the markdown page. Are you using that in your components?

[Francisco Marín]

I tell you that I tried what you mentioned, however it does not work for me. I don't know what I'm doing wrong or what's wrong hehe

Well, if it works, the styles are no longer applied to everything, but the component does not take the styles

I show you my config, if you realize use the example you have in the doc

[Bjorn Lu]

<style scoped lang="css">
@import 'my-components/dist/resources/index.css';
</style>

I think this is the problem here. I'm assuming my-components/dist/resources/index.css contains all the styles for the component library. You should design your library to have consumers import that themselves instead, otherwise using <style> or <style scoped>, your consumers will get that CSS file duplicated many times.

So if you remove the style tag in all of your components, import that CSS in /frames/default.md instead, it should work.

[Francisco Marín]

I agree with you, that style sheet should not load all the css and I also thank you very much for your support, it works.