blog-tagged-template-3.js

const theme = {
  spacing: {
    min: '2px',
    max: '24px',
  },
  colors: {
    primary: 'coral',
    secondary: 'peachpuff',
  },
}

function styled(css, ...variables) {
  const computedCss = css
    .map((chunk, index) => `${chunk}${variables[index] || ''}`)
    .join('')
  return computedCss
}

const Button = styled`
  background: ${theme.colors.secondary};
  margin-bottom: ${theme.spacing.min};

  span {
    padding: 0.25em 1em;
    color: ${theme.colors.primary};
  }
`
/* Output:
  background: peachpuff; 
  margin-bottom: 2px; 
   
  span { 
    padding: 0.25em 1em; 
    color: coral; 
  } 
*/