bestguy / sveltestrap

Bootstrap 4 & 5 components for Svelte
https://sveltestrap.js.org
MIT License
1.3k stars 180 forks source link

Adding Classes to elements result in "unused css selector" with in document CSS. #589

Open littlefreak3000 opened 1 month ago

littlefreak3000 commented 1 month ago
<Row class="h-100">
   <Col class="left h-100">
   </Col>
   <Col class="right h-100">
   </Col>
</Row>

<Style>
.left {
   background: red;
}
.right {
   background: blue;
}
</Style>

Given the code above .left and .right css are not exported as svelte thinks they are unused.

RoryDuncan commented 1 month ago

This is actually a weakness in svelte—it doesn't trace through to "see" the component's prop corresponds to an eventual classname.

You can work around it via the :global selector.

Or, if it is something that scoping is very important, IIRC you can locally scope a class that has a child :global selector:

<div class="this”>
   <SomeComponent class="left" />
</div>

<style>

.this :global(.left) {
  ...
}
</style>