fix: treat CSS attribute selectors as case-insensitive for HTML enumerated attributes

.changeset/css-attribute-case-insensitive.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: treat CSS attribute selectors as case-insensitive for HTML enumerated attributes

packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js

@@ -22,6 +22,50 @@ const whitelist_attribute_selector = new Map([
 	['dialog', ['open']]
 ]);
 
+/**
+ * HTML attributes whose enumerated values are case-insensitive per the HTML spec.
+ * CSS attribute selectors match these values case-insensitively in HTML documents.
+ * @see {@link https://html.spec.whatwg.org/multipage/semantics-other.html#case-sensitivity-of-selectors HTML spec}
+ */
+const case_insensitive_attributes = new Set([
+	'accept-charset',
+	'autocapitalize',
+	'autocomplete',
+	'behavior',
+	'charset',
+	'crossorigin',
+	'decoding',
+	'dir',
+	'direction',
+	'draggable',
+	'enctype',
+	'enterkeyhint',
+	'fetchpriority',
+	'formenctype',
+	'formmethod',
+	'formtarget',
+	'hidden',
+	'http-equiv',
+	'inputmode',
+	'kind',
+	'loading',
+	'method',
+	'preload',
+	'referrerpolicy',
+	'rel',
+	'rev',
+	'role',
+	'rules',
+	'scope',
+	'shape',
+	'spellcheck',
+	'target',
+	'translate',
+	'type',
+	'valign',
+	'wrap'
+]);
+
 /** @type {Compiler.AST.CSS.Combinator} */
 const descendant_combinator = {
 	type: 'Combinator',
@@ -523,7 +567,9 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 						selector.name,
 						selector.value && unquote(selector.value),
 						selector.matcher,
-						selector.flags?.includes('i') ?? false
+						(selector.flags?.includes('i') ?? false) ||
+							(!selector.flags?.includes('s') &&
+								case_insensitive_attributes.has(selector.name.toLowerCase()))
 					)
 				) {
 					return false;

packages/svelte/tests/css/samples/attribute-selector-html-case-insensitive/expected.css

@@ -0,0 +1,11 @@
+	form[method="get"].svelte-xyz h1:where(.svelte-xyz) {
+		color: red;
+	}
+
+	form[method="post"].svelte-xyz h1:where(.svelte-xyz) {
+		color: blue;
+	}
+
+	input[type="text"].svelte-xyz {
+		color: green;
+	}

packages/svelte/tests/css/samples/attribute-selector-html-case-insensitive/expected.html

@@ -0,0 +1 @@
+<form class="svelte-xyz" method="GET"><h1 class="svelte-xyz">Hello</h1></form> <form class="svelte-xyz" method="POST"><h1 class="svelte-xyz">World</h1></form> <input class="svelte-xyz" type="Text" />

packages/svelte/tests/css/samples/attribute-selector-html-case-insensitive/input.svelte

@@ -0,0 +1,23 @@
+<form method="GET">
+	<h1>Hello</h1>
+</form>
+
+<form method="POST">
+	<h1>World</h1>
+</form>
+
+<input type="Text" />
+
+<style>
+	form[method="get"] h1 {
+		color: red;
+	}
+
+	form[method="post"] h1 {
+		color: blue;
+	}
+
+	input[type="text"] {
+		color: green;
+	}
+</style>