Restore SizeList media query parser (#32250)

src/utils/media-query-props.js

@@ -17,7 +17,6 @@
 /** @typedef {!Array<{query: ?MediaQueryList, value: string}>} */
 let ExprDef;
 
-const MEDIA_QUERY_VALUE_RE = /[A-Za-z0-9.%]+$/;
 const TRUE_VALUE = '1';
 
 export class MediaQueryProps {
@@ -135,18 +134,92 @@ function parseMediaQueryListExpr(win, exprString) {
     exprString
       .split(',')
       .map((part) => {
-        // Find the value portion by looking at the end.
-        const result = MEDIA_QUERY_VALUE_RE.exec(part);
-        if (!result) {
+        part = part.replace(/\s+/g, ' ').trim();
+        if (part.length == 0) {
+          return;
+        }
+
+        let queryString;
+        let value;
+
+        // Process the expression from the end.
+        const lastChar = part.charAt(part.length - 1);
+        let div;
+        if (lastChar == ')') {
+          // Value is the CSS function, e.g. `calc(50vw + 10px)`.
+
+          // First, skip to the opening paren.
+          let parens = 1;
+          div = part.length - 2;
+          for (; div >= 0; div--) {
+            const c = part.charAt(div);
+            if (c == '(') {
+              parens--;
+            } else if (c == ')') {
+              parens++;
+            }
+            if (parens == 0) {
+              break;
+            }
+          }
+
+          // Then, skip to the begining to the function's name.
+          const funcEnd = div - 1;
+          if (div > 0) {
+            div--;
+            for (; div >= 0; div--) {
+              const c = part.charAt(div);
+              if (
+                !(
+                  c == '%' ||
+                  c == '-' ||
+                  c == '_' ||
+                  (c >= 'a' && c <= 'z') ||
+                  (c >= 'A' && c <= 'Z') ||
+                  (c >= '0' && c <= '9')
+                )
+              ) {
+                break;
+              }
+            }
+          }
+          if (div >= funcEnd) {
+            // Invalid condition.
+            return null;
+          }
+        } else {
+          // Value is the length or a percent: accept a wide range of values,
+          // including invalid values - they will be later asserted to conform
+          // to exact CSS length or percent value.
+          div = part.length - 2;
+          for (; div >= 0; div--) {
+            const c = part.charAt(div);
+            if (
+              !(
+                c == '%' ||
+                c == '.' ||
+                (c >= 'a' && c <= 'z') ||
+                (c >= 'A' && c <= 'Z') ||
+                (c >= '0' && c <= '9')
+              )
+            ) {
+              break;
+            }
+          }
+        }
+        if (div >= 0) {
+          queryString = part.substring(0, div + 1).trim();
+          value = part.substring(div + 1).trim();
+        } else {
+          value = part;
+          queryString = undefined;
+        }
+
+        if (!value) {
           return null;
         }
 
-        const {index} = result;
-        const value = part.slice(index);
-        // The media query is everything before the value.
-        const queryString = part.slice(0, index).trim();
         const query = queryString ? win.matchMedia(queryString) : null;
-
         return {query, value};
       })
       // Remove any items that did not match the regex above and are

test/unit/utils/test-media-query-props.js

@@ -69,6 +69,43 @@ describes.realWin('MediaQueryProps', {frameStyle: {width: '300px'}}, (env) => {
       );
     });
 
+    it('should allow unit expressions', () => {
+      resolver.start();
+      expect(resolver.resolveListQuery('1.1px')).to.equal('1.1px');
+      expect(
+        resolver.resolveListQuery('(min-width: 301px) 1.1px, 2.2px')
+      ).to.equal('2.2px');
+      expect(
+        resolver.resolveListQuery('(min-width: 299px) 1.1px, 2.2px')
+      ).to.equal('1.1px');
+    });
+
+    it('should allow calc() expressions', () => {
+      resolver.start();
+      expect(resolver.resolveListQuery('calc(25px * 10)')).to.equal(
+        'calc(25px * 10)'
+      );
+      expect(
+        resolver.resolveListQuery(
+          '(min-width: 301px) calc(25px * 10), calc(25px * 20)'
+        )
+      ).to.equal('calc(25px * 20)');
+      expect(
+        resolver.resolveListQuery(
+          '(min-width: 299px) calc(25px * 10), calc(25px * 20)'
+        )
+      ).to.equal('calc(25px * 10)');
+    });
+
+    it('should allow complex media expressions', () => {
+      resolver.start();
+      expect(
+        resolver.resolveListQuery(
+          '(min-width: 299px) and (max-width: 300px) a, b'
+        )
+      ).to.equal('a');
+    });
+
     it('should resolve a first matching expression', () => {
       resolver.start();
       expect(