Styled-components and custom css properties

[fcaldera]

Prettier 1.15.3
Playground link

--parser babylon
--single-quote
--trailing-comma es5

Input:

import React from 'react';
import styled from 'styled-components';
import Card from './Card';

const StyledPurchaseCard = styled(Card)`
  min-width: 200px;
  background-color: var(--${props => props.color});
  color: #fff;
`;

Output:

import React from 'react';
import styled from 'styled-components';
import Card from './Card';

const StyledPurchaseCard = styled(Card)`
  min-width: 200px;
  background-color: var(-- ${props => props.color});
  color: #fff;
`;

Expected behavior:
Prettier should not add a space between the custom property name prefix -- and the template literal placeholder ${props => props.color}. It causes an invalid property value and the style is not applied.

import React from 'react';
import styled from 'styled-components';
import Card from './Card';

const StyledPurchaseCard = styled(Card)`
  min-width: 200px;
  background-color: var(--${props => props.color});
  color: #fff;
`;

[thorn0]

fixed by #7883