css background-image url with @ in path is not managed as resource

[TiTi]

Hello,
One image referenced in the css doesn't have the appropriate path because of an "@" in the image filename 😢.

First i'm using this fusebox configuration (expecting production resources url to starts with /static/resources/):

    resources: {
      resourceFolder: './resources/',
      resourcePublicRoot: '/static/resources',
    }

But I got this unfortunately:

One is working, not the other!

The css is imported like so:

import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';

And here are the relevant parts of that file:

.leaflet-control-fullscreen a {
  background:#fff url(fullscreen.png) no-repeat 0 0;
  background-size:26px 52px;
  }

/* ...snip... */

@media
  (-webkit-min-device-pixel-ratio:2),
  (min-resolution:192dpi) {
    .leaflet-control-fullscreen a {
      background-image:url([email protected]);
    }
  }

We can see the filename "[email protected]" is not even randomized compared to other resources fusebox manage.
I tried to remove the '@' (+ add the corresponding file) and everything's working as expected:

Unfortunately, this is not a .css i manage but one from a node package: leaflet-fullscreen
Thus a fix would be really helpful to avoid complex shenanigans.

[I'm also having the same issue with esri-leaflet-geocoder npm package and dist\img\[email protected]]

[nchanged]

Please try clearing the cache. It should help.

…

On Mon, 10 May 2021 at 14:00, Thibault ROHMER ***@***.***> wrote: Hello, One image referenced in the css doesn't have the appropriate path because of an "@" in the image filename 😢. First i'm using this fusebox configuration (expecting production resources url to starts with /static/resources/): resources: { resourceFolder: './resources/', resourcePublicRoot: '/static/resources', } But I got this unfortunately: [image: image] <https://user-images.githubusercontent.com/137691/117647808-c21b3480-b18d-11eb-80d8-78c1f01bbd41.png> One is working, not the other! The css is imported like so: import 'leaflet-fullscreen/dist/leaflet.fullscreen.css'; And here are the relevant parts of that file: .leaflet-control-fullscreen a { background:#fff url(fullscreen.png) no-repeat 0 0; background-size:26px 52px; } /* ...snip... */ @media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi) { .leaflet-control-fullscreen a { ***@***.***); } } We can see the filename ***@***.***" is not even randomized compared to other resources fusebox manage. I tried to remove the '@' (+ add the corresponding file) and everything's working as expected: [image: image] <https://user-images.githubusercontent.com/137691/117648729-de6ba100-b18e-11eb-86b8-dc7a6a382de4.png> Unfortunately, this is not a .css i manage but one from a node package: leaflet-fullscreen Thus a fix would be really helpful to avoid complex shenanigans. [I'm also having the same issue with esri-leaflet-geocoder npm package and ***@***.*** — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1995>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAMNXID2UILZ3J4WNWRN24LTM64DHANCNFSM44Q4VLZQ> .

[TiTi]

I have the same issue in development and production modes.
Clearing the cache does not help, I tried.

The '@' is probably breaking a regexp?

[nchanged]

it might. What you could try is seting `macro` is replacing the `@` symbol manually.

…

On Mon, 10 May 2021 at 14:16, Thibault ROHMER ***@***.***> wrote: I have the same issue in development and production modes. Clearing the cache does not help, I tried. The '@' is probably breaking a regexp? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1995 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAMNXIDX7PSO53S2FKOG2HTTM657XANCNFSM44Q4VLZQ> .

[TiTi]

I could.
But this file is from node_modules\leaflet-fullscreen\dist\leaflet.fullscreen.css
So I don't want to edit it.

It's also possible to fix the issue so that fusebox is able to manage files with an '@' in their name ^^

[nchanged]

these usually correspond to variables in stylus (?I) I don't remember which preprocessor exactly.

[TiTi]

My gut tell me we take a fast exit condition here:
https://github.com/fuse-box/fuse-box/blob/master/src/stylesheet/cssResolveURL.ts#L133

[TiTi]

Ok i didn't see what you mean by macro initially, then i found i could do:

    stylesheet: {
      macros: {
        // Fix images not loaded by fusebox because having an '@' inside
        "[email protected]": path.join(__dirname, 'src/css/leaflet/fullscreen2x.png'), // leaflet-fullscreen
        "img/[email protected]": path.join(__dirname, 'src/css/leaflet/search2x.png'), // esri-leaflet-geocoder
        "img/[email protected]": path.join(__dirname, 'src/css/leaflet/loading2x.gif'), // esri-leaflet-geocoder
      }
    }

Which is an acceptable workaround as i don't have too much images with an '@'. This also works:

    stylesheet: {
      macros: {
        // Fix images not loaded by fusebox because having an '@' inside
        "@": ""
      }
    }

(the compilation warnings show you files to generate without '@' in their name as they are missing)