fix(hmr): handle compiler warning caused by injected css selector (#154)

* fix: suppress css warning when no template

* chore: add changeset

* docs(faq): add info about global styles

* docs(faq): fix typo

* feat: update warning handling

* feat: improved warning message handling for extra warnings

* fix: spelling of scopeable and duplicate changeset

* docs: fix typo in changeset

Co-authored-by: dominikg <[email protected]>

Author: bluwy

.changeset/six-ears-grow.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+Improve dev warning message for components including only unscoped styles (fixes #153)

docs/faq.md

@@ -45,6 +45,34 @@ 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>
+```
+
 ### How do I add a Svelte preprocessor from a Vite plugin?
 
 If you are building a Vite plugin that transforms CSS or JS, you can add a `api.sveltePreprocess: PreprocessorGroup` to your Vite plugin definition and it will be added to the list of Svelte preprocessors used at runtime.

packages/playground/preprocess-with-vite/src/App.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
 	const world: string = 'world'; // edit world and save to see hmr update
 </script>
 
 <h1 class="foo">Hello {world}</h1>
 <p>This is styled with scss using darken fn</p>
 <Foo />
+<Bar />
 
 <style lang="scss">
 	$blue: blue;

packages/playground/preprocess-with-vite/src/Bar.svelte

@@ -0,0 +1,11 @@
+<script>
+	import Foo from './Foo.svelte';
+</script>
+
+<Foo />
+
+<style>
+	:global(.note) {
+		background-color: lightblue;
+	}
+</style>

packages/vite-plugin-svelte/src/utils/log.ts

@@ -102,10 +102,9 @@ export const log = {
 export function logCompilerWarnings(warnings: Warning[], options: ResolvedOptions) {
 	const { emitCss, onwarn, isBuild } = options;
 	const warn = isBuild ? warnBuild : warnDev;
-	warnings?.forEach((warning) => {
-		if (!emitCss && warning.code === 'css-unused-selector') {
-			return;
-		}
+	const notIgnoredWarnings = warnings?.filter((w) => !ignoreCompilerWarning(w, isBuild, emitCss));
+	const extraWarnings = buildExtraWarnings(warnings, isBuild);
+	[...notIgnoredWarnings, ...extraWarnings].forEach((warning) => {
 		if (onwarn) {
 			onwarn(warning, warn);
 		} else {
@@ -114,6 +113,40 @@ export function logCompilerWarnings(warnings: Warning[], options: ResolvedOption
 	});
 }
 
+function ignoreCompilerWarning(
+	warning: Warning,
+	isBuild: boolean,
+	emitCss: boolean | undefined
+): boolean {
+	return (
+		(!emitCss && warning.code === 'css-unused-selector') || // same as rollup-plugin-svelte
+		(!isBuild && isNoScopableElementWarning(warning))
+	);
+}
+
+function isNoScopableElementWarning(warning: Warning) {
+	// see https://github.com/sveltejs/vite-plugin-svelte/issues/153
+	return warning.code === 'css-unused-selector' && warning.message.includes('"*"');
+}
+
+function buildExtraWarnings(warnings: Warning[], isBuild: boolean): Warning[] {
+	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;
+}
+
 function warnDev(w: Warning) {
 	log.info.enabled && log.info(buildExtendedLogMessage(w));
 }

packages/vite-plugin-svelte/src/utils/options.ts

@@ -426,8 +426,8 @@ export interface ResolvedOptions extends Options {
 	// extra options
 	root: string;
 	isProduction: boolean;
-	isBuild?: boolean;
-	isServe?: boolean;
+	isBuild: boolean;
+	isServe: boolean;
 	server?: ViteDevServer;
 }