Sass adds extra white spaces around commas even when using the "--style compressed" flag

I have written a simple function to write multiple text-shadows and it's working fine.

@function text-shadow (
	$x: 0,
	$y: 0,
	$blur-radius: 0,
	$color: #000,
	$step: 0,
	$count: 1
) {

	$shadow: null;
	$_sum-step: 0;

	@for $i from 1 through $count {
		$_sum-step: $_sum-step + $step;
		$shadow: $shadow #{$x + $_sum-step} #{$y + $_sum-step} $blur-radius $color#{if($i != $count, ",", "")};
	}

	@return $shadow;
}

.long-shadow {
	color: #666;
	font-size: 100px;
	font-family: Arial;
	font-weight: 900;
	padding: 0 0 12px 0;
	text-shadow: text-shadow(
		$x: 0px,
		$y: 0px,
		$color: #ccc,
		$step: .5px,
		$count: 60
	);
}

I am generating the output CSS using:

sass --watch long-sh.scss:long-sh.css --style compressed

But, the output CSS file contains:

... text-shadow:0.5px 0.5px 0 #ccc , 1px 1px 0 #ccc , 1.5px 1.5px 0 #ccc , 2px 2px 0 #ccc , 2.5px 2.5px 0 #ccc , 3px 3px 0 #ccc , 3.5px 3.5px 0 #ccc , 4px 4px 0 #ccc , 4.5px 4.5px 0 #ccc , 5px 5px 0 #ccc , 5.5px 5.5px 0 #ccc , 6px 6px 0 #ccc , 6.5px 6.5px 0 #ccc , 7px 7px 0 #ccc , 7.5px 7.5px 0 #ccc , 8px 8px 0 #ccc , 8.5px 8.5px 0 #ccc , 9px 9px 0 #ccc , 9.5px 9.5px 0 #ccc , 10px 10px 0 #ccc , 10.5px 10.5px 0 #ccc , 11px 11px 0 #ccc , 11.5px 11.5px 0 #ccc , 12px 12px 0 #ccc , 12.5px 12.5px 0 #ccc , 13px 13px 0 #ccc , 13.5px 13.5px 0 #ccc , 14px 14px 0 #ccc , 14.5px 14.5px 0 #ccc , 15px 15px 0 #ccc , 15.5px 15.5px 0 #ccc , 16px 16px 0 #ccc , 16.5px 16.5px 0 #ccc , 17px 17px 0 #ccc , 17.5px 17.5px 0 #ccc , 18px 18px 0 #ccc , 18.5px 18.5px 0 #ccc , 19px 19px 0 #ccc , 19.5px 19.5px 0 #ccc , 20px 20px 0 #ccc , 20.5px 20.5px 0 #ccc , 21px 21px 0 #ccc , 21.5px 21.5px 0 #ccc , 22px 22px 0 #ccc , 22.5px 22.5px 0 #ccc , 23px 23px 0 #ccc , 23.5px 23.5px 0 #ccc , 24px 24px 0 #ccc , 24.5px 24.5px 0 #ccc , 25px 25px 0 #ccc , 25.5px 25.5px 0 #ccc , 26px 26px 0 #ccc , 26.5px 26.5px 0 #ccc , 27px 27px 0 #ccc , 27.5px 27.5px 0 #ccc , 28px 28px 0 #ccc , 28.5px 28.5px 0 #ccc , 29px 29px 0 #ccc , 29.5px 29.5px 0 #ccc , 30px 30px 0 #ccc}

where there are extra white spaces around the commas.

How can I remove these white spaces?

I would probably not spend time on it personally.

If it's important to you try doing some postprocessing of your compressed css, create a node script and read the compressed file and then process it and write back to it.

This little simple script takes a string and uses regex to remove whitespaces around commas.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const testCss = "text-shadow:0.5px 0.5px 0 #ccc , 1px 1px 0 #ccc , 1.5px 1.5px 0 #ccc , 2px 2px 0 #ccc , 2.5px 2.5px 0 #ccc , 3px 3px 0 #ccc , 3.5px 3.5px 0 #ccc , 4px 4px 0 #ccc , 4.5px 4.5px 0 #ccc , 5px 5px 0 #ccc , 5.5px 5.5px 0 #ccc , 6px 6px 0 #ccc , 6.5px 6.5px 0 #ccc , 7px 7px 0 #ccc , 7.5px 7.5px 0 #ccc , 8px 8px 0 #ccc , 8.5px 8.5px 0 #ccc , 9px 9px 0 #ccc , 9.5px 9.5px 0 #ccc , 10px 10px 0 #ccc , 10.5px 10.5px 0 #ccc , 11px 11px 0 #ccc , 11.5px 11.5px 0 #ccc , 12px 12px 0 #ccc , 12.5px 12.5px 0 #ccc , 13px 13px 0 #ccc , 13.5px 13.5px 0 #ccc , 14px 14px 0 #ccc , 14.5px 14.5px 0 #ccc , 15px 15px 0 #ccc , 15.5px 15.5px 0 #ccc , 16px 16px 0 #ccc , 16.5px 16.5px 0 #ccc , 17px 17px 0 #ccc , 17.5px 17.5px 0 #ccc , 18px 18px 0 #ccc , 18.5px 18.5px 0 #ccc , 19px 19px 0 #ccc , 19.5px 19.5px 0 #ccc , 20px 20px 0 #ccc , 20.5px 20.5px 0 #ccc , 21px 21px 0 #ccc , 21.5px 21.5px 0 #ccc , 22px 22px 0 #ccc , 22.5px 22.5px 0 #ccc , 23px 23px 0 #ccc , 23.5px 23.5px 0 #ccc , 24px 24px 0 #ccc , 24.5px 24.5px 0 #ccc , 25px 25px 0 #ccc , 25.5px 25.5px 0 #ccc , 26px 26px 0 #ccc , 26.5px 26.5px 0 #ccc , 27px 27px 0 #ccc , 27.5px 27.5px 0 #ccc , 28px 28px 0 #ccc , 28.5px 28.5px 0 #ccc , 29px 29px 0 #ccc , 29.5px 29.5px 0 #ccc , 30px 30px 0 #ccc}";
const removeWhitespace = (css) => {
const regex = /\s,\s/g;
return css.replace(regex, ',');
}
console.log(removeWhitespace(testCss));

<!-- end snippet -->