Skip to content

Commit 8309b47

Browse files
adamwathanadamwathan
authored
Remove static radius values from theme (tailwindlabs#13186)
* Remove static radius values from theme * Update snapshots * Update changelog * Use static utilities + a big loop --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
1 parent b7dd979 commit 8309b47

File tree

7 files changed

+91
-127
lines changed

7 files changed

+91
-127
lines changed

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1111

1212
- Ensure `scale-*` utilities support percentage values ([#13182](https://github.com/tailwindlabs/tailwindcss/pull/13182))
1313

14+
### Changed
15+
16+
- Replace `--radius-none` and `--radius-full` theme values with static `rounded-none` and `rounded-full` utilities ([#13186](https://github.com/tailwindlabs/tailwindcss/pull/13186))
17+
1418
## [4.0.0-alpha.7] - 2024-03-08
1519

1620
### Added

‎packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

+1-3
Original file line numberDiff line numberDiff line change
@@ -271,10 +271,8 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
271271
--blur-xl: 24px;
272272
--blur-2xl: 40px;
273273
--blur-3xl: 64px;
274-
--radius-none: 0px;
275-
--radius-full: 9999px;
276-
--radius-sm: .125rem;
277274
--radius: .25rem;
275+
--radius-sm: .125rem;
278276
--radius-md: .375rem;
279277
--radius-lg: .5rem;
280278
--radius-xl: .75rem;

‎packages/tailwindcss/src/__snapshots__/index.test.ts.snap

+1-3
Original file line numberDiff line numberDiff line change
@@ -270,10 +270,8 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
270270
--blur-xl: 24px;
271271
--blur-2xl: 40px;
272272
--blur-3xl: 64px;
273-
--radius-none: 0px;
274-
--radius-full: 9999px;
275-
--radius-sm: .125rem;
276273
--radius: .25rem;
274+
--radius-sm: .125rem;
277275
--radius-md: .375rem;
278276
--radius-lg: .5rem;
279277
--radius-xl: .75rem;

‎packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

+30
Original file line numberDiff line numberDiff line change
@@ -1244,6 +1244,36 @@ exports[`getClassList 1`] = `
12441244
"rotate-45",
12451245
"rotate-6",
12461246
"rotate-90",
1247+
"rounded-b-full",
1248+
"rounded-b-none",
1249+
"rounded-bl-full",
1250+
"rounded-bl-none",
1251+
"rounded-br-full",
1252+
"rounded-br-none",
1253+
"rounded-e-full",
1254+
"rounded-e-none",
1255+
"rounded-ee-full",
1256+
"rounded-ee-none",
1257+
"rounded-es-full",
1258+
"rounded-es-none",
1259+
"rounded-full",
1260+
"rounded-l-full",
1261+
"rounded-l-none",
1262+
"rounded-none",
1263+
"rounded-r-full",
1264+
"rounded-r-none",
1265+
"rounded-s-full",
1266+
"rounded-s-none",
1267+
"rounded-se-full",
1268+
"rounded-se-none",
1269+
"rounded-ss-full",
1270+
"rounded-ss-none",
1271+
"rounded-t-full",
1272+
"rounded-t-none",
1273+
"rounded-tl-full",
1274+
"rounded-tl-none",
1275+
"rounded-tr-full",
1276+
"rounded-tr-none",
12471277
"row-auto",
12481278
"row-end-1",
12491279
"row-end-10",

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

+21-25
Original file line numberDiff line numberDiff line change
@@ -5787,8 +5787,6 @@ test('rounded', () => {
57875787
compileCss(
57885788
css`
57895789
@theme {
5790-
--radius-none: 0px;
5791-
--radius-full: 9999px;
57925790
--radius-sm: 0.125rem;
57935791
--radius: 0.25rem;
57945792
}
@@ -5798,8 +5796,6 @@ test('rounded', () => {
57985796
),
57995797
).toMatchInlineSnapshot(`
58005798
":root {
5801-
--radius-none: 0px;
5802-
--radius-full: 9999px;
58035799
--radius-sm: .125rem;
58045800
--radius: .25rem;
58055801
}
@@ -5813,7 +5809,7 @@ test('rounded', () => {
58135809
}
58145810
58155811
.rounded-full {
5816-
border-radius: 9999px;
5812+
border-radius: 3.40282e38px;
58175813
}
58185814
58195815
.rounded-none {
@@ -5862,8 +5858,8 @@ test('rounded-s', () => {
58625858
}
58635859
58645860
.rounded-s-full {
5865-
border-start-start-radius: 9999px;
5866-
border-end-start-radius: 9999px;
5861+
border-start-start-radius: 3.40282e38px;
5862+
border-end-start-radius: 3.40282e38px;
58675863
}
58685864
58695865
.rounded-s-none {
@@ -5914,8 +5910,8 @@ test('rounded-e', () => {
59145910
}
59155911
59165912
.rounded-e-full {
5917-
border-start-end-radius: 9999px;
5918-
border-end-end-radius: 9999px;
5913+
border-start-end-radius: 3.40282e38px;
5914+
border-end-end-radius: 3.40282e38px;
59195915
}
59205916
59215917
.rounded-e-none {
@@ -5966,8 +5962,8 @@ test('rounded-t', () => {
59665962
}
59675963
59685964
.rounded-t-full {
5969-
border-top-left-radius: 9999px;
5970-
border-top-right-radius: 9999px;
5965+
border-top-left-radius: 3.40282e38px;
5966+
border-top-right-radius: 3.40282e38px;
59715967
}
59725968
59735969
.rounded-t-none {
@@ -6018,8 +6014,8 @@ test('rounded-r', () => {
60186014
}
60196015
60206016
.rounded-r-full {
6021-
border-top-right-radius: 9999px;
6022-
border-bottom-right-radius: 9999px;
6017+
border-top-right-radius: 3.40282e38px;
6018+
border-bottom-right-radius: 3.40282e38px;
60236019
}
60246020
60256021
.rounded-r-none {
@@ -6070,8 +6066,8 @@ test('rounded-b', () => {
60706066
}
60716067
60726068
.rounded-b-full {
6073-
border-bottom-right-radius: 9999px;
6074-
border-bottom-left-radius: 9999px;
6069+
border-bottom-right-radius: 3.40282e38px;
6070+
border-bottom-left-radius: 3.40282e38px;
60756071
}
60766072
60776073
.rounded-b-none {
@@ -6122,8 +6118,8 @@ test('rounded-l', () => {
61226118
}
61236119
61246120
.rounded-l-full {
6125-
border-top-left-radius: 9999px;
6126-
border-bottom-left-radius: 9999px;
6121+
border-top-left-radius: 3.40282e38px;
6122+
border-bottom-left-radius: 3.40282e38px;
61276123
}
61286124
61296125
.rounded-l-none {
@@ -6172,7 +6168,7 @@ test('rounded-ss', () => {
61726168
}
61736169
61746170
.rounded-ss-full {
6175-
border-start-start-radius: 9999px;
6171+
border-start-start-radius: 3.40282e38px;
61766172
}
61776173
61786174
.rounded-ss-none {
@@ -6225,7 +6221,7 @@ test('rounded-se', () => {
62256221
}
62266222
62276223
.rounded-se-full {
6228-
border-start-end-radius: 9999px;
6224+
border-start-end-radius: 3.40282e38px;
62296225
}
62306226
62316227
.rounded-se-none {
@@ -6278,7 +6274,7 @@ test('rounded-ee', () => {
62786274
}
62796275
62806276
.rounded-ee-full {
6281-
border-end-end-radius: 9999px;
6277+
border-end-end-radius: 3.40282e38px;
62826278
}
62836279
62846280
.rounded-ee-none {
@@ -6331,7 +6327,7 @@ test('rounded-es', () => {
63316327
}
63326328
63336329
.rounded-es-full {
6334-
border-end-start-radius: 9999px;
6330+
border-end-start-radius: 3.40282e38px;
63356331
}
63366332
63376333
.rounded-es-none {
@@ -6384,7 +6380,7 @@ test('rounded-tl', () => {
63846380
}
63856381
63866382
.rounded-tl-full {
6387-
border-top-left-radius: 9999px;
6383+
border-top-left-radius: 3.40282e38px;
63886384
}
63896385
63906386
.rounded-tl-none {
@@ -6437,7 +6433,7 @@ test('rounded-tr', () => {
64376433
}
64386434
64396435
.rounded-tr-full {
6440-
border-top-right-radius: 9999px;
6436+
border-top-right-radius: 3.40282e38px;
64416437
}
64426438
64436439
.rounded-tr-none {
@@ -6490,7 +6486,7 @@ test('rounded-br', () => {
64906486
}
64916487
64926488
.rounded-br-full {
6493-
border-bottom-right-radius: 9999px;
6489+
border-bottom-right-radius: 3.40282e38px;
64946490
}
64956491
64966492
.rounded-br-none {
@@ -6543,7 +6539,7 @@ test('rounded-bl', () => {
65436539
}
65446540
65456541
.rounded-bl-full {
6546-
border-bottom-left-radius: 9999px;
6542+
border-bottom-left-radius: 3.40282e38px;
65476543
}
65486544
65496545
.rounded-bl-none {

‎packages/tailwindcss/src/utilities.ts

+33-93
Original file line numberDiff line numberDiff line change
@@ -1954,99 +1954,39 @@ export function createUtilities(theme: Theme) {
19541954
staticUtility('break-all', [['word-break', 'break-all']])
19551955
staticUtility('break-keep', [['word-break', 'break-keep']])
19561956

1957-
// rounded-*
1958-
functionalUtility('rounded', {
1959-
themeKeys: ['--radius'],
1960-
handle: (value) => [decl('border-radius', value)],
1961-
})
1962-
1963-
functionalUtility('rounded-s', {
1964-
themeKeys: ['--radius'],
1965-
handle: (value) => [
1966-
decl('border-start-start-radius', value),
1967-
decl('border-end-start-radius', value),
1968-
],
1969-
})
1970-
1971-
functionalUtility('rounded-e', {
1972-
themeKeys: ['--radius'],
1973-
handle: (value) => [
1974-
decl('border-start-end-radius', value),
1975-
decl('border-end-end-radius', value),
1976-
],
1977-
})
1978-
1979-
functionalUtility('rounded-t', {
1980-
themeKeys: ['--radius'],
1981-
handle: (value) => [
1982-
decl('border-top-left-radius', value),
1983-
decl('border-top-right-radius', value),
1984-
],
1985-
})
1986-
1987-
functionalUtility('rounded-r', {
1988-
themeKeys: ['--radius'],
1989-
handle: (value) => [
1990-
decl('border-top-right-radius', value),
1991-
decl('border-bottom-right-radius', value),
1992-
],
1993-
})
1994-
1995-
functionalUtility('rounded-b', {
1996-
themeKeys: ['--radius'],
1997-
handle: (value) => [
1998-
decl('border-bottom-right-radius', value),
1999-
decl('border-bottom-left-radius', value),
2000-
],
2001-
})
2002-
2003-
functionalUtility('rounded-l', {
2004-
themeKeys: ['--radius'],
2005-
handle: (value) => [
2006-
decl('border-top-left-radius', value),
2007-
decl('border-bottom-left-radius', value),
2008-
],
2009-
})
2010-
2011-
functionalUtility('rounded-ss', {
2012-
themeKeys: ['--radius'],
2013-
handle: (value) => [decl('border-start-start-radius', value)],
2014-
})
2015-
2016-
functionalUtility('rounded-se', {
2017-
themeKeys: ['--radius'],
2018-
handle: (value) => [decl('border-start-end-radius', value)],
2019-
})
2020-
2021-
functionalUtility('rounded-ee', {
2022-
themeKeys: ['--radius'],
2023-
handle: (value) => [decl('border-end-end-radius', value)],
2024-
})
2025-
2026-
functionalUtility('rounded-es', {
2027-
themeKeys: ['--radius'],
2028-
handle: (value) => [decl('border-end-start-radius', value)],
2029-
})
2030-
2031-
functionalUtility('rounded-tl', {
2032-
themeKeys: ['--radius'],
2033-
handle: (value) => [decl('border-top-left-radius', value)],
2034-
})
2035-
2036-
functionalUtility('rounded-tr', {
2037-
themeKeys: ['--radius'],
2038-
handle: (value) => [decl('border-top-right-radius', value)],
2039-
})
2040-
2041-
functionalUtility('rounded-br', {
2042-
themeKeys: ['--radius'],
2043-
handle: (value) => [decl('border-bottom-right-radius', value)],
2044-
})
2045-
2046-
functionalUtility('rounded-bl', {
2047-
themeKeys: ['--radius'],
2048-
handle: (value) => [decl('border-bottom-left-radius', value)],
2049-
})
1957+
{
1958+
// border-radius
1959+
for (let [root, properties] of [
1960+
['rounded', ['border-radius']],
1961+
['rounded-s', ['border-start-start-radius', 'border-end-start-radius']],
1962+
['rounded-e', ['border-start-end-radius', 'border-end-end-radius']],
1963+
['rounded-t', ['border-top-left-radius', 'border-top-right-radius']],
1964+
['rounded-r', ['border-top-right-radius', 'border-bottom-right-radius']],
1965+
['rounded-b', ['border-bottom-right-radius', 'border-bottom-left-radius']],
1966+
['rounded-l', ['border-top-left-radius', 'border-bottom-left-radius']],
1967+
['rounded-ss', ['border-start-start-radius']],
1968+
['rounded-se', ['border-start-end-radius']],
1969+
['rounded-ee', ['border-end-end-radius']],
1970+
['rounded-es', ['border-end-start-radius']],
1971+
['rounded-tl', ['border-top-left-radius']],
1972+
['rounded-tr', ['border-top-right-radius']],
1973+
['rounded-br', ['border-bottom-right-radius']],
1974+
['rounded-bl', ['border-bottom-left-radius']],
1975+
] as const) {
1976+
staticUtility(
1977+
`${root}-none`,
1978+
properties.map((property) => [property, '0']),
1979+
)
1980+
staticUtility(
1981+
`${root}-full`,
1982+
properties.map((property) => [property, 'calc(infinity * 1px)']),
1983+
)
1984+
functionalUtility(root, {
1985+
themeKeys: ['--radius'],
1986+
handle: (value) => properties.map((property) => decl(property, value)),
1987+
})
1988+
}
1989+
}
20501990

20511991
staticUtility('border-solid', [
20521992
['--tw-border-style', 'solid'],

‎packages/tailwindcss/theme.css

+1-3
Original file line numberDiff line numberDiff line change
@@ -278,10 +278,8 @@
278278
--blur-3xl: 64px;
279279

280280
/* Radii */
281-
--radius-none: 0px;
282-
--radius-full: 9999px;
283-
--radius-sm: 0.125rem;
284281
--radius: 0.25rem;
282+
--radius-sm: 0.125rem;
285283
--radius-md: 0.375rem;
286284
--radius-lg: 0.5rem;
287285
--radius-xl: 0.75rem;

0 commit comments

Comments
 (0)