Skip to content

Commit 4f7a791

Browse files
adamwathanadamwathan
authored
Include variable in output for bare utilities like rounded (tailwindlabs#13836)
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
1 parent 564fb78 commit 4f7a791

File tree

3 files changed

+31
-31
lines changed

3 files changed

+31
-31
lines changed

‎packages/tailwindcss/src/theme.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,10 @@ export class Theme {
6565
}
6666
}
6767

68-
#resolveKey(candidateValue: string, themeKeys: ThemeKey[]): string | null {
68+
#resolveKey(candidateValue: string | null, themeKeys: ThemeKey[]): string | null {
6969
for (let key of themeKeys) {
70-
let themeKey = escape(`${key}-${candidateValue.replaceAll('.', '_')}`)
70+
let themeKey =
71+
candidateValue !== null ? escape(`${key}-${candidateValue.replaceAll('.', '_')}`) : key
7172

7273
if (this.values.has(themeKey)) {
7374
return themeKey
@@ -85,15 +86,15 @@ export class Theme {
8586
return `var(${themeKey}, ${this.values.get(themeKey)?.value})`
8687
}
8788

88-
resolve(candidateValue: string, themeKeys: ThemeKey[]): string | null {
89+
resolve(candidateValue: string | null, themeKeys: ThemeKey[]): string | null {
8990
let themeKey = this.#resolveKey(candidateValue, themeKeys)
9091

9192
if (!themeKey) return null
9293

9394
return this.#var(themeKey)
9495
}
9596

96-
resolveValue(candidateValue: string, themeKeys: ThemeKey[]): string | null {
97+
resolveValue(candidateValue: string | null, themeKeys: ThemeKey[]): string | null {
9798
let themeKey = this.#resolveKey(candidateValue, themeKeys)
9899

99100
if (!themeKey) return null

‎packages/tailwindcss/src/utilities.test.ts‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6735,7 +6735,7 @@ test('rounded', () => {
67356735
}
67366736
67376737
.rounded {
6738-
border-radius: .25rem;
6738+
border-radius: var(--radius, .25rem);
67396739
}
67406740
67416741
.rounded-\\[4px\\] {
@@ -6782,8 +6782,8 @@ test('rounded-s', () => {
67826782
}
67836783
67846784
.rounded-s {
6785-
border-start-start-radius: .25rem;
6786-
border-end-start-radius: .25rem;
6785+
border-start-start-radius: var(--radius, .25rem);
6786+
border-end-start-radius: var(--radius, .25rem);
67876787
}
67886788
67896789
.rounded-s-\\[4px\\] {
@@ -6834,8 +6834,8 @@ test('rounded-e', () => {
68346834
}
68356835
68366836
.rounded-e {
6837-
border-start-end-radius: .25rem;
6838-
border-end-end-radius: .25rem;
6837+
border-start-end-radius: var(--radius, .25rem);
6838+
border-end-end-radius: var(--radius, .25rem);
68396839
}
68406840
68416841
.rounded-e-\\[4px\\] {
@@ -6886,8 +6886,8 @@ test('rounded-t', () => {
68866886
}
68876887
68886888
.rounded-t {
6889-
border-top-left-radius: .25rem;
6890-
border-top-right-radius: .25rem;
6889+
border-top-left-radius: var(--radius, .25rem);
6890+
border-top-right-radius: var(--radius, .25rem);
68916891
}
68926892
68936893
.rounded-t-\\[4px\\] {
@@ -6938,8 +6938,8 @@ test('rounded-r', () => {
69386938
}
69396939
69406940
.rounded-r {
6941-
border-top-right-radius: .25rem;
6942-
border-bottom-right-radius: .25rem;
6941+
border-top-right-radius: var(--radius, .25rem);
6942+
border-bottom-right-radius: var(--radius, .25rem);
69436943
}
69446944
69456945
.rounded-r-\\[4px\\] {
@@ -6990,8 +6990,8 @@ test('rounded-b', () => {
69906990
}
69916991
69926992
.rounded-b {
6993-
border-bottom-right-radius: .25rem;
6994-
border-bottom-left-radius: .25rem;
6993+
border-bottom-right-radius: var(--radius, .25rem);
6994+
border-bottom-left-radius: var(--radius, .25rem);
69956995
}
69966996
69976997
.rounded-b-\\[4px\\] {
@@ -7042,8 +7042,8 @@ test('rounded-l', () => {
70427042
}
70437043
70447044
.rounded-l {
7045-
border-top-left-radius: .25rem;
7046-
border-bottom-left-radius: .25rem;
7045+
border-top-left-radius: var(--radius, .25rem);
7046+
border-bottom-left-radius: var(--radius, .25rem);
70477047
}
70487048
70497049
.rounded-l-\\[4px\\] {
@@ -7094,7 +7094,7 @@ test('rounded-ss', () => {
70947094
}
70957095
70967096
.rounded-ss {
7097-
border-start-start-radius: .25rem;
7097+
border-start-start-radius: var(--radius, .25rem);
70987098
}
70997099
71007100
.rounded-ss-\\[4px\\] {
@@ -7147,7 +7147,7 @@ test('rounded-se', () => {
71477147
}
71487148
71497149
.rounded-se {
7150-
border-start-end-radius: .25rem;
7150+
border-start-end-radius: var(--radius, .25rem);
71517151
}
71527152
71537153
.rounded-se-\\[4px\\] {
@@ -7200,7 +7200,7 @@ test('rounded-ee', () => {
72007200
}
72017201
72027202
.rounded-ee {
7203-
border-end-end-radius: .25rem;
7203+
border-end-end-radius: var(--radius, .25rem);
72047204
}
72057205
72067206
.rounded-ee-\\[4px\\] {
@@ -7253,7 +7253,7 @@ test('rounded-es', () => {
72537253
}
72547254
72557255
.rounded-es {
7256-
border-end-start-radius: .25rem;
7256+
border-end-start-radius: var(--radius, .25rem);
72577257
}
72587258
72597259
.rounded-es-\\[4px\\] {
@@ -7306,7 +7306,7 @@ test('rounded-tl', () => {
73067306
}
73077307
73087308
.rounded-tl {
7309-
border-top-left-radius: .25rem;
7309+
border-top-left-radius: var(--radius, .25rem);
73107310
}
73117311
73127312
.rounded-tl-\\[4px\\] {
@@ -7359,7 +7359,7 @@ test('rounded-tr', () => {
73597359
}
73607360
73617361
.rounded-tr {
7362-
border-top-right-radius: .25rem;
7362+
border-top-right-radius: var(--radius, .25rem);
73637363
}
73647364
73657365
.rounded-tr-\\[4px\\] {
@@ -7412,7 +7412,7 @@ test('rounded-br', () => {
74127412
}
74137413
74147414
.rounded-br {
7415-
border-bottom-right-radius: .25rem;
7415+
border-bottom-right-radius: var(--radius, .25rem);
74167416
}
74177417
74187418
.rounded-br-\\[4px\\] {
@@ -7465,7 +7465,7 @@ test('rounded-bl', () => {
74657465
}
74667466
74677467
.rounded-bl {
7468-
border-bottom-left-radius: .25rem;
7468+
border-bottom-left-radius: var(--radius, .25rem);
74697469
}
74707470
74717471
.rounded-bl-\\[4px\\] {

‎packages/tailwindcss/src/utilities.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -310,12 +310,11 @@ export function createUtilities(theme: Theme) {
310310
let value: string | null = null
311311

312312
if (!candidate.value) {
313-
// If the candidate has no value segment (like `shadow`), use the
314-
// `defaultValue` or the `DEFAULT` value in the theme. No utility will
315-
// ever support both of these — `defaultValue` is for things like
316-
// `grayscale` whereas the `DEFAULT` in theme is for things like
317-
// `shadow` or `blur`.
318-
value = desc.defaultValue ?? theme.get(desc.themeKeys ?? [])
313+
// If the candidate has no value segment (like `rounded`), use the
314+
// `defaultValue` (for candidates like `grow` that have no theme values)
315+
// or a bare theme value (like `--radius` for `rounded`). No utility
316+
// will ever support both of these.
317+
value = desc.defaultValue ?? theme.resolve(null, desc.themeKeys ?? [])
319318
} else if (candidate.value.kind === 'arbitrary') {
320319
value = candidate.value.value
321320
} else {

0 commit comments

Comments
 (0)