Skip to content

Linter Rule: Disallow misleading values on data-turbo-permanent

Rule: turbo-permanent-no-misleading-value

Description

Ensure that data-turbo-permanent is used correctly on HTML elements. The data-turbo-permanent attribute marks elements that should persist across page navigations in Turbo Drive.

Rationale

data-turbo-permanent is active whenever the attribute is present, so data-turbo-permanent="false" behaves the same as data-turbo-permanent or data-turbo-permanent="true". Allowing values is misleading and should be disallowed to avoid confusion.

Examples

✅ Good

html
<div id="cart-counter" data-turbo-permanent>1 item</div>

🚫 Bad

html
<div id="cart-counter" data-turbo-permanent="true">1 item</div>
Attribute `data-turbo-permanent` should not have a value. `data-turbo-permanent="true"` is redundant, because Turbo only checks whether the attribute is present. Use `data-turbo-permanent` instead. (turbo-permanent-no-misleading-value)
<div id="cart-counter" data-turbo-permanent="false">1 item</div>
Attribute `data-turbo-permanent` should not have a value. `data-turbo-permanent="false"` still makes the element permanent, because Turbo only checks whether the attribute is present. Use `data-turbo-permanent` instead. (turbo-permanent-no-misleading-value)
Duplicate ID `cart-counter` found. IDs must be unique within a document. (html-no-duplicate-ids)
<div id="cart-counter" data-turbo-permanent="foo">1 item</div>
Attribute `data-turbo-permanent` should not have a value. `data-turbo-permanent="foo"` still makes the element permanent, because Turbo only checks whether the attribute is present. Use `data-turbo-permanent` instead. (turbo-permanent-no-misleading-value)
Duplicate ID `cart-counter` found. IDs must be unique within a document. (html-no-duplicate-ids)

References

Released under the MIT License.