Disable css url rewrite inside clientlib

[boattoast]

I am experiencing the exact issue logged more then 1 year ago on the AEM core components: https://github.com/adobe/aem-core-wcm-components/issues/1371. Basically this is what happens:

As you can see the url is rewritten and this makes sense when css is included using a link tag on a page but it causes a lot of issues when using inline styling which I am using to inline critical css. In my cases the font-face url is rewritten just like in the Github issue mentioned above. I've found Adobe docs mentioning this process: https://experienceleague.adobe.com/docs/experience-manager-64/developing/introduction/clientlibs.htm... but I did not find any way to prevent this from happening, am I missing something?

All help would be appreciated!

[arunpatidar]

Hi,

can you try using proxy clientlibs and load image from resources folder

https://sourcedcode.com/blog/aem/how-to-serve-static-assets-in-aem-as-client-library-resources 

[jeroen-ida]

It's me from a different account, @arunpatidar. We are using a proxy clientlib for the css file and we are not including images but we are including fonts and they live under a resources folder. Everything works when you are just including css using a link tag but not when trying to inline it. This just seems like a bug to be honest.

[arunpatidar]

Hi,

It could be a bug. One of the thing you can try is using relative path from root or use assets from dam?

div#header { 
  background-image: url(/etc.clientlibs/styles/bg-full.jpg);
}

div#header { background-image: url(/content/dam/myproj/styles/bg-full.jpg); }

[jeroen-ida]

But we are not in control of the path, it's done automatically by the HtmlLibraryManager.

[arunpatidar]

The path must be added in the CSS file or in inline CSS by a developer or from a code?

If you can change this path to relative path from root and try it?

[jeroen-ida]

What do you exactly mean by changing the path? Could you give an example?

[arunpatidar]

example

from

div#header { 
  background-image: url(/etc.clientlibs/styles/bg-full.jpg);
}

To

div#header { 
--uri: url(/etc.clientlibs/styles/bg-full.jpg);
background-image: var(--uri); 
}

If this does not work then you can set a custom property using css and access with javascript and set it

https://stackoverflow.com/questions/36088655/accessing-a-css-custom-property-aka-css-variable-throug...

[jeroen-ida]

That's not really possible at the moment as all of this css is being generated as the result of SASS functions.  Also the output must be kept as small as possible as it's being used for critical css inside the head tag.