Skip to content

Fix inferring data type of border-[…] with multiple values #17248

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
RobinMalfait merged 3 commits into from
Mar 17, 2025
Merged

Fix inferring data type of border-[…] with multiple values #17248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
816afc8
add failing test
RobinMalfait Mar 17, 2025
3ab7ced
expand `isLineWidth` logic
RobinMalfait Mar 17, 2025
5ee30fc
update changelog
RobinMalfait Mar 17, 2025
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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed

- Fix incorrect angle in `-bg-conic-*` utilities ([#17174](https://github.com/tailwindlabs/tailwindcss/pull/17174))
- Fix `border-[12px_4px]` being interpreted as a `border-color` instead of a `border-width` ([#17248](https://github.com/tailwindlabs/tailwindcss/pull/17248))

## [4.0.14] - 2025-03-13

Expand Down
180 changes: 180 additions & 0 deletions packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,26 @@ exports[`border-* 1`] = `
border-width: 123px;
}

.border-\\[0_1\\] {
border-style: var(--tw-border-style);
border-width: 0 1px;
}

.border-\\[0_2px_0_2px\\] {
border-style: var(--tw-border-style);
border-width: 0 2px;
}

.border-\\[12px\\] {
border-style: var(--tw-border-style);
border-width: 12px;
}

.border-\\[12px_8px\\] {
border-style: var(--tw-border-style);
border-width: 12px 8px;
}

.border-\\[length\\:var\\(--my-width\\)\\], .border-\\[line-width\\:var\\(--my-width\\)\\] {
border-style: var(--tw-border-style);
border-width: var(--my-width);
Expand All @@ -55,6 +70,11 @@ exports[`border-* 1`] = `
border-width: thin;
}

.border-\\[thin_2px\\] {
border-style: var(--tw-border-style);
border-width: thin 2px;
}

.border-\\[\\#0088cc\\] {
border-color: #08c;
}
Expand Down Expand Up @@ -152,11 +172,26 @@ exports[`border-b-* 1`] = `
border-bottom-width: 123px;
}

.border-b-\\[0_1\\] {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 0 1;
}

.border-b-\\[0_2px_0_2px\\] {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 0 2px 0 2px;
}

.border-b-\\[12px\\] {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 12px;
}

.border-b-\\[12px_8px\\] {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 12px 8px;
}

.border-b-\\[length\\:var\\(--my-width\\)\\], .border-b-\\[line-width\\:var\\(--my-width\\)\\] {
border-bottom-style: var(--tw-border-style);
border-bottom-width: var(--my-width);
Expand All @@ -177,6 +212,11 @@ exports[`border-b-* 1`] = `
border-bottom-width: thin;
}

.border-b-\\[thin_2px\\] {
border-bottom-style: var(--tw-border-style);
border-bottom-width: thin 2px;
}

.border-b-\\[\\#0088cc\\] {
border-bottom-color: #08c;
}
Expand Down Expand Up @@ -274,11 +314,26 @@ exports[`border-e-* 1`] = `
border-inline-end-width: 123px;
}

.border-e-\\[0_1\\] {
border-inline-end-style: var(--tw-border-style);
border-inline-end-width: 0 1;
}

.border-e-\\[0_2px_0_2px\\] {
border-inline-end-style: var(--tw-border-style);
border-inline-end-width: 0 2px 0 2px;
}

.border-e-\\[12px\\] {
border-inline-end-style: var(--tw-border-style);
border-inline-end-width: 12px;
}

.border-e-\\[12px_8px\\] {
border-inline-end-style: var(--tw-border-style);
border-inline-end-width: 12px 8px;
}

.border-e-\\[length\\:var\\(--my-width\\)\\], .border-e-\\[line-width\\:var\\(--my-width\\)\\] {
border-inline-end-style: var(--tw-border-style);
border-inline-end-width: var(--my-width);
Expand All @@ -299,6 +354,11 @@ exports[`border-e-* 1`] = `
border-inline-end-width: thin;
}

.border-e-\\[thin_2px\\] {
border-inline-end-style: var(--tw-border-style);
border-inline-end-width: thin 2px;
}

.border-e-\\[\\#0088cc\\] {
border-inline-end-color: #08c;
}
Expand Down Expand Up @@ -396,11 +456,26 @@ exports[`border-l-* 1`] = `
border-left-width: 123px;
}

.border-l-\\[0_1\\] {
border-left-style: var(--tw-border-style);
border-left-width: 0 1;
}

.border-l-\\[0_2px_0_2px\\] {
border-left-style: var(--tw-border-style);
border-left-width: 0 2px 0 2px;
}

.border-l-\\[12px\\] {
border-left-style: var(--tw-border-style);
border-left-width: 12px;
}

.border-l-\\[12px_8px\\] {
border-left-style: var(--tw-border-style);
border-left-width: 12px 8px;
}

.border-l-\\[length\\:var\\(--my-width\\)\\], .border-l-\\[line-width\\:var\\(--my-width\\)\\] {
border-left-style: var(--tw-border-style);
border-left-width: var(--my-width);
Expand All @@ -421,6 +496,11 @@ exports[`border-l-* 1`] = `
border-left-width: thin;
}

