no-physical-properties

Encourage the use of logical properties over physical properties to foster a responsive and adaptable user interface.

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

Rule details

❌ Examples of incorrect code:

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

const styles = css({ left: '0' });

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

function App(){
  return <div className={css({ marginLeft: '4' })} />;
};

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

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

✔️ Examples of correct code:

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

const styles = css({ insetInlineStart: '0' });

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

function App(){
  return <div className={css({ marginInlineStart: '4' })} />;
};

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

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