Chaka native CSS pseudo props - A collection of native CSS pseudo props supported by Chakra UI and their mappings to how it's rendered with CSS-in-JS (e.g. Emotion)

chakra-native-css-pseudo-props.js

const chakraNativeCSSPseudoProps = {
  _active: '&:active',
  _activeLink: '&[aria-current=page]',
  _activeStep: '&[aria-current=step]',
  _after: '&:after',
  _autofill: '&:-webkit-autofill',
  _before: '&:before',
  _disabled: '&[disabled]',
  _empty: '&:empty',
  _even: '&:nth-of-type(even)',
  _expanded: '&[aria-expanded=true]',
  _first: '&:first-of-type',
  _focus: '&:focus',
  _focusVisible: '&:focus-visible',
  _focusWithin: '&:focus-within',
  _fullScreen: '&:fullscreen',
  _grabbed: '&[aria-grabbed=true]',
  _groupActive: '[role=group]:active &',
  _groupChecked: '[role=group]:checked &',
  _groupDisabled: '[role=group]:disabled &',
  _groupFocus: '[role=group]:focus &',
  _groupFocusVisible: '[role=group]:focus-visible &',
  _groupFocusWithin: '[role=group]:focus-within &',
  _groupHover: '[role=group]:hover &',
  _groupInvalid: '[role=group]:invalid &',
  _hidden: '&[hidden]',
  _hover: '&:hover',
  _indeterminate: '&:indeterminate, &[aria-checked=mixed]',
  _invalid: '&[aria-invalid=true]',
  _last: '&:last-of-type',
  _loading: '&[aria-busy=true]',
  _ltr: '[dir=ltr] &, &[dir=ltr]',
  _mediaDark: '@media (prefers-color-scheme: dark)',
  _mediaReduceMotion: '@media (prefers-reduced-motion: reduce)',
  _notFirst: '&:not(:first-of-type)',
  _notLast: '&:not(:last-of-type)',
  _odd: '&:nth-of-type(odd)',
  _placeholder: '&::placeholder',
  _placeholderShown: '&:placeholder-shown',
  _pressed: '&[aria-pressed=true]',
  _readOnly: '&[readonly], &[aria-readonly=true]',
  _rtl: '[dir=rtl] &, &[dir=rtl]',
  _selected: '&[aria-selected=true]',
  _selection: '&::selection',
  _valid: '&[aria-valid=true]',
  _visited: '&:visited',
}