Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ony3000 merged 4 commits into from
Mar 23, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
41c96d8
Adjust end position of first line of 'relative' output
ony3000 Mar 22, 2026
51c536f
Update output of tests
ony3000 Mar 22, 2026
47379d5
Update README.md
ony3000 Mar 23, 2026
c809f5a
Update description of 'relative' choice
ony3000 Mar 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 10 additions & 11 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,14 +129,13 @@ This is the criterion for ending the class name on each line when replacing the
- `absolute` example:

```
--------------------------------------------------| printWidth=50
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
<div
className="bg-gray-100/50 border
border-zinc-400/30 dark:bg-neutral-900/50
dark:border-neutral-500/30 px-4 py-4
rounded-xl"
className="bg-gray-100/50 dark:bg-neutral-900/50
border border-zinc-400/30 dark:border-neutral-500/30
rounded-xl px-4 py-4"
>
{children}
</div>
Expand All @@ -147,15 +146,15 @@ This is the criterion for ending the class name on each line when replacing the
- `relative` example:

```
--------------------------------------------------| printWidth=50
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
<div
|--------------------------------------------------|
className="bg-gray-100/50 border border-zinc-400/30
|--------------------------------------------------|
dark:bg-neutral-900/50 dark:border-neutral-500/30
px-4 py-4 rounded-xl"
|------------------------------------------------------------|
className="bg-gray-100/50 dark:bg-neutral-900/50 border
|------------------------------------------------------------|
border-zinc-400/30 dark:border-neutral-500/30 rounded-xl
px-4 py-4"
>
{children}
</div>
Expand Down
26 changes: 12 additions & 14 deletions src/core-parts/processor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,13 +359,12 @@ function formatTokens(
const props = token.props as Omit<AttributeNode, 'range' | 'type'> & {
indentLevel: number;
};
const leadingText = isEndingPositionAbsolute
? assembleTokens(formattedTokens.slice(0, tokenIndex))
.split(EOL)
.slice(-1)
.join('')
.replace(/\t/g, SPACE.repeat(options.tabWidth))
: '';
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();
Comment on lines +362 to +367
Copy link

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
const trailingDelimiter = isEndingPositionAbsolute
? formattedTokens[tokenIndex + 1].body
: '';
Expand Down Expand Up @@ -431,13 +430,12 @@ function formatTokens(
const props = token.props as Omit<ExpressionNode, 'range' | 'type'> & {
indentLevel: number;
};
const leadingText = isEndingPositionAbsolute
? assembleTokens(formattedTokens.slice(0, tokenIndex))
.split(EOL)
.slice(-1)
.join('')
.replace(/\t/g, SPACE.repeat(options.tabWidth))
: '';
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();
const trailingDelimiter = isEndingPositionAbsolute
? formattedTokens[tokenIndex + 1].body
: '';
Expand Down
3 changes: 2 additions & 1 deletion src/options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ export const options: SupportOptions = {
},
{
value: 'relative',
description: 'Each line ends at a `printWidth` distance from the start of the class name.',
description:
'Each line ends at a `printWidth` distance from the start of the non-whitespace text.',
},
],
},
Expand Down
31 changes: 17 additions & 14 deletions tests/angular/attribute-multiple/__snapshots__/relative.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ exports[`'long enough (1) - single line with no…' > expectation 1`] = `
dir="ltr"
id="lorem-ipsum"
title="lorem ipsum"
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin
ex massa hendrerit eu posuere eu volutpat id neque
pellentesque"
class="lorem ipsum dolor sit amet consectetur adipiscing
elit proin ex massa hendrerit eu posuere eu volutpat id
neque pellentesque"
>
<slot></slot>
</div>
Expand All @@ -27,9 +27,9 @@ exports[`'long enough (2) - single line with sp…' > expectation 1`] = `
dir="ltr"
id="lorem-ipsum"
title="lorem ipsum"
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin
ex massa hendrerit eu posuere eu volutpat id neque
pellentesque"
class="lorem ipsum dolor sit amet consectetur adipiscing
elit proin ex massa hendrerit eu posuere eu volutpat id
neque pellentesque"
>
<slot></slot>
</div>
Expand All @@ -46,9 +46,9 @@ exports[`'long enough (3) - multiple lines' > expectation 1`] = `
dir="ltr"
id="lorem-ipsum"
title="lorem ipsum"
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin
ex massa hendrerit eu posuere eu volutpat id neque
pellentesque"
class="lorem ipsum dolor sit amet consectetur adipiscing
elit proin ex massa hendrerit eu posuere eu volutpat id
neque pellentesque"
>
<slot></slot>
</div>
Expand All @@ -65,7 +65,8 @@ exports[`'near boundary (1) - single line with …' > expectation 1`] = `
dir="ltr"
id="lorem-ipsum"
title="lorem ipsum"
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin"
class="lorem ipsum dolor sit amet consectetur adipiscing
elit proin"
>
<slot></slot>
</div>
Expand All @@ -82,7 +83,8 @@ exports[`'near boundary (2) - single line with …' > expectation 1`] = `
dir="ltr"
id="lorem-ipsum"
title="lorem ipsum"
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin"
class="lorem ipsum dolor sit amet consectetur adipiscing
elit proin"
>
<slot></slot>
</div>
Expand All @@ -99,7 +101,8 @@ exports[`'near boundary (3) - multiple lines' > expectation 1`] = `
dir="ltr"
id="lorem-ipsum"
title="lorem ipsum"
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin"
class="lorem ipsum dolor sit amet consectetur adipiscing
elit proin"
>
<slot></slot>
</div>
Expand Down Expand Up @@ -167,8 +170,8 @@ exports[`'syntax variants - component' > expectation 1`] = `
dir="ltr"
id="lorem-ipsum"
title="lorem ipsum"
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin
ex massa hendrerit eu posuere"
class="lorem ipsum dolor sit amet consectetur adipiscing
elit proin ex massa hendrerit eu posuere"
>
<slot></slot>
</Box>
Expand Down
31 changes: 17 additions & 14 deletions tests/angular/attribute-single/__snapshots__/relative.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ exports[`'long enough (1) - single line with no…' > expectation 1`] = `
<template>
<div>
<div
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin
ex massa hendrerit eu posuere eu volutpat id neque
pellentesque"
class="lorem ipsum dolor sit amet consectetur adipiscing
elit proin ex massa hendrerit eu posuere eu volutpat id
neque pellentesque"
>
<slot></slot>
</div>
Expand All @@ -21,9 +21,9 @@ exports[`'long enough (2) - single line with sp…' > expectation 1`] = `
<template>
<div>
<div
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin
ex massa hendrerit eu posuere eu volutpat id neque
pellentesque"
class="lorem ipsum dolor sit amet consectetur adipiscing
elit proin ex massa hendrerit eu posuere eu volutpat id
neque pellentesque"
>
<slot></slot>
</div>
Expand All @@ -37,9 +37,9 @@ exports[`'long enough (3) - multiple lines' > expectation 1`] = `
<template>
<div>
<div
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin
ex massa hendrerit eu posuere eu volutpat id neque
pellentesque"
class="lorem ipsum dolor sit amet consectetur adipiscing
elit proin ex massa hendrerit eu posuere eu volutpat id
neque pellentesque"
>
<slot></slot>
</div>
Expand All @@ -53,7 +53,8 @@ exports[`'near boundary (1) - single line with …' > expectation 1`] = `
<template>
<div>
<div
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin"
class="lorem ipsum dolor sit amet consectetur adipiscing
elit proin"
>
<slot></slot>
</div>
Expand All @@ -67,7 +68,8 @@ exports[`'near boundary (2) - single line with …' > expectation 1`] = `
<template>
<div>
<div
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin"
class="lorem ipsum dolor sit amet consectetur adipiscing
elit proin"
>
<slot></slot>
</div>
Expand All @@ -81,7 +83,8 @@ exports[`'near boundary (3) - multiple lines' > expectation 1`] = `
<template>
<div>
<div
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin"
class="lorem ipsum dolor sit amet consectetur adipiscing
elit proin"
>
<slot></slot>
</div>
Expand Down Expand Up @@ -131,8 +134,8 @@ exports[`'syntax variants - component' > expectation 1`] = `
<template>
<div>
<Box
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin
ex massa hendrerit eu posuere"
class="lorem ipsum dolor sit amet consectetur adipiscing
elit proin ex massa hendrerit eu posuere"
>
<slot></slot>
</Box>
Expand Down
14 changes: 7 additions & 7 deletions tests/angular/classnames-print-width/__snapshots__/relative.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ exports[`'(1) If no value is provided, the \`pri…' > expectation 1`] = `
<template>
<div>
<div
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit
eu posuere eu volutpat id neque pellentesque"
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa
hendrerit eu posuere eu volutpat id neque pellentesque"
>
<slot></slot>
</div>
Expand All @@ -21,9 +21,9 @@ exports[`'(2) \`classnamesPrintWidth\` is shorter…' > expectation 1`] = `
<template>
<div>
<div
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin
ex massa hendrerit eu posuere eu volutpat id neque
pellentesque"
class="lorem ipsum dolor sit amet consectetur adipiscing
elit proin ex massa hendrerit eu posuere eu volutpat id
neque pellentesque"
>
<slot></slot>
</div>
Expand All @@ -38,8 +38,8 @@ exports[`'(3) \`classnamesPrintWidth\` is longer …' > expectation 1`] = `
<template>
<div>
<div
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit
eu posuere eu volutpat id neque pellentesque"
class="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa
hendrerit eu posuere eu volutpat id neque pellentesque"
>
<slot></slot>
</div>
Expand Down
17 changes: 10 additions & 7 deletions tests/angular/complex-ternary/__snapshots__/relative.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ exports[`'(1) nested ternary' > expectation 1`] = `
condition
? 'lorem ipsum dolor sit amet'
: condition
? 'lorem ipsum dolor sit amet consectetur adipiscing elit proin'
: 'lorem ipsum dolor sit amet consectetur adipiscing elit proin
ex massa hendrerit eu posuere'
? 'lorem ipsum dolor sit amet consectetur adipiscing elit
proin'
: 'lorem ipsum dolor sit amet consectetur adipiscing elit
proin ex massa hendrerit eu posuere'
"
>
<slot></slot>
Expand All @@ -30,11 +31,13 @@ exports[`'(2) double nested ternary' > expectation 1`] = `
condition
? 'lorem ipsum dolor sit amet'
: condition
? 'lorem ipsum dolor sit amet consectetur adipiscing elit proin'
? 'lorem ipsum dolor sit amet consectetur adipiscing elit
proin'
: condition
? 'lorem ipsum dolor sit amet consectetur adipiscing elit proin'
: 'lorem ipsum dolor sit amet consectetur adipiscing elit proin
ex massa hendrerit eu posuere'
? 'lorem ipsum dolor sit amet consectetur adipiscing elit
proin'
: 'lorem ipsum dolor sit amet consectetur adipiscing elit
proin ex massa hendrerit eu posuere'
"
>
<slot></slot>
Expand Down
20 changes: 10 additions & 10 deletions tests/angular/default-supported/__snapshots__/relative.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ exports[`'supported attributes and supported fu…' > expectation 1`] = `
<div
[class]="
classNames(
'lorem ipsum dolor sit amet consectetur adipiscing elit proin
ex massa hendrerit eu posuere'
'lorem ipsum dolor sit amet consectetur adipiscing elit
proin ex massa hendrerit eu posuere'
)
"
>
Expand All @@ -18,8 +18,8 @@ exports[`'supported attributes and supported fu…' > expectation 1`] = `
<div
[className]="
classNames(
'lorem ipsum dolor sit amet consectetur adipiscing elit proin
ex massa hendrerit eu posuere'
'lorem ipsum dolor sit amet consectetur adipiscing elit
proin ex massa hendrerit eu posuere'
)
"
>
Expand All @@ -39,8 +39,8 @@ exports[`'supported attributes and unsupported …' > expectation 1`] = `
<div
[class]="
foo(
'lorem ipsum dolor sit amet consectetur adipiscing elit proin
ex massa hendrerit eu posuere'
'lorem ipsum dolor sit amet consectetur adipiscing elit
proin ex massa hendrerit eu posuere'
)
"
>
Expand All @@ -49,8 +49,8 @@ exports[`'supported attributes and unsupported …' > expectation 1`] = `
<div
[className]="
foo(
'lorem ipsum dolor sit amet consectetur adipiscing elit proin
ex massa hendrerit eu posuere'
'lorem ipsum dolor sit amet consectetur adipiscing elit
proin ex massa hendrerit eu posuere'
)
"
>
Expand All @@ -70,8 +70,8 @@ exports[`'unsupported attributes and supported …' > expectation 1`] = `
<div
[title]="
classNames(
'lorem ipsum dolor sit amet consectetur adipiscing elit proin
ex massa hendrerit eu posuere'
'lorem ipsum dolor sit amet consectetur adipiscing elit
proin ex massa hendrerit eu posuere'
)
"
>
Expand Down
4 changes: 2 additions & 2 deletions tests/angular/delimiter-conversion/__snapshots__/relative.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ exports[`'contains backtick - delimiter is sing…' > expectation 1`] = `
<template>
<div>
<div
[class]="'lorem ipsum do\`or sit amet consectetur adipiscing elit proin
ex massa hendrerit eu posuere'"
[class]="'lorem ipsum do\`or sit amet consectetur adipiscing
elit proin ex massa hendrerit eu posuere'"
>
<slot></slot>
</div>
Expand Down
Loading
Loading