Details

      Description

      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

        Attachments

          Activity

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:
                Days since last comment:
                1 year, 38 weeks, 5 days ago

                Packages

                Version Package
                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