From a1583fc9b0fde8c036eb8840228be4a1d744bc15 Mon Sep 17 00:00:00 2001 From: Nick Kosarev Date: Tue, 12 Mar 2024 18:55:34 +0200 Subject: [PATCH 1/4] Overflow fix for https://github.com/tailwindlabs/tailwindcss/issues/13217 --- packages/tailwindcss/src/utilities.test.ts | 8 ++++---- packages/tailwindcss/src/utilities.ts | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 0873766a4bf6..b11756cb69d1 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -1325,28 +1325,28 @@ test('line-clamp', () => { expect(run(['line-clamp-4', 'line-clamp-99', 'line-clamp-[123]', 'line-clamp-none'])) .toMatchInlineSnapshot(` ".line-clamp-4 { - overlow: hidden; + overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; display: -webkit-box; } .line-clamp-99 { - overlow: hidden; + overflow: hidden; -webkit-line-clamp: 99; -webkit-box-orient: vertical; display: -webkit-box; } .line-clamp-\\[123\\] { - overlow: hidden; + overflow: hidden; -webkit-line-clamp: 123; -webkit-box-orient: vertical; display: -webkit-box; } .line-clamp-none { - overlow: visible; + overflow: visible; -webkit-box-orient: horizonal; -webkit-line-clamp: none; display: block; diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index d0c1e32ffb9c..f51733427328 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -786,7 +786,7 @@ export function createUtilities(theme: Theme) { * @css `line-clamp` */ staticUtility('line-clamp-none', [ - ['overlow', 'visible'], + ['overflow', 'visible'], ['display', 'block'], ['-webkit-box-orient', 'horizonal'], ['-webkit-line-clamp', 'none'], @@ -795,7 +795,7 @@ export function createUtilities(theme: Theme) { themeKeys: ['--line-clamp'], handleBareValue: ({ value }) => value, handle: (value) => [ - decl('overlow', 'hidden'), + decl('overflow', 'hidden'), decl('display', '-webkit-box'), decl('-webkit-box-orient', 'vertical'), decl('-webkit-line-clamp', value), From 17b7190290430ed4cb5d3ff3752458679823a11f Mon Sep 17 00:00:00 2001 From: Nick Kosarev Date: Tue, 12 Mar 2024 19:47:44 +0200 Subject: [PATCH 2/4] webkit-box-orient and webkit-line-clamp fix for https://github.com/tailwindlabs/tailwindcss/issues/13217 --- packages/tailwindcss/src/utilities.test.ts | 4 ++-- packages/tailwindcss/src/utilities.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index b11756cb69d1..a4a3d130f52e 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -1347,8 +1347,8 @@ test('line-clamp', () => { .line-clamp-none { overflow: visible; - -webkit-box-orient: horizonal; - -webkit-line-clamp: none; + -webkit-box-orient: horizontal; + -webkit-line-clamp: unset; display: block; }" `) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index f51733427328..3035996db4e1 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -788,8 +788,8 @@ export function createUtilities(theme: Theme) { staticUtility('line-clamp-none', [ ['overflow', 'visible'], ['display', 'block'], - ['-webkit-box-orient', 'horizonal'], - ['-webkit-line-clamp', 'none'], + ['-webkit-box-orient', 'horizontal'], + ['-webkit-line-clamp', 'unset'], ]) functionalUtility('line-clamp', { themeKeys: ['--line-clamp'], From 503b87632971ede12ab2f498bbc9038258ca2e3b Mon Sep 17 00:00:00 2001 From: Nick Kosarev Date: Tue, 12 Mar 2024 20:00:48 +0200 Subject: [PATCH 3/4] tests fix https://github.com/tailwindlabs/tailwindcss/issues/13217 --- packages/tailwindcss/src/utilities.test.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index a4a3d130f52e..1129c58fbb30 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -1325,31 +1325,31 @@ test('line-clamp', () => { expect(run(['line-clamp-4', 'line-clamp-99', 'line-clamp-[123]', 'line-clamp-none'])) .toMatchInlineSnapshot(` ".line-clamp-4 { - overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; display: -webkit-box; + overflow: hidden; } .line-clamp-99 { - overflow: hidden; -webkit-line-clamp: 99; -webkit-box-orient: vertical; display: -webkit-box; + overflow: hidden; } .line-clamp-\\[123\\] { - overflow: hidden; -webkit-line-clamp: 123; -webkit-box-orient: vertical; display: -webkit-box; + overflow: hidden; } .line-clamp-none { - overflow: visible; - -webkit-box-orient: horizontal; -webkit-line-clamp: unset; + -webkit-box-orient: horizontal; display: block; + overflow: visible; }" `) expect(run(['line-clamp', '-line-clamp-4', '-line-clamp-[123]', '-line-clamp-none'])).toEqual('') From 6018864e2e04dd694ce00906cf39483767f64116 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 12 Mar 2024 22:37:24 +0100 Subject: [PATCH 4/4] update changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e8dabac1990..8f66e90adbe2 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] +### Fixed + +- Fix incorrect properties in line-clamp utilities ([#13220](https://github.com/tailwindlabs/tailwindcss/pull/13220)) + ### Added - Support `@theme reference { … }` for defining theme values without emitting variables ([#13222](https://github.com/tailwindlabs/tailwindcss/pull/13222))