Add support for interpolation

[mindplay-dk]

Why is interpolation only supported for CSS object properties and not for css literals?

import { css } from '@linaria/core';

// REQUIRED:

const fontMedium = {
  fontSize: '24px',
  fontWeight: 'bold'
}

// WANTED:

// const fontMedium = css`
//   font-size: 24px;
//   font-weight: bold;
// `

const button = css`
  ${fontMedium}
  
  color: #862e9c;
  border: 1px solid;
  border-radius: 4px;
  padding: 0.5rem 1rem;

  &:hover,
  &:focus {
    color: #be4bdb;
  }
`;

export const Button = (props) => {
  return <button {...props} className={button} />;
};

Why do we need to use two completely different syntaxes to interpolate CSS properties?

I would very much like to stick with one syntax.

Using multiple classes is not really a great option for something like typographies either - I'd very much like to have the button declaration include the typography, and manually reusing the 5-10 properties required for a complete typography is not really a good option either.

Using multiple classes works (cx) but is not a great option either - I would very much prefer if the button styles were self-contained, residing in a single declaration, not spread between two classes.

Is there a reason this isn't practical or can't be done?