[Emotion] Fix consumer css overriding (instead of merging with) EUI css in child props

.eslintplugin.js

@@ -4,6 +4,5 @@ exports.rules = {
   'require-license-header': require('./scripts/eslint-plugin/require_license_header'),
   'forward-ref': require('./scripts/eslint-plugin/forward_ref_display_name'),
   'css-logical-properties': require('./scripts/eslint-plugin/css_logical_properties'),
-  css_before_spread_props: require('./scripts/eslint-plugin/css_before_spread_props'),
   'require-cypress-references': require('./scripts/eslint-plugin/require_cypress_references'),
 };

.eslintrc.js

@@ -77,7 +77,6 @@ module.exports = {
     'local/href-with-rel': 'error',
     'local/forward-ref': 'error',
     'local/css-logical-properties': 'error',
-    'local/css_before_spread_props': 'error',
     'local/require-cypress-references': 'error',
     'local/require-license-header': [
       'warn',

src/components/accordion/__snapshots__/accordion.test.tsx.snap

@@ -419,7 +419,7 @@ exports[`EuiAccordion props arrowProps is rendered 1`] = `
       aria-expanded="false"
       aria-label="aria-label"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__iconButton testClass1 testClass2 emotion-euiButtonIcon-xs-empty-text-euiTestCss"
+      class="euiButtonIcon euiAccordion__iconButton testClass1 testClass2 emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton-euiTestCss"
       data-test-subj="test subject string"
       tabindex="-1"
       type="button"
@@ -637,7 +637,7 @@ exports[`EuiAccordion props buttonProps is rendered 1`] = `
       aria-controls="4"
       aria-expanded="false"
       aria-label="aria-label"
-      class="euiAccordion__button testClass1 testClass2 emotion-euiTestCss"
+      class="euiAccordion__button testClass1 testClass2 emotion-euiAccordion__button-euiTestCss"
       data-test-subj="test subject string"
       id="generated-id"
       type="button"

src/components/accordion/accordion.tsx

@@ -276,6 +276,7 @@ export class EuiAccordionClass extends Component<
     const cssButtonStyles = [
       buttonStyles.euiAccordion__button,
       isDisabled && buttonStyles.disabled,
+      buttonProps?.css,
     ];
 
     const childrenStyles = euiAccordionChildrenStyles(theme);
@@ -296,6 +297,7 @@ export class EuiAccordionClass extends Component<
       iconButtonStyles.euiAccordion__iconButton,
       isOpen && iconButtonStyles.isOpen,
       _arrowDisplay === 'right' && iconButtonStyles.arrowRight,
+      arrowProps?.css,
     ];
 
     const optionalActionStyles = euiAccordionOptionalActionStyles();
@@ -317,9 +319,9 @@ export class EuiAccordionClass extends Component<
       iconButton = (
         <EuiButtonIcon
           color="text"
-          css={cssIconButtonStyles}
           {...arrowProps}
           className={iconButtonClasses}
+          css={cssIconButtonStyles}
           iconType="arrowRight"
           onClick={this.onToggle}
           aria-controls={id}
@@ -369,10 +371,10 @@ export class EuiAccordionClass extends Component<
 
     const button = (
       <ButtonElement
-        css={cssButtonStyles}
         {...buttonProps}
         id={buttonId}
         className={buttonClasses}
+        css={cssButtonStyles}
         aria-controls={id}
         // `aria-expanded` is only a valid attribute on interactive controls - axe-core throws a violation otherwise
         aria-expanded={ButtonElement === 'button' ? isOpen : undefined}

src/components/badge/badge.tsx

@@ -186,7 +186,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
 
   const closeClassNames = classNames(
     'euiBadge__icon',
-    closeButtonProps && closeButtonProps.className
+    closeButtonProps?.className
   );
 
   const Element = href && !isDisabled ? 'a' : 'button';
@@ -230,9 +230,9 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
             type={iconType}
             size="s"
             color="inherit" // forces the icon to inherit its parent color
-            css={iconCssStyles}
             {...closeButtonProps}
             className={closeClassNames}
+            css={[...iconCssStyles, closeButtonProps?.css]}
           />
         </button>
       );

src/components/card/card.test.tsx

@@ -31,7 +31,7 @@ describe('EuiCard', () => {
 
   shouldRenderCustomStyles(
     <EuiCard title="Card title" betaBadgeProps={{ label: 'beta' }} />,
-    { childProps: ['betaBadgeProps'] }
+    { childProps: ['betaBadgeProps', 'betaBadgeProps.anchorProps'] }
   );
 
   describe('props', () => {