Solving specificity in atoms and style arrays

[Brendan-csel]

After Mark's talk at React Finland there was an introduction to Stylex.

Stylex claims to resolve issues with css specificity while still using atomic css. This was questioned and the approach was explained during the question time.

Essentially it came down to expanding all the atoms out (so paddingX expanded to paddingLeft and paddingRight), and then ensuring that only the class for the "last" value for each property was returned. I'm not sure if that would resolve the same property set with a shorthand versus explicit value though (eg. could it resolve a color from border and eliminate conflict with a specific borderColor property??).

Does atoms() resolve duplicate properties already, or is it a possibility? Might it also be possible when composing styles using the new array api? (sounds impossible but had to ask)

It sounds like it will be some time before Stylex comes out - and I'm not a fan of co-locating styles - but I can imagine the "usage order" approach to assist with the specificity challenge could become a desired expectation.

[mattcompiles]

The Sprinkles atoms function solves this by using an object based API. You can never set the same atom twice because objects don't allow duplicate keys. The last one always wins.

Where Sprinkles can't help you is when combining Atoms with other class names. Vanilla-extract is a lower level system than stylex so it can't perform the same magic. In practice I don't see this as being a big issue though. I would suggest making your atoms the lowest precedence styles in your app (except for your reset) to avoid confusing CSS order scenarios.

[Brendan-csel]

Thanks Matt.

With atoms the object API wouldn't save you from overlapping shorthands with specific atoms though would it?

atoms({
  padding: 'small',
  paddingLeft: 'large',
})

// versus
atoms({
  paddingLeft: 'large',
  padding: 'small',
})

What is the expected result for 'paddingLeft' in the above cases? And can the person writing the atoms call re-arrange it (eg above) to have control of the priority? I guess the latter was really the feature stylex was calling out.

I understand it would likely be impossible to do when when composing class names in vanilla-extract as the compiler doesn't know what properties the class names contain - especially if they come from outside the current file. Although maybe its possible within a file by leveraging the compiler's knowledge of the rules making up a class?

Just a discussion here - not an "issue". 😄