Template literal indentation

[anthonator]

I imagine this is a common enough issue that it's been reported before but I wasn't able to find anything in the open or closed issue log. Apologies if this is a duplicate.

Lines 7-13 in the snippet below throw an indent error. I can "fix" the issue by adding TemplateLiteral to indent's ignoredNodes option. I'd ask that this fix be added unless there's a fundamental reason why this is a bad idea.

const build = font => `
  @font-face {
    font-display: ${font.display || 'swap'};
    font-family: ${font.family};
    font-style: ${font.style || 'normal'};
    font-weight: ${font.weight};
    src: ${
      font.formats.map(
        format => (
          `url("${format.file}") format("${format.type}")`
        ),
      )
    }
  }
`;

export default fonts => fonts.map(font => build(font));

[ljharb]

What's the error you get?

Ignoring the node is definitely not a great idea.

[anthonator]

[ljharb]

ah. since the contents of the template literal aren't actually indented, since they're not code (putting CSS in it is irrelevant), the indentation the rule wants is actually correct, even thought it looks gross:

const build = font => `
  @font-face {
    font-display: ${font.display || 'swap'};
    font-family: ${font.family};
    font-style: ${font.style || 'normal'};
    font-weight: ${font.weight};
    src: ${
  font.formats.map(
    format => (
      `url("${format.file}") format("${format.type}")`
    ),
  )
}
  }
`;

This imo is just the cost of using template literals to write pseudocode like this :-/ ignoring the node seems fine for your use case, but in the general case, we recommend CSS-in-JS, so this wouldn't come up.

[anthonator]

We actually are using CSS-in-JS. This is a utility for defining font faces we use in emotion.

Thanks for taking the time to discuss!