Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

breaking: warn on self-closing non-void HTML tags #11114

Merged
merged 4 commits into from
Apr 18, 2024
Merged

breaking: warn on self-closing non-void HTML tags #11114

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
37dfe10
warn on self-closing non-void HTML tags
Rich-Harris Apr 10, 2024
12f3d08
fix tests
Rich-Harris Apr 10, 2024
5966d7b
changeset
Rich-Harris Apr 10, 2024
bc8232b
account for foreign namespace
Rich-Harris Apr 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/nine-cooks-join.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': patch
---

breaking: warn on self-closing non-void HTML tags
18 changes: 17 additions & 1 deletion packages/svelte/src/compiler/phases/2-analyze/validation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,12 @@ import {
import { warn } from '../../warnings.js';
import fuzzymatch from '../1-parse/utils/fuzzymatch.js';
import { binding_properties } from '../bindings.js';
import { ContentEditableBindings, EventModifiers, SVGElements } from '../constants.js';
import {
ContentEditableBindings,
EventModifiers,
SVGElements,
VoidElements
} from '../constants.js';
import { is_custom_element_node } from '../nodes.js';
import {
regex_illegal_attribute_character,
Expand Down Expand Up @@ -565,6 +570,17 @@ const validation = {
}
}

const is_self_closing = context.state.analysis.source[node.end - 2] === '/';
if (is_self_closing && !VoidElements.includes(node.name) && !SVGElements.includes(node.name)) {
Rich-Harris marked this conversation as resolved.
Show resolved Hide resolved
warn(
context.state.analysis.warnings,
node,
context.path,
'invalid-self-closing-tag',
node.name
);
}

context.next({
...context.state,
parent_element: node.name
Expand Down
9 changes: 8 additions & 1 deletion packages/svelte/src/compiler/warnings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,12 @@ const options = {
"The 'customElement' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?"
};

const misc = {
/** @param {string} name */
'invalid-self-closing-tag': (name) =>
`Self-closing HTML tags for non-void elements are ambiguous — use <${name} ...></${name}> rather than <${name} ... />`
};

/** @satisfies {Warnings} */
const warnings = {
...css,
Expand All @@ -254,7 +260,8 @@ const warnings = {
...components,
...legacy,
...block,
...options
...options,
...misc
};

/** @typedef {typeof warnings} AllWarnings */
Expand Down
2 changes: 1 addition & 1 deletion packages/svelte/tests/compiler-errors/samples/component-slot-nested-error-2/main.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<Nested>
<div slot="slot1">
<div>
<div slot="slot2" />
<div slot="slot2"></div>
</div>
</div>
</Nested>
2 changes: 1 addition & 1 deletion packages/svelte/tests/compiler-errors/samples/component-slot-nested-error-3/main.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<Nested>
<div>
<div>
<div slot="slot2" />
<div slot="slot2"></div>
</div>
</div>
</Nested>
2 changes: 1 addition & 1 deletion packages/svelte/tests/compiler-errors/samples/component-slot-nested-error/main.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@

<Nested>
<div slot="slot1">
<div slot="slot2" />
<div slot="slot2"></div>
</div>
</Nested>
16 changes: 8 additions & 8 deletions ...es/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,24 +18,24 @@
.c ~ .g { color: green; }
</style>

<div class="a" />
<div class="a"></div>

{#await promise then value}
<div class="b" />
<div class="b"></div>
{:catch error}
<div class="c" />
<div class="c"></div>
{/await}

{#await promise}
<div class="d" />
<div class="d"></div>
{:catch error}
<div class="e" />
<div class="e"></div>
{/await}

{#await promise}
<div class="f" />
<div class="f"></div>
{:then error}
<div class="g" />
<div class="g"></div>
{/await}

<div class="h" />
<div class="h"></div>
10 changes: 5 additions & 5 deletions packages/svelte/tests/css/samples/general-siblings-combinator-await/input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@
.b ~ .d { color: green; }
</style>

<div class="a" />
<div class="a"></div>

{#await promise}
<div class="b" />
<div class="b"></div>
{:then value}
<div class="c" />
<div class="c"></div>
{:catch error}
<div class="d" />
<div class="d"></div>
{/await}

<div class="e" />
<div class="e"></div>
8 changes: 4 additions & 4 deletions packages/svelte/tests/css/samples/general-siblings-combinator-each-2/input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@
}
</style>

<div class="a" />
<div class="a"></div>

{#each array as item}
<div class="b" />
<div class="c" />
<div class="b"></div>
<div class="c"></div>
{/each}

<div class="d" />
<div class="d"></div>
28 changes: 14 additions & 14 deletions packages/svelte/tests/css/samples/general-siblings-combinator-each-else-nested/input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,43 +35,43 @@
.e ~ .f { color: green; }
</style>

<div class="a" />
<div class="a"></div>

{#each array as a}
<div class="b" />
<div class="b"></div>
{#each array as b}
<div class="c" />
<div class="c"></div>
{:else}
<div class="d" />
<div class="d"></div>
{/each}
{/each}

{#each array as c}
{#each array as d}
<div class="e" />
<div class="e"></div>
{/each}
{:else}
<div class="f" />
<div class="f"></div>
{/each}

{#each array as x}
<div class="g" />
<div class="g"></div>
{#each array as y}
{#each array as z}
<div class="h" />
<div class="h"></div>
{/each}
{:else}
<div class="i" />
<div class="i"></div>
{/each}
<div class="j" />
<div class="j"></div>
{/each}

<div class="k" />
<div class="k"></div>

{#each array as item}
{#each array as item}
<div class="l" />
<div class="l"></div>
{:else}
<div class="m" />
<div class="m"></div>
{/each}
{/each}
{/each}
8 changes: 4 additions & 4 deletions packages/svelte/tests/css/samples/general-siblings-combinator-each-else/input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@
.b ~ .c { color: green; }
</style>

<div class="a" />
<div class="a"></div>

{#each array as item}
<div class="b" />
<div class="b"></div>
{:else}
<div class="c" />
<div class="c"></div>
{/each}

<div class="d" />
<div class="d"></div>
32 changes: 16 additions & 16 deletions packages/svelte/tests/css/samples/general-siblings-combinator-each-nested/input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,49 +65,49 @@
.g ~ .i { color: green; }
</style>

<div class="a" />
<div class="a"></div>

{#each array as item}
<div class="b" />
<div class="c" />
<div class="b"></div>
<div class="c"></div>
{/each}

{#each array as item}
{#each array as item}
{#each array as item}
<div class="d" />
<div class="d"></div>
{/each}
<div class="e" />
<div class="e"></div>
{/each}
<div class="f" />
<div class="f"></div>
{/each}

{#each array as item}
<div class="g" />
<div class="g"></div>
{#each array as item}
<div class="h" />
<div class="h"></div>
{#each array as item}
<div class="i" />
<div class="i"></div>
{/each}
{/each}
{/each}

{#each array as item}
<div class="j" />
<div class="j"></div>
{#each array as item}
<div class="k" />
<div class="k"></div>
{#each array as item}
<div class="l" />
<div class="l"></div>
{/each}
{/each}
{/each}

{#each array as item}
{#each array as item}
{#each array as item}
<div class="m" />
<div class="m"></div>
{/each}
<div class="n" />
<div class="n"></div>
{/each}
<div class="o" />
{/each}
<div class="o"></div>
{/each}
12 changes: 6 additions & 6 deletions packages/svelte/tests/css/samples/general-siblings-combinator-each/input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@
}
</style>

<div />
<div></div>

{#each array as item}
<span class="each" />
<div class="each" />
<span class="each" />
<div class="each" />
<span class="each"></span>
<div class="each"></div>
<span class="each"></span>
<div class="each"></div>
{/each}

<span />
<span></span>
8 changes: 4 additions & 4 deletions ...te/tests/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@
.b ~ .c { color: green; }
</style>

<div class="a" />
<div class="a"></div>

{#if foo}
<div class="b" />
<div class="b"></div>
{:else}
{#each array as item}
<div class="c" />
<div class="c"></div>
{/each}
{/if}

<div class="d" />
<div class="d"></div>
8 changes: 4 additions & 4 deletions packages/svelte/tests/css/samples/general-siblings-combinator-if-not-exhaustive/input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@
.b ~ .c { color: green; }
</style>

<div class="a" />
<div class="a"></div>

{#if foo}
<div class="b" />
<div class="b"></div>
{:else if bar}
<div class="c" />
<div class="c"></div>
{/if}

<div class="d" />
<div class="d"></div>
10 changes: 5 additions & 5 deletions packages/svelte/tests/css/samples/general-siblings-combinator-if/input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@
.c ~ .d { color: green; }
</style>

<div class="a" />
<div class="a"></div>

{#if foo}
<div class="b" />
<div class="b"></div>
{:else if bar}
<div class="c" />
<div class="c"></div>
{:else}
<div class="d" />
<div class="d"></div>
{/if}

<div class="e" />
<div class="e"></div>
Loading
Loading