The text leading the first line of the class name is included in the line wrapping by ony3000 · Pull Request #139 · ony3000/prettier-plugin-classnames

ony3000 · 2026-03-23T00:56:23Z

This feature affects users whose endingPosition option is relative.

The existing policy for relative is "a newline if it exceeds printWidth at the point where the class name starts". However, since text such as attribute names generally exists before the first line of the class name, unlike other lines, only the end position of the first line protrudes to the side.

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

This PR changes the relative output policy to prevent class names on the first line from protruding sideways.

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

Copilot

Pull request overview

Updates the endingPosition: 'relative' wrapping behavior so the first line’s wrap calculation accounts for leading text (e.g., attribute name / delimiters) and prevents the first wrapped line from visually protruding past printWidth. This is reflected by broad snapshot updates across all supported parsers/languages.

Changes:

Adjust leading-text handling in formatTokens() so relative mode includes the pre-class text when computing wrap.
Update relative snapshots across Vue/TS/JS (babel/oxc)/Svelte/Astro/Angular/HTML/CSS/SCSS/LESS to match the new wrapping output.

Reviewed changes

Copilot reviewed 254 out of 254 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/core-parts/processor.ts	Changes how leading text is computed for wrapping in `endingPosition: 'relative'`.
tests/vue/template-literal-property/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/vue/template-literal-argument/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/vue/syntax-transformation/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/vue/string-literal-property/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/vue/string-literal-argument/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/vue/prettier-ignore/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/vue/issue-73/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/vue/issue-68/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/vue/delimiter-conversion/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/vue/default-supported/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/vue/complex-template/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/vue/classnames-print-width/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/template-literal-ternary/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/template-literal-property/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/template-literal-argument/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/syntax-transformation/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/string-literal-ternary/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/string-literal-property/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/string-literal-argument/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/prettier-ignore/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/issue-90/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/issue-73/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/issue-68/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/issue-47/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/issue-41/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/issue-104/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/delimiter-conversion/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/default-supported/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/complex-template/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/classnames-print-width/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/typescript/attribute-multiple/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/svelte/template-literal-property/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/svelte/template-literal-argument/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/svelte/syntax-transformation/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/svelte/string-literal-property/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/svelte/string-literal-argument/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/svelte/issue-76/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/svelte/issue-73/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/svelte/issue-68/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/svelte/delimiter-conversion/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/svelte/default-supported/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/svelte/complex-template/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/svelte/classnames-print-width/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/svelte/attribute-single/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/scss/prettier-ignore/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/scss/others/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/scss/nesting/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/scss/mixin/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/scss/inheritance/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/scss/combinator/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/scss/classnames-print-width/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/template-literal-ternary/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/template-literal-property/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/template-literal-argument/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/syntax-transformation/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/string-literal-ternary/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/string-literal-property/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/string-literal-argument/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/prettier-ignore/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/issue-90/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/issue-73/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/issue-68/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/issue-47/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/issue-41/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/issue-104/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/delimiter-conversion/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/default-supported/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/complex-template/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/classnames-print-width/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc/attribute-multiple/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/template-literal-ternary/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/template-literal-property/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/template-literal-argument/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/syntax-transformation/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/string-literal-ternary/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/string-literal-property/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/string-literal-argument/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/prettier-ignore/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/issue-90/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/issue-73/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/issue-68/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/issue-47/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/issue-41/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/issue-104/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/delimiter-conversion/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/default-supported/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/complex-template/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/oxc-ts/classnames-print-width/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/less/variable/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/less/prettier-ignore/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/less/others/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/less/map/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/less/detached-ruleset/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/less/css-guard/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/less/combinator/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/less/classnames-print-width/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/html/prettier-ignore/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/html/others/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/html/issue-73/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/html/default-supported/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/html/classnames-print-width/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/css/prettier-ignore/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/css/others/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/css/combinator/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/css/classnames-print-width/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/template-literal-ternary/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/template-literal-property/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/template-literal-argument/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/syntax-transformation/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/string-literal-ternary/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/string-literal-property/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/string-literal-argument/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/prettier-ignore/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/issue-90/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/issue-73/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/issue-68/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/issue-47/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/issue-41/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/issue-104/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/delimiter-conversion/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/default-supported/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/complex-template/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/classnames-print-width/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel/attribute-multiple/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/template-literal-ternary/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/template-literal-property/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/template-literal-argument/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/syntax-transformation/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/string-literal-ternary/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/string-literal-property/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/string-literal-argument/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/prettier-ignore/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/issue-90/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/issue-73/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/issue-68/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/issue-47/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/issue-41/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/issue-104/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/delimiter-conversion/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/default-supported/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/complex-template/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/babel-ts/classnames-print-width/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/astro/template-literal-property/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/astro/template-literal-argument/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/astro/syntax-transformation/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/astro/string-literal-property/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/astro/string-literal-argument/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/astro/issue-90/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/astro/issue-73/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/astro/issue-68/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/astro/default-supported/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/astro/complex-template/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/astro/classnames-print-width/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/astro/attribute-single/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/angular/prettier-ignore/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/angular/issue-73/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/angular/delimiter-conversion/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/angular/default-supported/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/angular/complex-ternary/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.
tests/angular/classnames-print-width/snapshots/relative.test.ts.snap	Snapshot updates for new relative wrapping behavior.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-23T02:15:46Z

+      const rawLeadingText = assembleTokens(formattedTokens.slice(0, tokenIndex))
+        .split(EOL)
+        .slice(-1)
+        .join('')
+        .replace(/\t/g, SPACE.repeat(options.tabWidth));
+      const leadingText = isEndingPositionAbsolute ? rawLeadingText : rawLeadingText.trimStart();


rawLeadingText now gets computed for both absolute and relative modes via assembleTokens(formattedTokens.slice(0, tokenIndex)). In relative mode this used to be an empty string, so this change turns the loop into an O(n²) pattern (slice + join + split per token) for users of endingPosition: 'relative', which could become noticeable on large files with many class-name nodes. Consider caching the assembled prefix/current-line string (or at least the current line length) while iterating, so each token can get its leading-text length in O(1) or amortized O(1) time.

ony3000 added 2 commits March 23, 2026 00:03

Adjust end position of first line of 'relative' output

41c96d8

Update output of tests

51c536f

ony3000 self-assigned this Mar 23, 2026

ony3000 requested a review from Copilot March 23, 2026 02:11

Copilot started reviewing on behalf of ony3000 March 23, 2026 02:11 View session

Copilot AI reviewed Mar 23, 2026

View reviewed changes

ony3000 added 2 commits March 23, 2026 12:03

Update README.md

47379d5

Update description of 'relative' choice

c809f5a

ony3000 merged commit 683ac1b into master Mar 23, 2026
10 checks passed

ony3000 deleted the output-adjustment branch March 23, 2026 05:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

The text leading the first line of the class name is included in the line wrapping#139

The text leading the first line of the class name is included in the line wrapping#139
ony3000 merged 4 commits intomasterfrom
output-adjustment

ony3000 commented Mar 23, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ony3000 commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ony3000 commented Mar 23, 2026 •

edited

Loading