ony3000 / prettier-plugin-classnames

A Prettier plugin that wraps verbose class name based on the `printWidth` option.
MIT License
114 stars 0 forks source link

Makes output consistent for attribute type class names #46

Closed ony3000 closed 8 months ago

ony3000 commented 8 months ago

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 to absolute or absolute-with-indent.

For example, if you apply formatting to code like this:

--------------------------------------------------------------------------------| printWidth=80
export function Callout({ children }) {
  return (
    <div className="rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4 dark:border-neutral-500/30 dark:bg-neutral-900/50">
      {children}
    </div>
  );
}

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.

export function Callout({ children }) {
  return (
    <div
--------------------------------------------------------------------------------| printWidth=80
      className="rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4
        dark:border-neutral-500/30 dark:bg-neutral-900/50"
    >
      {children}
    </div>
  );
}