css-in-js: extra space in var(...) #5465
Description
Prettier 1.15.2
Playground link
--parser typescript
--single-quote
--tab-width 5
--use-tabsInput:
function getVaraintOverrides(props: IProps) {
switch (props.varient) {
case EVarient.Link:
return css`
color: var(--global--color--gray-900);
background-color: transparent;
&:hover {
background-color: var(--global--color--gray-200);
color: var(--global--color--link);
}
`;
default:
return css`
background-color: var(--global--color--${props.varient});
&:hover {
background-color: var(--global--color--${props.varient}__one);
}
&:active {
background-color: var(--global--color--${props.varient}__two);
}
`;
}
}Output:
function getVaraintOverrides(props: IProps) {
switch (props.varient) {
case EVarient.Link:
return css`
color: var(--global--color--gray-900);
background-color: transparent;
&:hover {
background-color: var(--global--color--gray-200);
color: var(--global--color--link);
}
`;
default:
return css`
background-color: var(--global--color-- ${props.varient});
&:hover {
background-color: var(
--global--color-- ${props.varient}__one
);
}
&:active {
background-color: var(
--global--color-- ${props.varient}__two
);
}
`;
}
}Expected behavior:
function getVaraintOverrides(props: IProps) {
switch (props.varient) {
case EVarient.Link:
return css`
color: var(--global--color--gray-900);
background-color: transparent;
&:hover {
background-color: var(--global--color--gray-200);
color: var(--global--color--link);
}
`;
default:
return css`
- background-color: var(--global--color-- ${props.varient});
+ background-color: var(--global--color--${props.varient});
&:hover {
background-color: var(
- --global--color-- ${props.varient}__one
+ --global--color--${props.varient}__one
);
}
&:active {
background-color: var(
- --global--color-- ${props.varient}__two
+ --global--color--${props.varient}__two
);
}
`;
}
}