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' }} />;
};

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

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

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

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

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

function App(){
  return <Box textAlign={"left"} />;
};

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

function App(){
  return <Box textAlign={"right"} />;
}

✔️ 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' }} />;
};

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

const styles = css({ textAlign: 'start' });

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

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

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

function App(){
  return <Box textAlign={"start"} />;
};

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

function App(){
  return <Box textAlign={"end"} />;
}