[component] Proposal: Support CSS template literals in `css` prop

[agionoja]

The css prop is great, but writing css with object keys does not have intellisense for the values which makes writing css not fun. It would improve the developer experience significantly if we could use tagged template literals for styling, which would enable editor syntax highlighting and autocomplete.

For example:

// This pattern works with existing styled-component editor extensions
const css = String.raw;

<div
  css={css`
    color: hotpink;
    font-size: 20px;

    &:hover {
      color: blue;
    }
  `}
/>

The main challenge is composition, since strings can't be spread into style objects. A common solution in other libraries is to allow an array of styles, which enables mixing objects and strings.

<div
  css={[
    { color: 'red' },
    css`
      font-size: 20px;
    `,
  ]}
/>

Another option could be a separate prop like cssString, but the array approach seems more flexible.

What are your thoughts on this?

Thanks!