Silence "No scopable elements found in template" via attribute

[techniq]

Describe the problem

In an upcoming LayerChart PR that removes Tailwind and leverages pure CSS via <style> blocks, I encounter a lot of the following warnings:

No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS.

Click to view warnings

2:09:03 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/Voronoi.svelte:179:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:03 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/Axis.svelte:553:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:03 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/Rule.svelte:252:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:04 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/Grid.svelte:281:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:04 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/Highlight.svelte:572:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:04 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/Labels.svelte:211:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:04 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/AnnotationLine.svelte:156:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:04 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/AnnotationPoint.svelte:141:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:04 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/AnnotationRange.svelte:161:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:04 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/Calendar.svelte:168:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:04 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/MonthPath.svelte:91:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:04 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/Hull.svelte:139:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:04 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/AnnotationPoint.svelte:141:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:04 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/AnnotationRange.svelte:161:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:04 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/Axis.svelte:553:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:04 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/AnnotationLine.svelte:156:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:04 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/Calendar.svelte:168:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:04 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/Grid.svelte:281:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:05 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/Highlight.svelte:572:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:05 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/Hull.svelte:139:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:05 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/Labels.svelte:211:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:05 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/Rule.svelte:252:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:05 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/Voronoi.svelte:179:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
2:09:05 PM [vite-plugin-svelte] /Users/techniq/Documents/Development/open-source/layerchart/packages/layerchart/dist/components/MonthPath.svelte:91:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.

This is due to needing to use :global(...) to target inner component classes and the class itself does not have any DOM itself (ex. Grid).

The use of :global() is also needed to enable LayerChart to apply classes to Canvas primitives (such as Rect, Circle, etc).

As far as I can tell there is no way to disable this warning through the use of an attribute or annotation on <style> (IIRC older versions of Svelte 3 had a <style global> attribute).

Describe the proposed solution

Add a way to annotation a <style> block to silence the vite-plugin-svelte-css-no-scopable-elements warning

Alternatives considered

While we could tell the user to add the following to svelte.config.js to silence the warning, this isn't a great experience.

const config = {
  onwarn: (warning, handler) => {
    if (warning.code === 'vite-plugin-svelte-css-no-scopable-elements') return;
      handler(warning);
    }
};

We could also move all of these classes to a separate layerchart.css or separate *.css per component (ex. grid.css) but I very much enjoy keeping the styles co-located with the component (and would end up needing to create over 70 new files) 😞

Is there something available that I'm overlooking to make this experience better for development and users? If not, is there something we could add to allow a library to control this setting? Lastly, should these warnings even be shown when the package is imported? I actually only see this warning when running one of the examples and was surprised it doesn't show up in svelte-check.

Thanks!

Importance

would make my life easier

[dominikg]

libraries controlling v-p-s settings is a can of worms i don't want to get into.

In case of this warning it might make sense to silence it (or move to debug logging) for code in node_modules as users themselves won't be able to do something about it immediately.

However please hear me out. Using style blocks that way is not great. If you export these components through a barrel file, all the css is going to end up in the application even if the user only uses one component. You also don't have great control over when and where that style block is added or bundled, and of course it can cause situations where one component overrides a completely unrelated global style. So having this warning by default makes a lot of sense to me.

in a semi recent version, vite-plugin-svelte enabled a feature in vite that allows it to scope style blocks to the js module of a component, but this only works if there are no unscoped global styles.

The question i'd like to ask is what other ways there are for you to pass styles through to children. now that svelte has builtin clsx support and class attribute can be spread as well, maybe there is a way for you to avoid the use of unscoped :global ?

[techniq]

Thanks @dominikg, this all makes sense.

However please hear me out. Using style blocks that way is not great. If you export these components through a barrel file, all the css is going to end up in the application even if the user only uses one component.

This is a very good point and I do leverage a barrel file (but also supporting deeper import to reduce JS deps).

You also don't have great control over when and where that style block is added or bundled, and of course it can cause situations where one component overrides a completely unrelated global style. So having this warning by default makes a lot of sense to me.

I put all the styles on various CSS @layer (and non-layered styles override) as well as wrap selectors in :where (0 specificity) to make sure they can be overridden, but there are cases where internally LayerChart components can not control the source order and are on the same CSS layer (all LayerChart primitives are on @layer base and the rest are on @layer components but I've had to make sure @layer components components do not reference another @layer components (which I only had 1 example of this, and was a simple workaround).

The question i'd like to ask is what other ways there are for you to pass styles through to children. now that svelte has builtin clsx support and class attribute can be spread as well, maybe there is a way for you to avoid the use of unscoped :global ?

There are default component styles that need set (and used to leverage Tailwind but moved these out to vanilla CSS to support more projects and overall simplify setup.

It sounds like the best approach is to probably to move all of these :global classes to {component}.css files and import ./{component}.css for each component, or I guess this would still trigger the css to load from a barrel import.

I've iterated on this a lot but let me see what else I can come up with. The separate .css files would at least remove the warning, but not keep the payload size down.