diff --git a/src/supported-value.js b/src/supported-value.js index 53316dc..e860432 100644 --- a/src/supported-value.js +++ b/src/supported-value.js @@ -24,6 +24,7 @@ let el function prefixTransitionCallback(match, p1, p2) { if (p1 === 'var') return 'var' if (p1 === 'all') return 'all' + if (p2 === 'var') return ', var' if (p2 === 'all') return ', all' const prefixedValue = p1 ? supportedProperty(p1) : `, ${supportedProperty(p2)}` if (!prefixedValue) return p1 || p2 diff --git a/src/supported-value.test.js b/src/supported-value.test.js index a047a5b..c6046aa 100644 --- a/src/supported-value.test.js +++ b/src/supported-value.test.js @@ -57,6 +57,14 @@ describe('css-vendor', () => { expect(supportedValue('transition', 'var(--something)')).to.eql('var(--something)') }) + it('should return custom CSS variable with fallback CSS variable for transition property as it is', () => { + expect(supportedValue('transition', 'var(--something, var(--another-thing))')).to.eql('var(--something, var(--another-thing))') + }) + + it('should return custom CSS variable with fallback CSS variable having another CSS variable as fallback for transition property as it is', () => { + expect(supportedValue('transition', 'var(--something, var(--another-thing, var(--another-another-thing)))')).to.eql('var(--something, var(--another-thing, var(--another-another-thing)))') + }) + it('should return custom CSS variables for transition property as they are', () => { expect(supportedValue('transition', 'width var(--width), height var(--height)')).to.eql( 'width var(--width), height var(--height)'