Styled-system: additions to transform functions

[Polypants]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

The functions passed into transform don't have all the superpowers I wish they had. Namely the following abilities:

1. to set different values for each CSS property provided by property or properties, and
2. to set different values based on the current breakpoint.

Describe the solution you'd like
A clear and concise description of what you want to happen.

• The ability to return an object of CSS, in addition to a string or number. For example...

system({
  simpleExample: {
    properties: ['color', 'border'], // this could be left out?
    transform: val => ({ color: val, border: `3px solid ${val}` })
  }
})

Currently transform gives you the opportunity to interpret the input value and apply one modified value to all of the CSS properties you've selected with properties or property. By returning an object of CSS properties you have the opportunity to modify the input individually for each property. This would allow for some mixin-like syntax for properties that are often used together.

• A 4th parameter that could indicate the current breakpoint that the return value will be applied to. Maybe the current key of the array/object. This would allow for manipulation of properties applied across each breakpoint.

system({
  simpleExample2: {
    properties: ['color', 'border'],
    transform: (val, _scale, _props, breakpoint) => {
      const styles = { border: `3px solid ${val}` }
      if (breakpoint === 'sm') styles.color = val
      return styles
    }
  }
})

With the combination of these two changes, you could make props that work like this

<Flex fixed={[{ z: 999, edges: 0 }, { top: 40, x: 10 }]} />

Where fixed affects position, along with top, bottom, left, right and z-index properties. It would apply position: fixed at only the smallest or largest breakpoint in a series and not repeat the property for each breakpoint.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

I did make a library attempting to achieve all this, but it intercepts the props and converts them which seems like a step the could be removed with this functionality built in.

Additional context
Add any other context or screenshots about the feature request here.

[renke]

Another example where this could be useful:

<Text truncated>long text…</Text>

which sets the CSS properties to

overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",

or even

<Text truncated={[true, false]}>long text…</Text>

to only truncate the text for small devices.

[nelsieborja]

I am also trying to achieve the same custom responsive style but with variants:

// type
notePosition: ResponsiveValue<'top' | 'left' | ... | object>

// styled
variant({
  prop: 'notePosition',
  variants: {
    top: {...}, 
    left: {...},
    ...
    // how to handle custom object?
  }
})

// jsx
<Note notePosition={[{ top: 0, left: 0, ... }, 'top', 'left']} />

Where Note component will use a custom style for small devices while the predefined ones for bigger devices.

[tipsypastels]

I'd love to see this as well! My app has a large set of semantic theme colors which are usually defined in text color and background color pairs. Unfortunately this requires me to write a lot of boilerplate like <Box color="sidebar.link.color" bg="sidebar.link.bg">.

With the ability to set different values for each property in a transform function, I could simplify to something like <Box colorSet="sidebar.link"> and have that transformed into the former.

[AssisrMatheus]

Also looking forward to this. Found the PR https://github.com/styled-system/styled-system/pull/1010 a while ago and was waiting it to be pushed but it's still not available