eslint-plugin-panda
eslint-plugin-panda copied to clipboard
false positive on @pandacss/no-invalid-nesting
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