Ensure @trousers/macro can handle dynamic interpolations

[danieldelcore]

Exploring some of the different options relating to dynamic interpolations...

Base case:

import { css } from './macro';
const foo = () => 'bar';

css('Button', { color: foo() });

Option 1: Passing interpolations to the style tag

/** @jsx jsx */
import { css, jsx } from '@trousers/macro/runtime';
const foo = () => 'bar';

const styles = css('Button', {
    '.Button-2561700995': 'color: var(--interpolation1);',
})

<button css={styles} styles={{ interpolation1: foo() }} />

Option 2: Passing interpolations via the collector

This would require that we attach interpolations to the inner element via the style attribute

/** @jsx jsx */
import { css, jsx } from '@trousers/macro/runtime';
const foo = () => 'bar';

css('Button', { '.Button-2561700995': 'color: var(--interpolation1);' })
  .interpolations({ interpolation1: foo() });

<button css={styles} />

Inside the jsx pragma we would need to:

1. Mount the styles
2. Take interpolations and attach them to the inner element's style tag OR
3. mount them like a theme (taking note that as the values change, new classes will need to be mounted)