Understanding stylex.when.* with attribute-based state: The :is(*) technique

[BMCwebdev]

Hey StyleX team and community! 👋 (it's been a while!)

I wanted to share a pattern I discovered while working with stylex.when.descendant() that might help others (and maybe clarify the docs a bit).

The Challenge

I was building an Accordion component where I needed to conditionally apply spacing based on a prop value (titleVariant). The parent component needed to style itself differently depending on which variant its child was using.

What I Initially Tried

Reading the docs, I saw this promising line:

"You can observe pseudo-class states (:hover, :focus, etc.) or attribute selectors (e.g., [data-panel-state="open"])"

So I tried:

gap: {
  default: 0,
  [stylex.when.descendant('[data-title-variant="heading"]', myMarker)]: 8,
}
❌ Error: "Pseudo selector must start with ::"

The Working Solution

The key insight: you can't pass attribute selectors directly, but you can use different markers for different states combined with the :is(*) pseudo-selector:

// Accordion.markers.stylex.ts
export const textHeaderMarker = stylex.defineMarker();
export const headingHeaderMarker = stylex.defineMarker();

// In your styles
gap: {
  default: 0,
  [stylex.when.descendant(':is(*)', headingHeaderMarker)]: 8,
}

// In your component
<Button 
  {...stylex.props(
    titleVariant === 'heading' ? headingHeaderMarker : textHeaderMarker,
    // ... other styles
  )}
/>

The :is(*) pseudo-selector essentially means "when this element exists" rather than "when this element has a specific state." Combined with conditional marker application, you get attribute-based styling!

Why This Matters

The documentation's mention of "attribute selectors" could be read wrong - it suggests you can pass them as the first parameter, but all the examples only show pseudo-classes like :hover and :focus. There's no example showing how to actually work with component state that's stored in attributes or props.

This pattern works great for:

• Styling parents based on child prop values
• Handling multiple variants without state management
• Keeping everything pure CSS (no React Context needed!)

Suggestion

It would be awesome if the docs included an example like this showing how to handle attribute-based or prop-based state. The :is(*) technique isn't obvious from the current examples.

If I can I will try to make a PR with this, but wanted to share this here first in case it helps anyone else!