blog-tagged-template-4.js

function styled(css, ...variables) {
  const theme = {
    spacing: {
      min: '2px',
      max: '24px',
    },
    colors: {
      primary: 'coral',
      secondary: 'peachpuff',
    },
  }

  const props = {
    theme,
    primary: true,
    bigSpacing: true,
  }

  const computedCss = css
    .map(
      (chunk, index) =>
        `${chunk}${variables[index] ? variables[index](props) : ''}`
    )
    .join('')
  return computedCss
}

const Button = styled`
  background: ${({ primary, theme }) =>
    primary ? theme.colors.primary : theme.colors.secondary};
  margin-bottom: ${({ bigSpacing, theme }) =>
    bigSpacing ? theme.spacing.max : theme.spacing.min};

  span {
    padding: 0.25em 1em;
    color: ${({ primary, theme }) =>
      primary ? theme.colors.secondary : '#fff'};
  }
`
/* Output:
  background: coral; 
  margin-bottom: 24px; 
 
  span { 
    padding: 0.25em 1em; 
    color: peachpuff; 
  } 
*/