Repository: sveltejs/svelte (JavaScript)
Date: 2020-08-09 02:50:29+00:00
Task type: Feature

Issue:
css-unused-selector: Add to message which selector is unused
**Is your feature request related to a problem? Please describe.**
The css-unused-selector warning message does not contain the name of the unused selector. Adding this would help in scenarios like `svelte-check` where people do not see the code but only get a list of warnings/errors.

**Describe the solution you'd like**
Enhancing the message like this: `Unused CSS selector ".bla"`

**Describe alternatives you've considered**
Infer the name from `start` / `end`, but this does not map back to original code in a good way (if people are using preprocessors like less/scss)

**How important is this feature to you?**
Nice to have, not super important but I think it's implemented quickly since you already have the `start`/`end` position.

**Additional context**
Related ticket in language-tools: https://github.com/sveltejs/language-tools/issues/434

css-unused-selector: Add to message which selector is unused
**Is your feature request related to a problem? Please describe.**
The css-unused-selector warning message does not contain the name of the unused selector. Adding this would help in scenarios like `svelte-check` where people do not see the code but only get a list of warnings/errors.

**Describe the solution you'd like**
Enhancing the message like this: `Unused CSS selector ".bla"`

**Describe alternatives you've considered**
Infer the name from `start` / `end`, but this does not map back to original code in a good way (if people are using preprocessors like less/scss)

**How important is this feature to you?**
Nice to have, not super important but I think it's implemented quickly since you already have the `start`/`end` position.

**Additional context**
Related ticket in language-tools: https://github.com/sveltejs/language-tools/issues/434



Issue discussion:

Solution patch:
diff --git a/src/compiler/compile/css/Stylesheet.ts b/src/compiler/compile/css/Stylesheet.ts
--- a/src/compiler/compile/css/Stylesheet.ts
+++ b/src/compiler/compile/css/Stylesheet.ts
@@ -435,7 +435,7 @@ export default class Stylesheet {
 			child.warn_on_unused_selector((selector: Selector) => {
 				component.warn(selector.node, {
 					code: `css-unused-selector`,
-					message: `Unused CSS selector`
+					message: `Unused CSS selector "${this.source.slice(selector.node.start, selector.node.end)}"`
 				});
 			});
 		});


