Skip to content

Conversation

Rich-Harris
Copy link
Member

Closes #1221. This removes the 'No scopable elements found in template' warning. While it's true that global styles are generally best avoided, they are sometimes necessary, and the advice in the FAQ to move them to another file doesn't add up, to me.

If you have component-specific global files and replace a <style> with an import './Foo.css' you haven't improved Vite's ability to optimise the CSS, you've just added a new file and slightly increased the distance between the markup and the styles.

If on the other hand you move all the styles to a global.css file, as the FAQ suggests, then in addition to increasing the distance between the markup and the styles, you've reduced Vite's ability to optimise stuff, because styles for components that aren't even imported will be present in the resulting bundle. (This would have been true in the first place for people using barrel files, but not everyone uses barrel files.)

Either way, it's worse. Rather than being opinionated here we should just let component authors do what's right for them.

@teemingc teemingc merged commit bb4b033 into main Sep 24, 2025
7 of 8 checks passed
@teemingc teemingc deleted the remove-unscopable-global-warning branch September 24, 2025 02:29
@github-actions github-actions bot mentioned this pull request Sep 24, 2025
@techniq
Copy link

techniq commented Sep 24, 2025

@Rich-Harris thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Silence "No scopable elements found in template" via attribute
3 participants