refactor: dry compatibility issues creation

src/app/page.tsx

@@ -4,7 +4,7 @@ import { BugIcon, FullscreenIcon, TextCursorInputIcon } from 'lucide-react';
 import * as React from 'react';
 import { useSwipeable } from 'react-swipeable';
 
-import { CompatibilityReport, createCompatibilityIssues } from '@/components/custom/compatibility-report';
+import { CompatibilityReport } from '@/components/custom/compatibility-report';
 import { EmailContentInput } from '@/components/custom/email-content-input';
 import { EmailContentPreview } from '@/components/custom/email-content-preview';
 import { MobileSwipeHint } from '@/components/custom/mobile-swipe-hint';
@@ -16,15 +16,10 @@ import { Spinner } from '@/components/ui/spinner';
 import { useAsyncData } from '@/hooks/use-async-data';
 import { useDebounce } from '@/hooks/use-debounce';
 import { useWindowSize } from '@/hooks/use-window-size';
-import {
-  fetchCanIEmailData,
-  type CanIEmailData,
-  buildCssPropertyMap,
-  buildHtmlElementMap,
-  buildHtmlAttributeMap,
-  type CanIEmailFeature,
-} from '@/lib/caniemail';
-import { extractFeatures } from '@/lib/css-extractor';
+import { fetchCanIEmailData, createCompatibilityIssues } from '@/lib/caniemail';
+import type { CanIEmailData, CanIEmailFeature } from '@/lib/caniemail';
+import { extractFeatures } from '@/lib/feature-extractor';
+import { buildCssPropertyMap, buildHtmlElementMap, buildHtmlAttributeMap } from '@/lib/feature-map-builders';
 import { cn } from '@/lib/utils';
 
 const VIEW_MODES = ['input', 'preview', 'report'] as const;
@@ -71,20 +66,18 @@ export default function EmailContentPreviewer() {
     },
   });
 
