The problem with the url() function when using data URL

[addison74]

I have to revamp a whole OpenMage theme based on Bootstrap 5.3 (I tried Tailwind+DaisyUI before but I don't have too much time for learning new stuff). I discovered this issue when I tried implementing a modal. The close X sign was not appearing in the modal box, then I inspected the CSS code.

This is the Bootstrap CSS file content for the .btn-close class:

.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: #000;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: 0.5;
}

This is the CSS file from the browser cache for the same class:

.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: #000;
  background: transparent url("https://www.mydomain.tld/skin/frontend/default/custom_theme/css/data:image/svg+xml,%3csv")xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: 0.5;
}

As can be seen, the path where the bootstrap.css file is located was taken in the url() function even it is a data URL. Did anyone encountered this issue and how could I avoid it and stop adding the absolute path? There are too many Bootstrap classes that have this issue.

[addison74]

I have identified the problem, the Merge CSS Files feature in OpenMage config. Most likely, when OpenMage concatenates the CSS files creating a single one, it also alters the links in the URL's, adding the absolute path where that file is located. This explains why all Bootstrap links are affected. The problem is not only that it adds links, but that it also alters parts of the existing string. Here is the proof

Before merging

url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' 
}

After merging

url("https://www.mydomain.tld/skin/frontend/default/custom_theme/css/data:image/svg+xml,%3csv")xmlns='http://www.w3.org/2000/svg' 
}

%3csvg becomes %3csv)" => g is replaced by ")

As a temporary solution, I moved the Bootstrap CSS file out of the merging process so that it is no longer concatenated, but this issue requires an investigation. Regarding this feature in OpenMage, opinions have been divided over time, some use it, others don't, choosing for Magento extensions, CDNs, HTTP/2. My opinion is that as long as it is still in the OpenMage code and creates problems, it must be fixed.

[fballiano]

interesting, my opinion that I've already said some time ago is that since http2 merge is useless, can actually be counterproductive, and we could remove it

[addison74]

In the case of JS files, a few years ago I discovered this problem in the same store and I had to move the jQuery files from the layout to the template. Most likely merging JS & CSS files is still used in many stores without knowing what UI/UX effects it can generate. Does Magento 2 still have this feature?

[fballiano]

I guess it does but M2 added this feature probably in 2013-2014, when it was probably needed, nowadays things are different