Compile time calc() in CSS

[xPaw]

Example:

.test {
	max-width: calc(280px * 2 + 20px);
}

@media (max-width: 580px) {
	.test {
		max-width: calc(280px + 20px);
	}
}

Since these calculations have const values, it would be possible to just calculate it and output:

.test {
	max-width: 580px;
}

@media (max-width: 580px) {
	.test {
		max-width: 300px;
	}
}

Is this something esbuild could/should do as part of the minification?

[evanw]

I agree that this would be nice to do, although not top priority. I have been slowly implementing more and more CSS minification cases over time so this is in scope. It's a pretty complex feature however, so maybe basic cases could be added first and then support for more cases could be added over time.

I assume the test cases and code for postcss-calc and the calc specification would be appropriate references. It looks like postcss-calc has correctness bugs though so care would have to be taken when choosing what specific simplifications to do in esbuild.

[yisibl]

Sorry, please don't do this, for the specific reasons I have written here: #1821

[starikcetin]

Sorry, please don't do this, for the specific reasons I have written here: #1821

A percentage is not always a constant value, as its value depends on the context. On the other hand, 280px + 20px is always a constant value. Therefore your response is not a valid objection to the original request.