How to use multiple condition shortcuts to share the same styles?

[fseglard]

Hi everyone!

I was wondering if there is a way to share the same styles for multiple condition shortcuts?

For example, let's assume that I want to share the same styles for _focus and _expanded condition shortcuts, I could have done something like:

const styles = css({
  '_focus, _expanded': {
    ... // My shared styles
  }
});

But it doesn't work, obviously, so I was wondering how can I achieve this?

[astahmer]

you can either make a custom condition that combines both of those, or just re-use the same style object like:

const conditionalStyles = css.raw({ /* ... */ })
const styles = css({
  '_focus': conditionalStyles,
  '_expanded': conditionalStyles,
});

[fseglard]

Thanks @astahmer for the quick reply! I'm gonna try the custom condition!