Description

Please receive consider this idea: because we expose all our CSS files through the head tag now, we should be able to adapt them to the current page content..

Typical usecase:

• Imagine a homepage with 15 products to sold, so 15 article cards with 15 "view this product" buttons.
• Then a product page, with JUST a "let me buy this!" button (weird page but ok).
• there's a product_card.css and a view_product_button.css files in assets/css.

The goal is to charge the CSS for the cards' and view buttons' homepage only for the homepage, and not to charge the "buy" button CSS here. And on the product page, having only the "buy" button CSS link tag.
We can achieve such a thing with {% extends stylesheets %} blocks, but it's hard to keep track of what will be charged 15 times and if I have to keep parent() or not in specific situations. Let's do this automatically!

• It reduces the loads for your first page.
• It reduces the bandwidth used globally if someone doesn't go on every pages.
• It reduces the memory consumed for each page as we stop loading unnecessary CSS.
• The bigger is your project, the larger are your saves with this, because you will have a lot of specific pages with specific elements.
• It improves DX as no one has to optimize assets loading when coding; Just create the new template, link to it a CSS file with 'stylized', and don't think about it ever again.
• It's compatible with twig templates or partial templates (_foo_section.html.twig), with twig component or live components.

It may be quite simple to do on the twig side, as I can think of a twig custom function to achieve that; But I don't know how to combine this with the assetMapper asset('hashed.version.of.css') and keep this working after bin/console asset-map:compile. Maybe hard, maybe simple?

Please take few seconds to mind it, as I may not be the only one to atomize my css into multiple, component based files. Once again, assetMapper opens a paradigm where multiple CSS files is possible without impacting performances, but rather improves them.

Have a nice day!

Example

Imagine a new {% stylized %} statement or function, that you will put at beginning of all your templates. Let's say article_card.html.twig:

{% stylized asset('foo/article_card.css') %} (or {% stylized %} only with we keep the same folder structure)

you only declare your CSS here; not anymore in layout or anywhere else. It's convenient for the developer as he never forgets to add the 'use' in a js or css bootstraper somewhere; he just adds 'stylized' on top of his template and here we go.

The goal for twig & assetMapper? when a page loads:

1. Make the inventory of the 'stylized' calls for this page,
2. Singleton-ize the CSS called multiple times,
3. Inject in head tag only the required link tags asset-mapper-ized.
   Because assetMapper opens a way where we keep our CSS atomized in multiple files, it's really easier to aim for required and non required CSS parts than before with a huge webpacked file.