Add support for Tailwindcss 3.4

gehrisandro · Jan 10, 2024 · 781bb3a · 781bb3a
1 parent 30f6101
commit 781bb3a
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## v1.1.0 (2024-01-10)
+### Added
+-   Add support for Tailwind CSS v3.4
+
+### Fixed
+-   Fix display class not removed when it precedes line-clamp class
+
 ## v1.0.0 (2023-10-18)
 ### Added
 - Add factory method to provide an optional PSR-16 cache

diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@
 
 A PHP port of [tailwind-merge](https://github.com/dcastil/tailwind-merge) by [dcastil](https://github.com/dcastil).
 
-Supports Tailwind v3.0 up to v3.3.
+Supports Tailwind v3.0 up to v3.4.
 
 If you find this package helpful, please consider sponsoring the maintainer:
 - Sandro Gehri: **[github.com/sponsors/gehrisandro](https://github.com/sponsors/gehrisandro)**

diff --git a/src/Support/Config.php b/src/Support/Config.php
@@ -224,13 +224,13 @@ public static function getDefaultConfig(): array
                  *
                  * @see https://tailwindcss.com/docs/float
                  */
-                'float' => [['float' => ['right', 'left', 'none']]],
+                'float' => [['float' => ['right', 'left', 'none', 'start', 'end']]],
                 /**
                  * Clear
                  *
                  * @see https://tailwindcss.com/docs/clear
                  */
-                'clear' => [['clear' => ['left', 'right', 'both', 'none']]],
+                'clear' => [['clear' => ['left', 'right', 'both', 'none', 'start', 'end']]],
                 /**
                  * Isolation
                  *
@@ -677,7 +677,21 @@ public static function getDefaultConfig(): array
                  *
                  * @see https://tailwindcss.com/docs/width
                  */
-                'w' => [['w' => ['auto', 'min', 'max', 'fit', ArbitraryValueValidator::validate(...), $spacing]]],
+                'w' => [
+                    [
+                        'w' => [
+                            'auto',
+                            'min',
+                            'max',
+                            'fit',
+                            'svw',
+                            'lvw',
+                            'dvw',
+                            ArbitraryValueValidator::validate(...),
+                            $spacing,
+                        ],
+                    ],
+                ],
                 /**
                  * Min-Width
                  *
@@ -692,7 +706,8 @@ public static function getDefaultConfig(): array
                 'max-w' => [
                     [
                         'max-w' => [
-                            '0',
+                            ArbitraryValueValidator::validate(...),
+                            $spacing,
                             'none',
                             'full',
                             'min',
@@ -701,7 +716,6 @@ public static function getDefaultConfig(): array
                             'prose',
                             ['screen' => [TshirtSizeValidator::validate(...)]],
                             TshirtSizeValidator::validate(...),
-                            ArbitraryValueValidator::validate(...),
                         ],
                     ],
                 ],
@@ -710,19 +724,43 @@ public static function getDefaultConfig(): array
                  *
                  * @see https://tailwindcss.com/docs/height
                  */
-                'h' => [['h' => [ArbitraryValueValidator::validate(...), $spacing, 'auto', 'min', 'max', 'fit']]],
+                'h' => [
+                    [
+                        'h' => [
+                            ArbitraryValueValidator::validate(...),
+                            $spacing,
+                            'auto',
+                            'min',
+                            'max',
+                            'fit',
+                            'svh',
+                            'lvh',
+                            'dvh',
+                        ],
+                    ],
+                ],
                 /**
                  * Min-Height
                  *
                  * @see https://tailwindcss.com/docs/min-height
                  */
-                'min-h' => [['min-h' => ['min', 'max', 'fit', LengthValidator::validate(...), ArbitraryValueValidator::validate(...)]]],
+                'min-h' => [
+                    ['min-h' => [ArbitraryValueValidator::validate(...), $spacing, 'min', 'max', 'fit', 'svh', 'lvh', 'dvh']],
+                ],
                 /**
                  * Max-Height
                  *
                  * @see https://tailwindcss.com/docs/max-height
                  */
-                'max-h' => [['max-h' => [ArbitraryValueValidator::validate(...), $spacing, 'min', 'max', 'fit']]],
+                'max-h' => [
+                    ['max-h' => [ArbitraryValueValidator::validate(...), $spacing, 'min', 'max', 'fit', 'svh', 'lvh', 'dvh']],
+                ],
+                /**
+                 * Size
+                 *
+                 * @see https://tailwindcss.com/docs/size
+                 */
+                'size' => [['size' => [ArbitraryValueValidator::validate(...), $spacing, 'auto', 'min', 'max', 'fit']]],
                 // Typography
                 /**
                  * Font Size
@@ -937,6 +975,12 @@ public static function getDefaultConfig(): array
                  * @see https://tailwindcss.com/docs/text-overflow
                  */
                 'text-overflow' => ['truncate', 'text-ellipsis', 'text-clip'],
+                /**
+                 * Text Wrap
+                 *
+                 * @see https://tailwindcss.com/docs/text-wrap
+                 */
+                'text-wrap' => [['text' => ['wrap', 'nowrap', 'balance', 'pretty']]],
                 /**
                  * Text Indent
                  *
@@ -1713,7 +1757,7 @@ public static function getDefaultConfig(): array
                  *
                  * @see https://tailwindcss.com/docs/appearance
                  */
-                'appearance' => ['appearance-none'],
+                'appearance' => [['appearance' => ['none', 'auto']]],
                 /**
                  * Cursor
                  *
@@ -1998,6 +2042,12 @@ public static function getDefaultConfig(): array
                  * @see https://tailwindcss.com/docs/screen-readers
                  */
                 'sr' => ['sr-only', 'not-sr-only'],
+                /**
+                 * Forced Color Adjust
+                 *
+                 * @see https://tailwindcss.com/docs/forced-color-adjust
+                 */
+                'forced-color-adjust' => [['forced-color-adjust' => ['auto', 'none']]],
             ],
             'conflictingClassGroups' => [
                 'overflow' => ['overflow-x', 'overflow-y'],
@@ -2013,6 +2063,7 @@ public static function getDefaultConfig(): array
                 'm' => ['mx', 'my', 'ms', 'me', 'mt', 'mr', 'mb', 'ml'],
                 'mx' => ['mr', 'ml'],
                 'my' => ['mt', 'mb'],
+                'size' => ['w', 'h'],
                 'font-size' => ['leading'],
                 'fvn-normal' => [
                     'fvn-ordinal',
@@ -2026,6 +2077,7 @@ public static function getDefaultConfig(): array
                 'fvn-figure' => ['fvn-normal'],
                 'fvn-spacing' => ['fvn-normal'],
                 'fvn-fraction' => ['fvn-normal'],
+                'line-clamp' => ['display', 'overflow'],
                 'rounded' => [
                     'rounded-s',
                     'rounded-e',

diff --git a/tests/Feature/ConflictsAcrossClassGroupsTest.php b/tests/Feature/ConflictsAcrossClassGroupsTest.php
@@ -39,3 +39,11 @@
     ['touch-manipulation touch-pan-x touch-pan-y touch-pinch-zoom', 'touch-pan-x touch-pan-y touch-pinch-zoom'],
     ['touch-pan-x touch-pan-y touch-pinch-zoom touch-auto', 'touch-auto'],
 ]);
+
+it('line-clamp classes do create conflicts correctly', function (string $input, string $output) {
+    expect(TailwindMerge::instance()->merge($input))
+        ->toBe($output);
+})->with([
+    ['overflow-auto inline line-clamp-1', 'line-clamp-1'],
+    ['line-clamp-1 overflow-auto inline', 'line-clamp-1 overflow-auto inline'],
+]);
diff --git a/tests/Feature/TailwindCssVersionsTest.php b/tests/Feature/TailwindCssVersionsTest.php
@@ -27,3 +27,19 @@
     ['content-normal content-center content-stretch', 'content-stretch'],
     ['whitespace-nowrap whitespace-break-spaces', 'whitespace-break-spaces'],
 ]);
