Change how you write global styles inside a component

[babakfp]

Is your feature request related to a problem?

At this moment, this is the way you can write global styles inside a component: Example

Why this isn't a good solution?

• One of the biggest positive points of Svelte is "Write less, do more", so why the heck make it weirdly complicated, less readable, hard to use, more code, and...
• What if I had 100 CSS selectors that need to be global just inside a specific route (so I can't create a separate file and link it in the index.html page)?
• What if I want to change the style of an element based on another component? For example: if component "a" was present, apply the global styles (the styles that are written inside the component "a") to the component "b" classes (when they both are used inside the same component).
• What if I want to change the styles of the body tag document.body with help of a component?.

Describe the solution you'd like

Components styles need to be scoped by default, right? So we can just add global attribute to the style tag:

<style global></style>

Also, it most be possible to use 2 style tags:

// Scoped
<style></style>
// Global
<style global></style>

I mean we need to be able to use 2 style tags, one scoped style for the component and one global style to apply anywhere we use the component.

Right now it's not possible to use 2 style tags. If anytime this feature was available, it needs to give an error if both style tags were the same and not give an error if one of them has the global attribute.

<!-- currect-->
<style></style>
<style global></style>

<!-- error -->
<style></style>
<style></style>

<!-- error -->
<style></style>
<style></style>
<style></style>

How important is this feature to you?

Very important. It makes the Svelte be one step back from being able to fly to the moon 🌔.

Additional context

If you want this feature to become real, please like and share🌼 You don't need to write a commit just to say you agree, because then the issue page becomes less readable and we don't want this to happen. But I think if you have example use cases, it can be helpful to show the maintainers how much this feature is important.

[GrygrFlzr]

svelte-preprocess has already done this exactly, or is there something novel about this approach that requires it to be part of svelte core?

[babakfp]

svelte-preprocess has already done this exactly, or is there something novel about this approach that requires it to be part of svelte core?

It's the same feature. Also, I want to be able to write 2 style tags inside the same component (one for global and one for scoped styles).
The concept of only expose parts of the stylesheet is complicated (because of the same stuff that I explained above). So being able to write two style tags is needed.
Right now it isn't possible to write two style tags, so if this feature gets added, it needs to be checked that is a component contains two styles of the same scope or not.

[TheComputerM]

+1 for this. It would be a lot of help for component libraries as they do not have to scope their styles so that users can modify the component CSS easily. It would also improve performance. Multiple style tags would also be a plus.

[parischap]

+1 for this. I would also need this feature for global theming of my website.

[parischap]

A workaround:
Put your style section inside a svelte:head tag. All styles defined like this are global.

<svelte:head>
  <style>
    .toto {
      color: red;
    }
  </style>
</svelte:head>

[babakfp]

A workaround:
Put your style section inside a svelte:head tag. All styles defined like this are global.

<svelte:head>
  <style>
    .toto {
      color: red;
    }
  </style>
</svelte:head>

Hi
Cool, but it isn't best practice to write the styles inside the head, right? There is an ordering rule👮‍♂️:

<script></script>
<template></template>
<style></style>

So I think it's good to just have 2 style tags at the bottom of the template. So we don't break any rules and keep the main focus on the script and the template👼.

[parischap]

I fully agree with your request. My proposal is a workaround to keep working while your request is being developed by the Svelte Team. As soon as the dev is ready, all I have to do is remove the <svelte:head> tag and insert 'global' in my style tag. Of course, if the Svelte Team were to not develop the requested improvment, I would have to find a better solution.

By the way, it's worth saying that, what you request, exists in VUE JS where you can add the scoped keyword to your style tag to make all the content scoped : see https://vue-loader.vuejs.org/guide/scoped-css.html
(conversely if you don't add this key word, all the content of the style tag is global).

It's also worth saying that the :global() modifier that can be used on a per-selector basis is worth keeping as it allows for fine-tuning necessary in some cases.

[babakfp]

I fully agree with your request. My proposal is a workaround to keep working while your request is being developed by the Svelte Team. As soon as the dev is ready, all I have to do is remove the <svelte:head> tag and insert 'global' in my style tag. Of course, if the Svelte Team were to not develop the requested improvment, I would have to find a better solution.

By the way, it's worth saying that, what you request, exists in VUE JS where you can add the scoped keyword to your style tag to make all the content scoped : see https://vue-loader.vuejs.org/guide/scoped-css.html
(conversely if you don't add this key word, all the content of the style tag is global).

It's also worth saying that the :global() modifier that can be used on a per-selector basis is worth keeping as it allows for fine-tuning necessary in some cases.

Sorry, my bad🙏. I didn't see this👨‍🦯:

A workaround:

I took that you were requesting the feature.

what you request, exists in VUE JS where you can add the scoped keyword to your style tag...

Yeah, Vue has the scoped attribute.

It's also worth saying that the :global() modifier that can be used on a per-selector basis is worth keeping as it allows for fine-tuning necessary in some cases.

I do not really agree with this because of all of the negative things that I said in this issue and also:

• I don't like to see projects or examples that use the old syntax.
• I like appointed stuff because then you don't need to think, how to do x and y. It's stead forward, you do what you need to do, not think about which way is better or...
• I don't like to see tutorials that first teach the old syntax and later say "actually, you can do this instead, because blah blah blah", and I'm like why the heck did you teach the other one!!. It's because there are going to be 1000 new projects that the old syntax going to be used...

My guesses are that they probably going to keep the :global(p) syntax forever or remove it in Svelte 4.0

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been closed as it was previously marked as stale and saw no subsequent activity.

[timwehrle]

I think it is important to keep this issue open. Merging "Option to disable style encapsulation #5492" with this issue doesn't seem particularly beneficial in my opinion. Personally, I find style encapsulation less desirable in Svelte, as it can make the code less readable.

Looking ahead, I hope to see a future feature that gives users the flexibility to disable style encapsulation. While I understand the reasons for its inclusion, providing an option to disable it would accommodate those who prefer a different approach to styling in their projects.