Support for embedded languages does not work if these in turn contain liquid tags

[trollkotze]

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:

{
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true
}

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>

Debugging information

• OS: Linux Mint 20.1
• Version: 0.4.0
• Prettier Version: 2.7.1

[charlespwd]

:wave: we do not plan to support this. I have added clarifications in KNOWN_ISSUES.