Can't use ":checked::after" psuedo styling

[madebydor]

Hi, I'm trying to style a custom <input type="radio" /> using the following:

export const root = style({
  borderRadius: vars.radii.base,
  appearance: 'none',
  width: vars.space[6],
  height: vars.space[6],
  backgroundColor: vars.colors.blue4,
  position: 'relative',

  ':checked': {
    backgroundColor: vars.colors.green8,
  },

  ':after': {
    content: ' ',
    backgroundColor: vars.colors.blue8,
    position: 'absolute',
    top: vars.space[1],
    left: vars.space[1],
    right: vars.space[1],
    bottom: vars.space[1],
    borderRadius: 'inherit',
  },
  ':checked::after': {
    backgroundColor: 'yellow',
  },
})

But this doesn't seem to work.

Object literal may only specify known properties, and '':checked::after'' does not exist in type 'ComplexStyleRule'

Am I doing something wrong?

[rothsandro]

Only simple selectors are allowed there. For complex selectors you need the selectors key:

export const root = style({
  // ...
  selectors: {
    '&:checked::after': {
      backgroundColor: 'yellow',
    },
  }
})

See https://vanilla-extract.style/documentation/styling/#complex-selectors

[madebydor]

Totally missed that on the documentation.
Works like a charm!
Thank you @rothsandro