Upgrade: Handle darkMode value with block syntax

[philipp-spiess]

Closes #16171

This PR handles darkMode variant configs containing braces (so creating sub-rules) the same way we handle it in the interop layer. Since the interop layer runs inside the addVariant API that we do not run here, I instead oped to copy the one liner.

Test plan

Updated one of the migration tests to include a rule that wasn't working before. Ensured the new output works via https://play.tailwindcss.com/nR99uhKtv3

[thecrypticace]

Will this actually work with an array of format strings? @custom-variant overrides

[philipp-spiess]

ok i will be less lazy

[RobinMalfait]

Not 100% if this is enough, can we add a few more test cases:

Nested media queries:

darkMode: ['variant', '@media not print { @media screen { .dark & } }'],

/* dark:flex */
@media not print {
  @media screen {
    .dark .dark\:flex {
      display: flex;
    }
  }
}

Play: https://play.tailwindcss.com/n3k65J6HJF?file=config

[RobinMalfait]

Here are few more fun ones: https://sourcegraph.com/search?q=context:global+%22darkMode:+%5B%27variant%27%22&patternType=keyword&sm=0 😅

[philipp-spiess]

I think this should work, we decided to go with the "replaces first closing brace with the slot stuff" in the addVariant API so this just makes sure whatever we create would be equivalent to running the compat layer at this point haha

Your specific example would convert to this which would work: https://play.tailwindcss.com/94rgXzHkCF

[RobinMalfait]