ony3000 / prettier-plugin-classnames

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

not respecting maxLength #72

Open moonlitusun opened 2 months ago

moonlitusun commented 2 months ago

Current Behavior

When maxLength is set to 120 in the plugin configuration, it does not break lines for long class strings as expected.

Expected Behavior

The plugin should break lines for class strings that exceed the specified maxLength.

Steps to Reproduce

  1. Set up a React component with a long className string:
    <h3 className="overflow-hidden text-ellipsis whitespace-nowrap font-[500] text-[var(--dz-course-item-title-color)]">
     title
    </h3>
  2. Configure Prettier with prettier-plugin-classnames:
    {
     "printWidth": 120,
     "plugins": ["prettier-plugin-classnames"],
     "classnames": {
       "multiline": true,
       "maxLength": 120
     }
    }
  3. Run Prettier on the file
ony3000 commented 2 months ago

Have you checked the ending-position option?

moonlitusun commented 2 months ago

Have you checked the ending-position option?

yes, my config is endingPosition: 'absolute-with-indent',

ony3000 commented 2 months ago

yes, my config is endingPosition: 'absolute-with-indent',

If so, please provide code that can reproduce the issue.

The code provided above does not contain any lines longer than 120 characters, making it difficult to investigate the issue.

moonlitusun commented 2 months ago

yes, my config is endingPosition: 'absolute-with-indent',

If so, please provide code that can reproduce the issue.

The code provided above does not contain any lines longer than 120 characters, making it difficult to investigate the issue.

app.tsx

Certainly,This is my file, if it can't, i will provide a live demo.

ony3000 commented 2 months ago

The current line wrapping stage of this plugin does not handle characters following the class name.

In this sense, the class name of h3 is considered to not exceed 120 characters, and therefore no line wrapping is performed.

------------------------------------------------------------------------------------------------------------------------| printWidth=120
      <h3 className="overflow-hidden text-ellipsis whitespace-nowrap font-[500] text-[var(--dz-course-item-title-color)]">
                                                                                                                        ^^
                                                                                                                        does not handle
moonlitusun commented 2 months ago

The current line wrapping stage of this plugin does not handle characters following the class name.

In this sense, the class name of h3 is considered to not exceed 120 characters, and therefore no line wrapping is performed.


------------------------------------------------------------------------------------------------------------------------| printWidth=120

      <h3 className="overflow-hidden text-ellipsis whitespace-nowrap font-[500] text-[var(--dz-course-item-title-color)]">

                                                                                                                        ^^

                                                                                                                        does not handle

Get, Is it a bug or design?ESlint will throw a maximum-len error(121). I think this is a common case.

ony3000 commented 2 months ago

Thinking back when I was implementing the endingPosition option, I wasn't happy with the lack of handling of characters following the class name.

However, regarding the printWidth option, I read in the documentation that Prettier can produce less strict output than ESLint, so I thought that the output of this plugin would also be okay if it is a little longer than printWidth.

In that sense, the current behavior is closer to a design than a bug.


I'm thinking about performance optimization after releasing v0.7.2 version, and if some logic is rewritten in the optimization work, this part may also be taken care of.