Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

Disable css url rewrite inside clientlib

Avatar

Level 1

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:

boattoast_0-1652473489481.png

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!

 

8 Replies

Avatar

Level 2

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.

Avatar

Community Advisor

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); }



Arun Patidar

Avatar

Level 2

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

Avatar

Community Advisor

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?



Arun Patidar

Avatar

Level 2

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

Avatar

Community Advisor

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...

 



Arun Patidar

Avatar

Level 2

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.