fix: ignore css_unused_selector error if style is global (#990)

Author: baseballyama

.changeset/nice-clocks-buy.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': patch
+---
+
+fix: ignore `css_unused_selector` compile error if `<style>` tag has `global` attribute

packages/eslint-plugin-svelte/src/rules/valid-compile.ts

@@ -2,6 +2,34 @@ import { createRule } from '../utils/index.js';
 import type { SvelteCompileWarnings, Warning } from '../shared/svelte-compile-warns/index.js';
 import { getSvelteCompileWarnings } from '../shared/svelte-compile-warns/index.js';
 import { getSourceCode } from '../utils/compat.js';
+import type { Position } from 'svelte-eslint-parser/lib/ast/common.js';
+
+const ignores: string[] = [
+	'missing-declaration',
+	// Svelte v4
+	'dynamic-slot-name',
+	// Svelte v5
+	'invalid-slot-name'
+] as const;
+
+const unusedSelectorWarnings: string[] = ['css_unused_selector', 'css-unused-selector'] as const;
+
+function isGlobalStyleNode(
+	globalStyleRanges: [Position, Position][],
+	start?: Position,
+	end?: Position
+) {
+	if (start == null || end == null) {
+		return false;
+	}
+	return globalStyleRanges.some(([rangeStart, rangeEnd]) => {
+		return (
+			(rangeStart.line < start.line ||
+				(rangeStart.line === start.line && rangeStart.column <= start.column)) &&
+			(end.line < rangeEnd.line || (end.line === rangeEnd.line && end.column <= rangeEnd.column))
+		);
+	});
+}
 
 export default createRule('valid-compile', {
 	meta: {
@@ -39,21 +67,19 @@ export default createRule('valid-compile', {
 			: (warning) => warning;
 
 		const ignoreWarnings = Boolean(context.options[0]?.ignoreWarnings);
-
-		const ignores = [
-			'missing-declaration',
-			// Svelte v4
-			'dynamic-slot-name',
-			// Svelte v5
-			'invalid-slot-name'
-		];
+		const globalStyleRanges: [Position, Position][] = [];
 
 		/**
 		 * report
 		 */
 		function report({ warnings, kind }: SvelteCompileWarnings) {
 			for (const warn of warnings) {
-				if (warn.code && ignores.includes(warn.code)) {
+				if (
+					warn.code &&
+					(ignores.includes(warn.code) ||
+						(isGlobalStyleNode(globalStyleRanges, warn.start, warn.end) &&
+							unusedSelectorWarnings.includes(warn.code)))
+				) {
 					continue;
 				}
 				const reportWarn = kind === 'warn' ? transform(warn) : warn;
@@ -71,6 +97,15 @@ export default createRule('valid-compile', {
 		}
 
 		return {
+			SvelteStyleElement(node) {
+				const { attributes } = node.startTag;
+				for (const attr of attributes) {
+					if (attr.type === 'SvelteAttribute' && attr.key.name === 'global') {
+						globalStyleRanges.push([node.loc.start, node.loc.end]);
+						break;
+					}
+				}
+			},
 			'Program:exit'() {
 				const result = getSvelteCompileWarnings(context);
 				if (ignoreWarnings && result.kind === 'warn') {

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/invalid-svelte-ignore01-svelte4-errors.yaml

@@ -3,7 +3,8 @@
   line: 6
   column: 3
   suggestions: null
-- message: 'A11y: A form label must be associated with a control.(a11y-label-has-associated-control)'
+- message: 'A11y: A form label must be associated with a
+    control.(a11y-label-has-associated-control)'
   line: 6
   column: 3
   suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/style-without-global-01-errors.yaml

@@ -0,0 +1,4 @@
+- message: Unused CSS selector "input"(css-unused-selector)
+  line: 2
+  column: 2
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/style-without-global-01-input.svelte

@@ -0,0 +1,5 @@
+<style>
+	input {
+		@apply bg-surface-50-900-token h-full overflow-hidden;
+	}
+</style>

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/style-without-global-01-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": "^3.0.0 || ^4.0.0"
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/style-without-global-02-errors.yaml

@@ -0,0 +1,6 @@
+- message: |-
+    Unused CSS selector "input"
+    https://svelte.dev/e/css_unused_selector(css_unused_selector)
+  line: 2
+  column: 2
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/style-without-global-02-input.svelte

@@ -0,0 +1,5 @@
+<style>
+	input {
+		@apply bg-surface-50-900-token h-full overflow-hidden;
+	}
+</style>

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/style-without-global-02-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": ">=5.0.0-0"
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/valid/global-style-input.svelte

@@ -0,0 +1,5 @@
+<style global>
+	input {
+		@apply bg-surface-50-900-token h-full overflow-hidden;
+	}
+</style>