diff --git a/packages/utils/src/css/icons.ts b/packages/utils/src/css/icons.ts index 38ea6f0..5755775 100644 --- a/packages/utils/src/css/icons.ts +++ b/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 diff --git a/packages/utils/tests/icons-to-css-test.ts b/packages/utils/tests/icons-to-css-test.ts index 96e3a60..26e28b1 100644 --- a/packages/utils/tests/icons-to-css-test.ts +++ b/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')}; } `);