less.js icon indicating copy to clipboard operation
less.js copied to clipboard

image-width() breaks data-uri()

Open dg opened this issue 7 years ago • 1 comments

Calling image-width() affects output generated by data-uri() in Less 3.8.1

This generates correct base64 output:

a {
	background: data-uri('images/tick.png');
	padding-right: image-width('images/tick.png');
}

This generates invalid base64 output:

a {
	padding-right: image-width('images/tick.png');
	background: data-uri('images/tick.png');
}

dg avatar Sep 05 '18 07:09 dg

I also noticed this error after upgrading to the latest less version!

It worked in 2.7.3. Doesn't work in 3.9.0

I have this code:

#logo > div
{
	@logo: "../ui-high/logo.png";
	// this trick is to keep a constant aspect ratio
	padding-bottom:  (image-height(@logo)/image-width(@logo))*100%;
	background:  data-uri(@logo) no-repeat center center;
	background-size: contain;
}

This used to work fine. Now, the generated base64 data-uri is ignored by the browsers! Other data-uris are not affected.

I can provide before & after if you think it helps, but it should be easy to reproduce.

armandn avatar Apr 13 '19 16:04 armandn