On Friday, I was working on converting a very complex tooltip component in React from CSS Modules using Stylus to styled-components.

Some of the styles were used by multiple selectors, like this:

.tooltip.left,
.tooltip.left::before
{
left: 0;
right: initial;
transform: translateX(0);
}

At first I thought I wouldn't be able to share those styles in the styled-component version, and would have to write them out twice, like this:

styled.div`
left: 0;
right: initial;
transform: translateX(0);
&::before
{
left: 0;
right: initial;
transform: translateX(0);
}
`

Today I realized the answer lies in the fact that styled components are built on string interpolation. If I want to reuse some styles, I can store them as a string in another variable, and interpolate the variable in the places I want to use the shared styles.

const sharedTooltipLeft = `left: 0;
right: initial;
transform: translateX(0);
`
;

const tooltipLeft = styled.div`
${sharedTooltipLeft}
&::before {
${sharedTooltipLeft}
}
`

Do you know a better way to do this? Please let me know!