Negative value?

This calc(-1 * var(--space-xl)); should be a negative value… but the -1 is ignored! The output is 3.25em but should be -3.25em.

CSS:

    --space-unit: 1em;
    --space-xl: calc(3.25 * var(--space-unit));

    .offset {
      top: inherit; 
      @include mq(md) {
        top: calc(-1 * 3.25em); // this works
        top: calc(-1 * var(--space-xl)); // don't work - should be negative
      }
    }

Gulp Task:

    .pipe($.postcss([
      /*
      Stylelint
      */
      $.stylelint(),
      /*
      Parse CSS and add vendor prefixes to rules by Can I Use
       */
      $.autoprefixer(),
      /*
      cssnano is a modern, modular compression tool written on top of the PostCSS ecosystem, which allows us to use a lot of powerful features in order to compact CSS appropriately.
       */
      $.cssnano({
        discardComments: {
          removeAll: true
        },
        discardDuplicates: true,
        discardEmpty: true,
        minifyFontValues: true,
        minifySelectors: true
      }),
      /*
      PostCSS-Custom-Properties lets you use Custom Properties in CSS, following the CSS Custom Properties specification.
      Example: h1 { color: var(--color); } <-- BECOMES --> h1 { color: red; color: var(--color); }
       */
      $.postcssCustomProperties(), // IE 11 polyfill
      /*
      PostCSS plugin to reduce calc()

      IE11 don't understand nested calc functions like this:
      margin-bottom: calc(calc(1.25*1em)*1)
      */
      $.postcssCalc(),
      /*
      PostCSS Error Reporter
      */
      $.postcssReporter({
        clearReportedMessages: true
      })
    ]))

Any ideas?

[alexander-akait]

Please provide full css code, i can’t understand problem

[ludofischer]

I cannot find a clear reproduction or even what the issue is. calc(-1 * var(--space-xl)) works correctly. The original issue does not seem related to nested variables, anyway https://github.com/postcss/postcss-calc/issues/91 is keeping track of that.