From 14d9ce6ba186978ad390c4613d450392b428ca85 Mon Sep 17 00:00:00 2001 From: Helmut Henig Date: Mon, 11 Apr 2022 07:54:07 +0200 Subject: [PATCH] Added support for custom CSS variable being a fallback for a custom CSS variable in transition property --- src/supported-value.js | 1 + src/supported-value.test.js | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/src/supported-value.js b/src/supported-value.js index 53316dcb..e8604325 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 a047a5b2..c6046aa2 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)'