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

Rename --font-family-* variables to --font-* (#14885)

Browse source 
This PR renames the `--font-family-*` theme variables to `--font-*` to
more closely match the utility names and be a bit more terse in general.

```diff
  @theme {
-   --font-family-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-   --font-family-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
-   --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    
+   --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+   --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  }
```

This is part of a bigger set of changes where we're renaming other theme
variables as well with the same goals, since many existing theme
variables like `--shadow-*` and `--radius-*` are already not using the
explicit CSS property name.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
This commit is contained in:
Adam Wathan 2024-11-06 10:33:44 -05:00 • committed by GitHub
parent c5b6df2a27
commit 2aea6e9d37
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 91 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

4
integrations/upgrade/js-config.test.ts
View file

@ -247,8 +247,8 @@ test(
--width-full-minus-96: calc(100% - 24rem);
--width-225px: 225px;
--font-family-sans: Inter, system-ui, sans-serif;
--font-family-display: Cabinet Grotesk, ui-sans-serif, system-ui, sans-serif,
--font-sans: Inter, system-ui, sans-serif;
--font-display: Cabinet Grotesk, ui-sans-serif, system-ui, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--radius-4xl: 2rem;

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

@ -5,12 +5,12 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
:root {
--default-transition-duration: .15s;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--default-font-family: var(--font-family-sans);
--default-font-feature-settings: var(--font-family-sans--font-feature-settings);
--default-font-variation-settings: var(--font-family-sans--font-variation-settings);
--default-mono-font-family: var(--font-family-mono);
--default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
--default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
--default-font-family: var(--font-sans);
--default-font-feature-settings: var(--font-sans--font-feature-settings);
--default-font-variation-settings: var(--font-sans--font-variation-settings);
--default-mono-font-family: var(--font-mono);
--default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
--default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
--breakpoint-sm: 40rem;
--breakpoint-md: 48rem;
--breakpoint-lg: 64rem;
@ -311,9 +311,9 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
--width-6xl: 72rem;
--width-7xl: 80rem;
--width-prose: 65ch;
--font-family-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-size-xs: .75rem;
--font-size-xs--line-height: 1rem;
--font-size-sm: .875rem;

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

@ -4,12 +4,12 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
":root {
--default-transition-duration: .15s;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--default-font-family: var(--font-family-sans);
--default-font-feature-settings: var(--font-family-sans--font-feature-settings);
--default-font-variation-settings: var(--font-family-sans--font-variation-settings);
--default-mono-font-family: var(--font-family-mono);
--default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
--default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
--default-font-family: var(--font-sans);
--default-font-feature-settings: var(--font-sans--font-feature-settings);
--default-font-variation-settings: var(--font-sans--font-variation-settings);
--default-mono-font-family: var(--font-mono);
--default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
--default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
--breakpoint-sm: 40rem;
--breakpoint-md: 48rem;
--breakpoint-lg: 64rem;
@ -310,9 +310,9 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
--width-6xl: 72rem;
--width-7xl: 80rem;
--width-prose: 65ch;
--font-family-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-size-xs: .75rem;
--font-size-xs--line-height: 1rem;
--font-size-sm: .875rem;

4
packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
View file

@ -69,8 +69,8 @@ test('config values can be merged into the theme', () => {
expect(theme.resolve('sm', ['--radius'])).toEqual('0.33rem')
expect(theme.resolve('blink', ['--animate'])).toEqual('blink 1s linear infinite')
expect(theme.resolve('red-500', ['--color'])).toEqual('red')
expect(theme.resolve('sans', ['--font-family'])).toEqual('Inter, system-ui, sans-serif')
expect(theme.resolveWith('mono', ['--font-family'], ['--font-variation-settings'])).toEqual([
expect(theme.resolve('sans', ['--font'])).toEqual('Inter, system-ui, sans-serif')
expect(theme.resolveWith('mono', ['--font'], ['--font-variation-settings'])).toEqual([
'Potato Mono',
{ '--font-variation-settings': '"XHGT" 0.7' },
])

5
packages/tailwindcss/src/compat/apply-config-to-theme.ts
View file

@ -59,7 +59,7 @@ export function applyConfigToTheme(
// Replace `--default-font-*` with `fontFamily.sans` values
{
let fontFamily = resolveThemeValue(theme.fontFamily.sans)
if (fontFamily && designSystem.theme.hasDefault('--font-family-sans')) {
if (fontFamily && designSystem.theme.hasDefault('--font-sans')) {
designSystem.theme.add('--default-font-family', fontFamily, options)
designSystem.theme.add(
'--default-font-feature-settings',
@ -77,7 +77,7 @@ export function applyConfigToTheme(
// Replace `--default-mono-font-*` with `fontFamily.mono` values
{
let fontFamily = resolveThemeValue(theme.fontFamily.mono)
if (fontFamily && designSystem.theme.hasDefault('--font-family-mono')) {
if (fontFamily && designSystem.theme.hasDefault('--font-mono')) {
designSystem.theme.add('--default-mono-font-family', fontFamily, options)
designSystem.theme.add(
'--default-mono-font-feature-settings',
@ -133,6 +133,7 @@ export function keyPathToCssProperty(path: string[]) {
if (path[0] === 'borderRadius') path[0] = 'radius'
if (path[0] === 'boxShadow') path[0] = 'shadow'
if (path[0] === 'animation') path[0] = 'animate'
if (path[0] === 'fontFamily') path[0] = 'font'
for (let part of path) {
if (!IS_VALID_KEY.test(part)) return null

30
packages/tailwindcss/src/compat/config.test.ts
View file

@ -716,7 +716,7 @@ describe('default font family compatibility', () => {
}
@config "./config.js";
@theme {
--font-family-sans: Sandwich Sans;
--font-sans: Sandwich Sans;
}
@tailwind utilities;
`
@ -739,10 +739,10 @@ describe('default font family compatibility', () => {
--default-font-family: var(--font-family-sans);
--default-font-feature-settings: var(--font-family-sans--font-feature-settings);
--default-font-variation-settings: var(--font-family-sans--font-variation-settings);
--font-family-sans: Sandwich Sans;
--font-sans: Sandwich Sans;
}
.font-sans {
font-family: var(--font-family-sans);
font-family: var(--font-sans);
}
"
`)
@ -945,9 +945,9 @@ describe('default font family compatibility', () => {
}) => {
let input = css`
@theme default {
--default-mono-font-family: var(--font-family-mono);
--default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
--default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
--default-mono-font-family: var(--font-mono);
--default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
--default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
}
@config "./config.js";
@tailwind utilities;
@ -989,13 +989,13 @@ describe('default font family compatibility', () => {
}) => {
let input = css`
@theme default {
--default-mono-font-family: var(--font-family-mono);
--default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
--default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
--default-mono-font-family: var(--font-mono);
--default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
--default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
}
@config "./config.js";
@theme {
--font-family-mono: Sandwich Mono;
--font-mono: Sandwich Mono;
}
@tailwind utilities;
`
@ -1015,13 +1015,13 @@ describe('default font family compatibility', () => {
expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
":root {
--default-mono-font-family: var(--font-family-mono);
--default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
--default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
--font-family-mono: Sandwich Mono;
--default-mono-font-family: var(--font-mono);
--default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
--default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
--font-mono: Sandwich Mono;
}
.font-mono {
font-family: var(--font-family-mono);
font-family: var(--font-mono);
}
"
`)

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

@ -12305,8 +12305,9 @@ test('font', async () => {
await compileCss(
css`
@theme {
--font-family-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
--font-weight-bold: 650;
}
@tailwind utilities;
`,
@ -12327,7 +12328,8 @@ test('font', async () => {
),
).toMatchInlineSnapshot(`
":root {
--font-family-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-weight-bold: 650;
}
.font-\\[\\"arial_rounded\\"\\] {
@ -12343,7 +12345,7 @@ test('font', async () => {
}
.font-sans {
font-family: var(--font-family-sans);
font-family: var(--font-sans);
}
.font-\\[100\\] {
@ -12361,6 +12363,11 @@ test('font', async () => {
font-weight: var(--my-family);
}
.font-bold {
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
@ -12375,24 +12382,37 @@ test('font', async () => {
}"
`)
expect(
await run([
'font',
// font-family
'-font-sans',
await compileCss(
css`
@theme reference {
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
--font-size-xl: 24px;
--font-weight-bold: 650;
}
@tailwind utilities;
`,
[
'font',
// font-family
'-font-sans',
// font-weight
'-font-bold',
// font-weight
'-font-bold',
'font-sans/foo',
'font-["arial_rounded"]/foo',
'font-[ui-sans-serif]/foo',
'font-[var(--my-family)]/foo',
'font-[family-name:var(--my-family)]/foo',
'font-[generic-name:var(--my-family)]/foo',
'font-bold/foo',
'font-[100]/foo',
'font-[number:var(--my-weight)]/foo',
]),
'font-size-xl',
'font-weight-bold',
'font-sans/foo',
'font-["arial_rounded"]/foo',
'font-[ui-sans-serif]/foo',
'font-[var(--my-family)]/foo',
'font-[family-name:var(--my-family)]/foo',
'font-[generic-name:var(--my-family)]/foo',
'font-bold/foo',
'font-[100]/foo',
'font-[number:var(--my-weight)]/foo',
],
),
).toEqual('')
})

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

@ -2778,8 +2778,9 @@ export function createUtilities(theme: Theme) {
{
let value = theme.resolveWith(
candidate.value.value,
['--font-family'],
['--font'],
['--font-feature-settings', '--font-variation-settings'],
['--font-weight', '--font-size'],
)
if (value) {
let [families, options = {}] = value

18
packages/tailwindcss/theme.css
View file

@ -2,12 +2,12 @@
/* Defaults */
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-family-sans);
--default-font-feature-settings: var(--font-family-sans--font-feature-settings);
--default-font-variation-settings: var(--font-family-sans--font-variation-settings);
--default-mono-font-family: var(--font-family-mono);
--default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
--default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
--default-font-family: var(--font-sans);
--default-font-feature-settings: var(--font-sans--font-feature-settings);
--default-font-variation-settings: var(--font-sans--font-variation-settings);
--default-mono-font-family: var(--font-mono);
--default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
--default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
/* Breakpoints */
--breakpoint-sm: 40rem;
@ -352,10 +352,10 @@
--width-prose: 65ch;
/* Fonts */
--font-family-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
--font-family-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
/* Type scale */