How can I do this? Stylus as far as I know doesn't like @supports how can I put the parsed css block into the @css literal. I want it to output like the desired-output.css file.

css.styl

@css {
  @supports (flex-flow: row wrap) {
    .foo
      display: block
      > span
        display: inline-block
        margin-right: 0.3ch;

    foo.bar
      > span
        &:nth-child(1)
          text-transform: lowercase
  }
}

desired-output.css

@supports (flex-flow: row wrap) {
  .foo {
    display: block;
  }
  .foo > span {
      display: inline-block
      margin-right: 0.3ch;
  }

  foo.bar > span:nth-child(1) {
    text-transform: lowercase
  }
}