Test patch:
diff --git a/test/css/samples/empty-class/_config.js b/test/css/samples/empty-class/_config.js
--- a/test/css/samples/empty-class/_config.js
+++ b/test/css/samples/empty-class/_config.js
@@ -2,7 +2,7 @@ export default {
 	warnings: [{
 		filename: "SvelteComponent.svelte",
 		code: `css-unused-selector`,
-		message: "Unused CSS selector",
+		message: 'Unused CSS selector ".x"',
 		start: {
 			line: 4,
 			column: 1,
diff --git a/test/css/samples/global-with-unused-descendant/_config.js b/test/css/samples/global-with-unused-descendant/_config.js
--- a/test/css/samples/global-with-unused-descendant/_config.js
+++ b/test/css/samples/global-with-unused-descendant/_config.js
@@ -13,7 +13,7 @@ export default {
 			3:     color: red;
 			4:   }
 		`,
-		message: 'Unused CSS selector',
+		message: 'Unused CSS selector ":global(.foo) .bar"',
 		pos: 9,
 		start: {
 			character: 9,
diff --git a/test/css/samples/omit-scoping-attribute-descendant/_config.js b/test/css/samples/omit-scoping-attribute-descendant/_config.js
--- a/test/css/samples/omit-scoping-attribute-descendant/_config.js
+++ b/test/css/samples/omit-scoping-attribute-descendant/_config.js
@@ -1,7 +1,7 @@
 export default {
 	warnings: [{
 		code: `css-unused-selector`,
-		message: 'Unused CSS selector',
+		message: 'Unused CSS selector "div > p"',
 		start: {
 			line: 8,
 			column: 1,
diff --git a/test/css/samples/unused-selector-leading/_config.js b/test/css/samples/unused-selector-leading/_config.js
--- a/test/css/samples/unused-selector-leading/_config.js
+++ b/test/css/samples/unused-selector-leading/_config.js
@@ -3,7 +3,7 @@ export default {
 		{
 			filename: "SvelteComponent.svelte",
 			code: `css-unused-selector`,
-			message: "Unused CSS selector",
+			message: 'Unused CSS selector ".foo"',
 			start: {
 				line: 4,
 				column: 1,
@@ -27,7 +27,7 @@ export default {
 		{
 			filename: "SvelteComponent.svelte",
 			code: `css-unused-selector`,
-			message: "Unused CSS selector",
+			message: 'Unused CSS selector ".baz"',
 			start: {
 				line: 4,
 				column: 13,
diff --git a/test/css/samples/unused-selector-string-concat/_config.js b/test/css/samples/unused-selector-string-concat/_config.js
--- a/test/css/samples/unused-selector-string-concat/_config.js
+++ b/test/css/samples/unused-selector-string-concat/_config.js
@@ -2,7 +2,7 @@ export default {
 	warnings: [
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".fooaa"',
 			frame:
 				` 9: <style>
 				10:   .foo {color: red;}
@@ -16,7 +16,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".foobb"',
 			frame:
 				`10:   .foo {color: red;}
 				11:   .fooaa {color: red;}
@@ -30,7 +30,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".foodd"',
 			frame:
 				`12:   .foobb {color: red;}
 				13:   .foocc {color: red;}
@@ -44,7 +44,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".bbbar"',
 			frame:
 				`18:   .dd {color: red;}
 				19:   .aabar {color: red;}
@@ -58,7 +58,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".ccbar"',
 			frame:
 				`19:   .aabar {color: red;}
 				20:   .bbbar {color: red;}
@@ -72,7 +72,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".ddbar"',
 			frame:
 				`20:   .bbbar {color: red;}
 				21:   .ccbar {color: red;}
@@ -86,7 +86,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".fooaabar"',
 			frame:
 				`21:   .ccbar {color: red;}
 				22:   .ddbar {color: red;}
@@ -100,7 +100,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".foobbbar"',
 			frame:
 				`22:   .ddbar {color: red;}
 				23:   .fooaabar {color: red;}
@@ -114,7 +114,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".fooccbar"',
 			frame:
 				`23:   .fooaabar {color: red;}
 				24:   .foobbbar {color: red;}
@@ -128,7 +128,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".unused"',
 			frame:
 				`26:   .fooddbar {color: red;}
 				27:   .baz {color: red;}
diff --git a/test/css/samples/unused-selector-ternary-concat/_config.js b/test/css/samples/unused-selector-ternary-concat/_config.js
--- a/test/css/samples/unused-selector-ternary-concat/_config.js
+++ b/test/css/samples/unused-selector-ternary-concat/_config.js
@@ -13,7 +13,7 @@ export default {
 				14:   .unused {color: blue;}
 				      ^
 				15: </style>`,
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".unused"',
 			pos: 198,
 			start: {
 				character: 198,
diff --git a/test/css/samples/unused-selector-ternary-nested/_config.js b/test/css/samples/unused-selector-ternary-nested/_config.js
--- a/test/css/samples/unused-selector-ternary-nested/_config.js
+++ b/test/css/samples/unused-selector-ternary-nested/_config.js
@@ -2,7 +2,7 @@ export default {
 	warnings: [
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".hover.unused"',
 			frame: `
 				13:   .thing.active {color: blue;}
 				14:   .hover { color: blue; }
@@ -16,7 +16,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".unused"',
 			frame: `
 				15:   .hover.unused { color: blue; }
 				16:
diff --git a/test/css/samples/unused-selector-ternary/_config.js b/test/css/samples/unused-selector-ternary/_config.js
--- a/test/css/samples/unused-selector-ternary/_config.js
+++ b/test/css/samples/unused-selector-ternary/_config.js
@@ -6,7 +6,7 @@ export default {
 	warnings: [{
 		filename: "SvelteComponent.svelte",
 		code: `css-unused-selector`,
-		message: "Unused CSS selector",
+		message: 'Unused CSS selector ".maybeactive"',
 		start: {
 			line: 16,
 			column: 1,
diff --git a/test/css/samples/unused-selector/_config.js b/test/css/samples/unused-selector/_config.js
--- a/test/css/samples/unused-selector/_config.js
+++ b/test/css/samples/unused-selector/_config.js
@@ -2,7 +2,7 @@ export default {
 	warnings: [{
 		filename: "SvelteComponent.svelte",
 		code: `css-unused-selector`,
-		message: "Unused CSS selector",
+		message: 'Unused CSS selector ".bar"',
 		start: {
 			line: 8,
 			column: 1,