diff --git a/tests/withAlphaVariable.test.js b/tests/withAlphaVariable.test.js index bf689ed6a..ebd86a5b8 100644 --- a/tests/withAlphaVariable.test.js +++ b/tests/withAlphaVariable.test.js @@ -76,6 +76,15 @@ test('it ignores colors that already have an alpha channel', () => { ).toEqual({ 'background-color': 'rgba(255, 255, 255, 0.5)', }) + expect( + withAlphaVariable({ + color: 'rgba(255 255 255 / 0.5)', + property: 'background-color', + variable: '--tw-bg-opacity', + }) + ).toEqual({ + 'background-color': 'rgba(255 255 255 / 0.5)', + }) expect( withAlphaVariable({ color: 'hsla(240, 100%, 50%, 1)', @@ -94,6 +103,15 @@ test('it ignores colors that already have an alpha channel', () => { ).toEqual({ 'background-color': 'hsla(240, 100%, 50%, 0.5)', }) + expect( + withAlphaVariable({ + color: 'hsl(240 100% 50% / 0.5)', + property: 'background-color', + variable: '--tw-bg-opacity', + }) + ).toEqual({ + 'background-color': 'hsl(240 100% 50% / 0.5)', + }) }) test('it allows a closure to be passed', () => { @@ -130,6 +148,16 @@ test('it transforms rgb and hsl to rgba and hsla', () => { '--tw-bg-opacity': '1', 'background-color': 'rgba(50, 50, 50, var(--tw-bg-opacity))', }) + expect( + withAlphaVariable({ + color: 'rgb(50 50 50)', + property: 'background-color', + variable: '--tw-bg-opacity', + }) + ).toEqual({ + '--tw-bg-opacity': '1', + 'background-color': 'rgba(50, 50, 50, var(--tw-bg-opacity))', + }) expect( withAlphaVariable({ color: 'hsl(50, 50%, 50%)', @@ -140,4 +168,14 @@ test('it transforms rgb and hsl to rgba and hsla', () => { '--tw-bg-opacity': '1', 'background-color': 'hsla(50, 50%, 50%, var(--tw-bg-opacity))', }) + expect( + withAlphaVariable({ + color: 'hsl(50 50% 50%)', + property: 'background-color', + variable: '--tw-bg-opacity', + }) + ).toEqual({ + '--tw-bg-opacity': '1', + 'background-color': 'hsla(50, 50%, 50%, var(--tw-bg-opacity))', + }) })