fix: ignore css_unused_selector error if style is global

.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>