eslint-plugin-panda icon indicating copy to clipboard operation
eslint-plugin-panda copied to clipboard

`no-dynamic-styling` false positives

Open jaredkhan opened this issue 6 months ago • 0 comments

I'm seeing false positives on the no-dynamic-styling rule.

  1. Negative numeric spacing values

These seem to be valid in Panda, at least they seem to work, and I think they're created by: https://github.com/chakra-ui/panda/blob/9453c9b8e5957b34efe9711c528a0d37b81025c0/packages/token-dictionary/src/middleware.ts#L6

but in their numeric form I get an error from the no-dynamic-styling rule. The string form is allowed by the rule.


          <div
            className={css({
              display: "block",
              position: "absolute",
              left: -12,  // Would expect this to be allowed by `no-dynamic-styling`. "-12" works fine.
            })}
          />

  1. Runtime conditions Maybe I'm missing the point on this one, but I would expect ternary expressions where the two branches are both statically analysable to also be allowed under this rule. https://panda-css.com/docs/guides/dynamic-styling#runtime-conditions I had expected the rule to match the 'What you can do' section of the dynamic-styling docs. But if that's not the intended behaviour, then perhaps this is a feature request for a rule that lets me catch the stuff that literally doesn't work (like passing user input directly into a panda call).
      <div
        className={css({
          height: isShort ? 6 : 12,  // Would expect this to be allowed by `no-dynamic-styling`
          width: 2,
        })}
      >

jaredkhan avatar May 16 '25 09:05 jaredkhan