Improved Handling of Unused CSS Selectors within @html Directive, because unused is not always unused

[realJogicodes]

Description:

while building newhavenwedding.com for a customer, I think I have run into a limitation of Svelte Kit that could be addressed. Let me explain: I am storing plain html in my database

<!-- Data Example-->
<p>This is what my data looks like</p>
<p>Much more of this stuff, but just plain vanilla HTML</p>

With the idea of using the @html directive to dynamically inject that HTML content into a component. So far, so good. Within the injected HTML, I would like to be able to use HTML tags for tailwind based (or any other) scoped styling in the accompanying style section of the component. The Svelte compiler identifies my style selector as unused, triggering a warning message ang ignoring the styles during the build process.

//+page.svelte
<script>
let injectedData = '<p>comes from my database</p>'
</script>

<section>
{@html injectedData}
</section>

<style>
 section p {
  @apply some-tailwind more-tailwind;
 }
</style>

Issue:

Svelte appears to be removing these selectors as false positive. Since the @html directive represents a black box for the compiler, it cannot perform static analysis on the dynamic content, leading to removals of "unused" selectors. They are not always unsued, though as my case shows.

Feature Request:

I would like to propose an enhancement to the Svelte Kit build process that improves the handling of unused CSS selectors within the @html directive. This could involve a more sophisticated analysis that considers the dynamic nature of the injected content, ensuring that valid usages of selectors within @html are not flagged as unused. I could also envision a decorator for an "unused" tag to mark it as used manually. (That's admittedly much less ideal)

[eltigerchino]

You can use the :global() modifier or add your styles to a styles.css file and import it in a layout file.

//+page.svelte
<script>
	let injectedData = '<p>comes from my database</p>'
</script>

<section>
	{@html injectedData}
</section>

<style>
/* this will apply to all <p> elements, in any
	 component, that are inside <section> elements belonging
	 to this component */
 section :global(p) {
  @apply some-tailwind more-tailwind;
 }
</style>

https://svelte.dev/docs/svelte-components#style

[realJogicodes]

I like that workaround. Thanks