style="background-image[...] becoming style=background:[...]

[asimpletune]

Hello, I'm using zola for a project, and I'm running into an issue with its minify, which I think uses minify-html.

The issue I was having came when using CSS and style attributes simultaneously, specifically style="background-image:url('{{ slide.thumb.src }}')", while using other CSS to control the other aspects of the background image (like position, size, etc...). I think minify-html (or is it lightningcss?) changes background-image to background, but in this case it's not just minifying but changing the meaning, since the style attribute will override the CSS, and the background property is short hand for all background properties expressed together.

For now I have a workaround by just turning of minification, but I wanted to come here and ask if there's any advice? Maybe there's a setting or something that I can submit upstream to Zola? Thank you.

[SettingDust]

The quotes cause this issue. Need an option to disable removing quotes for attributes on the minify-html on end.
But also as explained https://github.com/wilsonzlin/minify-html#spec-compliance here. minify-html will respect the spec. Seems Zola's parser isn't playing well with the standard

[asimpletune]

Hi @SettingDust , thank you for responding.

I included a slight typo when I originally posted, which I've now corrected to make the situation more clear, but I don't think it changes anything. So, thank you for your patience, and please bear with me while I try to elaborate.

This is a real example, taken from the issue that I'm seeing:

<div
  class="{{ aspect_ratio }} w-full bg-cover bg-center"
  style="background-image:url('/img/illustrations/rocket-ship.svg')"
></div>

When minify is off this works as expected

But when minify is on this does not work as expected

I read the README you sent, but with my typo corrected I don't think that is applicable here. However, just to be safe, I tried thing with the typo still in place (and removing the quotes like you said), and the problem is still there. Furthermore, I ran the code through the recommended validator and there was no issue like that brought up.

However, I do see a potential cause of my issue in the README:

### Attributes

Any entities in attribute values are decoded, and then the shortest representation of the value is calculated and used:

- Double quoted, with any `"` encoded.
- Single quoted, with any `'` encoded.
- Unquoted, with `"`/`'` first character (if applicable), any `>`, and any whitespace encoded.

According to this minify-html takes "any entities in attribute values" and then the "shortest representation of the value" is calculated and used. Therefore it appears that minify-html is taking background-image as a value and calculating that some space can be saved by converting that to a background CSS rule. This is confirmed in the resulting HTML:

<!-- minify off -->
<div 
class="aspect-square w-full bg-cover bg-center" 
style="background-image:url('/img/illustrations/rocket-ship.svg')">
</div>

<!-- minify on -->
<div 
class="aspect-square w-full bg-cover bg-center" 
style="background:url('/img/illustrations/rocket-ship.svg')">
</div>

In this particular example, this change results not merely in a syntactic different but an actual semantic difference. background is not the same thing as background-image, because background will override any CSS rules that were meant to go in addition to background-image. In this case, those rules were set by the CSS classes bg-cover and bg-center, which are classes that set background-size: cover and background-position: center, respectively.

I believe the correct minifcation would be to leave the same semantic meaning in place, which is to do nothing since there is no way to make background-image shorter without knowing what other rules are being used alongside it.

Now that I've explained that does that make the issue more clear? Sorry for the typo earlier, style="background-image:url('{{ slide.thumb.src }}')" != style=background-image:url('{{ slide.thumb.src }}'). However, with all of that out of the way, does your point about the quotes remain the underlying cause or could it be there is a mistake with the minifcation?

Thanks for taking the time to read this.