wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Derive all font-weight values from theme (#14883)

Browse source 
This PR removes all of the static `font-weight` utilities that were
previously hard-coded into the framework in favor of deriving those
utilities from the `--font-weight-*` theme values instead.

Biggest motivation for this is giving people a way to explicitly disable
font-weight utilities they don't want to use in their project, which
previously wasn't possible.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
This commit is contained in:
Adam Wathan 2024-11-05 16:06:47 -05:00 • committed by GitHub
parent 7175605c61
commit 8bd3c85420
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 37 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -35,6 +35,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Remove `--transition-timing-function-linear` from the default theme in favor of a static `ease-linear` utility ([#14880](https://github.com/tailwindlabs/tailwindcss/pull/14880))
- Remove default `--spacing-*` scale in favor of `--spacing` multiplier ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
- Remove `var(…)` fallbacks from theme values in utilities ([#14881](https://github.com/tailwindlabs/tailwindcss/pull/14881))
- Remove static `font-weight` utilities and add `--font-weight-*` values to the default theme ([#14883](https://github.com/tailwindlabs/tailwindcss/pull/14883))
## [4.0.0-alpha.31] - 2024-10-29

13
packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
View file

@ -340,6 +340,15 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
--font-size-8xl--line-height: 1;
--font-size-9xl: 8rem;
--font-size-9xl--line-height: 1;
--font-weight-thin: 100;
--font-weight-extralight: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;
--letter-spacing-tighter: -.05em;
--letter-spacing-tight: -.025em;
--letter-spacing-normal: 0em;
@ -555,8 +564,8 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
@media (width >= 96rem) {
.\\32 xl\\:font-bold {
--tw-font-weight: 700;
font-weight: 700;
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
}
}

2
packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts
View file

@ -90,7 +90,7 @@ test.each([
['grid-cols-[min(50%_,_theme(spacing.80))_auto]', 'grid-cols-[min(50%,var(--spacing-80))_auto]'],
// `theme(…)` calls valid in v3, but not in v4 should still be converted.
['[--foo:theme(fontWeight.semibold)]', '[--foo:theme(fontWeight.semibold)]'],
['[--foo:theme(transitionDuration.500)]', '[--foo:theme(transitionDuration.500)]'],
// `screens` values
['max-w-[theme(screens.md)]', 'max-w-[var(--breakpoint-md)]'],

9
packages/tailwindcss/src/__snapshots__/index.test.ts.snap
View file

@ -339,6 +339,15 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
--font-size-8xl--line-height: 1;
--font-size-9xl: 8rem;
--font-size-9xl--line-height: 1;
--font-weight-thin: 100;
--font-weight-extralight: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;
--letter-spacing-tighter: -.05em;
--letter-spacing-tight: -.025em;
--letter-spacing-normal: 0em;

27
packages/tailwindcss/src/utilities.test.ts
View file

@ -12375,11 +12375,6 @@ test('font', async () => {
font-weight: var(--my-family);
}
.font-bold {
--tw-font-weight: 700;
font-weight: 700;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
@ -16430,7 +16425,7 @@ describe('custom utilities', () => {
}
@utility bar {
@apply dark:foo font-bold;
@apply dark:foo flex-wrap;
}
@tailwind utilities;
@ -16439,8 +16434,7 @@ describe('custom utilities', () => {
),
).toMatchInlineSnapshot(`
".bar {
--tw-font-weight: 700;
font-weight: 700;
flex-wrap: wrap;
}
@media (prefers-color-scheme: dark) {
@ -16449,19 +16443,6 @@ describe('custom utilities', () => {
text-decoration-line: underline;
display: flex;
}
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-font-weight: initial;
}
}
}
@property --tw-font-weight {
syntax: "*";
inherits: false
}"
`)
})
@ -16471,7 +16452,7 @@ describe('custom utilities', () => {
compileCss(
css`
@utility foo {
@apply font-bold hover:bar;
@apply flex-wrap hover:bar;
}
@utility bar {
@ -16495,7 +16476,7 @@ describe('custom utilities', () => {
.bar {
.baz {
.qux {
@apply font-bold hover:bar;
@apply flex-wrap hover:bar;
}
}
}

38
packages/tailwindcss/src/utilities.ts
View file

@ -2801,44 +2801,6 @@ export function createUtilities(theme: Theme) {
decl('font-weight', value),
]
}
switch (candidate.value.value) {
case 'thin':
value = '100'
break
case 'extralight':
value = '200'
break
case 'light':
value = '300'
break
case 'normal':
value = '400'
break
case 'medium':
value = '500'
break
case 'semibold':
value = '600'
break
case 'bold':
value = '700'
break
case 'extrabold':
value = '800'
break
case 'black':
value = '900'
break
}
if (value) {
return [
atRoot([property('--tw-font-weight')]),
decl('--tw-font-weight', value),
decl('font-weight', value),
]
}
}
})

11
packages/tailwindcss/theme.css
View file

@ -386,6 +386,17 @@
--font-size-9xl: 8rem;
--font-size-9xl--line-height: 1;
/* Font weights */
--font-weight-thin: 100;
--font-weight-extralight: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;
/* Letter spacing */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;