Closes #77

Add possibility to use css prop

This PR adds the possibility to use the css prop (docs for emotion, docs for styled-components) for simple cases.

Simple cases means that the css tagged template string can only be static (without any interpolations). This is a trade-off we discussed internally to not have too many edge-cases that can't be covered optimally. If you feel the need to have interpolated css we recommend to create a styled component that works better.

Why

Styled-Components and Emotion both support the css prop with the help of a babel plugin on native html elements. Makes it possible to iterate fast on small, local CSS without the overhead of a component.

Details

Simple static

This case

const MyComponent = () => 
  <div css={css`
    padding: 10px;
  `}>Anything</div>

Would get transpiled to:

const MyComponent = () => <div {...css`
    padding: 10px;
  `({})}>Anything</div>;

Simple merge

This case

const Elem = () => <div 
  style={{padding: "5px"}} 
  css={css`
        padding: 10px;
  `} />

Would get transpiled to:

const Elem = () => <div 
  {...__yak_mergeCssProp(
    {
      style: {
        padding: \\"5px\\"
      }
    },
    /*YAK Extracted CSS:
    .Elem {
      padding: 10px;
    }*/
    /*#__PURE__*/
    css(__styleYak.Elem)({})
)} />