Merge pull request #202 from alessbell/feat/add-overflow-clip-and-ell…

…ipsis-utils Add overflow-ellipsis and overflow-clip text overflow utilities
ben-rogerson · Nov 25, 2020 · 3f66e1d · 3f66e1d
2 parents 917524d + 03ce441
commit 3f66e1d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/__fixtures__/typography.js b/__fixtures__/typography.js
@@ -312,8 +312,10 @@ tw`lowercase`
 tw`capitalize`
 tw`normal-case`
 
-// https://tailwindcss.com/docs/word-break
+// https://tailwindcss.com/docs/text-overflow
 tw`truncate`
+tw`overflow-ellipsis`
+tw`overflow-clip`
 
 // https://tailwindcss.com/docs/vertical-align
 tw`align-baseline`

diff --git a/__snapshots__/plugin.test.js.snap b/__snapshots__/plugin.test.js.snap
@@ -428,26 +428,26 @@ const _GlobalStyles = () => (
   <_globalImport
     styles={_css\`
       @keyframes spin {
-          to { 
+          to {
             transform: rotate(360deg);
           }
         }
       @keyframes ping {
-          75%, 100% { 
+          75%, 100% {
             transform: scale(2); opacity: 0;
           }
         }
       @keyframes pulse {
-          50% { 
+          50% {
             opacity: .5;
           }
         }
       @keyframes bounce {
-          0%, 100% { 
+          0%, 100% {
             transform: translateY(-25%); animationTimingFunction: cubic-bezier(0.8,0,1,1);
           }
-        
-          50% { 
+
+          50% {
             transform: none; animationTimingFunction: cubic-bezier(0,0,0.2,1);
           }
         }\`}
@@ -17515,8 +17515,10 @@ tw\`lowercase\`
 tw\`capitalize\`
 tw\`normal-case\`
 
-// https://tailwindcss.com/docs/word-break
+// https://tailwindcss.com/docs/text-overflow
 tw\`truncate\`
+tw\`overflow-ellipsis\`
+tw\`overflow-clip\`
 
 // https://tailwindcss.com/docs/vertical-align
 tw\`align-baseline\`
@@ -18815,12 +18817,18 @@ tw\`break-all\`
 })
 ;({
   textTransform: 'none',
-}) // https://tailwindcss.com/docs/word-break
+}) // https://tailwindcss.com/docs/text-overflow
 
 ;({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
+})
+;({
+  textOverflow: 'ellipsis',
+})
+;({
+  textOverflow: 'clip',
 }) // https://tailwindcss.com/docs/vertical-align
 
 ;({

diff --git a/src/config/staticStyles.js b/src/config/staticStyles.js
@@ -433,6 +433,8 @@ export default {
     config: 'wordbreak',
   },
   'break-all': { output: { wordBreak: 'break-all' }, config: 'wordbreak' },
+
+  // https://tailwindcss.com/docs/text-overflow
   truncate: {
     output: {
       overflow: 'hidden',
@@ -441,6 +443,8 @@ export default {
     },
     config: false,
   },
+  'overflow-ellipsis': { output: { textOverflow: 'ellipsis' } },
+  'overflow-clip': { output: { textOverflow: 'clip' } },
 
   /**
    * ===========================================