Move truncate to textOverflow (#2562)

* Move truncate to textOverflow * Update changelog
tailwindlabs · Oct 14, 2020 · ae8b634 · ae8b634
1 parent 7744b5a
commit ae8b634
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 43 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added `overflow-ellipsis` and `overflow-clip` utilities ([#1289](https://github.com/tailwindlabs/tailwindcss/pull/1289))
+- Move `truncate` class to `textOverflow` core plugin ([#2562](https://github.com/tailwindlabs/tailwindcss/pull/2562))
 
 ## [1.9.2]
 

diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
@@ -38562,6 +38562,12 @@ video {
   --text-opacity: 1;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .overflow-ellipsis {
   text-overflow: ellipsis;
 }
@@ -38792,12 +38798,6 @@ video {
   word-break: break-all;
 }
 
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .w-0 {
   width: 0;
 }
@@ -82557,6 +82557,12 @@ video {
     --text-opacity: 1;
   }
 
+  .sm\:truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .sm\:overflow-ellipsis {
     text-overflow: ellipsis;
   }
@@ -82787,12 +82793,6 @@ video {
     word-break: break-all;
   }
 
-  .sm\:truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   .sm\:w-0 {
     width: 0;
   }
@@ -126522,6 +126522,12 @@ video {
     --text-opacity: 1;
   }
 
+  .md\:truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .md\:overflow-ellipsis {
     text-overflow: ellipsis;
   }
@@ -126752,12 +126758,6 @@ video {
     word-break: break-all;
   }
 
-  .md\:truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   .md\:w-0 {
     width: 0;
   }
@@ -170487,6 +170487,12 @@ video {
     --text-opacity: 1;
   }
 
+  .lg\:truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .lg\:overflow-ellipsis {
     text-overflow: ellipsis;
   }
@@ -170717,12 +170723,6 @@ video {
     word-break: break-all;
   }
 
-  .lg\:truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   .lg\:w-0 {
     width: 0;
   }
@@ -214452,6 +214452,12 @@ video {
     --text-opacity: 1;
   }
 
+  .xl\:truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .xl\:overflow-ellipsis {
     text-overflow: ellipsis;
   }
@@ -214682,12 +214688,6 @@ video {
     word-break: break-all;
   }
 
-  .xl\:truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   .xl\:w-0 {
     width: 0;
   }
@@ -258417,6 +258417,12 @@ video {
     --text-opacity: 1;
   }
 
+  .\32xl\:truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .\32xl\:overflow-ellipsis {
     text-overflow: ellipsis;
   }
@@ -258647,12 +258653,6 @@ video {
     word-break: break-all;
   }
 
-  .\32xl\:truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   .\32xl\:w-0 {
     width: 0;
   }

diff --git a/src/featureFlags.js b/src/featureFlags.js
@@ -8,6 +8,7 @@ const featureFlags = {
     'purgeLayersByDefault',
     'defaultLineHeights',
     'standardFontWeights',
+    'moveTruncateToTextOverflow',
   ],
   experimental: [
     'uniformColorPalette',

diff --git a/src/plugins/textOverflow.js b/src/plugins/textOverflow.js
@@ -1,7 +1,18 @@
+import { flagEnabled } from '../featureFlags'
+
 export default function() {
-  return function({ addUtilities, variants }) {
+  return function({ addUtilities, variants, config }) {
     addUtilities(
       {
+        ...(flagEnabled(config(), 'moveTruncateToTextOverflow')
+          ? {
+              '.truncate': {
+                overflow: 'hidden',
+                'text-overflow': 'ellipsis',
+                'white-space': 'nowrap',
+              },
+            }
+          : {}),
         '.overflow-ellipsis': { 'text-overflow': 'ellipsis' },
         '.overflow-clip': { 'text-overflow': 'clip' },
       },

diff --git a/src/plugins/wordBreak.js b/src/plugins/wordBreak.js
@@ -1,5 +1,7 @@
+import { flagEnabled } from '../featureFlags'
+
 export default function() {
-  return function({ addUtilities, variants }) {
+  return function({ addUtilities, variants, config }) {
     addUtilities(
       {
         '.break-normal': {
@@ -15,11 +17,15 @@ export default function() {
         },
         '.break-all': { 'word-break': 'break-all' },
 
-        '.truncate': {
-          overflow: 'hidden',
-          'text-overflow': 'ellipsis',
-          'white-space': 'nowrap',
-        },
+        ...(!flagEnabled(config(), 'moveTruncateToTextOverflow')
+          ? {
+              '.truncate': {
+                overflow: 'hidden',
+                'text-overflow': 'ellipsis',
+                'white-space': 'nowrap',
+              },
+            }
+          : {}),
       },
       variants('wordBreak')
     )