no-config-function-in-source.md

no-config-function-in-source

Prohibit the use of config functions outside the Panda config file.

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

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

Rule details

❌ Examples of incorrect code for a file named App.tsx:

import {  defineKeyframes } from '@pandacss/dev';
import { css } from './panda/css';

const keyframes = defineKeyframes({
  fadeIn: {
    '0%': { opacity: '0' },
    '100%': { opacity: '1' },
  },
});

const styles = css({
  animation: 'fadeIn 1s ease-in-out',
});

✔️ Examples of correct code for a file named panda.config.ts:

import { defineConfig, defineKeyframes } from '@pandacss/dev';

const keyframes = defineKeyframes({
  fadeIn: {
    '0%': { opacity: '0' },
    '100%': { opacity: '1' },
  },
});

export default defineConfig({
  theme: {
    keyframes
  }
});

Resources

• Rule source
• Test source