Skip to content

Background SVG animation breaks generation #646

New issue
New issue
Open
Open
Background SVG animation breaks generation#646
@sunnyphp

Description

@sunnyphp
sunnyphp
opened on Jul 17, 2019

Hello.

Test machine:
CentOS @ Linux 2.6.32-042stab123.2; nginx; PHP 7.2.10 with Xdebug v2.6.1

Custom formatter:

$formatter = new lessc_formatter_compressed;
$formatter->close = "}\n";

$less = new lessc();
$less->setFormatter($formatter);
$content = $less->compileFile('test.less');

Problem:
Breaks formatting after processing background SVG with animation.

Source:

.p-discount{
	.samples{
		&.ajax_loader{
			background: transparent url("data:image/svg+xml,%3Csvg class='lds-equalizer' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' style='background: none;'%3E%3Cg transform='rotate(270 50 50)'%3E%3Crect y='0' height='71.7228' fill='%23fcb711' x='6.111111111111111' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.625s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='37.5557' fill='%23f37021' x='17.22222222222222' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.25s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='45.9452' fill='%23cc004c' x='28.333333333333336' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.875s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='55.6027' fill='%236460aa' x='39.44444444444444' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.5s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='74.1008' fill='%230089d0' x='50.55555555555556' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.75s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='49.9617' fill='%230db14b' x='61.66666666666667' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.375s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='13.2263' fill='%23fcb711' x='72.77777777777777' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.125s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='12.2389' fill='%23f37021' x='83.88888888888889' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='0s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0;
			background-size: 64px;
			color: #fff;
			text-indent: -9999px;
			min-height: 64px;
			
			& > *{
				visibility: hidden !important;
			}
		}
		
		.level{
			width: 100px;
		}
		
		.price{
			text-align: right;
			width: 1px;
			white-space: nowrap;
			
			&.error{
				background-color: fade(red, 25%);
			}
		}
		.diff{
			color: #777;
		}
	}
}

// ======================================
// Список заказов
// ======================================

.orders_list{
	.icon{
		background: transparent none no-repeat center center;
		display: inline-block;
		text-indent: -9999px;
		height: 14px;
		width: 14px;
		
		&.cart{
			background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIxMiIgd2lkdGg9IjEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgdmlld0JveD0iMCAwIDE2IDE2Ij4NCiA8cGF0aCBmaWxsPSJub25lIiBkPSJtLTQtMi40MWgyNHYyNGgtMjR6Ii8+DQogPHBhdGggZmlsbD0iIzM5OGVlOSIgZD0ibTExLjggNS45MS0zLjE3LTQuNzdjLTAuMTQtMC4yMDItMC4zNy0wLjMwNC0wLjYtMC4zMDQtMC4yMzMgMC0wLjQ2NSAwLjEwMi0wLjYwNCAwLjMxM2wtMy4xOSA0Ljc2aC0zLjQ4Yy0wLjQgMC0wLjcyNyAwLjMyNy0wLjcyNyAwLjcyNyAwIDAuMDY1NSAwLjAwNzI3IDAuMTMxIDAuMDI5MSAwLjE5NmwxLjg1IDYuNzRjMC4xNjcgMC42MTEgMC43MjcgMS4wNiAxLjQgMS4wNmg5LjQ1YzAuNjY5IDAgMS4yMy0wLjQ1MSAxLjQtMS4wNmwxLjg1LTYuNzQgMC4wMjE4LTAuMTk2YzAtMC40LTAuMzI3LTAuNzI3LTAuNzI3LTAuNzI3aC0zLjQ4em0tNS45NyAwIDIuMTgtMy4yIDIuMTggMy4yaC00LjM2em0yLjE4IDUuODJjLTAuOCAwLTEuNDUtMC42NTUtMS40NS0xLjQ1IDAtMC44IDAuNjU1LTEuNDUgMS40NS0xLjQ1IDAuOCAwIDEuNDUgMC42NTUgMS40NSAxLjQ1IDAgMC44LTAuNjU1IDEuNDUtMS40NSAxLjQ1eiIvPg0KPC9zdmc+DQo=);
			background-size: 100%;
			
			// черно-белый, если менеджер
			&.manager{
				filter: grayscale(1);
			}
		}
		&.manager{
		
		}
		&.o2b{
			background-image: url(/i/icon_o2b.png);
			background-size: 100%;
			
			// черно-белый, если менеджер
			&.manager{
				filter: grayscale(1);
			}
		}
	}
}