.border-l-\\[thin_2px\\] {
border-left-style: var(--tw-border-style);
border-left-width: thin 2px;
}

.border-l-\\[\\#0088cc\\] {
border-left-color: #08c;
}
Expand Down Expand Up @@ -518,11 +598,26 @@ exports[`border-r-* 1`] = `
border-right-width: 123px;
}

.border-r-\\[0_1\\] {
border-right-style: var(--tw-border-style);
border-right-width: 0 1;
}

.border-r-\\[0_2px_0_2px\\] {
border-right-style: var(--tw-border-style);
border-right-width: 0 2px 0 2px;
}

.border-r-\\[12px\\] {
border-right-style: var(--tw-border-style);
border-right-width: 12px;
}

.border-r-\\[12px_8px\\] {
border-right-style: var(--tw-border-style);
border-right-width: 12px 8px;
}

.border-r-\\[length\\:var\\(--my-width\\)\\], .border-r-\\[line-width\\:var\\(--my-width\\)\\] {
border-right-style: var(--tw-border-style);
border-right-width: var(--my-width);
Expand All @@ -543,6 +638,11 @@ exports[`border-r-* 1`] = `
border-right-width: thin;
}

.border-r-\\[thin_2px\\] {
border-right-style: var(--tw-border-style);
border-right-width: thin 2px;
}

.border-r-\\[\\#0088cc\\] {
border-right-color: #08c;
}
Expand Down Expand Up @@ -640,11 +740,26 @@ exports[`border-s-* 1`] = `
border-inline-start-width: 123px;
}

.border-s-\\[0_1\\] {
border-inline-start-style: var(--tw-border-style);
border-inline-start-width: 0 1;
}

.border-s-\\[0_2px_0_2px\\] {
border-inline-start-style: var(--tw-border-style);
border-inline-start-width: 0 2px 0 2px;
}

.border-s-\\[12px\\] {
border-inline-start-style: var(--tw-border-style);
border-inline-start-width: 12px;
}

.border-s-\\[12px_8px\\] {
border-inline-start-style: var(--tw-border-style);
border-inline-start-width: 12px 8px;
}

.border-s-\\[length\\:var\\(--my-width\\)\\], .border-s-\\[line-width\\:var\\(--my-width\\)\\] {
border-inline-start-style: var(--tw-border-style);
border-inline-start-width: var(--my-width);
Expand All @@ -665,6 +780,11 @@ exports[`border-s-* 1`] = `
border-inline-start-width: thin;
}

.border-s-\\[thin_2px\\] {
border-inline-start-style: var(--tw-border-style);
border-inline-start-width: thin 2px;
}

.border-s-\\[\\#0088cc\\] {
border-inline-start-color: #08c;
}
Expand Down Expand Up @@ -762,11 +882,26 @@ exports[`border-t-* 1`] = `
border-top-width: 123px;
}

.border-t-\\[0_1\\] {
border-top-style: var(--tw-border-style);
border-top-width: 0 1;
}

.border-t-\\[0_2px_0_2px\\] {
border-top-style: var(--tw-border-style);
border-top-width: 0 2px 0 2px;
}

.border-t-\\[12px\\] {
border-top-style: var(--tw-border-style);
border-top-width: 12px;
}

.border-t-\\[12px_8px\\] {
border-top-style: var(--tw-border-style);
border-top-width: 12px 8px;
}

.border-t-\\[length\\:var\\(--my-width\\)\\], .border-t-\\[line-width\\:var\\(--my-width\\)\\] {
border-top-style: var(--tw-border-style);
border-top-width: var(--my-width);
Expand All @@ -787,6 +922,11 @@ exports[`border-t-* 1`] = `
border-top-width: thin;
}

.border-t-\\[thin_2px\\] {
border-top-style: var(--tw-border-style);
border-top-width: thin 2px;
}

