no-invalid-nesting.md

no-invalid-nesting

Warn against invalid nesting. Nested styles must contain the & character.

📋 This rule is enabled in plugin:@pandacss/all.

📋 This rule is enabled in plugin:@pandacss/recommended.

Rule details

❌ Examples of incorrect code:

import { css } from './panda/css';

const styles = css({
  ':hover': { marginLeft: '4px' },
});

import { css } from './panda/css';

function App() {
  return (
    <div
      className={css({
        '.dark ': { background: 'red.100' },
      })}
    />
  );
};

import { Circle } from './panda/jsx';

function App() {
  return (
    <Circle
      css={{
        '[data-focus]': { position: 'absolute' },
      }}
    />
  );
}

✔️ Examples of correct code:

import { css } from './panda/css';

const styles = css({
  '&:hover': { marginLeft: '4px' },
});

import { css } from './panda/css';

function App() {
  return (
    <div
      className={css({
        '.dark &': { background: 'red.100' },
      })}
    />
  );
};

import { Circle } from './panda/jsx';

function App() {
  return (
    <Circle
      css={{
        '&[data-focus]': { position: 'absolute' },
      }}
    />
  );
}

Resources

• Rule source
• Test source