fix: Media queries

Author: linkdotnet

tools/LinkDotNet.Blog.CriticalCSS/Generator.cs

@@ -26,11 +26,12 @@ public static async Task<string> GenerateAsync(IReadOnlyCollection<string> urls)
                 await page.SetViewportSizeAsync(viewport.Width, viewport.Height);
 
                 var usedCss = await page.EvaluateAsync<string[]>(
-                    """
+                """
                 async () => {
                     const styleSheets = Array.from(document.styleSheets);
                     const usedRules = new Set();
                     const processedUrls = new Set();
+                    const mediaQueryRules = new Set();
 
                     const viewportHeight = window.innerHeight;
                     const elements = document.querySelectorAll('*');
@@ -39,40 +40,6 @@ public static async Task<string> GenerateAsync(IReadOnlyCollection<string> urls)
                         return rect.top < viewportHeight;
                     });
 
-                    async function fetchExternalStylesheet(url) {
-                        if (processedUrls.has(url)) return;
-                        processedUrls.add(url);
-
-                        try {
-                            const response = await fetch(url);
-                            const text = await response.text();
-                            const blob = new Blob([text], { type: 'text/css' });
-                            const styleSheet = new CSSStyleSheet();
-                            await styleSheet.replace(text);
-                            return styleSheet;
-                        } catch (e) {
-                            console.error('Failed to fetch:', url, e);
-                            return null;
-                        }
-                    }
-
-                    async function processStyleSheet(sheet) {
-                        try {
-                            if (sheet.href) {
-                                const externalSheet = await fetchExternalStylesheet(sheet.href);
-                                if (externalSheet) {
-                                    Array.from(externalSheet.cssRules).forEach(processRule);
-                                }
-                            }
-
-                            Array.from(sheet.cssRules).forEach(processRule);
-                        } catch (e) {
-                            if (sheet.href) {
-                                console.error('CORS issue with:', sheet.href);
-                            }
-                        }
-                    }
-
                     function processRule(rule) {
                         switch (rule.type) {
                             case CSSRule.STYLE_RULE:
@@ -85,9 +52,8 @@ function processRule(rule) {
                                 });
                                 break;
                             case CSSRule.MEDIA_RULE:
-                                if (window.matchMedia(rule.conditionText).matches) {
-                                    Array.from(rule.cssRules).forEach(processRule);
-                                }
+                                // Always include the complete media query block
+                                mediaQueryRules.add(rule.cssText);
                                 break;
                             case CSSRule.IMPORT_RULE:
                                 processStyleSheet(rule.styleSheet);
@@ -99,11 +65,45 @@ function processRule(rule) {
                         }
                     }
 
+                    async function processStyleSheet(sheet) {
+                        try {
+                            if (sheet.href) {
+                                const externalSheet = await fetchExternalStylesheet(sheet.href);
+                                if (externalSheet) {
+                                    Array.from(externalSheet.cssRules).forEach(processRule);
+                                }
+                            }
+                            Array.from(sheet.cssRules).forEach(processRule);
+                        } catch (e) {
+                            if (sheet.href) {
+                                console.error('CORS issue with:', sheet.href);
+                            }
+                        }
+                    }
+
+                    async function fetchExternalStylesheet(url) {
+                        if (processedUrls.has(url)) return;
+                        processedUrls.add(url);
+
+                        try {
+                            const response = await fetch(url);
+                            const text = await response.text();
+                            const blob = new Blob([text], { type: 'text/css' });
+                            const styleSheet = new CSSStyleSheet();
+                            await styleSheet.replace(text);
+                            return styleSheet;
+                        } catch (e) {
+                            console.error('Failed to fetch:', url, e);
+                            return null;
+                        }
+                    }
+
                     for (const sheet of styleSheets) {
                         await processStyleSheet(sheet);
                     }
 
-                    return Array.from(usedRules);
+                    // Combine regular rules and media queries
+                    return [...Array.from(usedRules), ...Array.from(mediaQueryRules)];
                 }
                 """);