.border-t-\\[\\#0088cc\\] {
border-top-color: #08c;
}
Expand Down Expand Up @@ -884,11 +1024,26 @@ exports[`border-x-* 1`] = `
border-inline-width: 123px;
}

.border-x-\\[0_1\\] {
border-inline-style: var(--tw-border-style);
border-inline-width: 0 1px;
}

.border-x-\\[0_2px_0_2px\\] {
border-inline-style: var(--tw-border-style);
border-inline-width: 0 2px 0 2px;
}

.border-x-\\[12px\\] {
border-inline-style: var(--tw-border-style);
border-inline-width: 12px;
}

.border-x-\\[12px_8px\\] {
border-inline-style: var(--tw-border-style);
border-inline-width: 12px 8px;
}

.border-x-\\[length\\:var\\(--my-width\\)\\], .border-x-\\[line-width\\:var\\(--my-width\\)\\] {
border-inline-style: var(--tw-border-style);
border-inline-width: var(--my-width);
Expand All @@ -909,6 +1064,11 @@ exports[`border-x-* 1`] = `
border-inline-width: thin;
}

.border-x-\\[thin_2px\\] {
border-inline-style: var(--tw-border-style);
border-inline-width: thin 2px;
}

.border-x-\\[\\#0088cc\\] {
border-inline-color: #08c;
}
Expand Down Expand Up @@ -1006,11 +1166,26 @@ exports[`border-y-* 1`] = `
border-block-width: 123px;
}

.border-y-\\[0_1\\] {
border-block-style: var(--tw-border-style);
border-block-width: 0 1px;
}

.border-y-\\[0_2px_0_2px\\] {
border-block-style: var(--tw-border-style);
border-block-width: 0 2px 0 2px;
}

.border-y-\\[12px\\] {
border-block-style: var(--tw-border-style);
border-block-width: 12px;
}

.border-y-\\[12px_8px\\] {
border-block-style: var(--tw-border-style);
border-block-width: 12px 8px;
}

.border-y-\\[length\\:var\\(--my-width\\)\\], .border-y-\\[line-width\\:var\\(--my-width\\)\\] {
border-block-style: var(--tw-border-style);
border-block-width: var(--my-width);
Expand All @@ -1031,6 +1206,11 @@ exports[`border-y-* 1`] = `
border-block-width: thin;
}

.border-y-\\[thin_2px\\] {
border-block-style: var(--tw-border-style);
border-block-width: thin 2px;
}

.border-y-\\[\\#0088cc\\] {
border-block-color: #08c;
}
Expand Down
4 changes: 4 additions & 0 deletions packages/tailwindcss/src/utilities.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9881,6 +9881,10 @@ for (let prefix of prefixes) {
classes.push(`${prefix}-[medium]`)
classes.push(`${prefix}-[thick]`)
classes.push(`${prefix}-[12px]`)
classes.push(`${prefix}-[12px_8px]`)
classes.push(`${prefix}-[0_2px_0_2px]`)
classes.push(`${prefix}-[0_1]`)
classes.push(`${prefix}-[thin_2px]`)
classes.push(`${prefix}-[length:var(--my-width)]`)
classes.push(`${prefix}-[line-width:var(--my-width)]`)

Expand Down
9 changes: 8 additions & 1 deletion packages/tailwindcss/src/utils/infer-data-type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,14 @@ function isUrl(value: string): boolean {
/* -------------------------------------------------------------------------- */

function isLineWidth(value: string): boolean {
return value === 'thin' || value === 'medium' || value === 'thick'
return segment(value, ' ').every(
(value) =>
isLength(value) ||
isNumber(value) ||
Copy link
Contributor

@thecrypticace thecrypticace Mar 17, 2025

Choose a reason for hiding this comment

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

I think I know why isNumber is here… it's for 0 support right? If so we should really adjust isLength to account for unit-less zero instead I think.

Can do that in a separate PR tho.

Copy link
Member Author

@RobinMalfait RobinMalfait Mar 17, 2025

Choose a reason for hiding this comment

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

Yeah wasn't 100% sure where to put the unit-less numbers. Only annoying thing is that 0 can be put in spots where both a length or percentage is valid, so if we have a utility that differentiate between length and percentage then we run into an issue (and an explicit data type is necessary). Might not be a big deal 🤔

Also border-width: 1; is interpreted as border-width: 1px; but 0 stays as 0 (or at least by Lightning CSS). So we almost have to resolve the value based on the property we are setting: https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22.foo%20%7B%5Cn%20%20border-width%3A%200%201%3B%20%2F*%200%201px%20*%2F%5Cn%20%20font-size%3A%201%3B%20%2F*%201px%20*%2F%5Cn%20%20--value%3A%201%3B%20%2F*%201%20*%2F%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

The inferring of data types is also not 100% correct conceptually because in this case it should be <line-width>{1,4} and now we passthrough any number of arguments.

value === 'thin' ||
value === 'medium' ||
value === 'thick',
)
}

/* -------------------------------------------------------------------------- */
Expand Down