CSS calc() incorrect minification

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.0.X, Master
• Fix Version/s: 7.0.0 DXP FP40, 7.0.0 DXP SP7, 7.0.5 CE GA6, 7.0.X, 7.1.0 M1, 7.1.X, Master
• Component/s: ~ [Archived] Frontend Infrastructure
• Labels:
  • ee-ts
  • liferay-digital-enterprise-70-sp7
  • liferay-fixpack-de-40-7010
• Branch Version/s:
  7.0.x
• Backported to Branch:
  Committed
• Story Points: 4
• Fix Priority: 3
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/55588

Reproduction Steps:
1) Create a theme called CssCalc with this CSS in the src/css/_custom.scss file:

.calc-test {
    top: calc(-50% + 1em);
    left: calc(50% - -15px);
    right: calc(-100vw / 2 - 100px);
}

(Attached a theme for convenience)

2) Compile and deploy the theme
3) Create a new page and apply the theme to it
4) Check the pretty-formatted deployed CSS markup:

• In Chrome, press F12
• Switch to "Sources" tab
• Expand top > localhost:8080 > o > css-calc-theme > css and click on main.css
• In the right-handed pane, click on the { } button on the bottom-left: CSS code will be pretty-printed
• Scroll to bottom

Expected: The CSS to be preserved, that is:

.calc-test {
    top: calc(-50% + 1em);
    left: calc(50% - -15px);
    right: calc(-100vw / 2 - 100px);
}

Actual behavior: The CSS is:

.calc-test {
    top: calc( - 50% + 1em);
    left:calc(50% - - 15px);
    right:calc( - 100vw / 2 - 100px)
}

--> The extra spaces will break it (it will not pass W3C validation)

 Reproduced on 7.0.x-private @ 788161b414cefb00a136311c0fd55391a431eeee
 Reproduced on master @ 9f2cbbd236513332dca1ef619bca3dec6616a4c1