no-dynamic-styling.md

no-dynamic-styling

Ensure users don't use dynamic styling. Prefer static styles, leverage CSS variables, or recipes for known dynamic styles.

📋 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 color = 'red.100';
const styles = css({ bg: color });

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

const size = '8';
const styles = css({ padding: ['4', size] });

import { stack } from './panda/patterns';

const align = 'center';
const styles = stack({ align: align });

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

function App(){
  const bool = true;
  return <Circle debug={bool} />;
};

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

function App(){
  const color = 'red.100';
  return <styled.div color={color} />;
};

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

const property = 'background';
const styles = css({ [property]: 'red.100' });

import { cva,sva } from './panda/css';

function App(){
  const computedValue = "value"
  const heading = cva({
    variants: {
      [computedValue]: {
        color: "red.100",
      }
    }
  });
}

✔️ Examples of correct code:

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

const styles = css({ bg: 'gray.900' });

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

const styles = css({ padding: ['4', '8'] });

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

function App(){
  return <Circle debug={true} />;
};

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

function App(){
  return <styled.div color='red.100' />;
};

const foo = 'foo'
const nonStyles = {bar: [foo]}

Resources

• Rule source
• Test source