Prettier 1.16.4
Playground link

--parser babylon

When using JS template literals inside the multiparser, line breaks before long template expressions can add invalid spaces/newlines to CSS.

Prettier sometimes adds a line break before the opening ${, which can change e.g. flex-direction: row-reverse; to something like flex-direction: row -reverse.

This breaks the syntax of the rendered CSS.

Input:

const long_cond = true;

<style jsx>{`
.class{
	flex-direction: column${long_cond && long_cond && long_cond ? "-reverse" : ""};
}
`}</style>

Output:

const long_cond = true;

<style jsx>{`
  .class {
    flex-direction: column
      ${long_cond && long_cond && long_cond ? "-reverse" : ""};
  }
`}</style>;

With the template substitution, this eventually gets inserted into the DOM as the following css:

  .class {
    flex-direction: column -reverse
  }

Note the space between column and -reverse.

Expected behavior:

const long_cond = true;

<style jsx>{`
  .class {
    flex-direction: column${
        long_cond && long_cond && long_cond 
        ? "-reverse" 
        : ""};
  }
`}</style>;

...which should produce the following css:

  .class {
    flex-direction: column-reverse
  }