-
-
Notifications
You must be signed in to change notification settings - Fork 9.6k
Description
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 thelink
element => not working- Moving
photoswipe/dist/photoswipe.css
into local css fileassets/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 usingimportmap:require
) file directly in JS. Not working, still compiled into the weird JS: - Tried to import
assets/vendor/photoswipe/dist/photoswipe.css
(if installed usingimportmap:require
) byarticle.css
that is imported inarticle.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