Input psudo-elements inside of psudo-classes

[yonatan2703]

Hi, I need to convert an input checkbox element that was written with CSS modules into stylex styling
The CSS styling of the checkbox goes as follows:

.checkbox {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;

    border-radius: var(--radius-xs, 0.25rem);
    border: 1px solid var(--colors-border-border-primary, #d0d5dd);
}

.checkbox:after {
    content: " ";
    background: var(--colors-background-bg-brand-solid, #7f56d9);
    display: inline-block;
    visibility: visible;
}

.checkbox:checked::after {
    display: flex;
    width: 1rem;
    height: 1rem;
    padding: var(--spacing-none, 0.125rem);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-none, 0rem);
    flex-shrink: 0;

    border-radius: var(--radius-xs, 0.25rem);
    content: url("/icons/check.svg");
    color: white;
}

.checkbox:focus {
    border-radius: var(--radius-xs, 0.25rem);
    border: 1px solid var(--colors-border-border-primary, #d0d5dd);
    background: var(--colors-background-bg-primary, #fff);

    /* Focus rings/ring-gray */
    box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, 0.14);
}

.checkbox:focus:checked {
    border-radius: var(--radius-xs, 0.25rem);
    background: var(--colors-background-bg-brand-solid, #7f56d9);

    /* Focus rings/ring-brand */
    box-shadow: 0px 0px 0px 4px rgba(158, 119, 237, 0.24);
}

My problem is that there is a ::after element styling inside of a :checked psudo-class, which is a problem because psudo-elements must be defined as a top-level key within a namespace.

Thanks in advance

[nmn]

The limitation here is that we don't yet support descendent and sibling selectors. We're working on a proposal to share to add this feature soon.

In the meantime, as a workaround, you can make this work for now by using CSS variables.

1. Define a checkbox-tokens.stylex.ts file:

export const afterVals = stylex.defineVars({
  content: '" "',
  display: 'inline-block',
  //...
});

2. Import and the variables:

import {afterVals} from './checkbox-tokens.stylex';
const styles = stylex.create({
  checkbox: {
    [afterVals.content]: {
      default: '" "',
      ':focus': 'url("/icons/check.svg")',
    },
    [afterVals.display]: {
      default: 'inline-block',
      ':focus': 'flex',
    },
    // ...
    '::after': {
      content: afterVals.content,
      display: afterVals.display,
      // It's harmless to apply these properties when display is `inline-block`
      // So no need to apply them conditionally
      justifyContent: 'center',
      align-items: 'center',
      // ...
    }
  }
});

NOTE: As an additional suggestion, I would recommending rendering both states using ::before and ::after, and then flip between the two by toggling visibility alone.

Hope this helps while we settle on a good formal API for descendents and siblings.

[lifeiscontent]

@nmn are decentdant selectors still not supported?

[nmn]

@lifeiscontent Not yet, no. We're trying to get the design right and we don't have that yet.