SX: design issues and hard to deal with situations

[mrtnzlml]

This is a collection of real-world situations where SX is being difficult or impossible to use. Do you have some case which is bothering you? Let us know below!

Legend:

🤔 - needs more thinking
🚧 - under development
✅ - resolved

✅ Case 1: limiting styles composability (#1808)

Problem

SX has a way how to compose external styles. However, this is very limited because you can compose only one internal and one external stylesheet like so:

const styles = sx.create({ default: { fontSize: 16 } });

function MyBaseComponent(props: Props) {
  return <div className={sx(styles.default, props.xstyle)} />;
}

However, sometimes it's necessary to merge more stylesheets together. Imagine a situation where you want a default style together with custom external style and conditional style for when the (link for example) is active:

<a className={sx(styles.default, props.xstyle, isActive && styles.active)}>…</a>

This is currently not possible and difficult to workaround.

Solution

It is now possible (from version 0.24.0) to compose as many external styles as you want. So this is valid:

sx(styles.default, props.a, props.b, props.c, props.d, …)

✅ Case 2: difficult Flow types when using CSS variables (#2027)

Problem

Currently using CSS variables makes Flow typing difficult and we have to write it like so (notice the $FlowFixMe comment):

highlight: {
  'color': 'rgba(var(--sx-text-color))',
  // $FlowFixMe[incompatible-call] CSS variables are tricky to typecheck in SX
  '--sx-money-text-color': 'var(--sx-text-color)',
},

Solution

We relaxed the Flow types to make it easier to work with CSS variables, see: #2027

✅ Case 3: conditional styles must have at least one base style

Problem

It's not possible to do something like this:

<div
  className={styles({
    conditionalStyle isConditionOK === true,
  })}
>…</div>

It's because it would work only for true values but it throws the following error for false condition:

Invariant Violation: SX must be called with at least one stylesheet name.

Solution

Addressed in #2488 (conditional objects resulting in no styles will be allowed)