CSS prop unable to override responsive theme config

[sanandnarayan]

When the developer sets the value only for the first viewport, The CSS props function is unable to override all viewport values of the theme config .

//theme.js
const breakpoints = ["52em"];
const styles = {
  h1: {
    color: ["red", "blue"]
  }
};

<Styled.h1 css={css({ color: ["rebeccapurple" ]})}>
  {props.children}
</Styled.h1>

I expected this to override the the larger viewports as well. But i had to explicitly set the value for all viewports.

<Styled.h1 css={css({ color: ["rebeccapurple", 'rebeccapurple'] })}>
  {props.children}
</Styled.h1>

I have reproduced the issue in this codesanbox. you can reproduce the issue by resizing

Is this the intended behaviour? If not, can we filter the props and merge in jsx function/pragma?

[sanandnarayan]

@jxnblk can i take a stab at fixing this?

[jxnblk]

@sanandnarayan absolutely! Sorry I missed this last night, but no need to ask permission, especially if it's something that has a bug label. TBH, I'm not sure what the best way to fix this is since it's sort of happening because of CSS specificity, but it's not the intended behavior

[sanandnarayan]

hmm right. let me think through this a little more.

[jxnblk]

@sanandnarayan if you're still interested in taking a stab at this, feel free to open a PR, but I'm going to close this issue for now and maybe revisit it in @styled-system/css at some point in the future