template string bad formatting example

    const formatted_display = `${display.substring(0,1)}h ${display.substring(1,3)}m ${display.substring(3,5)}s`

https://jlongster.github.io/prettier/#{"content"%3A" const formatted_display %3D `%24{display.substring(0%2C1)}h %24{display.substring(1%2C3)}m %24{display.substring(3%2C5)}s`"%2C"options"%3A{"printWidth"%3A80%2C"tabWidth"%3A2%2C"singleQuote"%3Afalse%2C"trailingComma"%3Afalse%2C"bracketSpacing"%3Atrue}}

(Edit by vjeux: this issue has been fixed)

[jlongster]

Interesting, yeah we can play with that! Note that this is the output with this PR:

const Test = styled.div`
  ${customCss => customCss.map(({ selector, key, value }) => `
      ${selector} {
          ${key}: ${value};
      }`)}
`;

The thing that’s hard about this is that it’s by definition taking the original user’s formatting into account because they are in a string. So the number of spaces to indent the line starting with ${selector} is just going to be blindy copied. Hopefully #749 helps with this because it won’t break things up for you anymore, and users just sometimes have to readjust things. But it makes getting this right automatically almost impossible.

[clempat]

For me it would be enough. But would that mean that any template string use in other context than styled-component would have the current formatting ?

Looks like the formatting rules applied otherwhere should not be the same as inside template string variable. so for exemple “&&” does not trigger line.

For the indent it is true that it is not the same as the text out of js should keep the indent.

For @gaelduplessix example it is funny to see how it act when you take

const Test = styled.div`
${(customCss) => customCss.map(
  ({ selector, key, value }) => `
    ${selector} {
        ${key}: ${value};
    }`
)}
`

outputs

const Test = styled.div`
${customCss => customCss.map(({ selector, key, value }) => `
    ${selector} {
        ${key}: ${value};
    }`)}
`;

https://jlongster.github.io/prettier/#{"content"%3A"const Test %3D styled.div`\n%24{(customCss) %3D> customCss.map(\n ({ selector%2C key%2C value }) %3D> `\n %24{selector} {\n %24{key}%3A %24{value}%3B\n }`\n)%7D%5Cn%60%22%2C%22options%22%3A%7B%22printWidth%22%3A80%2C%22tabWidth%22%3A2%2C%22singleQuote%22%3Afalse%2C%22trailingComma%22%3Afalse%2C%22bracketSpacing%22%3Atrue%2C%22jsxBracketSameLine%22%3Afalse%2C%22doc%22%3Atrue%7D%7D

and just adding the tab on the string template bloc so vs:

const Test = styled.div`
  ${(customCss) => customCss.map(
    ({ selector, key, value }) => `
      ${selector} {
          ${key}: ${value};
      }`
  )}
`

outputs

const Test = styled.div`
  ${customCss => customCss.map(({ selector, key, value }) => `
      ${selector} {
          ${key}: ${value};
      }`)}
`;

https://jlongster.github.io/prettier/#{"content"%3A"const Test %3D styled.div`\n %24{(customCss) %3D> customCss.map(\n ({ selector%2C key%2C value }) %3D> `\n %24{selector} {\n %24{key}%3A %24{value}%3B\n }`\n )%7D%5Cn%60%22%2C%22options%22%3A%7B%22printWidth%22%3A80%2C%22tabWidth%22%3A2%2C%22singleQuote%22%3Afalse%2C%22trailingComma%22%3Afalse%2C%22bracketSpacing%22%3Atrue%2C%22jsxBracketSameLine%22%3Afalse%2C%22doc%22%3Atrue%7D%7D