Changed ordering of output values from input

[o-t-w]

My input is a design.tokens.json file:

{   "tiny": { "$value": "8px" },
    "small": { "$value": "16px" },
    "medium": { "$value": "24px" },
    "large": { "$value": "32px" },
    "xlarge": { "$value": "40px" },
    "error": { "$value": "red" },
    "success": { "$value": "green" },
    "warning": { "$value": "yellow" },
    "radius": { "$value": "3px" }
}

The CSS output is:

:root {
 	--error: red;
 	--large: 32px;
 	--medium: 24px;
 	--radius: 3px;
 	--small: 16px;
 	--success: green;
 	--tiny: 8px;
 	--warning: yellow;
 	--xlarge: 40px;
}

The CSS variables are no longer in a logical order: colors are not shown together and the spacings are no longer sequential. This makes it harder to read through and make sense of the variables in the output file.