Css property alternative api

[zmitry]

I have idea how to improve adoption and DX and I think using css prop instead of styled function should improve that quite a lot. Here are few examples

const App = () => (
  <use.container
    css={css`
      h1 {
        font-size: 4rem;
      }
      Button {
        border: 1px solid ${red};
      }
      container {
        ///
      }
    `}
  >
    <h1>hello</h1>
    <Button>world</Button>
  </use.container>
)

const styles = css`
      h1 {
        font-size: 4rem;
      }
      Button {
        border: 1px solid ${red};
      }
      container {
        ///
      }
    `
const App = () => (
  <use.container css={styles}>
    <h1>hello</h1>
    <Button>world</Button>
  </use.container>
)

const styles = css`
  // should we treat top css as root classname
   padding-top: 20px;
   span {
     padding-right: 20px;
   }
`
const Title = () => (
  <h1 css={styles}>
    world <span> </span>
  </h1r>
)

composition

const commonStyles = css`
    padding-top: 20px;
   span {
     padding-right: 20px;
   }
`
const fileStyles = css`
   // some styles
`
const Title = ({ styles  }) => (
  <h1 css={[commonStyles, fileStyles, styles]}>
    world <span> hello </span>
  </h1r>
)

without root element

const styles = css`
   span {
     padding-right: 20px;
   }
`
const Title = ({ styles  }) => (
  <Fragment css={styles}>
    world <span> hello </span> !
  </Fragment>
)

Happy to hear you comments on that.