How to write contextual styles in StyleX

[dd-jonas]

As StyleX does not support any advanced selector syntax, I wonder what the recommended or alternative approach is to writing contextual styles. For example, I have a sidebar which can be collapsed or expanded, and this affects the styling of multiple elements in the sidebar. If I want the icons to be bigger in the collapsed state, I could do something like this in SCSS.

.icon {
  width: 2rem;
  height: 2rem;

  .sidebar-collapsed & {
    width: 3rem;
    height: 3rem;
  }
}

or in Styled Components:

const SidebarIcon = styled(Icon)`
  width: 2rem;
  height: 2rem;

  ${SidebarCollapsed} & {
    width: 3rem;
    height: 3rem;
  }
`;

The only alternative I can think of right now in StyleX is to pass a conditional className to every child of the sidebar which would need this conditional styling. In my example, I would write stylex.props(styles.icon, isCollapsed && styles.collapsed). This would cause a lot of unnecessary repetition in the code if I have to do this for every child element in my sidebar, while I could simply check the parent's class instead in my above examples.

I understand StyleX does not support selectors such as .sidebar-collapsed .icon as this does not favor colocated styles, but the inverse .sidebar-collapsed & ensures the styles are colocated, even when adding variants based on context. (Josh Comeau calls this technique "inversion of control nesting").

What solution does StyleX offer for scenarios like this?

[edamascus]

I suggest that you try looking at the issue as a matter of passing collapsed state to components that need to know about this state.

For example, if the sidebar is a collection of icons, you can extract a <SidebarIcon> component and pass the collapsed state to it and conditionally apply style once within the component.

This is exactly the same as your styled-components example but in a more predictable way.

[nmn]

In my example, I would write stylex.props(styles.icon, isCollapsed && styles.collapsed)

This is the correct approach, and you can use Context to reduce the amount or prop-drilling.

Another option that would work in this example is to use Container queries. I'm assuming a "collapsed" sidebar will be very narrow. You could use that to apply styles conditionally.

---

Finally, the last option is to use a single variable that is set by the sidebar itself. tokens.isOpen.
This value can be 0 or 1 and you can use calc in all styles for components within to use Math to set the correct value based on it.

// SidebarContainer
const styles = stylex.create({
  containerClosed: {
    [tokens.isOpen]: '0',
  },
  containerOpen: {
    [tokens.isOpen]: '1',
  },
})

const styles = stylex.create({
  icon: {
    width: `calc(3rem - (${tokens.isOpen} * 1rem))`,
    height: `calc(3rem - (${tokens.isOpen} * 1rem))`,
    ...
  }
})

You can also use tokens.isClosed if that helps.

In the future, you'd be able to use Container Style Queries for this, but currently thats Chromium only.

[dd-jonas]

Thanks @edamascus and @nmn for your answers, I think I understand that the mindset when applying this styling pattern.
I would like to extend my question with another example, just to make it clear. In this scenario, I have an input field with a floating clear button at the end. To make room for the clear button, some padding right is added to the input field when the clear button is visible. Simplified code:

export const Input = ({ clearable }) => {
  return (
    <div>
      <input />
      {clearable && <ClearButton />
    </div>
  );
}

SCSS

.input {
  // omitted

  &:has(~ .clear-button) {
    padding-right: 2rem;
  }
}

Styled components probably has something similar, where the class name of the clear button can be interpolated in the selector.

Am I correct to assume here that the recommended approach is to apply the StyleX classes like this? (The token trick could also be used here)

export const Input = ({ clearable }) => {
  return (
    <div>
      <input {...stylex.props(styles.input, clearable && styles.withClearButton)} />
      {clearable && <ClearButton />
    </div>
  );
}

Is this what the docs mean when talking about encapsulation of styles by disallowing complex selectors?

[edamascus]

@dd-jonas, I am still learning and in many occasions I say to myself "oh! that is why it is made this way". I think as long as it solves your problem then it is correct!

Another option would be to create two variants of the <Input> component as follows:

import { create, props } from '@stylexjs/stylex';

const styles = create({
  base: {
    //... 
  }
});

const variants = create({
  basic: {
    paddingInlineEnd: 1rem,
    //...
  },
  clearable: {
    paddingInlineEnd: 2rem
    //...
  }
});

export const Input = ({ variant = 'basic' }) => {
  return (
    <input { ...props(styles.base, variants[variant]) } />
    { variant === 'clearable' && <ClearButton /> }
  );
}

This way, you can create more "variants" of <Input> which might have other style properties.

If you use typescript you can limit variant to certain values and enjoy auto-complete when adding the <Input> component.