Optionally scope imported CSS files to component level

[rodoch]

Describe the problem

Currently, when stylesheets are imported within either a script or style block within a Svelte component their styles are applied globally.

<style>
    @import 'carbon-components-svelte/css/g10.css';
</style>

This is a sensible default behaviour. Some design system libraries etc. need to touch things like the body and html elements.

However, I think this can also be problematic and a limitation in some cases. For example, if you are producing a component library you often want to make sure that all of your styles are encapsulated and do not wreak havoc with the parent webpage/app styling.

Describe the proposed solution

A solution for this currently exists in Vue, where you can do something like:

<style scoped src="@/assets/css/main.css"></style>

...and it wil scope the contents of the CSS file. This is very ergonomic.

I want to be clear, the extent of this request is in relation to imported external CSS files. In researching this issue, I came across some rather in-depth debates as regards providing a scoped/unscoped modifier for the style block. I am not trying to rehash this debate here and I'm not wedded to this particular approach, I'm just using it as an example of an equivalent functionality in another popular framework.

Futhermore, given that Svelte does not wrap components in a generic div in the generated HTML I can see reasons why this may be difficult to implement. But given the potential benefits for users I thought I should ask the question at least.

Alternatives considered

1. Don't implement it: In this case, I think the current behaviour could at least be better documented. Given that most people associate Svelte with effective style encapsulation, this behaviour with imported CSS can come as a surprise to people, certainly it took me a minute to work it out.
2. Perhaps this can be solved in userland with a preprocessor? I tried to see if I could get this to work with PostCSS but it's proved beyond my skills so far.

Importance

would make my life easier

[Conduitry]

This would have to be some sort of preprocessor, because the core compiler just takes a single string as input and doesn't look at the filesystem at all.

[Tropix126]

svelte-preprocess already adds support for an src attribute on <style>. It also adds support for a global attribute which wraps all of the style's selectors in :global().

[Tropix126]

You can also use a postcss plugin to import local files (or sass's @use syntax if you're doing that). Those will both insert styles into the style tag before svelte gets ahold of it's contents, meaning they will be scoped as well.

[rodoch]

You can also use a postcss plugin to import local files (or sass's @use syntax if you're doing that). Those will both insert styles into the style tag before svelte gets ahold of it's contents, meaning they will be scoped as well.

Thanks @Tropix126. I had tried using sass - and the @use syntax prior to filing the issue. My experience was that the styles remained unscoped.

Also, can I ask in relation to your first comment, what would be the advantage of adding the global modifier if I want to keep all of the styles encapsulated and not leaking out into the parent page/component?

[Tropix126]

Thanks @Tropix126. I had tried using sass - and the @use syntax prior to filing the issue. My experience was that the styles remained unscoped.

In which way are you including your styles?

Also, can I ask in relation to your first comment, what would be the advantage of adding the global modifier if I want to keep all of the styles encapsulated and not leaking out into the parent page/component?

This was in response to your mentioning of a scoped/unscoped attribute.

[rodoch]

In which way are you including your styles?

When using svelte-preprocess + sass:

<style lang="scss">
    @use 'carbon-components-svelte/css/g10.css';
</style>

Of course, besides using Sass I also tried:

<style>
    @import 'carbon-components-svelte/css/g10.css';
</style>

and

<script context="module">
    import 'carbon-components-svelte/css/g10.css';
</script>

In all cases the imported styles are applied globally.

[eni9889]

@rodoch have you found any solution to this? I’m looking to do the same thing. I would like bootstrap to be scoped when imported

[rodoch]

I don't believe it's possible within the framework or with existing tools at this time. I've raised this issue as a feature request

[eni9889]

@rodoch I saw this plugin but haven't been able to make it work yet https://github.com/micantoine/svelte-preprocess-cssmodules it's got to be possible through some kind of preprocessing

[jangxyz]

I made it work by using svelte-preprocess with less and wrapping a custom div element (scope) around it. I think this is what Tropix meant. There is no scope feature, but I can add a specific classname in my case.

Something like this:

<div class="default">
  <pre><code class="language-javascript">console.log("Hello world!")</code></pre>	
</div>

<div class="github">
  <pre><code class="language-javascript">console.log("Hello world!")</code></pre>	
</div>

<div class="solarized-dark">
  <pre><code class="language-javascript">console.log("Hello world!")</code></pre>	
</div>

<style lang="less">
  .default :global {
    @import (less) 'https://highlightjs.org/static/demo/styles/default.css';
  }
  .github :global {
    @import (less) 'https://highlightjs.org/static/demo/styles/base16/github.css';
  }
  .solarized-dark :global {
    @import (less) 'https://highlightjs.org/static/demo/styles/base16/solarized-dark.css';
  }
  .atelier-seaside-light :global {
    @import (less) 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css';
  }
</style>

[SarcevicAntonio]

needed feature to make reusing styles across different component less of a hassle.

EDIT: apparently svelte-preprocess makes this a thing: https://github.com/sveltejs/svelte-preprocess#external-files

<style src="./style.css"></style>

Everything from style.css gets applied to the component with scoped selectors.
Works like a charm.

[rodoch]

This is a great solution - many thanks! I think that closes this issue.