CODEWITHSUNDEEP
symfonywebpack-encore
Dennais
Dennais

Reputation: 506

Symfony and Encore print css in page for critical path

Is it possible to print the css in the page instead of generating link tags with {{ encore_entry_link_tags('app') }} ? Or is there another solution to integrate the critical path?

Upvotes: 1

Views: 1092

Answers (1)

sabat
sabat

Reputation: 146

I can't add a comment because of low reputation, however take a look at symfonycasts There is whole solution presented.

Basically you should parse entrypoints.json file, find proper css files which you need. You can use EntrypointLookupInterface for that. Then get content for that files and return it to the template by nice own twig extension.

class AppExtension extends AbstractExtension implements ServiceSubscriberInterface
{

    private $publicDir;
    public function __construct(ContainerInterface $container, string $publicDir)
    {
        $this->publicDir = $publicDir;
    }

    public function getFunctions(): array
    {
        return [
            new TwigFunction('encore_entry_css_source', [$this, 'getEncoreEntryCssSource']),
        ];
    }

    public function getEncoreEntryCssSource(string $entryName): string
    {
        $files = $this->container
            ->get(EntrypointLookupInterface::class)
            ->getCssFiles($entryName);
        $source = '';
        foreach ($files as $file) {
            $source .= file_get_contents($this->publicDir.'/'.$file);
        }
        return $source;
    }

    public static function getSubscribedServices()
    {
        return [
            EntrypointLookupInterface::class,
        ];
    }
}

You have to also add publicDir to your config/services.yaml file

services:
    _defaults:
        bind:
            string $publicDir: '%kernel.project_dir%/public'

Then in twig template

{% apply inky_to_html|inline_css(encore_entry_css_source('email')) %}
{% endapply %}

Upvotes: 1

Related Questions