[bug] running with extends recommended deletes my PandaCSS code.

[FranciscoKloganB]

Description

System

• Node v20.9.0
• PNPM 8.50
• Ubuntu 22.04

Packages

Development Dependencies

"devDependencies": {
    "@pandacss/dev": "^0.11.1",
    "@pandacss/eslint-plugin": "^0.0.4",
}

Eslint Configuration

module.exports = {
  root: true,
  env: {
    browser: true,
    es2024: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@pandacss/recommended', // 👈👈👈👈👈👈
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'prettier', // must be the penultimate plugin extension
    'plugin:prettier/recommended',
  ],
  ...moreStuffNotRelatedWithPanda
}

Screenshots

[anubra266]

@FranciscoKloganB I think this file is covered by the include option of your config. Config related files should not be covered there. The plugin thinks you're using a config function within your app

[FranciscoKloganB]

Original Answer

Removing './themes/panda/**/*.{js,jsx,ts,tsx}' this entry does prevent the code from being deleted. But two questions.

Q1: Will PandaCSS still hot reload/codegen changes from themes/panda? Will I need to restart the server everytime? Or what's the solution?

Q2: If this was wrong, shouldn't the linter throw an error at me instead of deleting my code?

Edit

I am going to piggy back a few more questions to this thread if you do not mind. Please see screenshot and questions.

Q3: I understand the rule "no-property-renaming" and I am fixing every prop renaming that I believe makes sense. E.g.: classes becomes className.

However, PandaCSS Eslint Plugin also appears to class with ref and forwardRef/forwardedRef which is a common pattern and with React Query Hooks like { data: productData }; Is this intended? Are there plans to add "whitelists" to the rule in the future? I don't think PandaCSS wants to track most properties that may get renamed in a JS project.

Q4: I believe "no-dynamic-styling" is tracking properties it shouldn't. Probably related with the one above.

[anubra266]

@FranciscoKloganB I'm not sure I understand q1.

q2: Generally, the linter can't just auto delete your code. Your code being deleter means you're running eslint --fix somewhere.

As for q3 and q4, you're right, we need to review the properties that are being tracked.

[FranciscoKloganB]

@anubra266 thanks for the quick replies.

Regarding Q1.

For some reason, I annotated that particular line in my panda.config.ts as a being important for hot reloading. I am not sure if I read that somewhere. So my question is, assume, my react project is running. Will panda codegen retrigger on changes within themes/panda, if they are no longer being tracked?

Regarding Q2

Yes, true. I am using the --fix flag in pre-push hooks. But I believe there are ways in eslint to say what issues are autofixable and which ones aren't. Perhaps this one should not be marked as autofixable? Not an expert on this subject and I am not sure how to do it from an eslint plugin provider side.

Regarding Q4.

I seem to avoid the warnings like below, which I actually enjoy, but would be nice to have the option to declare styled.x inline too.

import { styled } from '@styled-system/jsx'

type MailToProps = {
  email: string
  className?: string
}

// Difficulty here is:
// If I type `props` as `React.HTMLProps<HTMLAnchorElement>`, it is not compatible with styled.a
// If I type as `StyledComponent<'a'>`, I get an error on `Anchor` saying it's not compatible with IntrinsicAttributes.
// If I type as `React.ComponentPropsWithoutRef<'a'>` it appears to work but I am not sure if this is the most appropriate?
function Anchor(props) {
  return <styled.a color="tertiary" {...props} />
}

export function MailTo({ className, email }: MailToProps) {
  return (
    <Anchor
      aria-label={`Email ${email}`}
      className={className}
      href={`mailto:${email}`}
    >
      {email}
    </Anchor>
  )
}

[anubra266]

@FranciscoKloganB regarding Q1, I assume themes/panda are stuff imported directly/indirectly into your panda.config. In that case, you don't need to track them, the panda analysis on your components is different from config changes. It will work fine

For Q2 You're right about that. I'll release a fix shortly.

For Q4, I've just released a fix, that would stop panda from linting non styled prop

[anubra266]

@FranciscoKloganB I've released a fix that offers you suggestions in the editor, instead of autofixing your code in the CLI/CLI

[FranciscoKloganB]

Thank you so much for the conversation. Keep on doing great libs!