Merge pull request #451 from dcastil/bugfix/448/fix-bg-opacity-arbitrary-percentage-not-working

Fix bg-opacity arbitrary percentages not being recognized properly

Author: dcastil

src/lib/default-config.ts

@@ -86,7 +86,6 @@ export const getDefaultConfig = () => {
     const getZeroAndEmpty = () => ['', '0', isArbitraryValue] as const
     const getBreaks = () =>
         ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'] as const
-    const getNumber = () => [isNumber, isArbitraryNumber]
     const getNumberAndArbitrary = () => [isNumber, isArbitraryValue]
 
     return {
@@ -96,12 +95,12 @@ export const getDefaultConfig = () => {
             colors: [isAny],
             spacing: [isLength, isArbitraryLength],
             blur: ['none', '', isTshirtSize, isArbitraryValue],
-            brightness: getNumber(),
+            brightness: getNumberAndArbitrary(),
             borderColor: [colors],
             borderRadius: ['none', '', 'full', isTshirtSize, isArbitraryValue],
             borderSpacing: getSpacingWithArbitrary(),
             borderWidth: getLengthWithEmptyAndArbitrary(),
-            contrast: getNumber(),
+            contrast: getNumberAndArbitrary(),
             grayscale: getZeroAndEmpty(),
             hueRotate: getNumberAndArbitrary(),
             invert: getZeroAndEmpty(),
@@ -110,10 +109,10 @@ export const getDefaultConfig = () => {
             gradientColorStopPositions: [isPercent, isArbitraryLength],
             inset: getSpacingWithAutoAndArbitrary(),
             margin: getSpacingWithAutoAndArbitrary(),
-            opacity: getNumber(),
+            opacity: getNumberAndArbitrary(),
             padding: getSpacingWithArbitrary(),
-            saturate: getNumber(),
-            scale: getNumber(),
+            saturate: getNumberAndArbitrary(),
+            scale: getNumberAndArbitrary(),
             sepia: getZeroAndEmpty(),
             skew: getNumberAndArbitrary(),
             space: getSpacingWithArbitrary(),

tests/arbitrary-properties.test.ts

@@ -20,6 +20,9 @@ test('handles arbitrary property conflicts with modifiers correctly', () => {
     expect(
         twMerge('[paint-order:markers] [paint-order:normal] [--my-var:2rem] lg:[--my-var:4px]'),
     ).toBe('[paint-order:normal] [--my-var:2rem] lg:[--my-var:4px]')
+    expect(twMerge('bg-[#B91C1C] bg-opacity-[0.56] bg-opacity-[48%]')).toBe(
+        'bg-[#B91C1C] bg-opacity-[48%]',
+    )
 })
 
 test('handles complex arbitrary property conflicts correctly', () => {