Fix shorthand variable parsing

src/__tests__/plugin.test.js

@@ -100,7 +100,7 @@ describe('stylisPluginCssVariables', () => {
 			'background: var( --bg );',
 			'font-size:14px;',
 			'font-size: var( --font, 14px );',
-			'transform:translate(0,0)scale(2);',
+			'transform:translate( 0 , 0) scale( 2);',
 			'transform: translate( var(--x, 0) , 0) scale( var(--size, 1) );',
 			'z-index:2;',
 			'z-index: var( --z, var( --z2, 2) );',

src/__tests__/transform.test.js

@@ -67,6 +67,13 @@ describe('getFallbackDeclaration', () => {
 
 			expect(result).toEqual('transform:translate3d(5px,10px,0)');
 		});
+
+		test('should correctly transform shorthand CSS properties', () => {
+			const dec = 'transition: all var(--d, 100ms) var(--e, ease)';
+			const result = getFallbackDeclaration(dec);
+
+			expect(result).toEqual('transition:all 100ms ease');
+		});
 	});
 
 	describe('nested', () => {

src/transform.js

@@ -16,17 +16,19 @@ import {
 function getPropValue(declaration) {
 	let hasFallbackValue = false;
 	// Start be separating (and preparing) the prop and value from the declaration.
-	let [prop, value] = declaration.replace(/ /g, '').split(/:/);
+	let [prop, value] = declaration.split(/:/);
+	prop = prop.trim();
 
 	// Searching for uses of var().
 	const matches =
 		value.match(VAR_REG_EXP) ||
 		/* istanbul ignore next */
 		[];
 
-	for (const match of matches) {
+	for (let match of matches) {
+		match = match.trim();
 		// Splitting again allows us to traverse through nested vars().
-		const entries = match.split('var(').filter(Boolean);
+		const entries = match.replace(/ /g, '').split('var(').filter(Boolean);
 
 		for (const entry of entries) {
 			// Removes extra parentheses

src/utils.js

@@ -87,5 +87,5 @@ export function sanitizeParens(value) {
 		result = value.replace(trimRegExp, '');
 	}
 
-	return result;
+	return result?.trim();
 }