Ability to set default shouldForwardProp or expose to extended components

UPDATED TO REFLECT MORE ACCURATE ISSUE

The problem

I would love the ability to set a default shouldForwardProp value, project wide by either a simplistic factory extension or via a theme. Currently when I set the shouldForwardProp value on a styled div it works great. However if I extend that styled component to form another one leveraging the withComponent helper, that shouldForwardProp value is not exposed to that new styled component and I need to set it again.

ie:

import { css } from '@emotion/core';
import styled from '@emotion/styled';
import * as styledSystem from 'styled-system';
import { COLORS, fontAR, shouldForwardProp } from '../../constants/styles';

const baseStyle = css`
  ${fontAR};
  font-size: 14px;
  line-height: 1.43;
`;

const smallStyle = css`
  font-size: 12px;
  line-height: 1.67;
`;

const largeStyle = css`
  font-size: 16px;
  line-height: 1.91;
`;

const boldStyle = css`
  font-family: Avenir;
  font-weight: 900;
`;

const styleMap = {
  small: smallStyle,
  large: largeStyle,
  bold: boldStyle,
};

interface ParagraphProps
  extends styledSystem.ColorProps,
    styledSystem.FontFamilyProps,
    styledSystem.FontSizeProps,
    styledSystem.FontWeightProps,
    styledSystem.HeightProps,
    styledSystem.LetterSpacingProps,
    styledSystem.LineHeightProps,
    styledSystem.SpaceProps,
    styledSystem.TextAlignProps,
    styledSystem.WidthProps {
  color?: COLORS;
  size?: string;
}

export const Paragraph = styled('p', { shouldForwardProp })<ParagraphProps>`
  ${baseStyle}
  ${styledSystem.color}
  ${styledSystem.fontFamily}
  ${styledSystem.fontSize};
  ${styledSystem.fontWeight}
  ${styledSystem.height}
  ${styledSystem.letterSpacing}
  ${styledSystem.lineHeight}
  ${styledSystem.space}
  ${styledSystem.textAlign}
  ${styledSystem.width}
  ${props => (props.size ? styleMap[props.size] : null)}
`;

const Label = styled(Paragraph)`
  color: ${COLORS.slate};
  display: flex;
  align-items: center;
  margin-bottom: 4px;
`.withComponent('label');

Now Label does not know to exclude any props that are a result of the imported function which works as intended in the Paragraph component.

Proposed solution

• Add the ability in the core code to consume the underlying shouldForwardProp value if a styled component is extending another styled component combined with withComponent.

It works if you use the as prop but my intention is to not need to remember to add that additional prop anytime I want to use the new Label component

[Andarist]

This issue got fixed by https://github.com/emotion-js/emotion/pull/1668 and the fix is going to be a part of the upcoming v11.

[Andarist]

Ok, I see what’s happening now. When using withComponent this line “fails” and things are not being merged like you might have expected.

Need to think about how this and other options are handled when extending components