-
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
-
Branch Version/s:7.0.x
-
Backported to Branch:Committed
-
Story Points:4
-
Fix Priority:3
-
Git Pull Request:
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