Suggestion: Extendable comma separated CSS Properties (like transition)

[tchock]

I'm currently stumbling on a problem I have (and had before may times with vanilla CSS) with transitions (or also transform or other comma separated properties):

Problem

I want to create a focusable utility. It is like the built in focusRing utility, but it also sets transition for outline-offset and outline-color. Applying it would overwrite the other transitions.

So far I solved it with a pattern and passing additional transitions to it using it like this:

focusable.raw({
  transitions: 'background-color token(durations.normal)',
 })

The pattern transform function would then handling merging the transitions.

But this means I need to know the transition beforehand. If I would have another pattern or another utility that would set transitions, I can't do that.

Other alternative would be to set transition to all, but then it would do transitions on properties I don't want to do transition on and I can't have different speeds for different properties.

Suggestion

Have the possibility to define that a style would extend transition instead of replacing it.

css({
  transition: {
    extend: 'background-color token(durations.normal)'
  }
}, {
  transition: {
    extend: 'outline-offset token(durations.faster), outline-color token(durations.faster)'
  }
})

This would then merge the transition value to this:

transition: background-color token(durations.normal), outline-offset token(durations.faster), outline-color token(durations.faster);

It would also be nice, if this would work inside utility. Maybe there could be suffixed/named, so the transitions property wouldn't be overwritten when merged with other style objects.

css({
  'transition-base': 'background-color token(durations.normal)',
}, {
  'transition-focusable': 'outline-offset token(durations.faster), outline-color token(durations.faster)',
});

Could also be done with a property creation function that exposes a Symbol and memoizes it with the right name:

import { extendedTransition } from '#styled-system/css';
css({
  [extendedTransition('base')]: 'background-color token(durations.normal)',
}, {
  [extendedTransition('focusable')]: 'outline-offset token(durations.faster), outline-color token(durations.faster)',
});