If formatting results in the attribute type class name being placed on a different line than the JSX opening element, the available width is calculated based on the result.
This side effect only applies to javascript and typescript code, and requires that the endingPosition option be set to absolute or absolute-with-indent.
For example, if you apply formatting to code like this:
Until now, for attributes located on the same line as the JSX opening element, the available width was less than the printWidth value.
export function Callout({ children }) {
return (
<div
--------------------------------------------------------------------------------| printWidth=80
className="rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 ______
^
There is enough space for `py-4`, but it is not used.
py-4 dark:border-neutral-500/30 dark:bg-neutral-900/50"
>
{children}
</div>
);
}
After this PR is merged, attributes located on the same line as the JSX opening element will also use a width equal to the printWidth value.
This PR closes #41.
Side effects on attribute type class names:
If formatting results in the attribute type class name being placed on a different line than the JSX opening element, the available width is calculated based on the result.
This side effect only applies to javascript and typescript code, and requires that the
endingPosition
option be set toabsolute
orabsolute-with-indent
.For example, if you apply formatting to code like this:
Until now, for attributes located on the same line as the JSX opening element, the available width was less than the
printWidth
value.After this PR is merged, attributes located on the same line as the JSX opening element will also use a width equal to the
printWidth
value.