Support Updated CSS nesting Syntax

[wesbos]

Description

Using native CSS syntax without the. & does not work. The spec originally needed the & but was removed after.

import { css } from 'styled-system/css';

export const App = () => {
  return (
    <div className={css`
      background: red;
      p {
        background: orange; /* Doesnt work */
      }
      & p { background: blue; } /* Does work */
    `}>
      <p>Style me</p>
    </div>
  );
};

Link to Reproduction

https://play.panda-css.com/AzUYVWTNqj

Steps to reproduce

No response

JS Framework

No response

Panda CSS Version

0.45.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[anubra266]

Hiya @wesbos I'm not sure if I understand the issue exactly.
But nested styling in panda for both template literals and object require the &
https://panda-css.com/docs/concepts/template-literals#nested-styles

[wesbos]

Hey - thanks for the reply. The issue is that the standard CSS nesting spec does not require it. I'm actually moving over some styled components and I have several hundred that need to be edited to add the &. Is it not possible to support the standard css nesting spec?

[segunadebayo]

Hey Wes. It's definitely doable to support the standard css nesting for template literal syntax. We'll look into it

[anubra266]

You're right @wesbos. It's css spec, so panda would support it. Twil be put on the radar.
Thanks for pointing it out

[segunadebayo]

I am closing this as we've added support in a recent PR.

[wesbos]

sweet thanks!