.cssText property returns invalid CSS

gistfile1.txt

<style>
	.test1 {
		--linear: linear-gradient(-90deg, #f0f0f0 0%, #f8f8f8 50%, #f0f0f0 100%);
		background: var(--linear);
		background-size: 400% 400%;
	}
</style>

<style>
	.test2 {
		--linear: linear-gradient(-90deg, #f0f0f0 0%, #f8f8f8 50%, #f0f0f0 100%);
		background: var(--linear);
	}
</style>

<script>
	// returns .test1 { --linear: linear-gradient(-90deg, #f0f0f0 0%, #f8f8f8 50%, #f0f0f0 100%); background-image: ; background-position-x: ; background-position-y: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 400% 400%; }
	console.log(document.styleSheets[0].cssRules[0].cssText)

	// returns .test2 { --linear: linear-gradient(-90deg, #f0f0f0 0%, #f8f8f8 50%, #f0f0f0 100%); background: var(--linear); }
	console.log(document.styleSheets[1].cssRules[0].cssText)
</script>