Broken consistency

[ony3000]

Dependency information

• prettier@2.8.4
• prettier-plugin-classnames@0.6.2

Prettier configuration

{
  "singleQuote": true,
  "trailingComma": "all",
  "singleAttributePerLine": true,
  "plugins": ["prettier-plugin-classnames"],
  "endingPosition": "absolute-with-indent"
}

Steps to reproduce

Try repeating the formatting for one of the following two components:

export default function MyComponent() {
  return (
    <div>
      <div>
        <div>
          <div className="card grid h-full flex-grow place-items-center bg-base-300">
            content
          </div>
        </div>
      </div>
    </div>
  );
}

export default function MyComponent() {
  return (
    <div>
      <div>
        <div>
          <div
            className="card grid h-full flex-grow place-items-center
              bg-base-300"
          >
            content
          </div>
        </div>
      </div>
    </div>
  );
}

The current behavior

Two outputs appear alternating.

The expected behavior

It must be output in one consistent format (whatever that format may be).

[ony3000]

A workaround that anyone can use until the issue is resolved: Add any comment between the element name and the property name.

export default function MyComponent() {
  return (
    <div>
      <div>
        <div>
          <div
            //
            className="card grid h-full flex-grow place-items-center bg-base-300"
          >
            content
          </div>
        </div>
      </div>
    </div>
  );
}

[ony3000]

Another workaround for those who want to use v0.6.2: Use an expression instead of surrounding the class name in quotes.

export default function MyComponent() {
  return (
    <div>
      <div>
        <div>
          <div className={'card grid h-full flex-grow place-items-center bg-base-300'}>
            content
          </div>
        </div>
      </div>
    </div>
  );
}