diff --git a/CHANGELOG.md b/CHANGELOG.md index b7bdf9659d44..d68f325919f9 100644 --- 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 index 7218b6f27b1e..198dbaeec588 100644 --- 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 index cb9a303abbe7..3ec37bf93888 100644 --- 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 index e28391a0fd4f..a4a69cc5d961 100644 --- 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 index 807469b0af5d..44c28ca5173b 100644 --- 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') )