Skip to content

Commit 228795e

Browse files
JamesHemeryJamesHemery
committed
better arbitrary values support & fixes
1 parent 40589fb commit 228795e

3 files changed

Lines changed: 53 additions & 42 deletions

File tree

‎src/Rules/ArbitraryLengthRule.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
final class ArbitraryLengthRule extends ArbitraryValueRule
88
{
9-
protected const LENGTH_UNIT_REGEX = '/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|^0$/';
9+
protected const LENGTH_UNIT_REGEX = '/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/';
1010

1111
protected ?string $parameter = 'length';
1212

‎src/TailwindMergeConfig.php‎

Lines changed: 42 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,8 @@ public static function default(): static
260260

261261
$overscroll = ['auto', 'contain', 'none'];
262262
$overflow = ['auto', 'hidden', 'clip', 'visible', 'scroll'];
263-
$spacingWithAuto = ['auto', $spacing];
263+
$spacingWithAutoAndArbitrary = ['auto', $isArbitraryValue, $spacing];
264+
$spacingWithArbitrary = [$isArbitraryValue, $spacing];
264265
$lengthWithEmpty = ['', $isLength, $isArbitraryLength];
265266
$numberWithAutoAndArbitrary = ['auto', $isNumber, $isArbitraryValue];
266267
$positions = [
@@ -304,29 +305,29 @@ public static function default(): static
304305
theme: [
305306
'colors' => [$isAny],
306307
'spacing' => [$isLength, $isArbitraryLength],
307-
'blur' => ['none', '', $isTshirtSize, $isArbitraryLength],
308+
'blur' => ['none', '', $isTshirtSize, $isArbitraryValue],
308309
'brightness' => $number,
309310
'borderColor' => [$colors],
310-
'borderRadius' => ['none', '', 'full', $isTshirtSize, $isArbitraryLength],
311-
'borderSpacing' => [$spacing],
311+
'borderRadius' => ['none', '', 'full', $isTshirtSize, $isArbitraryValue],
312+
'borderSpacing' => $spacingWithArbitrary,
312313
'borderWidth' => $lengthWithEmpty,
313314
'contrast' => $number,
314315
'grayscale' => $zeroAndEmpty,
315316
'hueRotate' => $numberAndArbitrary,
316317
'invert' => $zeroAndEmpty,
317-
'gap' => [$spacing],
318+
'gap' => $spacingWithArbitrary,
318319
'gradientColorStops' => [$colors],
319320
'gradientColorStopPositions' => [$isPercent, $isArbitraryLength],
320-
'inset' => $spacingWithAuto,
321-
'margin' => $spacingWithAuto,
321+
'inset' => $spacingWithAutoAndArbitrary,
322+
'margin' => $spacingWithAutoAndArbitrary,
322323
'opacity' => $number,
323-
'padding' => [$spacing],
324+
'padding' => $spacingWithArbitrary,
324325
'saturate' => $number,
325326
'scale' => $number,
326327
'sepia' => $zeroAndEmpty,
327328
'skew' => $numberAndArbitrary,
328-
'space' => [$spacing],
329-
'translate' => [$spacing],
329+
'space' => $spacingWithArbitrary,
330+
'translate' => $spacingWithArbitrary,
330331
],
331332
classGroups: [
332333
// Layout
@@ -550,7 +551,7 @@ classGroups: [
550551
*
551552
* @see https://tailwindcss.com/docs/flex-basis
552553
*/
553-
'basis' => [['basis' => $spacingWithAuto]],
554+
'basis' => [['basis' => $spacingWithAutoAndArbitrary]],
554555
/**
555556
* Flex Direction
556557
*
@@ -598,7 +599,7 @@ classGroups: [
598599
*
599600
* @see https://tailwindcss.com/docs/grid-column
600601
*/
601-
'col-start-end' => [['col' => ['auto', ['span' => [$isInteger, $isArbitraryInteger]], $isArbitraryValue]]],
602+
'col-start-end' => [['col' => ['auto', ['span' => ['full', $isInteger, $isArbitraryInteger]], $isArbitraryValue]]],
602603
/**
603604
* Grid Column Start
604605
*
@@ -864,13 +865,13 @@ classGroups: [
864865
*
865866
* @see https://tailwindcss.com/docs/width
866867
*/
867-
'w' => [['w' => ['auto', 'min', 'max', 'fit', $spacing]]],
868+
'w' => [['w' => ['auto', 'min', 'max', 'fit', $isArbitraryValue, $spacing]]],
868869
/**
869870
* Min-Width
870871
*
871872
* @see https://tailwindcss.com/docs/min-width
872873
*/
873-
'min-w' => [['min-w' => ['min', 'max', 'fit', $isLength, $isArbitraryLength]]],
874+
'min-w' => [['min-w' => ['min', 'max', 'fit', $isArbitraryValue, $isLength, $isArbitraryLength]]],
874875
/**
875876
* Max-Width
876877
*
@@ -888,7 +889,7 @@ classGroups: [
888889
'prose',
889890
['screen' => [$isTshirtSize]],
890891
$isTshirtSize,
891-
$isArbitraryLength,
892+
$isArbitraryValue,
892893
],
893894
],
894895
],
@@ -897,19 +898,19 @@ classGroups: [
897898
*
898899
* @see https://tailwindcss.com/docs/height
899900
*/
900-
'h' => [['h' => [$spacing, 'auto', 'min', 'max', 'fit']]],
901+
'h' => [['h' => [$isArbitraryValue, $spacing, 'auto', 'min', 'max', 'fit']]],
901902
/**
902903
* Min-Height
903904
*
904905
* @see https://tailwindcss.com/docs/min-height
905906
*/
906-
'min-h' => [['min-h' => ['min', 'max', 'fit', $isLength, $isArbitraryLength]]],
907+
'min-h' => [['min-h' => ['min', 'max', 'fit', $isArbitraryValue, $isLength, $isArbitraryLength]]],
907908
/**
908909
* Max-Height
909910
*
910911
* @see https://tailwindcss.com/docs/max-height
911912
*/
912-
'max-h' => [['max-h' => [$spacing, 'min', 'max', 'fit']]],
913+
'max-h' => [['max-h' => [$isArbitraryValue, $spacing, 'min', 'max', 'fit']]],
913914
// Typography
914915
/**
915916
* Font Size
@@ -1022,7 +1023,7 @@ classGroups: [
10221023
* @see https://tailwindcss.com/docs/line-height
10231024
*/
10241025
'leading' => [
1025-
['leading' => ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose', $isLength, $isArbitraryLength]],
1026+
['leading' => ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose', $isArbitraryValue, $isLength, $isArbitraryLength]],
10261027
],
10271028
/**
10281029
* List Style Image
@@ -1096,7 +1097,7 @@ classGroups: [
10961097
*
10971098
* @see https://tailwindcss.com/docs/text-underline-offset
10981099
*/
1099-
'underline-offset' => [['underline-offset' => ['auto', $isLength, $isArbitraryLength]]],
1100+
'underline-offset' => [['underline-offset' => ['auto', $isArbitraryValue, $isLength, $isArbitraryLength]]],
11001101
/**
11011102
* Text Decoration Color
11021103
*
@@ -1120,7 +1121,7 @@ classGroups: [
11201121
*
11211122
* @see https://tailwindcss.com/docs/text-indent
11221123
*/
1123-
'indent' => [['indent' => [$spacing]]],
1124+
'indent' => [['indent' => $spacingWithArbitrary]],
11241125
/**
11251126
* Vertical Alignment
11261127
*
@@ -1137,7 +1138,7 @@ classGroups: [
11371138
'text-bottom',
11381139
'sub',
11391140
'super',
1140-
$isArbitraryLength,
1141+
$isArbitraryValue,
11411142
],
11421143
],
11431144
],
@@ -1517,7 +1518,7 @@ classGroups: [
15171518
*
15181519
* @see https://tailwindcss.com/docs/outline-offset
15191520
*/
1520-
'outline-offset' => [['outline-offset' => [$isLength, $isArbitraryLength]]],
1521+
'outline-offset' => [['outline-offset' => [$isArbitraryValue, $isLength, $isArbitraryLength]]],
15211522
/**
15221523
* Outline Width
15231524
*
@@ -1967,109 +1968,109 @@ classGroups: [
19671968
*
19681969
* @see https://tailwindcss.com/docs/scroll-margin
19691970
*/
1970-
'scroll-m' => [['scroll-m' => [$spacing]]],
1971+
'scroll-m' => [['scroll-m' => $spacingWithArbitrary]],
19711972
/**
19721973
* Scroll Margin X
19731974
*
19741975
* @see https://tailwindcss.com/docs/scroll-margin
19751976
*/
1976-
'scroll-mx' => [['scroll-mx' => [$spacing]]],
1977+
'scroll-mx' => [['scroll-mx' => $spacingWithArbitrary]],
19771978
/**
19781979
* Scroll Margin Y
19791980
*
19801981
* @see https://tailwindcss.com/docs/scroll-margin
19811982
*/
1982-
'scroll-my' => [['scroll-my' => [$spacing]]],
1983+
'scroll-my' => [['scroll-my' => $spacingWithArbitrary]],
19831984
/**
19841985
* Scroll Margin Start
19851986
*
19861987
* @see https://tailwindcss.com/docs/scroll-margin
19871988
*/
1988-
'scroll-ms' => [['scroll-ms' => [$spacing]]],
1989+
'scroll-ms' => [['scroll-ms' => $spacingWithArbitrary]],
19891990
/**
19901991
* Scroll Margin End
19911992
*
19921993
* @see https://tailwindcss.com/docs/scroll-margin
19931994
*/
1994-
'scroll-me' => [['scroll-me' => [$spacing]]],
1995+
'scroll-me' => [['scroll-me' => $spacingWithArbitrary]],
19951996
/**
19961997
* Scroll Margin Top
19971998
*
19981999
* @see https://tailwindcss.com/docs/scroll-margin
19992000
*/
2000-
'scroll-mt' => [['scroll-mt' => [$spacing]]],
2001+
'scroll-mt' => [['scroll-mt' => $spacingWithArbitrary]],
20012002
/**
20022003
* Scroll Margin Right
20032004
*
20042005
* @see https://tailwindcss.com/docs/scroll-margin
20052006
*/
2006-
'scroll-mr' => [['scroll-mr' => [$spacing]]],
2007+
'scroll-mr' => [['scroll-mr' => $spacingWithArbitrary]],
20072008
/**
20082009
* Scroll Margin Bottom
20092010
*
20102011
* @see https://tailwindcss.com/docs/scroll-margin
20112012
*/
2012-
'scroll-mb' => [['scroll-mb' => [$spacing]]],
2013+
'scroll-mb' => [['scroll-mb' => $spacingWithArbitrary]],
20132014
/**
20142015
* Scroll Margin Left
20152016
*
20162017
* @see https://tailwindcss.com/docs/scroll-margin
20172018
*/
2018-
'scroll-ml' => [['scroll-ml' => [$spacing]]],
2019+
'scroll-ml' => [['scroll-ml' => $spacingWithArbitrary]],
20192020
/**
20202021
* Scroll Padding
20212022
*
20222023
* @see https://tailwindcss.com/docs/scroll-padding
20232024
*/
2024-
'scroll-p' => [['scroll-p' => [$spacing]]],
2025+
'scroll-p' => [['scroll-p' => $spacingWithArbitrary]],
20252026
/**
20262027
* Scroll Padding X
20272028
*
20282029
* @see https://tailwindcss.com/docs/scroll-padding
20292030
*/
2030-
'scroll-px' => [['scroll-px' => [$spacing]]],
2031+
'scroll-px' => [['scroll-px' => $spacingWithArbitrary]],
20312032
/**
20322033
* Scroll Padding Y
20332034
*
20342035
* @see https://tailwindcss.com/docs/scroll-padding
20352036
*/
2036-
'scroll-py' => [['scroll-py' => [$spacing]]],
2037+
'scroll-py' => [['scroll-py' => $spacingWithArbitrary]],
20372038
/**
20382039
* Scroll Padding Start
20392040
*
20402041
* @see https://tailwindcss.com/docs/scroll-padding
20412042
*/
2042-
'scroll-ps' => [['scroll-ps' => [$spacing]]],
2043+
'scroll-ps' => [['scroll-ps' => $spacingWithArbitrary]],
20432044
/**
20442045
* Scroll Padding End
20452046
*
20462047
* @see https://tailwindcss.com/docs/scroll-padding
20472048
*/
2048-
'scroll-pe' => [['scroll-pe' => [$spacing]]],
2049+
'scroll-pe' => [['scroll-pe' => $spacingWithArbitrary]],
20492050
/**
20502051
* Scroll Padding Top
20512052
*
20522053
* @see https://tailwindcss.com/docs/scroll-padding
20532054
*/
2054-
'scroll-pt' => [['scroll-pt' => [$spacing]]],
2055+
'scroll-pt' => [['scroll-pt' => $spacingWithArbitrary]],
20552056
/**
20562057
* Scroll Padding Right
20572058
*
20582059
* @see https://tailwindcss.com/docs/scroll-padding
20592060
*/
2060-
'scroll-pr' => [['scroll-pr' => [$spacing]]],
2061+
'scroll-pr' => [['scroll-pr' => $spacingWithArbitrary]],
20612062
/**
20622063
* Scroll Padding Bottom
20632064
*
20642065
* @see https://tailwindcss.com/docs/scroll-padding
20652066
*/
2066-
'scroll-pb' => [['scroll-pb' => [$spacing]]],
2067+
'scroll-pb' => [['scroll-pb' => $spacingWithArbitrary]],
20672068
/**
20682069
* Scroll Padding Left
20692070
*
20702071
* @see https://tailwindcss.com/docs/scroll-padding
20712072
*/
2072-
'scroll-pl' => [['scroll-pl' => [$spacing]]],
2073+
'scroll-pl' => [['scroll-pl' => $spacingWithArbitrary]],
20732074
/**
20742075
* Scroll Snap Align
20752076
*

‎tests/Unit/TailwindMergeTest.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@
103103
'overflow-x-auto overflow-x-hidden overflow-x-scroll' => 'overflow-x-scroll',
104104
'overflow-x-auto hover:overflow-x-hidden overflow-x-scroll' => 'hover:overflow-x-hidden overflow-x-scroll',
105105
'overflow-x-auto hover:overflow-x-hidden hover:overflow-x-auto overflow-x-scroll' => 'hover:overflow-x-auto overflow-x-scroll',
106+
'col-span-1 col-span-full' => 'col-span-full',
106107
]);
107108

108109
test('merges classes from Font Variant Numeric section correctly')->twMerge([
@@ -412,3 +413,12 @@ function (TailwindMergeConfig $config) {
412413
'content-normal content-center content-stretch' => 'content-stretch',
413414
'whitespace-nowrap whitespace-break-spaces' => 'whitespace-break-spaces',
414415
]);
416+
417+
test('handles ambiguous arbitrary values correctly')->twMerge([
418+
'mt-2 mt-[calc(theme(fontSize.4xl)/1.125)]' => 'mt-[calc(theme(fontSize.4xl)/1.125)]',
419+
'p-2 p-[calc(theme(fontSize.4xl)/1.125)_10px]' => 'p-[calc(theme(fontSize.4xl)/1.125)_10px]',
420+
'mt-2 mt-[length:theme(someScale.someValue)]' => 'mt-[length:theme(someScale.someValue)]',
421+
'text-2xl text-[length:theme(someScale.someValue)]' => 'text-[length:theme(someScale.someValue)]',
422+
'text-2xl text-[calc(theme(fontSize.4xl)/1.125)]' => 'text-[calc(theme(fontSize.4xl)/1.125)]',
423+
'mt-2 mt-[theme(someScale.someValue)]' => 'mt-[theme(someScale.someValue)]',
424+
]);

0 commit comments

Comments
 (0)