please consider using css string props like emotion

[SteveSuv]

Has the official considered using css string props like emotion?

import { css } from '@emotion/react'

const color = 'darkgreen'

render(
  <div
    css={css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `}
  >
    This has a hotpink background.
  </div>
)

Because users often write code according to the figma inspection when developing projects in the company:

If use the css object to write, users also need to convert the figma inspect into the css object.

But if users can directly use the css string, users can directly paste the figma css inspect, which will greatly improve the work efficiency.

[maurer2]

Hello, I believe this isn't supported to keep bundle size in check and runtime performance up, see https://stitches.dev/blog/migrating-from-styled-components-to-stitches#object-syntax-only

[João Magalhães]

You can create a function like this one from goober (or copy it): https://github.com/cristianbote/goober/blob/master/src/core/astish.js and then create a simple function for the template tags:

export function css(strings, ...expressions) {
  const evaluated = strings.reduce((result, currentString, i) => (
    `${result}${currentString}${expressions[i] ? expressions[i] : ''}`
  ), '')
  return astish(evaluated)
}

and then use it like in your example.