Result:

.p-discount .samples.ajax_loader{background:transparent url("data:image/svg+xml,%3Csvg class='lds-equalizer' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' style='background: none;'%3E%3Cg transform='rotate(270 50 50)'%3E%3Crect y='0' height='71.7228' fill='%23fcb711' x='6.111111111111111' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.625s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='37.5557' fill='%23f37021' x='17.22222222222222' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.25s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='45.9452' fill='%23cc004c' x='28.333333333333336' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.875s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='55.6027' fill='%236460aa' x='39.44444444444444' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.5s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='74.1008' fill='%230089d0' x='50.55555555555556' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.75s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='49.9617' fill='%230db14b' x='61.66666666666667' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.375s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='13.2263' fill='%23fcb711' x='72.77777777777777' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.125s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='12.2389' fill='%23f37021' x='83.88888888888889' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='0s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0;background-size:64px;color:#fff;text-indent:-9999px;min-height:64px;}
.p-discount .samples.ajax_loader > *{visibility:hidden !important;}
.p-discount .samples // уровни
		.level{width:100px;}
.p-discount .samples // цена и разница в цене
		.price{text-align:right;width:1px;white-space:nowrap;}
.p-discount .samples // цена и разница в цене
		.price.error{background-color:rgba(222,137,137,0.25);}
.p-discount .samples .diff{color:#777;}
// ======================================
// Список заказов
// ======================================

.orders_list .icon{background:transparent none no-repeat center center;display:inline-block;text-indent:-9999px;height:14px;width:14px;}
// ======================================
// Список заказов
// ======================================

.orders_list .icon.cart{background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIxMiIgd2lkdGg9IjEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgdmlld0JveD0iMCAwIDE2IDE2Ij4NCiA8cGF0aCBmaWxsPSJub25lIiBkPSJtLTQtMi40MWgyNHYyNGgtMjR6Ii8+DQogPHBhdGggZmlsbD0iIzM5OGVlOSIgZD0ibTExLjggNS45MS0zLjE3LTQuNzdjLTAuMTQtMC4yMDItMC4zNy0wLjMwNC0wLjYtMC4zMDQtMC4yMzMgMC0wLjQ2NSAwLjEwMi0wLjYwNCAwLjMxM2wtMy4xOSA0Ljc2aC0zLjQ4Yy0wLjQgMC0wLjcyNyAwLjMyNy0wLjcyNyAwLjcyNyAwIDAuMDY1NSAwLjAwNzI3IDAuMTMxIDAuMDI5MSAwLjE5NmwxLjg1IDYuNzRjMC4xNjcgMC42MTEgMC43MjcgMS4wNiAxLjQgMS4wNmg5LjQ1YzAuNjY5IDAgMS4yMy0wLjQ1MSAxLjQtMS4wNmwxLjg1LTYuNzQgMC4wMjE4LTAuMTk2YzAtMC40LTAuMzI3LTAuNzI3LTAuNzI3LTAuNzI3aC0zLjQ4em0tNS45NyAwIDIuMTgtMy4yIDIuMTggMy4yaC00LjM2em0yLjE4IDUuODJjLTAuOCAwLTEuNDUtMC42NTUtMS40NS0xLjQ1IDAtMC44IDAuNjU1LTEuNDUgMS40NS0xLjQ1IDAuOCAwIDEuNDUgMC42NTUgMS40NSAxLjQ1IDAgMC44LTAuNjU1IDEuNDUtMS40NSAxLjQ1eiIvPg0KPC9zdmc+DQo=);background-size:100%;}
// ======================================
// Список заказов
// ======================================

.orders_list .icon.cart // черно-белый,если менеджер
			// ======================================
// Список заказов
// ======================================

.orders_list .icon.cart.manager{filter:grayscale(1);}
// ======================================
// Список заказов
// ======================================

.orders_list .icon.o2b{background-image:url(/i/icon_o2b.png);background-size:100%;}
// ======================================
// Список заказов
// ======================================

.orders_list .icon.o2b // черно-белый,если менеджер
			// ======================================
// Список заказов
// ======================================

.orders_list .icon.o2b.manager{filter:grayscale(1);}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions