feat: added rounding to theme configuration capabilities

.playground/app.vue

@@ -9,7 +9,7 @@
 		/>
 		<div class="text-strong @fish:bg-[red]">Test?</div>
 	</div>
-	<div class="bg-primary">
+	<div class="bg-primary px-layout-margin py-layout-gutter">
 		<div class="u-theme-default bg-primary border-3 border-danger">
 			<div class="text-onSurfaceDanger">Test?</div>
 		</div>

.playground/assets/js/theme-configuration.default.js

@@ -12,6 +12,7 @@
 export default {
 	// Testing only - set to false when done testing
 	minify: true, // Can be turned to false for a more readable output in the style tag
+	round: '1px', // Round to nearest pixel
 
 	// Setup
 	baseFontSize: 16, // For rem conversion

components/ThemeConfiguration/ThemeConfiguration.vue

@@ -539,6 +539,29 @@ function extractRules(
 		}
 	}
 
+	// Apply roundings
+	if (compConfig.value.round) {
+		[rules, mdScreenRules, lgScreenRules].forEach((ruleSet) => {
+			if (ruleSet.length === 0) return;
+			const roundTo =
+				typeof compConfig.value.round === 'boolean'
+					? '1px'
+					: typeof compConfig.value.round === 'number'
+						? `${compConfig.value.round}px`
+						: compConfig.value.round;
+
+			const roundedRules = [`@supports (padding: round(1%, ${roundTo})) {`];
+			ruleSet.forEach((rule) => {
+				const ruleParts = rule.split(': ');
+				const property = ruleParts[0];
+				const value = ruleParts[1].substring(0, ruleParts[1].length - 1);
+				roundedRules.push(`${property}: round(${value}, ${roundTo});`);
+			});
+
+			ruleSet.push(...roundedRules, '}');
+		});
+	}
+
 	// Return rules
 	if (compConfig.value.minify) {
 		return {