csso icon indicating copy to clipboard operation
csso copied to clipboard

calc() causes incorrect re-ordering

Open ThomasBrierley opened this issue 7 years ago • 0 comments

CSSO appears to treat properties with calc() in the value as separate:

/* input */
div {
	width: 0;
	width: calc(100px);
}
/* output */
div {
	width: 0;
	width: calc(100px)
}

Unfortunately this causes more than missed optimisation opportunities:

/* input */
div, .foo {
	height: 0;
	width: 0;
}
div {
	height: 0;
	width: calc(100px);
}
/* output */
div {
	width: calc(100px)
}
.foo, div {
	height: 0;
	width: 0
}

(The width property above relies on order-based precedence and so the output is not equivalent.)

Environment

  • csso: v3.5.1
  • node: v8.11.3

ThomasBrierley avatar Aug 02 '18 21:08 ThomasBrierley