fix: remove unscopable global warning (#1223)

* fix: remove unscopable global warning

* remove FAQ entry

* Apply suggestion from @teemingc

---------

Co-authored-by: Tee Ming <chewteeming01@gmail.com>

Author: Rich-Harris

.changeset/quiet-wings-learn.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+fix: remove unscopable global styles warning

docs/faq.md

@@ -54,34 +54,6 @@ Bad:
 <script type="text/typescript"></script>
 ```
 
-### 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 `<style>` tag. The stylesheet files can then be imported directly in JS and take advantage of Vite's own style processing. It would also significantly improve the dev server startup time.
-
-Good:
-
-```scss
-/* global.scss */
-html {
-  color: $text-color;
-}
-```
-
-```js
-// main.js
-import './global.scss';
-```
-
-Bad:
-
-```svelte
-<style lang="scss">
-  :global(html) {
-    color: $text-color;
-  }
-</style>
-```
-
 ### 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.

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
  */