Symfony version(s) affected

7.0

Description

I am using https://symfony.com/doc/current/frontend/asset_mapper.html for loading CSS and JS on my website.

The Example

I have assets/app.js that imports local CSS:

import './style.css';

This is generated into the html as:

<link rel="stylesheet" href="...">

I also have assets/article.js in which I use photoswipe that I have installed using importmap:require (it can also be done using NPM, I have tried both ways):

import 'photoswipe/dist/photoswipe.css';

This is converted into:

<script type="importmap">
{
    "imports": {
        "photoswipe/dist/photoswipe.css": "data:application/javascript,document.head.appendChild%28Object.assign%28document.createElement%28%22link%22%29%2C%7Brel%3A%22stylesheet%22%2Chref%3A%22%2Fassets%2Fvendor%2Fphotoswipe%2Fdist%2Fphotoswipe-50098bc28f544f05caebbd68b56e9598.css%22%7D%29%29"
    }
}
</script>

The problem

The fact, that third party CSS is embedded inside the importmap as JS causes inconsistency in the way the CSS is loaded

• If I use SPA of some sort (I am using signalizejs, not tested with Stimulus) that redraws parts of pages in which the module is included, it won't trigger the CSS to be loaded on ajax redraw of the page so I have javascript loaded but not the CSS (local CSS however is loaded correctly).
• Also, If I turn off JS, the CSS is not loaded
• The CSS in SPA works only through the native link for the local CSS or through link element as shown in "working solutions".

Not working solutions

• asset('photoswipe/dist/photoswipe.css') function to create the link element => not working
• Moving photoswipe/dist/photoswipe.css into local css file assets/article.css:

@import 'photoswipe/dist/photoswipe.css'

And import it in js:

import './article.css'

This causes 404 because if I load the third party CSS in local CSS because the file path it is not acessible/properly mapped (which is probably correct behavior as it is not a javascript module)

• Tried to import assets/vendor/photoswipe/dist/photoswipe.css (if installed using importmap:require) file directly in JS. Not working, still compiled into the weird JS:
• Tried to import assets/vendor/photoswipe/dist/photoswipe.css (if installed using importmap:require) by article.css that is imported in article.js. Not working at all.

Working "solutions"

• Install it using importmap:require and access it using

<link rel="stylesheet" href="{{ asset('vendor/photoswipe/dist/photoswipe.css') }}">

• Another way is to copy the CSS from vendor to my local CSS.

Browser

All on Ubuntu 22

• Brave - Latest
• Chrome - Latest
• Mozilla - Latest

How to reproduce

I have explained that above.

Possible Solution

Every CSS loaded using asset-mapper should behave the same and should be converted into native <link> element so it works with or without javascript.

Additional Context

No response