fix(utils): in generated css merge identical selectors

packages/utils/src/css/icons.ts

@@ -120,10 +120,20 @@ export function getIconsCSS(
 		const selector = Array.from(commonSelectors).join(
 			newOptions.format === 'compressed' ? ',' : ', '
 		);
-		css.unshift({
-			selector,
-			rules: commonRules,
-		});
+
+		// Check for same selector
+		if (css.length === 1 && css[0].selector === selector) {
+			css[0].rules = {
+				// Common first, override later
+				...commonRules,
+				...css[0].rules,
+			};
+		} else {
+			css.unshift({
+				selector,
+				rules: commonRules,
+			});
+		}
 	}
 
 	// Format

packages/utils/tests/icons-to-css-test.ts

@@ -320,17 +320,13 @@ describe('Testing CSS for multiple icons', () => {
 			})
 		).toBe(`.test--activity {
   display: inline-block;
-  width: 1em;
+  width: 1.5em;
   height: 1em;
   background-color: currentColor;
   -webkit-mask: no-repeat center / 100%;
   mask: no-repeat center / 100%;
   -webkit-mask-image: var(--svg);
   mask-image: var(--svg);
-}
-
-.test--activity {
-  width: 1.5em;
   --svg: ${expectedURL('activity')};
 }
 `);