jsx-indent-props causes wacky indentation when prop is a multiline object literal

bhallstein commented 3 years ago

Having the jsx-indent-props rule enabled and set to "first" will cause this:

<CSelectFontFamily style={{
                     maxWidth: "6rem",
                     paddingTop: "0.15em",
                     paddingBottom: "0.15em",
                   }}
                   cssPropName={`--${mode}FontFamily-` + typographyNameLower}
                   name={typographyName + "Font"}
                   label="Font Family" />

To be reformatted into this:

<CSelectFontFamily style={{
    maxWidth: "6rem",
    paddingTop: "0.15em",
    paddingBottom: "0.15em",
  }}
                   cssPropName={`--${mode}FontFamily-` + typographyNameLower}
                   name={typographyName + "Font"}
                   label="Font Family" />

Should this rule support smarter indenting of object literals in props?

ljharb commented 3 years ago

If you have the jsx-indent and indent rules enabled, is that handled?

Although I'd never use that style (nor would any popular styleguide), I'd definitely expect the first example to be correct.

bhallstein commented 3 years ago

Thanks for the reply @ljharb. Yeah I agree it seems definitely incorrect that the second example should result from the first rule. I put it forward as a bug as on balance I felt it was unintended behaviour.

I can't speak for all styleguides but the style in the first code snippet is directly supported in this plugin via jsx-indent-props's first setting. I'm sure everyone would agree that if the setting exists it should work well.

If you have the jsx-indent and indent rules enabled, is that handled?

Great Q. When I have a sec I'll do some more digging and add a reproducible test case or two, sorry that was missing from the original submission.

ljharb commented 2 years ago

@bhallstein any update?

jsx-eslint / eslint-plugin-react

jsx-indent-props causes wacky indentation when prop is a multiline object literal #3004