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>
68 lines
1.4 KiB
PHP
68 lines
1.4 KiB
PHP
<?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 = [];
|
|
}
|
|
}
|