feat: add duplicate not and nested and flattening

Author: mellyeliu

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

@@ -1873,6 +1873,30 @@ describe('Test CSS Type: @media queries', () => {
     expect(MediaQuery.parser.parseToEnd(query).toString()).toEqual(query);
   });
 
+  // nested not queries are broken
+  test.skip('@media not (not (not (min-width: 400px)))', () => {
+    const query = '@media not (not (not (min-width: 400px)))';
+    const mediaQuery = MediaQuery.parser.parseToEnd(query);
+    expect(mediaQuery).toMatchInlineSnapshot(`
+      MediaQuery {
+        "queries": {
+          "rule": {
+            "key": "min-width",
+            "type": "pair",
+            "value": {
+              "signCharacter": undefined,
+              "type": "integer",
+              "unit": "px",
+              "value": 400,
+            },
+          },
+          "type": "not",
+        },
+      }
+    `);
+    expect(mediaQuery.toString()).toEqual('@media (min-width: 400px)');
+  });
+
   // not queries with multiple clauses are broken
   test.skip('@media not ((min-width: 500px) and (max-width: 600px) and (max-width: 400px))', () => {
     const query =
@@ -1918,4 +1942,70 @@ describe('Test CSS Type: @media queries', () => {
     `);
     expect(MediaQuery.parser.parseToEnd(query).toString()).toEqual(query);
   });
+  test('flattens nested and rules', () => {
+    const query =
+      '@media (min-width: 400px) and ((max-width: 700px) and (orientation: landscape))';
+    const mediaQuery = MediaQuery.parser.parseToEnd(query);
+    expect(mediaQuery).toMatchInlineSnapshot(`
+      MediaQuery {
+        "queries": {
+          "rules": [
+            {
+              "key": "min-width",
+              "type": "pair",
+              "value": {
+                "signCharacter": undefined,
+                "type": "integer",
+                "unit": "px",
+                "value": 400,
+              },
+            },
+            {
+              "key": "max-width",
+              "type": "pair",
+              "value": {
+                "signCharacter": undefined,
+                "type": "integer",
+                "unit": "px",
+                "value": 700,
+              },
+            },
+            {
+              "key": "orientation",
+              "type": "pair",
+              "value": "landscape",
+            },
+          ],
+          "type": "and",
+        },
+      }
+    `);
+    expect(mediaQuery.toString()).toEqual(
+      '@media (min-width: 400px) and (max-width: 700px) and (orientation: landscape)',
+    );
+  });
+
+  // blocked by double not fix above
+  test.skip('removes duplicate nots', () => {
+    const query = '@media not (not (min-width: 400px))';
+    const mediaQuery = MediaQuery.parser.parseToEnd(query);
+    expect(mediaQuery).toMatchInlineSnapshot(`
+      MediaQuery {
+        "queries": {
+          "rule": {
+            "key": "min-width",
+            "type": "pair",
+            "value": {
+              "signCharacter": undefined,
+              "type": "integer",
+              "unit": "px",
+              "value": 400,
+            },
+          },
+          "type": "not",
+        },
+      }
+    `);
+    expect(mediaQuery.toString()).toEqual('@media (min-width: 400px)');
+  });
 });

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

@@ -318,6 +318,42 @@ export class MediaQuery {
         return '';
     }
   }
+  static normalize(rule: MediaQueryRule): MediaQueryRule {
+    switch (rule.type) {
+      case 'and': {
+        const flattened: MediaQueryRule[] = [];
+        for (const r of rule.rules) {
+          const norm = MediaQuery.normalize(r);
+          if (norm.type === 'and') {
+            flattened.push(...norm.rules);
+          } else {
+            flattened.push(norm);
+          }
+        }
+        return { type: 'and', rules: flattened };
+      }
+      case 'or':
+        return {
+          type: 'or',
+          rules: rule.rules.map((r) => MediaQuery.normalize(r)),
+        };
+      case 'not': {
+        let count = 1;
+        let inner = MediaQuery.normalize(rule.rule);
+        while (inner.type === 'not') {
+          count++;
+          inner = MediaQuery.normalize(inner.rule);
+        }
+        if (inner.type === 'pair' || inner.type === 'word-rule') {
+          return count % 2 === 0 ? inner : { type: 'not', rule: inner };
+        }
+        return inner;
+      }
+      default:
+        return rule;
+    }
+  }
+
   static get parser(): TokenParser<MediaQuery> {
     const leadingNotParser = TokenParser.sequence(
       TokenParser.tokens.Ident.map(
@@ -379,13 +415,12 @@ export class MediaQuery {
       ),
     )
       .separatedBy(TokenParser.tokens.Whitespace)
-      .map(
-        ([_at, querySets]) =>
-          new MediaQuery(
-            querySets.length > 1
-              ? { type: 'or', rules: querySets }
-              : querySets[0],
-          ),
-      );
+      .map(([_at, querySets]) => {
+        const rule =
+          querySets.length > 1
+            ? { type: 'or', rules: querySets }
+            : querySets[0];
+        return new MediaQuery(this.normalize(rule));
+      });
   }
 }