feat(pagespeed): implementar campo is_critical para CSS crítico dinámico (Phase 4.2)

Implementación completa del sistema de Critical CSS dinámico según plan 13.01: Domain Layer: - Crear CriticalCSSCollectorInterface para DIP compliance Infrastructure Layer: - Implementar CriticalCSSCollector (singleton via DIContainer) - Crear CriticalCSSHooksRegistrar para inyección en wp_head - Actualizar DIContainer con getCriticalCSSCollector() Schemas: - Agregar campo is_critical a navbar, top-notification-bar, hero - Sincronizar con BD (18+39+31 campos) Renderers (navbar, top-notification-bar, hero): - Inyectar CriticalCSSCollectorInterface via constructor - Lógica condicional: si is_critical=true → CSS a <head> Admin (FormBuilders + FieldMappers): - Toggle "CSS Crítico" en sección visibility - Mapeo AJAX para persistencia Beneficios: - LCP optimizado: CSS crítico inline en <head> - Above-the-fold rendering sin FOUC - Componentes configurables desde admin panel 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-29 09:29:45 -06:00
parent 6d03076032
commit 4f25297f14
17 changed files with 340 additions and 15 deletions
--- a/Shared/Infrastructure/Services/CriticalCSSCollector.php
+++ b/Shared/Infrastructure/Services/CriticalCSSCollector.php
@@ -0,0 +1,67 @@
+<?php
+declare(strict_types=1);
+
+namespace ROITheme\Shared\Infrastructure\Services;
+
+use ROITheme\Shared\Domain\Contracts\CriticalCSSCollectorInterface;
+
+/**
+ * Implementación del colector de CSS crítico
+ *
+ * RESPONSABILIDAD:
+ * - Recolectar CSS de componentes above-the-fold
+ * - Renderizar como <style> inline en <head>
+ *
+ * PATRÓN:
+ * - Singleton via DIContainer (NO estático)
+ * - Cumple DIP: Renderers reciben interface, no clase concreta
+ *
+ * UBICACIÓN: Infrastructure/Services (según 00.02)
+ *
+ * @package ROITheme\Shared\Infrastructure\Services
+ */
+final class CriticalCSSCollector implements CriticalCSSCollectorInterface
+{
+    /** @var array<string, string> */
+    private array $criticalStyles = [];
+
+    /**
+     * {@inheritDoc}
+     */
+    public function add(string $componentName, string $css): void
+    {
+        $this->criticalStyles[$componentName] = $css;
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function getAll(): array
+    {
+        return $this->criticalStyles;
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function render(): string
+    {
+        if (empty($this->criticalStyles)) {
+            return '';
+        }
+
+        $css = implode("\n", $this->criticalStyles);
+        return sprintf(
+            '<style id="roi-critical-css">%s</style>',
+            $css
+        );
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function clear(): void
+    {
+        $this->criticalStyles = [];
+    }
+}