[fix] be able to silence more warnings (#6504)

including css-unused-selector, unused-export-let, module-script-reactive-declaration
Fixes #5954
Related to #5281

CHANGELOG.md

@@ -21,6 +21,7 @@
 * Support `bind:group` in SSR ([#4621](https://github.com/sveltejs/svelte/pull/4621))
 * Add sourcemaps to html elements ([#6427](https://github.com/sveltejs/svelte/pull/6427))
 * Make `<script>` and `<style>` end tag parsing more robust ([#6511](https://github.com/sveltejs/svelte/pull/6511))
+* Make it possible to silence more warnings ([#5954](https://github.com/sveltejs/svelte/issues/5954))
 
 ## 3.38.3
 

src/compiler/compile/Component.ts

@@ -36,6 +36,7 @@ import { DecodedSourceMap, RawSourceMap } from '@ampproject/remapping/dist/types
 import { clone } from '../utils/clone';
 import compiler_warnings from './compiler_warnings';
 import compiler_errors from './compiler_errors';
+import { extract_ignores_above_position, extract_svelte_ignore_from_comments } from '../utils/extract_svelte_ignore';
 
 interface ComponentOptions {
 	namespace?: string;
@@ -171,12 +172,17 @@ export default class Component {
 		}
 
 		this.walk_module_js();
+
+		this.push_ignores(this.ast.instance ? extract_ignores_above_position(this.ast.instance.start, this.ast.html.children) : []);
 		this.walk_instance_js_pre_template();
+		this.pop_ignores();
 
 		this.fragment = new Fragment(this, ast.html);
 		this.name = this.get_unique_name(name);
 
+		this.push_ignores(this.ast.instance ? extract_ignores_above_position(this.ast.instance.start, this.ast.html.children) : []);
 		this.walk_instance_js_post_template();
+		this.pop_ignores();
 
 		this.elements.forEach(element => this.stylesheet.apply(element));
 		if (!compile_options.customElement) this.stylesheet.reify();
@@ -476,6 +482,14 @@ export default class Component {
 	}
 
 	extract_exports(node) {
+		const ignores = extract_svelte_ignore_from_comments(node);
+		if (ignores.length) this.push_ignores(ignores);
+		const result = this._extract_exports(node);
+		if (ignores.length) this.pop_ignores();
+		return result;
+	}
+
+	private _extract_exports(node) {
 		if (node.type === 'ExportDefaultDeclaration') {
 			this.error(node, compiler_errors.default_export);
 		}
@@ -1169,6 +1183,9 @@ export default class Component {
 		}> = [];
 
 		this.ast.instance.content.body.forEach(node => {
+			const ignores = extract_svelte_ignore_from_comments(node);
+			if (ignores.length) this.push_ignores(ignores);
+
 			if (node.type === 'LabeledStatement' && node.label.name === '$') {
 				this.reactive_declaration_nodes.add(node);
 
@@ -1246,6 +1263,8 @@ export default class Component {
 					declaration
 				});
 			}
+
+			if (ignores.length) this.pop_ignores();
 		});
 
 		const lookup = new Map();

src/compiler/compile/css/Stylesheet.ts

@@ -7,6 +7,7 @@ import Component from '../Component';
 import { CssNode } from './interfaces';
 import hash from '../utils/hash';
 import compiler_warnings from '../compiler_warnings';
+import { extract_ignores_above_position } from '../../utils/extract_svelte_ignore';
 
 function remove_css_prefix(name: string): string {
 	return name.replace(/^-((webkit)|(moz)|(o)|(ms))-/, '');
@@ -447,10 +448,13 @@ export default class Stylesheet {
 	}
 
 	warn_on_unused_selectors(component: Component) {
+		const ignores = !this.ast.css ? [] : extract_ignores_above_position(this.ast.css.start, this.ast.html.children);
+		component.push_ignores(ignores);
 		this.children.forEach(child => {
 			child.warn_on_unused_selector((selector: Selector) => {
 				component.warn(selector.node, compiler_warnings.css_unused_selector(this.source.slice(selector.node.start, selector.node.end)));
 			});
 		});
+		component.pop_ignores();
 	}
 }

src/compiler/compile/nodes/Comment.ts

@@ -3,8 +3,6 @@ import Component from '../Component';
 import Node from './shared/Node';
 import TemplateScope from './shared/TemplateScope';
 
-const pattern = /^\s*svelte-ignore\s+([\s\S]+)\s*$/m;
-
 export default class Comment extends Node {
 	type: 'Comment';
 	data: string;
@@ -13,8 +11,6 @@ export default class Comment extends Node {
 	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
 		super(component, parent, scope, info);
 		this.data = info.data;
-
+		this.ignores = info.ignores;
-		const match = pattern.exec(this.data);
-		this.ignores = match ? match[1].split(/[^\S]/).map(x => x.trim()).filter(Boolean) : [];
 	}
 }

src/compiler/compile/render_dom/index.ts

@@ -9,6 +9,7 @@ import Block from './Block';
 import { ClassDeclaration, FunctionExpression, Node, Statement, ObjectExpression, Expression } from 'estree';
 import { apply_preprocessor_sourcemap } from '../../utils/mapped_code';
 import { RawSourceMap, DecodedSourceMap } from '@ampproject/remapping/dist/types/types';
+import { flatten } from '../../utils/flatten';
 
 export default function dom(
 	component: Component,
@@ -550,18 +551,5 @@ export default function dom(
 		body.push(declaration);
 	}
 
-	return { js: flatten(body, []), css };
+	return { js: flatten(body), css };
-}
-
-function flatten(nodes: any[], target: any[]) {
-	for (let i = 0; i < nodes.length; i += 1) {
-		const node = nodes[i];
-		if (Array.isArray(node)) {
-			flatten(node, target);
-		} else {
-			target.push(node);
-		}
-	}
-
-	return target;
 }

src/compiler/interfaces.ts

@@ -24,6 +24,12 @@ export interface MustacheTag extends BaseNode {
 	expression: Node;
 }
 
+export interface Comment extends BaseNode {
+	type: 'Comment';
+	data: string;
+	ignores: string[];
+}
+
 export type DirectiveType = 'Action'
 | 'Animation'
 | 'Binding'
@@ -52,7 +58,8 @@ export type TemplateNode = Text
 | MustacheTag
 | BaseNode
 | Directive
-| Transition;
+| Transition
+| Comment;
 
 export interface Parser {
 	readonly template: string;

src/compiler/parse/state/tag.ts

@@ -6,6 +6,7 @@ import { is_void } from '../../utils/names';
 import { Parser } from '../index';
 import { Directive, DirectiveType, TemplateNode, Text } from '../../interfaces';
 import fuzzymatch from '../../utils/fuzzymatch';
+import { extract_svelte_ignore } from '../../utils/extract_svelte_ignore';
 import parser_errors from '../errors';
 
 // eslint-disable-next-line no-useless-escape
@@ -64,7 +65,8 @@ export default function tag(parser: Parser) {
 			start,
 			end: parser.index,
 			type: 'Comment',
-			data
+			data,
+			ignores: extract_svelte_ignore(data)
 		});
 
 		return;

src/compiler/utils/extract_svelte_ignore.ts

@@ -0,0 +1,34 @@
+import { TemplateNode } from '../interfaces';
+import { flatten } from './flatten';
+
+const pattern = /^\s*svelte-ignore\s+([\s\S]+)\s*$/m;
+
+export function extract_svelte_ignore(text: string): string[] {
+	const match = pattern.exec(text);
+	return match ? match[1].split(/[^\S]/).map(x => x.trim()).filter(Boolean) : [];
+}
+
+export function extract_svelte_ignore_from_comments<Node extends { leadingComments?: Array<{value: string}> }>(node: Node): string[] {
+	return flatten((node.leadingComments || []).map(comment => extract_svelte_ignore(comment.value)));
+}
+
+export function extract_ignores_above_position(position: number, template_nodes: TemplateNode[]): string[] {
+	const previous_node_idx = template_nodes.findIndex(child => child.end === position);
+	if (previous_node_idx === -1) {
+		return [];
+	}
+
+	for (let i = previous_node_idx; i >= 0; i--) {
+		const node = template_nodes[i];
+		if (node.type !== 'Comment' && node.type !== 'Text') {
+			return [];
+		}
+		if (node.type === 'Comment') {
+			if (node.ignores.length) {
+				return node.ignores;
+			}
+		}
+	}
+
+	return [];
+}

src/compiler/utils/flatten.ts

@@ -0,0 +1,14 @@
+export function flatten<T>(nodes: T[][], target?: T[]): T[];
+export function flatten<T>(nodes: T[], target?: T[]): T[];
+export function flatten(nodes: any[], target: any[] = []): any[] {
+	for (let i = 0; i < nodes.length; i += 1) {
+		const node = nodes[i];
+		if (Array.isArray(node)) {
+			flatten(node, target);
+		} else {
+			target.push(node);
+		}
+	}
+
+	return target;
+}

test/parser/samples/comment-with-ignores/input.svelte

@@ -0,0 +1 @@
+<!-- svelte-ignore foo bar -->

test/parser/samples/comment-with-ignores/output.json

@@ -0,0 +1,16 @@
+{
+	"html": {
+		"start": 0,
+		"end": 30,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 30,
+				"type": "Comment",
+				"data": " svelte-ignore foo bar ",
+				"ignores": ["foo", "bar"]
+			}
+		]
+	}
+}

test/parser/samples/comment/output.json

@@ -8,7 +8,8 @@
 				"start": 0,
 				"end": 18,
 				"type": "Comment",
-				"data": " a comment "
+				"data": " a comment ",
+				"ignores": []
 			}
 		]
 	}

test/validator/samples/silence-warnings-2/input.svelte

@@ -0,0 +1,9 @@
+<script context="module">
+	let foo;
+</script>
+
+<!-- svelte-ignore unused-export-let module-script-reactive-declaration -->
+<script>
+	export let unused;
+	$: reactive = foo;
+</script>

test/validator/samples/silence-warnings-2/warnings.json

@@ -0,0 +1 @@
+[]

test/validator/samples/silence-warnings/input.svelte

@@ -0,0 +1,15 @@
+<script context="module">
+	let foo;
+</script>
+
+<script>
+	// svelte-ignore unused-export-let
+	export let unused;
+	// svelte-ignore module-script-reactive-declaration
+	$: reactive = foo;
+</script>
+
+<!-- svelte-ignore css-unused-selector -->
+<style>
+	.unused {}
+</style>

test/validator/samples/silence-warnings/warnings.json

@@ -0,0 +1 @@
+[]