Does paren space work correctly inside tagged templates?

[sirreal]

Via https://github.com/Automattic/wp-calypso/pull/42694#pullrequestreview-419011075

Looking at the prettier playground, it does appear to format these so perhaps inserting space in the ${} is something wp-prettier is missing. The prettier playground formats these lines identically, as I'd expect:

const SpaceOrNoSpace = styled.div`
  transform: ${(props)=>(props.isComplete?'rotateY(180deg)':'rotateY(0)')};
  transform: ${ ( props ) => ( props.isComplete ? 'rotateY(180deg)' : 'rotateY(0)' ) };
`;

[sirreal]

@jsnajdr @scinos I'd be curious to get your thoughts on this. You can see the behavior in #29.

[scinos]

It comes from

      parts = parts
        .slice(0, atPlaceholderIndex)
        .concat(["${", expression, "}" + suffix])
        .concat(rest);

(https://github.com/Automattic/wp-prettier/blob/wp-prettier-2.0.5/src/language-js/embed.js#L304)

It is missing parenSpace, I have a PR almost ready to fix it.

[jsnajdr]

Oh yes, that was found in Gutenberg code some time ago and I pushed a fix to the wp-master branch: https://github.com/Automattic/wp-prettier/commit/01fd780c7c5a8edd9e3ef7daea49e650fa42cee5

But then never got around to publish it -- you and @scinos took over 🙂

The tagged templates are formatted by a completely different code path than regular template string without a tag. That's because the tagged template content can have a recognized format (CSS in CSS-in-JS libraries) and are formatted as such.

[jsnajdr]

I have a PR almost ready to fix it.

@scinos If you're already done with the fix, you can compare with my version in https://github.com/Automattic/wp-prettier/commit/01fd780c7c5a8edd9e3ef7daea49e650fa42cee5 🙂 If you're not done yet, you can simply use the patch and just apply and release it.