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

false positive on @pandacss/no-invalid-nesting

Open azu opened this issue 1 year ago • 0 comments

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

./src/app/Heading.tsx 23:13 Error: Invalid style nesting. Nested styles must contain the & character. @pandacss/no-invalid-nesting

import { ElementType } from "react";
import { cva, RecipeVariantProps } from "../../styled-system/css";

const heading = cva({
    base: {
        fontWeight: "strong",
        lineHeight: "m",
    },
    variants: {
        size: {
            "2xl": {
                fontSize: "2xl",
            },
            l: {
                fontSize: "l",
            },
            m: {
                fontSize: "m",
            },
            s: {
                fontSize: "s",
            },
            "2xs": {
            // ^ Error: Invalid style nesting. Nested styles must contain the `&` character.  @pandacss/no-invalid-nesting 
                fontSize: "2xs",
            },
        },
    },
    defaultVariants: {
        size: "2xl",
    },
});

Is this & character really necessary?

Reproduce Repository

  • https://github.com/azu/panda-css-no-invalid-nesting-test
git clone https://github.com/azu/panda-css-no-invalid-nesting-test
cd panda-css-no-invalid-nesting-test
pnpm install
pnpm run lint

Actual

@pandacss/no-invalid-nesting report an error.

Error: Invalid style nesting. Nested styles must contain the & character. @pandacss/no-invalid-nesting

Expected

No Error

azu avatar May 19 '24 23:05 azu