From 6f2d41466db150e84fed6349eedb0aac738ac7f9 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Sun, 10 Sep 2023 14:58:17 -0400 Subject: [PATCH 1/4] docs: add FAQ about why you can't keep unused styles --- documentation/docs/05-misc/01-faq.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/documentation/docs/05-misc/01-faq.md b/documentation/docs/05-misc/01-faq.md index dd55458647ae..286397898dac 100644 --- a/documentation/docs/05-misc/01-faq.md +++ b/documentation/docs/05-misc/01-faq.md @@ -131,6 +131,16 @@ If you need hash-based routing on the client side, check out [svelte-spa-router] You can see a [community-maintained list of routers on sveltesociety.dev](https://sveltesociety.dev/components#routers). +## Can I tell Svelte not to remove my unused styles? + +No. + +Svelte's component style scoping works by generating a class unique to the given component, and then adding it to the relevant elements in the component that are under Svelte's control, and then also adding it to each of the selectors in that component's styles. If the compiler can't see which elements a given selector applies to, it has two options if it were to keep it, both of them bad. + +If it still adds the scoping class to the selector, there is no guarantee that it will match the expected elements in the component, especially if they were created by a child component or something like `{@html}`. If it keeps the selector without adding the scoping class to it, it will become a global style, affecting your entire page. The third option, which is what Svelte takes, is to remove the styles from the component and warn you about them. + +If you need to style something that Svelte can't identify at compile time, you will need to explicitly opt in to global styles by using `:global(...)`. But also keep in mind that you can wrap `:global(...)` around only part of a selector. `.foo :global(.bar) { ... }` will style any `.bar` elements that appear within the component's `.foo` elements. As long as there's some parent element in the current component to start from, partially global selectors like this will almost always be able to get you what you want. + ## Is Svelte v2 still available? New features aren't being added to it, and bugs will probably only be fixed if they are extremely nasty or present some sort of security vulnerability. From e16e0a30a3315f37c9a817de2a0b5f2f77b56aef Mon Sep 17 00:00:00 2001 From: Conduitry Date: Sun, 10 Sep 2023 16:55:08 -0400 Subject: [PATCH 2/4] tweak wording --- documentation/docs/05-misc/01-faq.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/documentation/docs/05-misc/01-faq.md b/documentation/docs/05-misc/01-faq.md index 286397898dac..3e4dba6464eb 100644 --- a/documentation/docs/05-misc/01-faq.md +++ b/documentation/docs/05-misc/01-faq.md @@ -133,13 +133,14 @@ You can see a [community-maintained list of routers on sveltesociety.dev](https: ## Can I tell Svelte not to remove my unused styles? -No. +No. Svelte removes the styles from the component and warns you about them in order to prevent issues that would otherwise arise. -Svelte's component style scoping works by generating a class unique to the given component, and then adding it to the relevant elements in the component that are under Svelte's control, and then also adding it to each of the selectors in that component's styles. If the compiler can't see which elements a given selector applies to, it has two options if it were to keep it, both of them bad. +Svelte's component style scoping works by generating a class unique to the given component, adding it to the relevant elements in the component that are under Svelte's control, and then adding it to each of the selectors in that component's styles. When the compiler can't see what elements a style selector applies to, there would be two bad options for keeping it: -If it still adds the scoping class to the selector, there is no guarantee that it will match the expected elements in the component, especially if they were created by a child component or something like `{@html}`. If it keeps the selector without adding the scoping class to it, it will become a global style, affecting your entire page. The third option, which is what Svelte takes, is to remove the styles from the component and warn you about them. +- If it keeps the selector and adds the scoping scoping class to it, there is no guarantee that the selector will match the expected elements in the component, and they definitely won't if they were created by a child component or `{@html ...}`. +- If it keeps the selector without adding the scoping class to it, the given style will become a global style, affecting your entire page. -If you need to style something that Svelte can't identify at compile time, you will need to explicitly opt in to global styles by using `:global(...)`. But also keep in mind that you can wrap `:global(...)` around only part of a selector. `.foo :global(.bar) { ... }` will style any `.bar` elements that appear within the component's `.foo` elements. As long as there's some parent element in the current component to start from, partially global selectors like this will almost always be able to get you what you want. +If you need to style something that Svelte can't identify at compile time, you will need to explicitly opt into global styles by using `:global(...)`. But also keep in mind that you can wrap `:global(...)` around only part of a selector. `.foo :global(.bar) { ... }` will style any `.bar` elements that appear within the component's `.foo` elements. As long as there's some parent element in the current component to start from, partially global selectors like this will almost always be able to get you what you want. ## Is Svelte v2 still available? From 2f429625fd33e84244c934e29e34748cf5bbc353 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Sun, 10 Sep 2023 17:51:33 -0400 Subject: [PATCH 3/4] scoping scoping scoping --- documentation/docs/05-misc/01-faq.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/05-misc/01-faq.md b/documentation/docs/05-misc/01-faq.md index 3e4dba6464eb..100fca325ecd 100644 --- a/documentation/docs/05-misc/01-faq.md +++ b/documentation/docs/05-misc/01-faq.md @@ -137,7 +137,7 @@ No. Svelte removes the styles from the component and warns you about them in ord Svelte's component style scoping works by generating a class unique to the given component, adding it to the relevant elements in the component that are under Svelte's control, and then adding it to each of the selectors in that component's styles. When the compiler can't see what elements a style selector applies to, there would be two bad options for keeping it: -- If it keeps the selector and adds the scoping scoping class to it, there is no guarantee that the selector will match the expected elements in the component, and they definitely won't if they were created by a child component or `{@html ...}`. +- If it keeps the selector and adds the scoping class to it, there is no guarantee that the selector will match the expected elements in the component, and they definitely won't if they were created by a child component or `{@html ...}`. - If it keeps the selector without adding the scoping class to it, the given style will become a global style, affecting your entire page. If you need to style something that Svelte can't identify at compile time, you will need to explicitly opt into global styles by using `:global(...)`. But also keep in mind that you can wrap `:global(...)` around only part of a selector. `.foo :global(.bar) { ... }` will style any `.bar` elements that appear within the component's `.foo` elements. As long as there's some parent element in the current component to start from, partially global selectors like this will almost always be able to get you what you want. From 8bf623b11b590d2556e74d8deaff416fe0e86387 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Fri, 15 Sep 2023 16:33:27 -0700 Subject: [PATCH 4/4] Update documentation/docs/05-misc/01-faq.md --- documentation/docs/05-misc/01-faq.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/05-misc/01-faq.md b/documentation/docs/05-misc/01-faq.md index 100fca325ecd..a5c2330f46c7 100644 --- a/documentation/docs/05-misc/01-faq.md +++ b/documentation/docs/05-misc/01-faq.md @@ -137,7 +137,7 @@ No. Svelte removes the styles from the component and warns you about them in ord Svelte's component style scoping works by generating a class unique to the given component, adding it to the relevant elements in the component that are under Svelte's control, and then adding it to each of the selectors in that component's styles. When the compiler can't see what elements a style selector applies to, there would be two bad options for keeping it: -- If it keeps the selector and adds the scoping class to it, there is no guarantee that the selector will match the expected elements in the component, and they definitely won't if they were created by a child component or `{@html ...}`. +- If it keeps the selector and adds the scoping class to it, the selector will likely not match the expected elements in the component, and they definitely won't if they were created by a child component or `{@html ...}`. - If it keeps the selector without adding the scoping class to it, the given style will become a global style, affecting your entire page. If you need to style something that Svelte can't identify at compile time, you will need to explicitly opt into global styles by using `:global(...)`. But also keep in mind that you can wrap `:global(...)` around only part of a selector. `.foo :global(.bar) { ... }` will style any `.bar` elements that appear within the component's `.foo` elements. As long as there's some parent element in the current component to start from, partially global selectors like this will almost always be able to get you what you want.