📝 The behavior of handling nested template literals is weird

[angryLid]

Environment information

CLI:
  Version:                      1.8.3
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_DIR:                unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v16.20.2"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "npm/8.19.4"

Biome Configuration:
  Status:                       unset

Workspace:
  Open Documents:               0

Configuration

No response

Playground link

https://biomejs.dev/playground/?code=aQBtAHAAbwByAHQAIAB7ACAAYwBzAHMALAAgAGgAdABtAGwALAAgAEwAaQB0AEUAbABlAG0AZQBuAHQAIAB9ACAAZgByAG8AbQAgACIAbABpAHQAIgA7AAoAaQBtAHAAbwByAHQAIAB7ACAAYwB1AHMAdABvAG0ARQBsAGUAbQBlAG4AdAAsACAAcAByAG8AcABlAHIAdAB5ACwAIABzAHQAYQB0AGUAIAB9ACAAZgByAG8AbQAgACIAbABpAHQALwBkAGUAYwBvAHIAYQB0AG8AcgBzAC4AagBzACIAOwAKAAoAQABjAHUAcwB0AG8AbQBFAGwAZQBtAGUAbgB0ACgAIgBtAGsALQB0AGEAYgBsAGUAIgApAAoAZQB4AHAAbwByAHQAIABjAGwAYQBzAHMAIABNAGsAVABhAGIAbABlACAAZQB4AHQAZQBuAGQAcwAgAEwAaQB0AEUAbABlAG0AZQBuAHQAIAB7AAoAIAAgAEAAcAByAG8AcABlAHIAdAB5ACgAewAgAHQAeQBwAGUAOgAgAEEAcgByAGEAeQAgAH0AKQAKACAAIABkAGEAdABhAFMAbwB1AHIAYwBlADoAIABSAGUAYwBvAHIAZAA8AHMAdAByAGkAbgBnACwAIABhAG4AeQA%2BAFsAXQAgAD0AIABbAF0AOwAKAAoAIAAgAEAAcAByAG8AcABlAHIAdAB5ACgAewAgAHQAeQBwAGUAOgAgAEEAcgByAGEAeQAgAH0AKQAKACAAIABjAG8AbAB1AG0AbgBzADoAIABSAGUAYwBvAHIAZAA8AHMAdAByAGkAbgBnACwAIABhAG4AeQA%2BAFsAXQAgAD0AIABbAF0AOwAKAAoAIAAgAEAAcwB0AGEAdABlACgAKQAKACAAIABnAGUAdAAgAF8AZABhAHQAYQBTAG8AdQByAGMAZQAoACkAIAB7AAoAIAAgACAAIABjAG8AbgBzAHQAIABkAGEAdABhAEkAbgBkAGUAeABlAHMAIAA9ACAAdABoAGkAcwAuAGMAbwBsAHUAbQBuAHMALgBtAGEAcAAoACgAYwBvAGwAdQBtAG4AKQAgAD0APgAgAGMAbwBsAHUAbQBuAC4AZABhAHQAYQBJAG4AZABlAHgAKQA7AAoAIAAgACAAIAByAGUAdAB1AHIAbgAgAHQAaABpAHMALgBkAGEAdABhAFMAbwB1AHIAYwBlAC4AbQBhAHAAKAAoAGkAdABlAG0AKQAgAD0APgAgAHsACgAgACAAIAAgACAAIAByAGUAdAB1AHIAbgAgAGQAYQB0AGEASQBuAGQAZQB4AGUAcwAuAG0AYQBwACgAKABkAGEAdABhAEkAbgBkAGUAeAApACAAPQA%2BACAAaQB0AGUAbQBbAGQAYQB0AGEASQBuAGQAZQB4AF0AIAA%2FAD8AIAAiACIAKQA7AAoAIAAgACAAIAB9ACkAOwAKACAAIAB9AAoACgAgACAAQABzAHQAYQB0AGUAKAApAAoAIAAgAHMAZQBsAGUAYwB0AGUAZABJAG4AZABlAHgAZQBzADoAIABSAGUAYwBvAHIAZAA8AG4AdQBtAGIAZQByACwAIABiAG8AbwBsAGUAYQBuAD4AIAA9ACAAewB9ADsACgAKACAAIABoAGEAbgBkAGwAZQBDAGwAaQBjAGsAUgBvAHcAKABpAG4AZABlAHgAOgAgAG4AdQBtAGIAZQByACkAIAB7AAoAIAAgACAAIAB0AGgAaQBzAC4AcwBlAGwAZQBjAHQAZQBkAEkAbgBkAGUAeABlAHMAIAA9ACAAewAKACAAIAAgACAAIAAgAC4ALgAuAHQAaABpAHMALgBzAGUAbABlAGMAdABlAGQASQBuAGQAZQB4AGUAcwAsAAoAIAAgACAAIAAgACAAWwBpAG4AZABlAHgAXQA6ACAAIQB0AGgAaQBzAC4AcwBlAGwAZQBjAHQAZQBkAEkAbgBkAGUAeABlAHMAWwBpAG4AZABlAHgAXQAsAAoAIAAgACAAIAB9ADsACgAgACAAIAAgAHQAaABpAHMALgBkAGkAcwBwAGEAdABjAGgARQB2AGUAbgB0ACgACgAgACAAIAAgACAAIABuAGUAdwAgAEMAdQBzAHQAbwBtAEUAdgBlAG4AdAAoACIAcgBvAHcALQBzAGUAbABlAGMAdABlAGQAIgAsACAAewAKACAAIAAgACAAIAAgACAAIABkAGUAdABhAGkAbAA6ACAATwBiAGoAZQBjAHQALgBrAGUAeQBzACgAdABoAGkAcwAuAHMAZQBsAGUAYwB0AGUAZABJAG4AZABlAHgAZQBzACkALAAKACAAIAAgACAAIAAgAH0AKQAsAAoAIAAgACAAIAApADsACgAgACAAfQAKAAoAIAAgAHIAZQBuAGQAZQByACgAKQAgAHsACgAgACAAIAAgAHIAZQB0AHUAcgBuACAAaAB0AG0AbABgADwAdABhAGIAbABlACAAYwBsAGEAcwBzAD0AIgBtAGsALQB0AGEAYgBsAGUAIgA%2BAAoAIAAgACAAIAAgACAAPAB0AGgAZQBhAGQAIABjAGwAYQBzAHMAPQAiAG0AawAtAHQAYQBiAGwAZQAtAGgAZQBhAGQAZQByACIAPgAKACAAIAAgACAAIAAgACAAIAA8AHQAcgA%2BAAoAIAAgACAAIAAgACAAIAAgACAAIAAkAHsAdABoAGkAcwAuAGMAbwBsAHUAbQBuAHMALgBtAGEAcAAoACgAYwBvAGwAdQBtAG4AKQAgAD0APgAgAGgAdABtAGwAYAA8AHQAaAA%2BACQAewBjAG8AbAB1AG0AbgAuAHQAaQB0AGwAZQB9ADwALwB0AGgAPgBgACkAfQAKACAAIAAgACAAIAAgACAAIAA8AC8AdAByAD4ACgAgACAAIAAgACAAIAA8AC8AdABoAGUAYQBkAD4ACgAgACAAIAAgACAAIAA8AHQAYgBvAGQAeQAgAGMAbABhAHMAcwA9ACIAbQBrAC0AdABhAGIAbABlAC0AYgBvAGQAeQAiAD4ACgAgACAAIAAgACAAIAAgACAAJAB7AHQAaABpAHMALgBfAGQAYQB0AGEAUwBvAHUAcgBjAGUALgBtAGEAcAAoAAoAIAAgACAAIAAgACAAIAAgACAAIAAoAGkAdABlAG0ALAAgAGkAbgBkAGUAeAApACAAPQA%2BAAoAIAAgACAAIAAgACAAIAAgACAAIAAgACAAaAB0AG0AbABgADwAdAByAAoAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgAHMAdAB5AGwAZQA9ACIAJAB7AHQAaABpAHMALgBzAGUAbABlAGMAdABlAGQASQBuAGQAZQB4AGUAcwBbAGkAbgBkAGUAeABdAAoAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAA%2FACAATQBrAFQAYQBiAGwAZQAuAHMAZQBsAGUAYwB0AGUAZABTAHQAeQBsAGUACgAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgADoAIAAiACIAfQAiAAoAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgAEAAYwBsAGkAYwBrAD0AIgAkAHsAKAApACAAPQA%2BACAAdABoAGkAcwAuAGgAYQBuAGQAbABlAEMAbABpAGMAawBSAG8AdwAoAGkAbgBkAGUAeAApAH0AIgAKACAAIAAgACAAIAAgACAAIAAgACAAIAAgAD4ACgAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAJAB7AGkAdABlAG0ALgBtAGEAcAAoACgAaQApACAAPQA%2BACAAaAB0AG0AbABgADwAdABkAD4AJAB7AGkAfQA8AC8AdABkAD4AYAApAH0ACgAgACAAIAAgACAAIAAgACAAIAAgACAAIAA8AC8AdAByAD4AYAAsAAoAIAAgACAAIAAgACAAIAAgACkAfQAKACAAIAAgACAAIAAgADwALwB0AGIAbwBkAHkAPgAKACAAIAAgACAAPAAvAHQAYQBiAGwAZQA%2BAGAAOwAKACAAIAB9AAoACgAgACAAcwB0AGEAdABpAGMAIABzAGUAbABlAGMAdABlAGQAUwB0AHkAbABlACAAPQAgACIAYgBhAGMAawBnAHIAbwB1AG4AZAA6ACAAIwAzADMANgA2ADkAOQAyADIAIgA7AAoAIAAgAHMAdABhAHQAaQBjACAAcwB0AHkAbABlAHMAIAA9ACAAYwBzAHMAYAAKACAAIAAgACAALgBtAGsALQB0AGEAYgBsAGUAIAB7AAoAIAAgACAAIAAgACAAdwBpAGQAdABoADoAIAAxADAAMAAlADsACgAgACAAIAAgAH0ACgAgACAAIAAgAC4AbQBrAC0AdABhAGIAbABlAC0AaABlAGEAZABlAHIAIAB7AAoAIAAgACAAIAAgACAAYgBhAGMAawBnAHIAbwB1AG4AZAAtAGMAbwBsAG8AcgA6ACAAcgBnAGIAYQAoADAALAAgADAALAAgADAALAAgADAALgAwADUAKQA7AAoAIAAgACAAIAB9AAoAIAAgACAAIAAuAG0AawAtAHQAYQBiAGwAZQAtAGIAbwBkAHkAIAB7AAoAIAAgACAAIAAgACAAYwB1AHIAcwBvAHIAOgAgAHAAbwBpAG4AdABlAHIAOwAKACAAIAAgACAAfQAKACAAIABgADsACgB9AAoA

