fix: use single quotes for x-data attributes with tojson
The Jinja |tojson filter outputs JSON with double quotes. When used
inside a double-quoted HTML attribute, these quotes break the attribute
parsing causing "expected expression, got '}'" errors.
Solution: Use single quotes for x-data attributes so JSON double quotes
don't conflict:
<div x-data='languageSelector("fr", {{ langs|tojson }})'>
Updated:
- language_selector.html macro (all 3 variants)
- shop/base.html language selector
- LANG-002 and LANG-003 architecture rules documentation
- Validator to detect double-quoted x-data with tojson
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -2809,22 +2809,22 @@ class ArchitectureValidator:
|
||||
line_number=i,
|
||||
message="Complex language selector should use languageSelector() function",
|
||||
context=line.strip()[:80],
|
||||
suggestion="Use: x-data=\"languageSelector('{{ lang }}', {{ langs|tojson }})\"",
|
||||
suggestion="Use: x-data='languageSelector(\"{{ lang }}\", {{ langs|tojson }})'",
|
||||
)
|
||||
|
||||
# LANG-003: Check for tojson|safe in HTML attributes (breaks parsing)
|
||||
# In x-data attributes, |tojson WITHOUT |safe is correct (quotes become ")
|
||||
# In <script> blocks, |tojson|safe is correct (raw JSON is valid)
|
||||
if "|tojson|safe" in line and "x-data=" in line:
|
||||
# LANG-003: Check for double-quoted x-data with tojson (breaks parsing)
|
||||
# Double quotes + tojson outputs raw JSON double quotes that break HTML
|
||||
# Use single quotes for x-data when using tojson
|
||||
if 'x-data="' in line and "|tojson" in line:
|
||||
self._add_violation(
|
||||
rule_id="LANG-003",
|
||||
rule_name="Do not use tojson|safe in HTML attributes",
|
||||
rule_name="Use single quotes for x-data with tojson",
|
||||
severity=Severity.ERROR,
|
||||
file_path=file_path,
|
||||
line_number=i,
|
||||
message="|tojson|safe in x-data breaks HTML attribute parsing",
|
||||
message="Double-quoted x-data with |tojson breaks HTML (JSON has double quotes)",
|
||||
context=line.strip()[:80],
|
||||
suggestion="Remove |safe: {{ variable|tojson }} - quotes become " which browsers decode",
|
||||
suggestion="Use single quotes: x-data='func({{ data|tojson }})'",
|
||||
)
|
||||
except Exception:
|
||||
pass # Skip files that can't be read
|
||||
|
||||
Reference in New Issue
Block a user