How to add multiple style blocks for a single condition?

[enjidev]

I'm trying to implement a motion-reduce toggler with three options: system, motion-reduce, and motion-no-reduce.

I want the output to look like this:

// 1. first
.motion-reduce & {
  ...
}

// 2. second
@media (prefers-reduced-motion: reduce) {
  .system & {
    ...
  }
}

I can generate the second block with ['@media (prefers-reduced-motion: reduce)', '.system &'], but when adding the first block, this does not work:

{
  motionReduce: ['.motion-reduce &', '@media (prefers-reduced-motion: reduce)', '.system &'],
}

Wrapping the selectors in a nested array also gives an error:

{
  motionReduce: ['.motion-reduce &', ['@media (prefers-reduced-motion: reduce)', '.system &']],
}

[segunadebayo]

This isn't supported at the moment. Will need to think about how to improve the conditions API