feat: add media query toString support for nested and and or queries

Author: mellyeliu

packages/style-value-parser/src/at-queries-from-tokens/media-query.js

@@ -281,9 +281,9 @@ export class MediaQuery {
     this.queries = queries;
   }
   toString(): string {
-    return `@media ${this.#toString(this.queries)}`;
+    return `@media ${this.#toString(this.queries, true)}`;
   }
-  #toString(queries: MediaQueryRule): string {
+  #toString(queries: MediaQueryRule, isTopLevel: boolean = false): string {
     switch (queries.type) {
       case 'media-keyword':
         return queries.not ? `not ${queries.key}` : queries.key;
@@ -299,11 +299,15 @@ export class MediaQuery {
         return `(${queries.key}: ${valueStr})`;
       }
       case 'not':
-        return `(not ${this.#toString(queries.rule)})`;
+        return queries.rule && (queries.rule.type == 'and' || queries.rule.type == 'or')
+          ? `(not (${this.#toString(queries.rule)}))`
+          : `(not ${this.#toString(queries.rule)})`;
       case 'and':
         return queries.rules.map((rule) => this.#toString(rule)).join(' and ');
       case 'or':
-        return queries.rules.map((rule) => this.#toString(rule)).join(' or ');
+        return isTopLevel
+          ? queries.rules.map((rule) => this.#toString(rule)).join(', ')
+          : queries.rules.map((rule) => this.#toString(rule)).join(' or ');
       default:
         return '';
     }
@@ -378,6 +382,5 @@ export class MediaQuery {
           ),
       );
 
-    // return recursiveParser.or(leadingNotParser);
   }
 }