Code of Conduct

• I agree to follow Biome's Code of Conduct

[ah-yu]

Hi, thanks for reporting. I compared the output with Prettier, and the only difference is that the interpolation is broken into multiple lines. Is that what you were referring to?

Edit: It might be related to line width calculation. When I set the line width to 81, the playground shows an exact match

[angryLid]

Hi, thanks for reporting. I compared the output with Prettier, and the only difference is that the interpolation is broken into multiple lines. Is that what you were referring to?

Edit: It might be related to line width calculation. When I set the line width to 81, the playground shows an exact match

It’s challenging for me to put into words, but perhaps the screenshots will suffice to convey the idea. please have a glimpse of the code from the biome playground:

and the same code from prettier playground:

the corresponding link https://prettier.io/playground/#N4Igxg9gdgLgprEAuEBLAtgBwgJxgAmHzAGcSAafACxnQBtKAZVGAUTrnQQIF98AzHBHT4AOiDotxAblFQM2PIWIBXEjGHtO3SpiGY4eAJ6V1AQ3j4+g4WIksA9ABM4kHBdwkAdACsSMuTkAATA1DXQtLlgACnF0AGsAWhgzACMOcQBKOTgAD0UCMDozMnwAWXiAFTSOfDz4KCcSfGY2DiiCYDl8fCC9CANjaKIYIwMkfABBHHcjK2yoHqcLMwBlCBUcMDgJgCVXXCcAHnUcVCgAc0ozKCMAPgBtAF18AF58Z9kobt7+wdHhvhRuMpjMzHMeAsepA6Cp0FASHsDjhjqdzld8Dd7s83h8nl8fkFzPBolD8Bc4AQAPrLFLrTbbUmEH7Q6DqfC0swASUaeTgzXeMCoqG8MLhCK86DMmGi0TF8MybzuxAgsPhXk5PJcuUyXx6PRwlM2iyFIo1K3pWzgkulspYnEVr2VXUW+oNRpwi01vNy-JtMui3u1juV9vQDyDeReAH5o3Ysnr9ZDEzxAq6iSkSWSSHAOGB4E4tXzEfh9m5jlA4alDJRUhBVXAbsr3sAeATXVQbk4OABhSRgeK7CAAd2i521E0r6GrOEVLrdpu8ObzBaLvoFzNdbq8O8XXmXrlXPv55BZ+oe46jEwAhHuD-m4IXjyQLz6nqet1ZEz0904RZgLDAKhWAAN24WJPx6KA4GHfAezCTQwJicQhGHRJ7wLcRKHnN19RcFJUDoCYAHlUh8Q8vHiOAjBIaI71zQ9HzXflMg-XD5jY-VdR+VNvldQ1eRwJkcPdGBjWoWg6AAAyOFJ0jgYhijIV44iSOSMhAO4zx6WSqEbJxFJKEgVJABJkhqOBEj0swXBwcQtMg-VZJwBz2LdAASYA93lCUpQDHyQwk+gZKFO5PJ8rwYBYDgeCOBxQqkzJeLc-A4pgFztNS+LrKcVzcNkusnDmIojJMsz1MswqjHszKek8vcaQtDYrX9CCUp6Md4HQShLx1JVatwmhgucgb2PUIwOBM+rhSXBiHyfbV+VfbUnlGty4wqap5P3OaC1WUYMkc9r8AmcRxFTEA1rdEJ+3iKbgCZJ0gRmrxO0aXtbqHUdeqSs6jtwvLjrq4Aw1asdAqG6TZNyzzUFi+LcsS5KgbSlypM49jfsctKqsBrKKruKSUzTHpiVQMB8Awx99omhT3nEVIzAHC4hBURoJgAYgAZi5gA2XmAE4BYAJmFgJXTJinxo4DdSBIKSz0lNSLM3djh1QJwhQmABGAAGXWAFJvysRXyosqz9MMVXcMZ5nWcaRIYVwCYcAuRnol1yhPfwb3da8XWAFZuM-ZGeiV8z5MSKrrbdUIcBIZ38Gwc54BwY3kaJuReJAcgQAGKK2WQUAzBmEcAAUS4QEhkBAMw6GHcFq9z1J3AHSlVjMLhmGg5B+DrnNm9bqiYFWACwHRZB0pUOBc5zdBUEnnBp9zvJBgwbg68qQwoBL1B+V7-uZ5AEh0Q4ABFFQIHgA+6AHkA-FyVZT7gC+r7gG+74AR0v+Ay-0auUAlESNBR8j4c4gHSmYQi6IezCClDXOudBwEn0uBwSYMB0qoFSCoX+hhu7vyQH3W+R9IYAHVhTwBIGPOAqwq4sFQCBFgRga5y3ASBaeRZYCrDAGcTAMBJiNBphwD+R9+g5lIe4TANc9D8kMGBcB5wcx4D-mYC48DCGH1zgBeOhga6M2rHQZITcQB6BTqQjWQpkAAA5PYgENN-VAhoVFqLMCI3OclzGayoMgYWuc1BwC2gAohd9ODVicC4JwjAbgXBUKouAAAxXAUoMET0ATgiAIAeA8CAA

[ah-yu]

The indentation used in Prettier playground is space, whereas in Biome it is tab. I think setting indentStyle to space may fix your problem.

[angryLid]

The indentation used in Prettier playground is space, whereas in Biome it is tab. I think setting indentStyle to space may fix your problem.

Thanks for sticking with this. I find it’s probably prettier's –embedded-language-formatting option that’s causing this result. When set to ‘auto’, the code appears more friendly.

[ah-yu]

The embedded formatting of Biome is still under development. You can track the progress at #3334. Closing this for now