Fix CSS variable name + test to prevent failures. (#8120)

Author: isoos

pkg/web_css/lib/src/_site_header.scss

@@ -233,7 +233,7 @@
       bottom: 0;
       left: 0;
       width: 80%;
-      background: var(pub-site_header_popup-background-color);
+      background: var(--pub-site_header_popup-background-color);
       transform: translateX(-100%);
       transition: transform 0.3s ease;
       z-index: $z-index-nav-mask + 1;

pkg/web_css/test/variables_test.dart

@@ -75,5 +75,28 @@ void main() {
 
       expect(unused, isEmpty);
     });
+
+    test('all variables used have definition', () async {
+      final files = await Directory('lib')
+          .list(recursive: true)
+          .where((f) => f is File && f.path.endsWith('.scss'))
+          .cast<File>()
+          .toList();
+      final varRegExp = RegExp(r'var\((.*?)\)');
+      for (final file in files) {
+        final content = await file.readAsString();
+        for (final m in varRegExp.allMatches(content)) {
+          final name = m.group(1)!.trim();
+          if (!variables.contains(name)) {
+            // exempt Material Design variables
+            if (name.startsWith('--mdc-')) {
+              continue;
+            }
+
+            fail('${file.path} references `$name` without definition.');
+          }
+        }
+      }
+    });
   });
 }