css() isn't picking up pseudo-selector styles defined in emotion css prop

[kevinSuttle]

Is there something I'm missing?

css={css({':focus': {borderColor: 'blue20'}}

This is being used on a <Flexbox /> component built in @emotion/styled + styled-system.

// @flow

import styled from '@emotion/styled';

import {
  alignItems,
  alignContent,
  justifyContent,
  justifyItems,
  flexWrap,
  flexBasis,
  flexDirection,
  flex,
  justifySelf,
  alignSelf,
  order,
} from 'styled-system';
import shouldForwardProp from '@styled-system/should-forward-prop';

import {Box} from './Box';

export const Flexbox = styled(Box, {
  shouldForwardProp,
})(
  {
    boxSizing: 'border-box',
    display: 'flex',
    label: 'flexbox-primitive',
  },
  alignItems,
  alignContent,
  justifyContent,
  justifyItems,
  flexWrap,
  flexBasis,
  flexDirection,
  flex,
  justifySelf,
  alignSelf,
  order
);

What's odd is that I can get it to work here: https://stackblitz.com/edit/react-zzznyy

[jxnblk]

What version of @styled-system/css are you using?

[kevinSuttle]

2.0.0.

Actually, I think this might have been due to not having a border-width or style set.

[kevinSuttle]

2.0.0.

Actually, I think this might have been due to not having a border-width or style set.

Edit: 2.0.0 fixes this. I misspoke. It's broken in 1.0.3.

[jxnblk]

Yeah, v2 should support borderColor (v1 does not) – I'd also check to make sure theme context is being passed through when you see things like this

[kevinSuttle]

👍

Aside: I rolled back the version in the demo https://stackblitz.com/edit/react-zzznyy and it's showing some odd behavior. It's applying the focus color right away.