From 869e30157d9eff93200c534ea6b38f3f9d6a37ae Mon Sep 17 00:00:00 2001 From: Kris Braun Date: Fri, 8 Mar 2024 10:25:03 -0500 Subject: [PATCH 1/3] [v4] Add `font-stretch` utilities Based on #12171. Add [`font-stretch`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch) utilities. Naming with `font-stretch` rather than `stretch` since the latter isn't clearly associated with fonts. Named values (e.g. `font-stretch-ulta-expanded`) and percentages (e.g. `font-stretch-50`) are supported. --- Co-authored-by: Gregory Gerard --- .../__snapshots__/intellisense.test.ts.snap | 19 +++++++++++++++ packages/tailwindcss/src/property-order.ts | 1 + packages/tailwindcss/src/utilities.test.ts | 20 ++++++++++++++++ packages/tailwindcss/src/utilities.ts | 24 +++++++++++++++++++ 4 files changed, 64 insertions(+) diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 0bc0f2064392..82db87404e19 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -714,6 +714,25 @@ exports[`getClassList 1`] = ` "font-medium", "font-normal", "font-semibold", + "font-stretch-100", + "font-stretch-105", + "font-stretch-110", + "font-stretch-125", + "font-stretch-150", + "font-stretch-200", + "font-stretch-50", + "font-stretch-75", + "font-stretch-90", + "font-stretch-95", + "font-stretch-condensed", + "font-stretch-expanded", + "font-stretch-extra-condensed", + "font-stretch-extra-expanded", + "font-stretch-normal", + "font-stretch-semi-condensed", + "font-stretch-semi-expanded", + "font-stretch-ultra-condensed", + "font-stretch-ultra-expanded", "font-thin", "forced-color-adjust-auto", "forced-color-adjust-none", diff --git a/packages/tailwindcss/src/property-order.ts b/packages/tailwindcss/src/property-order.ts index 8fa1d94fd176..36d38dd49cf4 100644 --- a/packages/tailwindcss/src/property-order.ts +++ b/packages/tailwindcss/src/property-order.ts @@ -257,6 +257,7 @@ export default [ 'font-weight', 'text-transform', 'font-style', + 'font-stretch', 'font-variant-numeric', 'line-height', 'letter-spacing', diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 8fd0dcf6782b..0cc4858fbd4c 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -8788,6 +8788,26 @@ test('font-style', () => { expect(run(['-italic', '-not-italic'])).toEqual('') }) +test('font-stretch', () => { + expect(run(['font-stretch-ultra-expanded', 'font-stretch-50', 'font-stretch-200'])) + .toMatchInlineSnapshot(` + ".font-stretch-200 { + font-stretch: 200%; + } + + .font-stretch-50 { + font-stretch: 50%; + } + + .font-stretch-ultra-expanded { + font-stretch: ultra-expanded; + }" + `) + expect( + run(['font-stretch', 'font-stretch-20', 'font-stretch-400', 'font-stretch-potato']), + ).toEqual('') +}) + test('text-decoration-line', () => { expect(run(['underline', 'overline', 'line-through', 'no-underline'])).toMatchInlineSnapshot(` ".line-through { diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 9e50da48f336..bfb9c237bdc0 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -2865,6 +2865,30 @@ export function createUtilities(theme: Theme) { staticUtility('line-through', [['text-decoration-line', 'line-through']]) staticUtility('no-underline', [['text-decoration-line', 'none']]) + staticUtility('font-stretch-normal', [['font-stretch', 'normal']]) + staticUtility('font-stretch-ultra-condensed', [['font-stretch', 'ultra-condensed']]) + staticUtility('font-stretch-extra-condensed', [['font-stretch', 'extra-condensed']]) + staticUtility('font-stretch-condensed', [['font-stretch', 'condensed']]) + staticUtility('font-stretch-semi-condensed', [['font-stretch', 'semi-condensed']]) + staticUtility('font-stretch-semi-expanded', [['font-stretch', 'semi-expanded']]) + staticUtility('font-stretch-expanded', [['font-stretch', 'expanded']]) + staticUtility('font-stretch-extra-expanded', [['font-stretch', 'extra-expanded']]) + staticUtility('font-stretch-ultra-expanded', [['font-stretch', 'ultra-expanded']]) + functionalUtility('font-stretch', { + themeKeys: [], + handleBareValue: ({ value }) => { + let num = Number(value) + if (Number.isNaN(num) || num < 50 || num > 200) return null + return `${value}%` + }, + handle: (value) => [decl('font-stretch', value)], + }) + suggest('font-stretch', () => [ + { + values: ['50', '75', '90', '95', '100', '105', '110', '125', '150', '200'], + }, + ]) + colorUtility('placeholder', { themeKeys: ['--background-color', '--color'], handle: (value) => [ From 3faf205ee7b0551fbe8d3382314bf4a711b4a7ef Mon Sep 17 00:00:00 2001 From: Kris Braun Date: Fri, 8 Mar 2024 10:27:31 -0500 Subject: [PATCH 2/3] Update changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 745f31cf2135..92a11c3f928a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Added + +- Add `font-stretch` utilities ([#13153](https://github.com/tailwindlabs/tailwindcss/pull/13153)) + ### Fixed - Don't error on `@apply` with leading/trailing whitespace ([#13144](https://github.com/tailwindlabs/tailwindcss/pull/13144)) From 2474025cf1b5fb2eb3bc856c4ba88630b714e22d Mon Sep 17 00:00:00 2001 From: Kris Braun Date: Fri, 8 Mar 2024 10:34:10 -0500 Subject: [PATCH 3/3] Comment with reference to valid font-stretch range --- packages/tailwindcss/src/utilities.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index bfb9c237bdc0..d13e743f399e 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -2878,6 +2878,8 @@ export function createUtilities(theme: Theme) { themeKeys: [], handleBareValue: ({ value }) => { let num = Number(value) + // Only 50-200% (inclusive) are valid: + // https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch#percentage if (Number.isNaN(num) || num < 50 || num > 200) return null return `${value}%` },