Sheath rule
blade-no-unquoted-echo-attribute
safe. See Auto-fix.
#Why
In rendered HTML, an unquoted attribute value ends at the first whitespace:
$classes = 'btn btn-primary';
<div class={{ $classes }}> -> <div class="btn" btn-primary>
The browser reads btn as the class and invents a boolean btn-primary
attribute. Whitespace in the data, such as a second class, a user name, or a
title, silently truncates the value. A > or quote in the output can
break the tag entirely.
On a component tag, an unquoted value is cut at the first space before the
component renders. <x-alert class={{ $x }} /> therefore receives the literal
string {{ as its class.
The rule reports any unquoted attribute value containing an echo, on elements
and component tags alike. Escaped @{{ ... }} values and attribute-position
constructs ({{ $attributes }}) are left alone.
#Examples
#Bad
<div class={{ $classes }}>Content</div>
<option value={{ $id }}>{{ $name }}</option>
<div class={{ $type }}-card>Content</div>
<x-alert class={{ $classes }} />
#Good
<div class="{{ $classes }}">Content</div>
<option value="{{ $id }}">{{ $name }}</option>
<div class="{{ $type }}-card">Content</div>
{{-- Static unquoted values have no echo to truncate --}}
<div class=card>Content</div>
#Auto-fix
The fix wraps the whole value in double quotes (single quotes when the value itself contains a double quote). Quoting an attribute value changes nothing about how a correct value renders and repairs the truncation.
{{-- before --}}
<div class={{ $classes }}>Content</div>
{{-- after --}}
<div class="{{ $classes }}">Content</div>
#Notes
- Quoting cannot repair an echo inside a bound component attribute such as
:value={{ $x }}because the bound value is already PHP. See blade-component-tag-integrity.
#Related Rules
- blade-component-tag-integrity - component tags that no longer compile as components
- best-practices-no-duplicate-attrs - duplicate attributes, which truncated values often create