Duplicated styles within dynamic classes

[RainArroDev]

Can this type of syntax be written differently so the outputted classes would not have duplicated content? In the example font-size: 16px; is duplicated between classes.

Input

const ButtonTheme = (theme: Colors) => {
  const _theme = useTheme();

  return {
    primary: `
      background: ${_theme.colors.primary};
      &:hover {
        color: red;
      }
    `,
    secondary: `
      background: ${_theme.colors.secondary};
    `,
  }[theme];
};

export const ButtonBase = (props: { theme?: Colors }) => {
  return css`
    font-size: 16px;
    ${ButtonTheme(props.theme || 'primary')}
  `;
};

Output

<style id="_goober">
            .go1767598017 {
                font-size: 16px;
                background: #0066ff;
            }

            .go1767598017:hover {
                color: red;
            }

            .go1138492251 {
                font-size: 16px;
                background: #43aa8b;
            }
 </style>