Open RainArroDev opened 1 year ago
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.
font-size: 16px;
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>
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
Output