group @custom-variant with different roots

If you migrate both `aria-*` and `data-*` custom variants, then the
output would look like this:

```css
@custom-variant aria-bar (&[aria-baz="true"]);
@custom-variant aria-asc (&[aria-sort="ascending"]);
@custom-variant aria-desc (&[aria-sort="descending"]);

@custom-variant data-checked (&[data-ui~="checked"]);
```

Instead of
```css
@custom-variant aria-bar (&[aria-baz="true"]);
@custom-variant aria-asc (&[aria-sort="ascending"]);
@custom-variant aria-desc (&[aria-sort="descending"]);
@custom-variant data-checked (&[data-ui~="checked"]);
```

Author: RobinMalfait

packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts

@@ -235,7 +235,13 @@ async function migrateTheme(
 
   if (variants.size > 0) {
     css += '\n@tw-bucket custom-variant {\n'
+
+    let previousRoot = ''
     for (let [name, selector] of variants) {
+      let root = name.split('-')[0]
+      if (previousRoot !== root) css += '\n'
+      previousRoot = root
+
       css += `@custom-variant ${name} (${selector});\n`
     }
     css += '}\n'