Remove static radius values from theme (#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>
This commit is contained in:
Adam Wathan
GitHub
parent
b7dd979735
commit
8309b47266
7 changed files with 91 additions and 127 deletions
|
|
@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
|
||||
- Ensure `scale-*` utilities support percentage values ([#13182](https://github.com/tailwindlabs/tailwindcss/pull/13182))
|
||||
|
||||
### Changed
|
||||
|
||||
- Replace `--radius-none` and `--radius-full` theme values with static `rounded-none` and `rounded-full` utilities ([#13186](https://github.com/tailwindlabs/tailwindcss/pull/13186))
|
||||
|
||||
## [4.0.0-alpha.7] - 2024-03-08
|
||||
|
||||
### Added
|
||||
|
|
|
|||
|
|
@ -271,10 +271,8 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
|
|||
--blur-xl: 24px;
|
||||
--blur-2xl: 40px;
|
||||
--blur-3xl: 64px;
|
||||
--radius-none: 0px;
|
||||
--radius-full: 9999px;
|
||||
--radius-sm: .125rem;
|
||||
--radius: .25rem;
|
||||
--radius-sm: .125rem;
|
||||
--radius-md: .375rem;
|
||||
--radius-lg: .5rem;
|
||||
--radius-xl: .75rem;
|
||||
|
|
|
|||
|
|
@ -270,10 +270,8 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
|
|||
--blur-xl: 24px;
|
||||
--blur-2xl: 40px;
|
||||
--blur-3xl: 64px;
|
||||
--radius-none: 0px;
|
||||
--radius-full: 9999px;
|
||||
--radius-sm: .125rem;
|
||||
--radius: .25rem;
|
||||
--radius-sm: .125rem;
|
||||
--radius-md: .375rem;
|
||||
--radius-lg: .5rem;
|
||||
--radius-xl: .75rem;
|
||||
|
|
|
|||
|
|
@ -1244,6 +1244,36 @@ exports[`getClassList 1`] = `
|
|||
"rotate-45",
|
||||
"rotate-6",
|
||||
"rotate-90",
|
||||
"rounded-b-full",
|
||||
"rounded-b-none",
|
||||
"rounded-bl-full",
|
||||
"rounded-bl-none",
|
||||
"rounded-br-full",
|
||||
"rounded-br-none",
|
||||
"rounded-e-full",
|
||||
"rounded-e-none",
|
||||
"rounded-ee-full",
|
||||
"rounded-ee-none",
|
||||
"rounded-es-full",
|
||||
"rounded-es-none",
|
||||
"rounded-full",
|
||||
"rounded-l-full",
|
||||
"rounded-l-none",
|
||||
"rounded-none",
|
||||
"rounded-r-full",
|
||||
"rounded-r-none",
|
||||
"rounded-s-full",
|
||||
"rounded-s-none",
|
||||
"rounded-se-full",
|
||||
"rounded-se-none",
|
||||
"rounded-ss-full",
|
||||
"rounded-ss-none",
|
||||
"rounded-t-full",
|
||||
"rounded-t-none",
|
||||
"rounded-tl-full",
|
||||
"rounded-tl-none",
|
||||
"rounded-tr-full",
|
||||
"rounded-tr-none",
|
||||
"row-auto",
|
||||
"row-end-1",
|
||||
"row-end-10",
|
||||
|
|
|
|||
|
|
@ -5787,8 +5787,6 @@ test('rounded', () => {
|
|||
compileCss(
|
||||
css`
|
||||
@theme {
|
||||
--radius-none: 0px;
|
||||
--radius-full: 9999px;
|
||||
--radius-sm: 0.125rem;
|
||||
--radius: 0.25rem;
|
||||
}
|
||||
|
|
@ -5798,8 +5796,6 @@ test('rounded', () => {
|
|||
),
|
||||
).toMatchInlineSnapshot(`
|
||||
":root {
|
||||
--radius-none: 0px;
|
||||
--radius-full: 9999px;
|
||||
--radius-sm: .125rem;
|
||||
--radius: .25rem;
|
||||
}
|
||||
|
|
@ -5813,7 +5809,7 @@ test('rounded', () => {
|
|||
}
|
||||
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
border-radius: 3.40282e38px;
|
||||
}
|
||||
|
||||
.rounded-none {
|
||||
|
|
@ -5862,8 +5858,8 @@ test('rounded-s', () => {
|
|||
}
|
||||
|
||||
.rounded-s-full {
|
||||
border-start-start-radius: 9999px;
|
||||
border-end-start-radius: 9999px;
|
||||
border-start-start-radius: 3.40282e38px;
|
||||
border-end-start-radius: 3.40282e38px;
|
||||
}
|
||||
|
||||
.rounded-s-none {
|
||||
|
|
@ -5914,8 +5910,8 @@ test('rounded-e', () => {
|
|||
}
|
||||
|
||||
.rounded-e-full {
|
||||
border-start-end-radius: 9999px;
|
||||
border-end-end-radius: 9999px;
|
||||
border-start-end-radius: 3.40282e38px;
|
||||
border-end-end-radius: 3.40282e38px;
|
||||
}
|
||||
|
||||
.rounded-e-none {
|
||||
|
|
@ -5966,8 +5962,8 @@ test('rounded-t', () => {
|
|||
}
|
||||
|
||||
.rounded-t-full {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
border-top-left-radius: 3.40282e38px;
|
||||
border-top-right-radius: 3.40282e38px;
|
||||
}
|
||||
|
||||
.rounded-t-none {
|
||||
|
|
@ -6018,8 +6014,8 @@ test('rounded-r', () => {
|
|||
}
|
||||
|
||||
.rounded-r-full {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-top-right-radius: 3.40282e38px;
|
||||
border-bottom-right-radius: 3.40282e38px;
|
||||
}
|
||||
|
||||
.rounded-r-none {
|
||||
|
|
@ -6070,8 +6066,8 @@ test('rounded-b', () => {
|
|||
}
|
||||
|
||||
.rounded-b-full {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-bottom-right-radius: 3.40282e38px;
|
||||
border-bottom-left-radius: 3.40282e38px;
|
||||
}
|
||||
|
||||
.rounded-b-none {
|
||||
|
|
@ -6122,8 +6118,8 @@ test('rounded-l', () => {
|
|||
}
|
||||
|
||||
.rounded-l-full {
|
||||
border-top-left-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-left-radius: 3.40282e38px;
|
||||
border-bottom-left-radius: 3.40282e38px;
|
||||
}
|
||||
|
||||
.rounded-l-none {
|
||||
|
|
@ -6172,7 +6168,7 @@ test('rounded-ss', () => {
|
|||
}
|
||||
|
||||
.rounded-ss-full {
|
||||
border-start-start-radius: 9999px;
|
||||
border-start-start-radius: 3.40282e38px;
|
||||
}
|
||||
|
||||
.rounded-ss-none {
|
||||
|
|
@ -6225,7 +6221,7 @@ test('rounded-se', () => {
|
|||
}
|
||||
|
||||
.rounded-se-full {
|
||||
border-start-end-radius: 9999px;
|
||||
border-start-end-radius: 3.40282e38px;
|
||||
}
|
||||
|
||||
.rounded-se-none {
|
||||
|
|
@ -6278,7 +6274,7 @@ test('rounded-ee', () => {
|
|||
}
|
||||
|
||||
.rounded-ee-full {
|
||||
border-end-end-radius: 9999px;
|
||||
border-end-end-radius: 3.40282e38px;
|
||||
}
|
||||
|
||||
.rounded-ee-none {
|
||||
|
|
@ -6331,7 +6327,7 @@ test('rounded-es', () => {
|
|||
}
|
||||
|
||||
.rounded-es-full {
|
||||
border-end-start-radius: 9999px;
|
||||
border-end-start-radius: 3.40282e38px;
|
||||
}
|
||||
|
||||
.rounded-es-none {
|
||||
|
|
@ -6384,7 +6380,7 @@ test('rounded-tl', () => {
|
|||
}
|
||||
|
||||
.rounded-tl-full {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-left-radius: 3.40282e38px;
|
||||
}
|
||||
|
||||
.rounded-tl-none {
|
||||
|
|
@ -6437,7 +6433,7 @@ test('rounded-tr', () => {
|
|||
}
|
||||
|
||||
.rounded-tr-full {
|
||||
border-top-right-radius: 9999px;
|
||||
border-top-right-radius: 3.40282e38px;
|
||||
}
|
||||
|
||||
.rounded-tr-none {
|
||||
|
|
@ -6490,7 +6486,7 @@ test('rounded-br', () => {
|
|||
}
|
||||
|
||||
.rounded-br-full {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-right-radius: 3.40282e38px;
|
||||
}
|
||||
|
||||
.rounded-br-none {
|
||||
|
|
@ -6543,7 +6539,7 @@ test('rounded-bl', () => {
|
|||
}
|
||||
|
||||
.rounded-bl-full {
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-bottom-left-radius: 3.40282e38px;
|
||||
}
|
||||
|
||||
.rounded-bl-none {
|
||||
|
|
|
|||
|
|
@ -1954,99 +1954,39 @@ export function createUtilities(theme: Theme) {
|
|||
staticUtility('break-all', [['word-break', 'break-all']])
|
||||
staticUtility('break-keep', [['word-break', 'break-keep']])
|
||||
|
||||
// rounded-*
|
||||
functionalUtility('rounded', {
|
||||
themeKeys: ['--radius'],
|
||||
handle: (value) => [decl('border-radius', value)],
|
||||
})
|
||||
|
||||
functionalUtility('rounded-s', {
|
||||
themeKeys: ['--radius'],
|
||||
handle: (value) => [
|
||||
decl('border-start-start-radius', value),
|
||||
decl('border-end-start-radius', value),
|
||||
],
|
||||
})
|
||||
|
||||
functionalUtility('rounded-e', {
|
||||
themeKeys: ['--radius'],
|
||||
handle: (value) => [
|
||||
decl('border-start-end-radius', value),
|
||||
decl('border-end-end-radius', value),
|
||||
],
|
||||
})
|
||||
|
||||
functionalUtility('rounded-t', {
|
||||
themeKeys: ['--radius'],
|
||||
handle: (value) => [
|
||||
decl('border-top-left-radius', value),
|
||||
decl('border-top-right-radius', value),
|
||||
],
|
||||
})
|
||||
|
||||
functionalUtility('rounded-r', {
|
||||
themeKeys: ['--radius'],
|
||||
handle: (value) => [
|
||||
decl('border-top-right-radius', value),
|
||||
decl('border-bottom-right-radius', value),
|
||||
],
|
||||
})
|
||||
|
||||
functionalUtility('rounded-b', {
|
||||
themeKeys: ['--radius'],
|
||||
handle: (value) => [
|
||||
decl('border-bottom-right-radius', value),
|
||||
decl('border-bottom-left-radius', value),
|
||||
],
|
||||
})
|
||||
|
||||
functionalUtility('rounded-l', {
|
||||
themeKeys: ['--radius'],
|
||||
handle: (value) => [
|
||||
decl('border-top-left-radius', value),
|
||||
decl('border-bottom-left-radius', value),
|
||||
],
|
||||
})
|
||||
|
||||
functionalUtility('rounded-ss', {
|
||||
themeKeys: ['--radius'],
|
||||
handle: (value) => [decl('border-start-start-radius', value)],
|
||||
})
|
||||
|
||||
functionalUtility('rounded-se', {
|
||||
themeKeys: ['--radius'],
|
||||
handle: (value) => [decl('border-start-end-radius', value)],
|
||||
})
|
||||
|
||||
functionalUtility('rounded-ee', {
|
||||
themeKeys: ['--radius'],
|
||||
handle: (value) => [decl('border-end-end-radius', value)],
|
||||
})
|
||||
|
||||
functionalUtility('rounded-es', {
|
||||
themeKeys: ['--radius'],
|
||||
handle: (value) => [decl('border-end-start-radius', value)],
|
||||
})
|
||||
|
||||
functionalUtility('rounded-tl', {
|
||||
themeKeys: ['--radius'],
|
||||
handle: (value) => [decl('border-top-left-radius', value)],
|
||||
})
|
||||
|
||||
functionalUtility('rounded-tr', {
|
||||
themeKeys: ['--radius'],
|
||||
handle: (value) => [decl('border-top-right-radius', value)],
|
||||
})
|
||||
|
||||
functionalUtility('rounded-br', {
|
||||
themeKeys: ['--radius'],
|
||||
handle: (value) => [decl('border-bottom-right-radius', value)],
|
||||
})
|
||||
|
||||
functionalUtility('rounded-bl', {
|
||||
themeKeys: ['--radius'],
|
||||
handle: (value) => [decl('border-bottom-left-radius', value)],
|
||||
})
|
||||
{
|
||||
// border-radius
|
||||
for (let [root, properties] of [
|
||||
['rounded', ['border-radius']],
|
||||
['rounded-s', ['border-start-start-radius', 'border-end-start-radius']],
|
||||
['rounded-e', ['border-start-end-radius', 'border-end-end-radius']],
|
||||
['rounded-t', ['border-top-left-radius', 'border-top-right-radius']],
|
||||
['rounded-r', ['border-top-right-radius', 'border-bottom-right-radius']],
|
||||
['rounded-b', ['border-bottom-right-radius', 'border-bottom-left-radius']],
|
||||
['rounded-l', ['border-top-left-radius', 'border-bottom-left-radius']],
|
||||
['rounded-ss', ['border-start-start-radius']],
|
||||
['rounded-se', ['border-start-end-radius']],
|
||||
['rounded-ee', ['border-end-end-radius']],
|
||||
['rounded-es', ['border-end-start-radius']],
|
||||
['rounded-tl', ['border-top-left-radius']],
|
||||
['rounded-tr', ['border-top-right-radius']],
|
||||
['rounded-br', ['border-bottom-right-radius']],
|
||||
['rounded-bl', ['border-bottom-left-radius']],
|
||||
] as const) {
|
||||
staticUtility(
|
||||
`${root}-none`,
|
||||
properties.map((property) => [property, '0']),
|
||||
)
|
||||
staticUtility(
|
||||
`${root}-full`,
|
||||
properties.map((property) => [property, 'calc(infinity * 1px)']),
|
||||
)
|
||||
functionalUtility(root, {
|
||||
themeKeys: ['--radius'],
|
||||
handle: (value) => properties.map((property) => decl(property, value)),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
staticUtility('border-solid', [
|
||||
['--tw-border-style', 'solid'],
|
||||
|
|
|
|||
|
|
@ -278,10 +278,8 @@
|
|||
--blur-3xl: 64px;
|
||||
|
||||
/* Radii */
|
||||
--radius-none: 0px;
|
||||
--radius-full: 9999px;
|
||||
--radius-sm: 0.125rem;
|
||||
--radius: 0.25rem;
|
||||
--radius-sm: 0.125rem;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 0.75rem;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue