Parts for writing styles

[bozu]

Description

Parts feature is really cool when dealing with recipes:

export const cardParts = defineParts({
  root: {},
  header: {},
  content: {}
})

export const cardRecipe = defineRecipe({
  className: 'card',
  base: parts({
      root: {},
      header: {},
      content: {}
  })
})

When cascading components, it is even more convenient since we have "type safety for selectors":

export const galleryParts = defineParts({
  header: {},
  card: classSelector(cardRecipe.className) // '& .card'
})

export const galleryRecipe = defineRecipe({
  className: 'gallery',
  base: galleryParts({
    header: {},
    card: cardParts({ // we can modify card's header i.e. without duplicating selectors
      header: {}
    })
  })
})

However, this doesn't work when writing styles with css, which is important for rapid prototyping:

function Gallery() {
  return <div className={css({
    [`& .${cardRecipe.className}`]: cardParts({
      header: {} // has no effect, no generated CSS
    })
  })}>
    <Card/>
  </div>
}

Problem Statement/Justification

Not being able to prototype with parts breaks the mental flow (DX?) which is used when building recipes.

Proposed Solution or API

Even though there is some kind of dynamic styling, I think this is achievable, since defineParts output is not much different from its input.

Also, I see the following "pattern":

function Gallery() {
  return <div className={css({
    ...cardStyling({ // replaces the code above, both css and recipes
      header: {}
    })
  })}>
    <Card/>
  </div>
}

Alternatives

Without parts, the equivalent that we have to deal with is:

function Gallery() {
  return <div className={css({
    [`& .card`]: {
      '& .header': {} // works
    }
  })}>
    <Card/>
  </div>
}

The bad part is that one should know the internals of a card.

Additional Information

No response