no-invalid-token-paths.md

no-invalid-token-paths

Disallow the use of invalid token paths within token function syntax.

📋 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';

// colorszz is not a valid token type
const styles = css({ bg: 'token(colorszz.red.300) 50%' });

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

function App(){
  // \`4000\` is not a valid size token. Assuming we're using the default panda presets
  return <div className={css({ marginX: '{sizes.4000} 20px' })} />;
};

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

function App(){
  // \`1\` does not exist in borderWidths, and \`grays\` is not a valid color token. Assuming we're using the default panda presets
  return <Circle _hover={{  border: 'solid {borderWidths.1} token(colors.grays.100, #F3F4F6)' }} />;
};

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

const className = css`
  font-size: {fontSizes.emd};
`

✔️ Examples of correct code:

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

const styles = css({ bg: 'token(colors.red.300) 50%' });

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

function App(){
  return <div className={css({ marginX: '{sizes.4} 20px' })} />;
};

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

function App(){
  return <Circle _hover={{  border: 'solid 1px token(colors.gray.100, #F3F4F6)' }} />;
};

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

const className = css`
  font-size: {fontSizes.md};
`

Resources

• Rule source
• Test source