+
+it('supports Tailwind CSS v3.4 features', function (string|array $input, string $output) {
+    expect(TailwindMerge::instance()->merge($input))
+        ->toBe($output);
+})->with([
+    ['h-svh h-dvh w-svw w-dvw', 'h-dvh w-dvw'],
+    ['has-[[data-potato]]:p-1 has-[[data-potato]]:p-2 group-has-[:checked]:grid group-has-[:checked]:flex', 'has-[[data-potato]]:p-2 group-has-[:checked]:flex'],
+    ['text-wrap text-pretty', 'text-pretty'],
+    ['w-5 h-3 size-10 w-12', 'size-10 w-12'],
+    ['grid-cols-2 grid-cols-subgrid grid-rows-5 grid-rows-subgrid', 'grid-cols-subgrid grid-rows-subgrid'],
+    ['min-w-0 min-w-50 min-w-px max-w-0 max-w-50 max-w-px', 'min-w-px max-w-px'],
+    ['forced-color-adjust-none forced-color-adjust-auto', 'forced-color-adjust-auto'],
+    ['appearance-none appearance-auto', 'appearance-auto'],
+    ['float-start float-end clear-start clear-end', 'float-end clear-end'],
+    ['*:p-10 *:p-20 hover:*:p-10 hover:*:p-20', '*:p-20 hover:*:p-20'],
+]);
diff --git a/tests/Unit/ClassMapTest.php b/tests/Unit/ClassMapTest.php
@@ -114,6 +114,7 @@
         'float' => ['float'],
         'flow' => ['display'],
         'font' => ['font-family', 'font-weight'],
+        'forced' => ['forced-color-adjust'],
         'from' => ['gradient-from', 'gradient-from-pos'],
         'gap' => ['gap', 'gap-x', 'gap-y'],
         'grayscale' => ['grayscale'],
@@ -235,6 +236,7 @@
         'sepia' => ['sepia'],
         'shadow' => ['shadow', 'shadow-color'],
         'shrink' => ['shrink'],
+        'size' => ['size'],
         'skew' => ['skew-x', 'skew-y'],
         'slashed' => ['fvn-slashed-zero'],
         'snap' => ['snap-align', 'snap-stop', 'snap-strictness', 'snap-type'],
@@ -248,7 +250,14 @@
         'subpixel' => ['font-smoothing'],
         'table' => ['display', 'table-layout'],
         'tabular' => ['fvn-spacing'],
-        'text' => ['font-size', 'text-alignment', 'text-color', 'text-opacity', 'text-overflow'],
+        'text' => [
+            'font-size',
+            'text-alignment',
+            'text-color',
+            'text-opacity',
+            'text-overflow',
+            'text-wrap',
+        ],
         'to' => ['gradient-to', 'gradient-to-pos'],
         'top' => ['top'],
         'touch' => ['touch', 'touch-pz', 'touch-x', 'touch-y'],