no-property-renaming.md

no-property-renaming

Ensure user does not rename a property for a pattern or style prop. It doesn't get tracked.

📋 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';

function Text({ variant }){
  return <p className={css({ textStyle: variant })} />;
};

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

function Text(props){
  return <p className={css({ textStyle: props.variant })} />;
}

✔️ Examples of correct code:

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

function Text({ textStyle }){
  return <p className={css({ textStyle })} />;
};

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

function Text(props){
  return <p className={css({ textStyle: props.textStyle })} />;
};

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

function CustomCircle(props){
  const { size = '3' } = props
  return (
    <Circle
      size={size}
    />
  )
};

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

function CustomCircle(props){
  return (
    <Circle
      size={props.size}
    />
  )
}

Resources

• Rule source
• Test source