Styled-components and custom css properties #5614
Description
Prettier 1.15.3
Playground link
--parser babylon
--single-quote
--trailing-comma es5Input:
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;
`;