How to nest existing styles?

[adaboese]

const prose = css({
  '& > * + *': {
    marginTop: '16px',
  },
});

const theme = css({
  '& .milkdown-aimd-theme': {
    // ... I need prose styles here
  },
});

[segunadebayo]

We documented this in the merging styles docs. Please see here: https://panda-css.com/docs/concepts/merging-styles#merging-css-objects

The solution is to switch to css.raw, which is an identity function that preserves the object.

// preserve style object
const proseStyles = css.raw({
  '& > * + *': {
    marginTop: '16px',
  },
});

// get the classname for previous usage
const prose = css(proseStyles)

// use the style object here
const theme = css({
  '& .milkdown-aimd-theme': {
    ...proseStyles
  },
});

Here's a working example: https://stackblitz.com/edit/vitejs-vite-r84b2t?file=src%2FApp.tsx&terminal=dev

[adaboese]

Thank you!

[adaboese]

Hm. Does not appear to work. The styles are not extracted.

[adaboese]

Looks like css.raw and the css to which it is inlined have to be in the same file. Not ideal, but I made it work!

[segunadebayo]

Yes indeed, it needs to be in the same file for the compiler to be able to “evaluate” the code.

We’ll document this

[segunadebayo]

Another approach is to move this to a recipe or text style in Panda.