From 7eab762a3d7fa56b12d8d1e0cbce35133c0eb324 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 10 Mar 2023 18:47:43 +0100
Subject: [PATCH] Add `line-clamp` utilities from `@tailwindcss/line-clamp` to
 core (#10768)

* add `lineClamp` utility

This is coming from the `@tailwindcss/line-clamp` package that we now
merged into the core of Tailwind itself.

* update changelog
---
 CHANGELOG.md                |  1 +
 src/corePlugins.js          | 18 +++++++++++++++
 stubs/defaultConfig.stub.js |  8 +++++++
 tests/kitchen-sink.test.js  | 45 +++++++++++++++++++++++++++++++++++++
 4 files changed, 72 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f8dce96de86..739ccfd1fd57 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `caption-side` utilities ([#10470](https://github.com/tailwindlabs/tailwindcss/pull/10470))
 - Add `justify-normal` and `justify-stretch` utilities ([#10560](https://github.com/tailwindlabs/tailwindcss/pull/10560))
 - Add `content-normal` and `content-stretch` utilities ([#10645](https://github.com/tailwindlabs/tailwindcss/pull/10645))
+- Add `line-clamp` utilities from `@tailwindcss/line-clamp` to core ([#10768](https://github.com/tailwindlabs/tailwindcss/pull/10768))
 
 ### Fixed
 
diff --git a/src/corePlugins.js b/src/corePlugins.js
index 717c9ec5c350..147bd8b0119b 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -703,6 +703,24 @@ export let corePlugins = {
     })
   },
 
+  lineClamp: ({ matchUtilities, addUtilities, theme }) => {
+    matchUtilities(
+      {
+        'line-clamp': (value) => ({
+          overflow: 'hidden',
+          display: '-webkit-box',
+          '-webkit-box-orient': 'vertical',
+          '-webkit-line-clamp': `${value}`,
+        }),
+      },
+      { values: theme('lineClamp') }
+    )
+
+    addUtilities({
+      '.line-clamp-none': { '-webkit-line-clamp': 'unset' },
+    })
+  },
+
   display: ({ addUtilities }) => {
     addUtilities({
       '.block': { display: 'block' },
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 75ebb7c01cfb..b29eb4cf479d 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -582,6 +582,14 @@ module.exports = {
       auto: 'auto',
       ...theme('spacing'),
     }),
+    lineClamp: {
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+    },
     maxHeight: ({ theme }) => ({
       ...theme('spacing'),
       none: 'none',
diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js
index a421e3a0b374..a1425b2d75a3 100644
--- a/tests/kitchen-sink.test.js
+++ b/tests/kitchen-sink.test.js
@@ -7,6 +7,9 @@ crosscheck(({ stable, oxide }) => {
       content: [
         {
           raw: html`
+            <div
+              class="line-clamp-2 line-clamp-[33] line-clamp-[var(--line-clamp-variable)] line-clamp-none"
+            ></div>
             <div class="range:text-right multi:text-left"></div>
             <div
               class="container hover:container sm:container md:container text-center sm:text-center md:text-center"
@@ -432,6 +435,27 @@ crosscheck(({ stable, oxide }) => {
         .mt-6 {
           margin-top: 1.5rem;
         }
+        .line-clamp-2 {
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          display: -webkit-box;
+          overflow: hidden;
+        }
+        .line-clamp-\[33\] {
+          -webkit-line-clamp: 33;
+          -webkit-box-orient: vertical;
+          display: -webkit-box;
+          overflow: hidden;
+        }
+        .line-clamp-\[var\(--line-clamp-variable\)\] {
+          -webkit-line-clamp: var(--line-clamp-variable);
+          -webkit-box-orient: vertical;
+          display: -webkit-box;
+          overflow: hidden;
+        }
+        .line-clamp-none {
+          -webkit-line-clamp: unset;
+        }
         .scale-50 {
           --tw-scale-x: 0.5;
           --tw-scale-y: 0.5;
@@ -976,6 +1000,27 @@ crosscheck(({ stable, oxide }) => {
         .mt-6 {
           margin-top: 1.5rem;
         }
+        .line-clamp-2 {
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          display: -webkit-box;
+          overflow: hidden;
+        }
+        .line-clamp-\[33\] {
+          -webkit-line-clamp: 33;
+          -webkit-box-orient: vertical;
+          display: -webkit-box;
+          overflow: hidden;
+        }
+        .line-clamp-\[var\(--line-clamp-variable\)\] {
+          -webkit-line-clamp: var(--line-clamp-variable);
+          -webkit-box-orient: vertical;
+          display: -webkit-box;
+          overflow: hidden;
+        }
+        .line-clamp-none {
+          -webkit-line-clamp: unset;
+        }
         .scale-50 {
           --tw-scale-x: 0.5;
           --tw-scale-y: 0.5;