no-dynamic-styling.md

no-dynamic-styling

Ensure user doesn't use dynamic styling at any point. Prefer to use 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 { 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 { Circle } from './panda/jsx';

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

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

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

Resources

• Rule source
• Test source