diff --git a/.changeset/quiet-wings-learn.md b/.changeset/quiet-wings-learn.md
new file mode 100644
index 000000000..7007d21b6
--- /dev/null
+++ b/.changeset/quiet-wings-learn.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+fix: remove unscopable global styles warning
diff --git a/docs/faq.md b/docs/faq.md
index dc09c840f..1af15b7af 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -54,34 +54,6 @@ Bad:
```
-### Where should I put my global styles?
-
-Global styles should always be placed in their own stylesheet files whenever possible, and not in a Svelte component's `
-```
-
### Why can't `cssHash` be set in development mode?
`cssHash` is fixed in development for CSS HMR in Svelte components, ensuring that the hash value is stable based on the file name so that styles are only updated when changed.
diff --git a/packages/vite-plugin-svelte/src/utils/log.js b/packages/vite-plugin-svelte/src/utils/log.js
index 23172e369..61b32bc82 100644
--- a/packages/vite-plugin-svelte/src/utils/log.js
+++ b/packages/vite-plugin-svelte/src/utils/log.js
@@ -146,9 +146,7 @@ export function logCompilerWarnings(svelteRequest, warnings, options) {
let warn = isBuild ? warnBuild : warnDev;
/** @type {import('svelte/compiler').Warning[]} */
const handledByDefaultWarn = [];
- const notIgnored = warnings?.filter((w) => !ignoreCompilerWarning(w, isBuild, emitCss));
- const extra = buildExtraWarnings(warnings, isBuild);
- const allWarnings = [...notIgnored, ...extra];
+ const allWarnings = warnings?.filter((w) => !ignoreCompilerWarning(w, isBuild, emitCss));
if (sendViaWS) {
const _warn = warn;
/** @type {(w: import('svelte/compiler').Warning) => void} */
@@ -203,31 +201,6 @@ function isNoScopableElementWarning(warning) {
return warning.code === 'css_unused_selector' && warning.message.includes('"*"');
}
-/**
- *
- * @param {import('svelte/compiler').Warning[]} warnings
- * @param {boolean} isBuild
- * @returns {import('svelte/compiler').Warning[]}
- */
-function buildExtraWarnings(warnings, isBuild) {
- const extraWarnings = [];
- if (!isBuild) {
- const noScopableElementWarnings = warnings.filter((w) => isNoScopableElementWarning(w));
- if (noScopableElementWarnings.length > 0) {
- // in case there are multiple, use last one as that is the one caused by our *{} rule
- const noScopableElementWarning =
- noScopableElementWarnings[noScopableElementWarnings.length - 1];
- extraWarnings.push({
- ...noScopableElementWarning,
- code: 'vite-plugin-svelte-css-no-scopable-elements',
- message:
- "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."
- });
- }
- }
- return extraWarnings;
-}
-
/**
* @param {import('svelte/compiler').Warning} w
*/