diff --git a/.changeset/tidy-moons-repeat.md b/.changeset/tidy-moons-repeat.md new file mode 100644 index 0000000000..3f8f924c00 --- /dev/null +++ b/.changeset/tidy-moons-repeat.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: align CSS attribute selector case-sensitivity with the HTML spec diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js index dff6bb9b5a..c6ee3de270 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js +++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js @@ -23,47 +23,56 @@ const whitelist_attribute_selector = new Map([ ]); /** - * HTML attributes whose enumerated values are case-insensitive per the HTML spec. - * CSS attribute selectors match these values case-insensitively in HTML documents. + * Attribute values that CSS attribute selectors match ASCII 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', 'accept-charset', - 'autocapitalize', - 'autocomplete', - 'behavior', + 'align', + 'alink', + 'axis', + 'bgcolor', 'charset', - 'crossorigin', - 'decoding', + 'checked', + 'clear', + 'codetype', + 'color', + 'compact', + 'declare', + 'defer', 'dir', 'direction', - 'draggable', + 'disabled', 'enctype', - 'enterkeyhint', - 'fetchpriority', - 'formenctype', - 'formmethod', - 'formtarget', - 'hidden', + 'face', + 'frame', + 'hreflang', 'http-equiv', - 'inputmode', - 'kind', - 'loading', + 'lang', + 'language', + 'link', + 'media', 'method', - 'preload', - 'referrerpolicy', + 'multiple', + 'nohref', + 'noresize', + 'noshade', + 'nowrap', + 'readonly', 'rel', 'rev', - 'role', 'rules', 'scope', + 'scrolling', + 'selected', 'shape', - 'spellcheck', 'target', - 'translate', + 'text', 'type', 'valign', - 'wrap' + 'valuetype', + 'vlink' ]); /** @type {Compiler.AST.CSS.Combinator} */ diff --git a/packages/svelte/tests/css/samples/attribute-selector-html-case-sensitivity/_config.js b/packages/svelte/tests/css/samples/attribute-selector-html-case-sensitivity/_config.js new file mode 100644 index 0000000000..caaba1a79a --- /dev/null +++ b/packages/svelte/tests/css/samples/attribute-selector-html-case-sensitivity/_config.js @@ -0,0 +1,21 @@ +import { test } from '../../test'; + +export default test({ + warnings: [ + { + filename: 'SvelteComponent.svelte', + code: 'css_unused_selector', + message: 'Unused CSS selector "input[autocomplete="on"]"', + start: { + character: 178, + column: 1, + line: 16 + }, + end: { + character: 202, + column: 25, + line: 16 + } + } + ] +}); diff --git a/packages/svelte/tests/css/samples/attribute-selector-html-case-sensitivity/expected.css b/packages/svelte/tests/css/samples/attribute-selector-html-case-sensitivity/expected.css new file mode 100644 index 0000000000..b8c0bc4308 --- /dev/null +++ b/packages/svelte/tests/css/samples/attribute-selector-html-case-sensitivity/expected.css @@ -0,0 +1,11 @@ + div[lang="en"].svelte-xyz { + color: red; + } + + a[hreflang="en"].svelte-xyz { + color: blue; + } + + /* (unused) input[autocomplete="on"] { + color: green; + }*/ diff --git a/packages/svelte/tests/css/samples/attribute-selector-html-case-sensitivity/expected.html b/packages/svelte/tests/css/samples/attribute-selector-html-case-sensitivity/expected.html new file mode 100644 index 0000000000..33286d46c2 --- /dev/null +++ b/packages/svelte/tests/css/samples/attribute-selector-html-case-sensitivity/expected.html @@ -0,0 +1 @@ +
Hello
World diff --git a/packages/svelte/tests/css/samples/attribute-selector-html-case-sensitivity/input.svelte b/packages/svelte/tests/css/samples/attribute-selector-html-case-sensitivity/input.svelte new file mode 100644 index 0000000000..2f5a2f70c3 --- /dev/null +++ b/packages/svelte/tests/css/samples/attribute-selector-html-case-sensitivity/input.svelte @@ -0,0 +1,19 @@ +
Hello
+ +World + + + +