Not able to set custom css class on Components

[osiris86]

Hi there,

I'm wondering how to style a single sveltestrap component. I found other issues with similar problems that styled the components using :global. This obviously styles all the components. But only applying a style to a single component seems so obvious to me, that I'm currently refusing to believe that this isn't possible.

Here's a reproducable example:

• Create a new Svelte project degit sveltejs/template my-test-project
• Converted to TypeScript node scripts/setupTypeScript.js
• Installed dependencies npm install
• Installed sveltestrap npm install sveltestrap
• Changed the src/App.svelte file like that:

<script>
	export let name;
  import { Button, Col, Row } from 'sveltestrap';
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
  <Row>
    <Col class="hello-world">
      <Button color="primary" outline>Hello World!</Button>
    </Col>
  </Row>
</main>

<style>
  @import "https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css";
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
  
  .hello-world {
    background-color: #ff0000;
  }
</style>

What I expected to happen?

The column component would pick up my hello-world class and have a red background

What actually happened?

I get a compile warning:

(!) Plugin svelte: Unused CSS selector ".hello-world"
src/App.svelte
36:   }
37:   
38:   .hello-world {
      ^
39:     background-color: #ff0000;
40:   }

The resulting HTML actually has a "hello-world" class, but not a special svelte class as usual components.

If I use the default bootstrap class, i.e. replace <Col class="hello-world"> with <div class="col hello-world"> everything works as expected.

Is it really not possible like that or am I missing something here?

[bestguy]

Hi, this is unfortunately a svelte limitation. I don't have an issue # handy, but the scoped styles only apply to Dom elements. To do what you want here you'd have to add:

:global(.hello-world) {
  ...
}

Or move that css to your separate stylesheet.

[bestguy]

Here's an rfc issue that links to many other issues and discussion of this: sveltejs/rfcs#22

Good description on why it's not supported:
sveltejs/rfcs#22 (comment)

[osiris86]

Wow, very quick reply. Thank you! That makes sense to me. Obviously, I'm fairly new to svelte and wasn't aware of these limitations. This just seemed like such a common problem to me (and it kinda is, as the discussion in the linked PR suggests :) ).

Closing this, since this isn't an issue with sveltestrap. Thanks for your help!

[bestguy]

Yes it's a bit annoying, but I understand the reasoning.

[joshkpeterson]

I'm new to Svelte and found this gh-issue after running into this little quirk.

There is almost a solution, here: sveltejs/rfcs#13 (comment)

But I can't quite get it to override bootstrap styles correctly. Maybe someone else can point the way? If I put the bundle.css after bootstrap's css in my using devtools it sort of works, is there a way to integrate sveltestrap such that this happens?

Not totally sure, but do you think it's worth lobbying the svelte project to make this path a little closer to default? This workflow of adding classes to override component library styles is super common, and so this is quite the pitfall when starting to use svelte and integrate component libraries like you would with eg react and react-bootstrap.

Assuming the preprocessor method above works, is there any downside to using it? If not, it would seem there isn't truly a limitation with svelte, but just that the framework could make this path a little smoother out of the box.

[zeecou]

For anybody who stumbles upon this issue - you can set custom CSS scoped classes with Svelte nested style elements like this (example for AccordionItem):

<AccordionItem>
    <div id="header" slot="header">
	I am header!
	<style>
	    #header {
		font-size: 2em;
		padding: 0.5em;
	    }
	</style>
    </div>
    <div>Some body :)</div>
</AccordionItem>

[bestguy]

Really cool, thanks @zeecou as I did not know about that.