fix(css): self-nesting works wrong way with conditions

[nnnnoel]

📝 Description

Fixed multiple conditions order with self-nesting, mixed.

Add a brief description

Repro step

1. Setup panda.config.ts

export default defineConfig({
  // ...other options
  conditions: {
  extend: {
      hover: [
        '@media (hover: hover) and (pointer: fine)',
        '&:is(:hover, [data-hover])',
        '&:not(:disabled, [disabled], [data-disabled])',
        '&:not([data-loading])',
      ],
      disabled: ['&:is(:disabled, [disabled], [data-disabled])', '&:not([data-loading])'],
    },
  },
  outdir: 'styled-system',
  outExtension: 'js',
  jsxFramework: 'react',
});

2. define self-nesting css that can select multiple elements

const Breadcrumb = ({ className }: { className?: string }) => {
  return (
    <nav aria-label='Breadcrumb' className={className}>
      <ul
        className={flex({
          gap: 4,
          align: 'center',
          '& li': {
            display: 'flex',
            alignItems: 'center',
          },
          '& *': {
            color: 'content.default.level-2',
            textStyle: 'Text/M/Strong',
          },
          '& a': {
            transition: 'color .3s',
            _hover: {
              color: 'content.interaction.hover',
            },
          },
        })}
      >
        <li>
          <a href='/'>Home</a>
        </li>
        <li>
          <a href='/blog'>Blog</a>
        </li>
      </ul>
    </nav>
  );
};

export default Breadcrumb;

at the above, _hover selector is nested in & a selector.
but current behavior, that style applied when ul is hovered and applied all of a elements.

⛳️ Current behavior (updates)

Please describe the current behavior that you are modifying

🚀 New behavior

Please describe the behavior or changes this PR adds

💣 Is this a breaking change (Yes/No):

Maybe No

📝 Additional Information

[changeset-bot]

🦋 Changeset detected

Latest commit: b9af232

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 19 packages

Name	Type
@pandacss/core	Patch
@pandacss/generator	Patch
@pandacss/node	Patch
@pandacss/parser	Patch
@pandacss/astro-plugin-studio	Patch
@pandacss/dev	Patch
@pandacss/postcss	Patch
@pandacss/studio	Patch
@pandacss/config	Patch
@pandacss/extractor	Patch
@pandacss/is-valid-prop	Patch
@pandacss/logger	Patch
@pandacss/preset-atlaskit	Patch
@pandacss/preset-base	Patch
@pandacss/preset-open-props	Patch
@pandacss/preset-panda	Patch
@pandacss/shared	Patch
@pandacss/token-dictionary	Patch
@pandacss/types	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
panda-docs	✅ Ready (Inspect)	Visit Preview	Dec 24, 2024 10:56am
panda-playground	✅ Ready (Inspect)	Visit Preview	Dec 24, 2024 10:56am
panda-studio	✅ Ready (Inspect)	Visit Preview	Dec 24, 2024 10:56am

[segunadebayo]

Thanks for this PR. I've added it to my recent commit in the main branch.