-  const { cssPropertyMap, htmlAttributeMap, htmlElementMap } = React.useMemo(() => {
+  const [cssPropertyMap, htmlAttributeMap, htmlElementMap] = React.useMemo(() => {
     if (!canIEmailData) {
-      return {
-        cssPropertyMap: new Map<string, CanIEmailFeature>(),
-        htmlAttributeMap: new Map<string, CanIEmailFeature>(),
-        htmlElementMap: new Map<string, CanIEmailFeature>(),
-      };
+      return [
+        new Map<string, CanIEmailFeature>(),
+        new Map<string, CanIEmailFeature>(),
+        new Map<string, CanIEmailFeature>(),
+      ];
     }
 
-    return {
-      cssPropertyMap: buildCssPropertyMap(canIEmailData),
-      htmlAttributeMap: buildHtmlAttributeMap(canIEmailData),
-      htmlElementMap: buildHtmlElementMap(canIEmailData),
-    };
+    const { data: features } = canIEmailData;
+
+    return [buildCssPropertyMap(features), buildHtmlAttributeMap(features), buildHtmlElementMap(features)];
   }, [canIEmailData]);
 
   const issues = React.useMemo(() => {
@@ -94,8 +87,6 @@ export default function EmailContentPreviewer() {
 
     const extracted = extractFeatures(debouncedHtml);
 
-    // Merge cssProperties and cssAtRules for the property map lookup
-    // The @-rules are also in the cssPropertyMap
     return createCompatibilityIssues(
       extracted.cssProperties,
       extracted.cssAtRules,

src/components/custom/compatibility-report.tsx

@@ -14,30 +14,9 @@ import * as React from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/ui/spinner';
-import {
-  getEmbedUrl,
-  MAJOR_CLIENTS,
-  type MajorClient,
-  type CanIEmailFeature,
-  getFeatureSupportSummary,
-} from '@/lib/caniemail';
+import { MAJOR_CLIENTS, type FeatureType, type CompatibilityIssue } from '@/lib/caniemail';
 import { cn } from '@/lib/utils';
 
-export type FeatureType = 'css' | 'css-at-rule' | 'html-element' | 'html-attribute';
-
-export type CompatibilityIssue = {
-  feature: CanIEmailFeature;
-  featureType: FeatureType;
-  property: string;
-  severity: 'error' | 'warning' | 'success';
-  summary: {
-    partial: MajorClient[];
-    supported: MajorClient[];
-    unknown: MajorClient[];
-    unsupported: MajorClient[];
-  };
-};
-
 type CompatibilityReportProps = {
   isLoading?: boolean;
   issues: CompatibilityIssue[];
@@ -161,8 +140,8 @@ function CanIEmailEmbed({ featureSlug }: { featureSlug: string }) {
       {isLoading && <Spinner className="absolute top-1/2 left-1/2 size-6 -translate-x-1/2 -translate-y-1/2" />}
       <iframe
         loading="lazy"
-        src={getEmbedUrl(featureSlug)}
         className="h-[420px] w-full border-0"
+        src={`https://embed.caniemail.com/${featureSlug}/`}
         onLoad={() => {
           setIsLoading(false);
         }}
@@ -306,134 +285,3 @@ export function CompatibilityReport({ isLoading, issues }: CompatibilityReportPr
     </div>
   );
 }
-
-export function createCompatibilityIssues(
-  extractedCssProperties: Set<string>,
-  extractedCssAtRules: Set<string>,
-  extractedHtmlElements: Set<string>,
-  extractedHtmlAttributes: Set<string>,
-  cssPropertyMap: Map<string, CanIEmailFeature>,
-  htmlElementMap: Map<string, CanIEmailFeature>,
-  htmlAttributeMap: Map<string, CanIEmailFeature>
-): CompatibilityIssue[] {
-  const issues: CompatibilityIssue[] = [];
-  const processedSlugs = new Set<string>();
-
-  // Process CSS properties
-  for (const property of extractedCssProperties) {
-    const feature = cssPropertyMap.get(property);
-
-    if (!feature || processedSlugs.has(feature.slug)) {
-      continue;
-    }
-
-    processedSlugs.add(feature.slug);
-
-    const summary = getFeatureSupportSummary(feature);
-
-    let severity: CompatibilityIssue['severity'] = 'success';
-
-    if (summary.unsupported.length > 0) {
-      severity = 'error';
-    } else if (summary.partial.length > 0) {
-      severity = 'warning';
-    }
-
-    issues.push({
-      feature,
-      featureType: 'css',
-      property,
-      severity,
-      summary,
-    });
-  }
-
-  // Process CSS @-rules (media queries, keyframes, etc.)
-  for (const atRule of extractedCssAtRules) {
-    const feature = cssPropertyMap.get(atRule);
-
-    if (!feature || processedSlugs.has(feature.slug)) {
-      continue;
-    }
-
-    processedSlugs.add(feature.slug);
-
-    const summary = getFeatureSupportSummary(feature);
-
-    let severity: CompatibilityIssue['severity'] = 'success';
-
-    if (summary.unsupported.length > 0) {
-      severity = 'error';
-    } else if (summary.partial.length > 0) {
-      severity = 'warning';
-    }
-
-    issues.push({
-      feature,
-      featureType: 'css-at-rule',
-      property: atRule,
-      severity,
-      summary,
-    });
-  }
-
-  // Process HTML elements
-  for (const element of extractedHtmlElements) {
-    const feature = htmlElementMap.get(element);
-
-    if (!feature || processedSlugs.has(feature.slug)) {
-      continue;
-    }
-
-    processedSlugs.add(feature.slug);
-
-    const summary = getFeatureSupportSummary(feature);
-
-    let severity: CompatibilityIssue['severity'] = 'success';
-
-    if (summary.unsupported.length > 0) {
-      severity = 'error';
-    } else if (summary.partial.length > 0) {
-      severity = 'warning';
-    }
-
-    issues.push({
-      feature,
-      featureType: 'html-element',
-      property: `<${element}>`,
-      severity,
-      summary,
-    });
-  }
-
-  // Process HTML attributes
-  for (const attribute of extractedHtmlAttributes) {
-    const feature = htmlAttributeMap.get(attribute);
-
-    if (!feature || processedSlugs.has(feature.slug)) {
-      continue;
-    }
-
-    processedSlugs.add(feature.slug);
-
-    const summary = getFeatureSupportSummary(feature);
-
-    let severity: CompatibilityIssue['severity'] = 'success';
-
-    if (summary.unsupported.length > 0) {
-      severity = 'error';
-    } else if (summary.partial.length > 0) {
-      severity = 'warning';
-    }
-
-    issues.push({
-      feature,
-      featureType: 'html-attribute',
-      property: attribute,
-      severity,
-      summary,
-    });
-  }
-
-  return issues;
-}

src/components/custom/email-content-preview.tsx

@@ -26,7 +26,6 @@ export function EmailContentPreview({ html }: EmailPreviewProps) {
       `;
     }
 
-    // Apply client-specific transformations
     const transformed = transformForClient(html, selectedClient);
 
     const isWrappedInHtmlTag =