Skip to content

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

Merged
Rich-Harris merged 3 commits intosveltejs:mainfrom
veeceey:fix/issue-17207-css-attribute-case-insensitive
Feb 17, 2026
Merged

fix: treat CSS attribute selectors as case-insensitive for HTML enumerated attributes#17712
Rich-Harris merged 3 commits intosveltejs:mainfrom
veeceey:fix/issue-17207-css-attribute-case-insensitive

Conversation

@veeceey
Copy link
Contributor

@veeceey veeceey commented Feb 15, 2026

Fixes #17207

CSS attribute selectors for HTML enumerated attributes (like method, type, dir, etc.) are supposed to match case-insensitively per the HTML spec. Browsers handle this correctly — form[method="get"] matches <form method="GET">. But Svelte's CSS pruning was doing a strict case-sensitive comparison, which meant:

  1. The selector got incorrectly flagged as unused (no css_unused_selector warning was shown when spreads were involved, but the selector was still pruned)
  2. The scoping class wasn't applied to the matching element
  3. Styles silently disappeared in production builds

The fix adds a set of known HTML attributes with case-insensitive enumerated values (sourced from the HTML spec) and uses it during CSS attribute selector matching. The explicit CSS s flag still overrides this behavior, as expected.

Before

<form method="GET">
  <h1>Hello</h1>
</form>

<style>
  form[method="get"] h1 { color: red; }
  /* ^ incorrectly pruned, <h1> not styled */
</style>

After

The selector correctly matches and styles are applied.

Test plan

  • Added attribute-selector-html-case-insensitive CSS test covering form[method] and input[type] cases
  • All 179 existing CSS tests pass
  • Verified the existing attribute-selector-case-sensitive test (using s flag) still works correctly
  • Compiler error tests and validator tests all pass

…rated attributes

CSS attribute selectors for HTML enumerated attributes (like `method`,
`type`, `dir`, etc.) should match case-insensitively per the HTML spec,
matching actual browser behavior. Previously, `form[method="get"]` would
not match `<form method="GET">` during CSS pruning, causing the selector
to be incorrectly marked as unused and the scoping class to not be
applied to the element.

Closes sveltejs#17207
@changeset-bot
Copy link

changeset-bot bot commented Feb 15, 2026

🦋 Changeset detected

Latest commit: f194574

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
svelte Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Member

@Rich-Harris Rich-Harris left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you

@Rich-Harris Rich-Harris merged commit 60a4251 into sveltejs:main Feb 17, 2026
16 checks passed
@github-actions github-actions bot mentioned this pull request Feb 17, 2026
Rich-Harris pushed a commit that referenced this pull request Feb 17, 2026
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## svelte@5.51.3

### Patch Changes

- fix: prevent event delegation logic conflicting between svelte
instances ([#17728](#17728))

- fix: treat CSS attribute selectors as case-insensitive for HTML
enumerated attributes
([#17712](#17712))

- fix: locate Rollup annontaion friendly to JS downgraders
([#17724](#17724))

- fix: run effects in pending snippets
([#17719](#17719))

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Css attribute pruning is not case insensitive

2 participants