From bc92b0a6f4541f2b8d547b5c23e1eb28dbefcd08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benoi=CC=82t=20Rouleau?= <benoit.rouleau@icloud.com>
Date: Sun, 29 Dec 2019 17:44:45 -0500
Subject: [PATCH] Add ellipsis and no-ellipsis utilities

---
 .../fixtures/tailwind-output-important.css    | 40 +++++++++++++++++++
 __tests__/fixtures/tailwind-output.css        | 40 +++++++++++++++++++
 src/corePlugins.js                            |  2 +
 src/plugins/textOverflow.js                   | 11 +++++
 stubs/defaultConfig.stub.js                   |  1 +
 5 files changed, 94 insertions(+)
 create mode 100644 src/plugins/textOverflow.js

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 5e2725b644bc..7614ac5c7544 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -8101,6 +8101,14 @@ video {
   text-decoration: none !important;
 }
 
+.ellipsis {
+  text-overflow: ellipsis !important;
+}
+
+.no-ellipsis {
+  text-overflow: clip !important;
+}
+
 .antialiased {
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
@@ -17451,6 +17459,14 @@ video {
     text-decoration: none !important;
   }
 
+  .sm\:ellipsis {
+    text-overflow: ellipsis !important;
+  }
+
+  .sm\:no-ellipsis {
+    text-overflow: clip !important;
+  }
+
   .sm\:antialiased {
     -webkit-font-smoothing: antialiased !important;
     -moz-osx-font-smoothing: grayscale !important;
@@ -26802,6 +26818,14 @@ video {
     text-decoration: none !important;
   }
 
+  .md\:ellipsis {
+    text-overflow: ellipsis !important;
+  }
+
+  .md\:no-ellipsis {
+    text-overflow: clip !important;
+  }
+
   .md\:antialiased {
     -webkit-font-smoothing: antialiased !important;
     -moz-osx-font-smoothing: grayscale !important;
@@ -36153,6 +36177,14 @@ video {
     text-decoration: none !important;
   }
 
+  .lg\:ellipsis {
+    text-overflow: ellipsis !important;
+  }
+
+  .lg\:no-ellipsis {
+    text-overflow: clip !important;
+  }
+
   .lg\:antialiased {
     -webkit-font-smoothing: antialiased !important;
     -moz-osx-font-smoothing: grayscale !important;
@@ -45504,6 +45536,14 @@ video {
     text-decoration: none !important;
   }
 
+  .xl\:ellipsis {
+    text-overflow: ellipsis !important;
+  }
+
+  .xl\:no-ellipsis {
+    text-overflow: clip !important;
+  }
+
   .xl\:antialiased {
     -webkit-font-smoothing: antialiased !important;
     -moz-osx-font-smoothing: grayscale !important;
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index f3066a5dea66..7d8618a0e273 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -8101,6 +8101,14 @@ video {
   text-decoration: none;
 }
 
+.ellipsis {
+  text-overflow: ellipsis;
+}
+
+.no-ellipsis {
+  text-overflow: clip;
+}
+
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -17451,6 +17459,14 @@ video {
     text-decoration: none;
   }
 
+  .sm\:ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .sm\:no-ellipsis {
+    text-overflow: clip;
+  }
+
   .sm\:antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -26802,6 +26818,14 @@ video {
     text-decoration: none;
   }
 
+  .md\:ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .md\:no-ellipsis {
+    text-overflow: clip;
+  }
+
   .md\:antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -36153,6 +36177,14 @@ video {
     text-decoration: none;
   }
 
+  .lg\:ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .lg\:no-ellipsis {
+    text-overflow: clip;
+  }
+
   .lg\:antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -45504,6 +45536,14 @@ video {
     text-decoration: none;
   }
 
+  .xl\:ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .xl\:no-ellipsis {
+    text-overflow: clip;
+  }
+
   .xl\:antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
diff --git a/src/corePlugins.js b/src/corePlugins.js
index 36da4ac312c2..ca4a566d507a 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -59,6 +59,7 @@ import fontSize from './plugins/fontSize'
 import fontStyle from './plugins/fontStyle'
 import textTransform from './plugins/textTransform'
 import textDecoration from './plugins/textDecoration'
+import textOverflow from './plugins/textOverflow'
 import fontSmoothing from './plugins/fontSmoothing'
 import letterSpacing from './plugins/letterSpacing'
 import userSelect from './plugins/userSelect'
@@ -139,6 +140,7 @@ export default function({ corePlugins: corePluginConfig }) {
     fontStyle,
     textTransform,
     textDecoration,
+    textOverflow,
     fontSmoothing,
     letterSpacing,
     userSelect,
diff --git a/src/plugins/textOverflow.js b/src/plugins/textOverflow.js
new file mode 100644
index 000000000000..d5a8274388ba
--- /dev/null
+++ b/src/plugins/textOverflow.js
@@ -0,0 +1,11 @@
+export default function() {
+  return function({ addUtilities, variants }) {
+    addUtilities(
+      {
+        '.ellipsis': { 'text-overflow': 'ellipsis' },
+        '.no-ellipsis': { 'text-overflow': 'clip' },
+      },
+      variants('textOverflow')
+    )
+  }
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 9fb014a45d62..4ccaec6db0f3 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -513,6 +513,7 @@ module.exports = {
     textColor: ['responsive', 'hover', 'focus'],
     textDecoration: ['responsive', 'hover', 'focus'],
     textTransform: ['responsive'],
+    textOverflow: ['responsive'],
     userSelect: ['responsive'],
     verticalAlign: ['responsive'],
     visibility: ['responsive'],