prefer-atomic-properties.md

prefer-atomic-properties

Encourage the use of atomic properties instead of composite properties in the codebase.

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

Rule details

❌ Examples of incorrect code:

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

const styles = css({ gap: '4' });

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

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

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

function App(){
  return <Circle _hover={{  borderTop: 'solid 1px blue' }} />;
}

✔️ Examples of correct code:

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

const styles = css({ rowGap: '4', columnGap: '4' });

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

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

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

function App(){
  return <Circle _hover={{  borderTopStyle: 'solid', borderTopWidth: '1px', borderTopColor: 'blue' }} />;
}

Resources

• Rule source
• Test source