Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

false positive on @pandacss/no-physical-properties #133

Closed
azu opened this issue Sep 9, 2024 · 1 comment · Fixed by #134
Closed

false positive on @pandacss/no-physical-properties #133

azu opened this issue Sep 9, 2024 · 1 comment · Fixed by #134

Comments

@azu
Copy link

azu commented Sep 9, 2024

When I write the following cva variants, @pandacss/no-physical-properties reports an error.

const heading = cva({
  base: {
    fontWeight: "strong",
    lineHeight: "m",
  },
  variants: {
    size: {
      "2xl": {
        fontSize: "2xl",
      },
      xl: {
        fontSize: "xl",
      },
      l: {
        fontSize: "l",
      },
      m: {
        fontSize: "m",
      },
      s: {
        fontSize: "s",
      },
      xs: {
        fontSize: "xs",
      },
    },
    align: {
      // false positive lint error is here
      left: {
        textAlign: "left",
        textWrap: "wrap",
      },
      center: {
        textAlign: "center",
        textWrap: "balance",
        wordBreak: "[auto-phrase]",
      },
      // false positive lint error is here
      right: {
        textAlign: "right",
        textWrap: "wrap",
      },
    },
    weight: {
      strong: {
        fontWeight: "strong",
      },
      regular: {
        fontWeight: "regular",
      },
    },
  },
  defaultVariants: {
    size: "2xl",
    align: "left",
    weight: "strong",
  },
});

Reported Error by @pandacss/no-physical-properties

./src/app/Heading.tsx
51:7  Error: Use logical property of `left` instead. Prefer `insetInlineStart`  @pandacss/no-physical-properties
60:7  Error: Use logical property of `right` instead. Prefer `insetInlineEnd`  @pandacss/no-physical-properties

Reproduce Repository

git clone https://github.com/azu/panda-css-physical-properties-bug
cd panda-css-physical-properties-bug
pnpm install
pnpm run lint
./src/app/Heading.tsx
51:7  Error: Use logical property of `left` instead. Prefer `insetInlineStart`  @pandacss/no-physical-properties
60:7  Error: Use logical property of `right` instead. Prefer `insetInlineEnd`  @pandacss/no-physical-properties

Actual

@pandacss/no-physical-properties report an error.

51:7 Error: Use logical property of left instead. Prefer insetInlineStart @pandacss/no-physical-properties
60:7 Error: Use logical property of right instead. Prefer insetInlineEnd @pandacss/no-physical-properties

Expected

No Error

This left and right of cva's variants are not CSS physical property.
Perhaps it is a false positive because the names are the same.

@anubra266
Copy link
Collaborator

Just released a fix in 0.1.10 @azu. Thanks for pointing it out

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants