Describe the bug
Embedded JavaScript or CSS is not formatted (except for the code block as a whole being indented by 2 spaces) if there are any liquid tags in it.
In the following example the CSS inside the style tag is formatted correctly, because it does not contain liquid tags, while the JavaScript inside the script tag is not formatted, because it contains liquid tags.
Unformatted source
<style>
a {
color: '#fff'
} b {
color: '#000'
}
</style>
<script>
function wurz({ type, detail: { items } }) {
hurz();
kurz();
purz();
{% if asdf %}
console.log("asdf")
{% endif %}
}
</script>
Expected output
<style>
a {
color: '#fff';
}
b {
color: '#000';
}
</style>
<script>
function wurz({ type, detail: { items } }) {
hurz();
kurz();
purz();
{% if asdf %}
console.log('asdf');
{% endif %}
}
</script>
Actual output
<style>
a {
color: '#fff';
}
b {
color: '#000';
}
</style>
<script>
function wurz({ type, detail: { items } }) {
hurz();
kurz();
purz();
{% if asdf %}
console.log("asdf")
{% endif %}
}
</script>
Describe the bug Embedded JavaScript or CSS is not formatted (except for the code block as a whole being indented by 2 spaces) if there are any liquid tags in it.
Using this .prettierrc.json:
In the following example the CSS inside the style tag is formatted correctly, because it does not contain liquid tags, while the JavaScript inside the script tag is not formatted, because it contains liquid tags.
Unformatted source
Expected output
Actual output
Debugging information